decePubClient/Pages/Profile.razor

@page "/account/{accountId}"
@attribute [Authorize]
@inherits LocalizableComponentBase
<Title>@(account?.Name ?? Localizer["Profile"])</Title>

@* An account as the current persona sees it (/api/v1/accounts/{id}): its header, bio and fields, its counts, what it is
   to the persona (following, followed by, requested, blocked, muted) with the actions that change it, and its posts,
   page by page, as posts only, posts and replies, or media. A remote account's profile comes from what PrivaPub knows,
   never from its server directly. *@
<section class="block relative w-full h-full neo-inset neo-xs rounded-xl">
	<div class="flex flex-col gap-4 p-4 md:p-5 w-full h-full absolute overflow-y-auto">

		<div class="flex items-center gap-2">
			<DButton Size="DSize.Sm" OnClick="Back" title="@Localizer["Back"]">
				<i class="ion-md-arrow-back"></i>
			</DButton>
			<h1 class="font-bold truncate">@Localizer["Profile"]</h1>
		</div>

		@if (IsLoading)
		{
			<p class="flex w-full items-center justify-center gap-2">
				<DLoading Variant="DLoadingVariant.Dots" LabelText="@Localizer["loading"]" />
				@Localizer["loading"]
			</p>
		}
		else if (account is null)
		{
			<p class="w-full text-center text-lg">
				<i class="ion-ios-remove-circle-outline"></i> @Localizer["This account doesn't exist."]
			</p>
		}
		else
		{
			<article class="flex flex-none flex-col rounded-xl neo-raised neo-xs overflow-hidden" data-account-id="@account.Id">
				<div class="h-28 md:h-40 bg-base-200 bg-cover bg-center" style="@HeaderStyle"></div>
				<div class="flex flex-wrap items-end gap-3 px-4 -mt-10">
					@* alt="": the name is next to it. *@
					<img alt="" class="h-20 w-20 md:h-24 md:w-24 flex-none object-cover rounded-full neo-raised neo-2xs bg-base-100"
						 src="@(account.Avatar ?? "imgs/icon-192.png")" />
					<div class="flex flex-col min-w-0 flex-1 pb-1">
						<b class="text-lg truncate">@account.Name</b>
						<span class="text-sm opacity-70 truncate">@("@" + FullAcct)</span>
					</div>
					@if (!IsOwn)
					{
						<div class="flex flex-wrap gap-2 pb-1">
							@if (relationship?.FollowedBy == true)
							{
								<DBadge Size="DSize.Sm" class="self-center">@Localizer["Follows you"]</DBadge>
							}
							@if (relationship?.Blocking != true)
							{
								<DButton Size="DSize.Sm" Color="@(relationship?.Following == true || relationship?.Requested == true ? DColor.Neutral : DColor.Primary)"
										 Disabled="@(IsDefaultDisabled || isActing || relationship is null)" OnClick="ToggleFollow">
									@FollowLabel
								</DButton>
							}
							<DButton Size="DSize.Sm" Disabled="@(IsDefaultDisabled || isActing || relationship is null)"
									 OnClick="@(() => Do(relationship?.Muting == true ? AccountAction.Unmute : AccountAction.Mute))">
								<i class="@(relationship?.Muting == true ? "ion-md-eye" : "ion-md-eye-off")"></i>
								<span>@(relationship?.Muting == true ? Localizer["Unmute"] : Localizer["Mute"])</span>
							</DButton>
							<DButton Size="DSize.Sm" Disabled="@(IsDefaultDisabled || isActing || relationship is null)"
									 OnClick="@(() => Do(relationship?.Blocking == true ? AccountAction.Unblock : AccountAction.Block))">
								<i class="ion-md-remove-circle text-error"></i>
								<span>@(relationship?.Blocking == true ? Localizer["Unblock"] : Localizer["Block"])</span>
							</DButton>
						</div>
					}
				</div>

				<div class="flex flex-wrap gap-2 px-4 pt-2">
					@if (account.Locked)
					{
						<DBadge Size="DSize.Sm" Variant="DBadgeVariant.Soft"><i class="ion-md-lock"></i> @Localizer["Locked account"]</DBadge>
					}
					@if (account.Bot)
					{
						<DBadge Size="DSize.Sm" Variant="DBadgeVariant.Soft"><i class="ion-md-cog"></i> @Localizer["Bot"]</DBadge>
					}
					@if (account.Group)
					{
						<DBadge Size="DSize.Sm" Variant="DBadgeVariant.Soft"><i class="ion-md-people"></i> @Localizer["Groups"]</DBadge>
					}
				</div>

				@if (!string.IsNullOrWhiteSpace(account.Note))
				{
					<div class="post-content px-4 pt-3 text-sm md:text-base break-words">@((MarkupString)account.Note)</div>
				}

				@if (account.Fields.Count > 0)
				{
					<dl class="grid grid-cols-[minmax(0,10rem)_minmax(0,1fr)] gap-x-3 gap-y-1 px-4 pt-3 text-sm">
						@foreach (var field in account.Fields)
						{
							<dt class="font-semibold truncate">@field.Name</dt>
							<dd class="post-content break-words min-w-0">@((MarkupString)field.Value)</dd>
						}
					</dl>
				}

				<div class="flex flex-wrap gap-4 px-4 py-3 text-sm tabular-nums">
					<span><b>@account.StatusesCount</b> @Localizer["posts"]</span>
					<span><b>@account.FollowingCount</b> @Localizer["following"]</span>
					<span><b>@account.FollowersCount</b> @Localizer["followers"]</span>
				</div>
			</article>

			<DTabs Active="(int)tab" ActiveChanged="SelectTab" Variant="DTabsVariant.Box" Size="DSize.Sm" ContentClass="hidden">
				<DTab><Header><span class="capitalize">@Localizer["posts"]</span></Header></DTab>
				<DTab><Header>@Localizer["Posts and replies"]</Header></DTab>
				<DTab><Header>@Localizer["Media"]</Header></DTab>
			</DTabs>

			<div class="flex flex-col gap-4">
				@foreach (var post in posts)
				{
					<Content @key="post.Key" Post="post" OnDeleted="Remove" OnTag="OpenTag" />
				}
				@if (posts.Count == 0 && !isLoadingMore)
				{
					<p class="w-full text-center" data-feed-empty><i class="ion-ios-remove-circle-outline"></i> @Localizer["Empty"]</p>
				}
				@if (maxId is not null)
				{
					<DButton Size="DSize.Sm" class="self-center" Disabled="@(IsDefaultDisabled || isLoadingMore)" OnClick="LoadMore">
						@if (isLoadingMore)
						{
							<DLoading Size="DSize.Xs" LabelText="@Localizer["loading"]" />
						}
						<span>@Localizer["Load more"]</span>
					</DButton>
				}
			</div>
		}
	</div>
</section>

@code {
	[Inject] AccountService AccountService { get; set; }
	[Inject] InstanceService InstanceService { get; set; }
	[Inject] ILocalStorageService LocalStorage { get; set; }
	[Inject] IJSRuntime JS { get; set; }

	[Parameter] public string AccountId { get; set; }

	Account account;
	Relationship relationship;
	List<FeedPost> posts = [];
	ProfileTab tab = ProfileTab.Posts;
	string maxId;
	string loadedId;
	string loadedPersonaId;
	bool isActing;
	bool isLoadingMore;

	bool IsOwn => account is not null && account.Id == CascadingState.PersonaId;

	string FullAcct => account.Acct.Contains('@') ? account.Acct : $"{account.Acct}@{account.Host}";

	string HeaderStyle => string.IsNullOrEmpty(account?.Header) ? null : $"background-image:url('{account.Header}')";

	string FollowLabel => relationship switch
	{
		{ Following: true } => Localizer["Unfollow"],
		{ Requested: true } => Localizer["Cancel the request"],
		_ => Localizer["Follow"]
	};

	protected override async Task OnParametersSetAsync()
	{
		if (AccountId == loadedId && CascadingState.PersonaId == loadedPersonaId)
			return;
		loadedId = AccountId;
		loadedPersonaId = CascadingState.PersonaId;

		if (CascadingState.IsOffline)
		{
			WhenOnline(LoadData);
			StartOnlinePolling();
			IsLoading = false;
			return;
		}

		await LoadData();
	}

	async Task LoadData()
	{
		IsLoading = true;
		account = await AccountService.Get(AccountId);
		if (account is null)
		{
			IsLoading = false;
			return;
		}
		relationship = account.Id == CascadingState.PersonaId ? null : await AccountService.Relationship(account.Id);
		posts = [];
		maxId = null;
		IsLoading = false;
		await LoadPage();
	}

	async Task LoadPage()
	{
		isLoadingMore = true;
		var result = await AccountService.Statuses(account.Id, tab, maxId);
		isLoadingMore = false;
		if (result.IsInvalid)
		{
			Toast.AddResponseError(result);
			return;
		}

		var page = (FeedPage)result.Data;
		var known = posts.Select(p => p.Key).ToHashSet();
		posts.AddRange(page.Posts.Where(p => !known.Contains(p.Key)));
		maxId = page.MaxId;
		await InstanceService.Resolve(page.Posts.Select(p => p.Host).Append(InstanceService.SelfHost));
		InstanceService.Locate(page.Posts);
	}

	async Task LoadMore() => await LoadPage();

	async Task SelectTab(int index)
	{
		tab = (ProfileTab)index;
		posts = [];
		maxId = null;
		await LoadPage();
	}

	async Task ToggleFollow() =>
		await Do(relationship is { Following: true } or { Requested: true } ? AccountAction.Unfollow : AccountAction.Follow);

	async Task Do(AccountAction action)
	{
		isActing = true;
		var result = await AccountService.Act(account.Id, action);
		isActing = false;
		if (result.IsInvalid)
		{
			Toast.AddResponseError(result);
			return;
		}

		relationship = (Relationship)result.Data ?? relationship;
		Toast.AddResponseSuccess(action switch
		{
			AccountAction.Follow when relationship?.Requested == true => Localizer["Asked {0} to accept you.", account.Name],
			AccountAction.Follow => Localizer["Following {0}.", account.Name],
			AccountAction.Unfollow => Localizer["{0} unfollowed.", account.Name],
			AccountAction.Block => Localizer["{0} blocked.", account.Name],
			AccountAction.Unblock => Localizer["{0} unblocked.", account.Name],
			AccountAction.Mute => Localizer["{0} muted.", account.Name],
			_ => Localizer["{0} unmuted.", account.Name]
		});
	}

	void Remove(FeedPost post) => posts.RemoveAll(p => p.Key == post.Key);

	async Task OpenTag(string tagName)
	{
		var filter = await LocalStorage.GetItemAsync<FeedFilter>(nameof(FeedFilter)) ?? new();
		filter.Tag = tagName;
		filter.TimelineType = TimelineType.Tag;
		await LocalStorage.SetItemAsync(nameof(FeedFilter), filter);
		Navigation.NavigateTo("");
	}

	async Task Back() => await JS.InvokeVoidAsync("history.back");
}