decePubClient/Pages/Lists.razor

@page "/lists"
@attribute [Authorize]
@inherits LocalizableComponentBase
<Title>@Localizer["Lists"]</Title>

@* The current persona's lists (/api/v1/lists): made, renamed, set to show which replies and whether their members stay
   out of the home feed, and deleted; their members added from the accounts the persona follows (PrivaPub accepts no
   others, and drops a member when the follow ends) and removed. A list is read as a tab of the feed page. Lists are
   the persona's own and never leave PrivaPub. *@
<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">
			<i class="ion-md-list text-lg"></i>
			<h1 class="font-bold truncate">@Localizer["Lists"]</h1>
		</div>

		<EditForm Model="draft" OnValidSubmit="Create" class="flex flex-wrap gap-2 items-center">
			<DInput TValue="string" class="flex-1 min-w-48" @bind-Value="draft.Title" Immediate="true" autocomplete="off" maxlength="200"
					placeholder="@Localizer["A new list's title"]" data-list-new>
				<Prefix><i class="ion-md-add"></i></Prefix>
			</DInput>
			<DButton Type="submit" Size="DSize.Sm" Color="DColor.Primary" Disabled="@(IsDefaultDisabled || isSaving || string.IsNullOrWhiteSpace(draft.Title))">
				<span>@Localizer["Make a list"]</span>
			</DButton>
		</EditForm>

		@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 (lists.Count == 0)
		{
			<p class="w-full text-center" data-feed-empty><i class="ion-ios-remove-circle-outline"></i> @Localizer["This persona has no list yet."]</p>
		}

		<div class="flex flex-col gap-3">
			@foreach (var list in lists)
			{
				<article class="flex flex-col gap-3 p-3 md:p-4 rounded-xl neo-raised neo-xs" data-list-id="@list.Id">
					<div class="flex flex-wrap items-center gap-2">
						<b class="flex-1 min-w-0 truncate">@list.Title</b>
						@if (list.Exclusive)
						{
							<DBadge Size="DSize.Sm" Variant="DBadgeVariant.Soft" title="@Localizer["Its members stay out of the home feed."]">
								<i class="ion-md-eye-off"></i> @Localizer["Exclusive"]
							</DBadge>
						}
						<DButton Size="DSize.Sm" OnClick="@(() => Read(list))" title="@Localizer["Read the list"]">
							<i class="ion-md-paper"></i><span class="hidden sm:inline">@Localizer["Read the list"]</span>
						</DButton>
						<DButton Size="DSize.Sm" Active="@(open?.Id == list.Id)" OnClick="@(() => Toggle(list))" title="@Localizer["Edit"]">
							<i class="ion-md-create"></i><span class="hidden sm:inline">@Localizer["Edit"]</span>
						</DButton>
					</div>

					@if (open?.Id == list.Id)
					{
						<EditForm Model="edit" OnValidSubmit="Save" class="flex flex-col gap-3">
							<div class="flex flex-wrap gap-2 items-center">
								<DInput TValue="string" class="flex-1 min-w-48" @bind-Value="edit.Title" Immediate="true" autocomplete="off" maxlength="200"
										aria-label="@Localizer["Title"]" data-list-title />
								<DSelect TValue="ListRepliesPolicy" Size="DSize.Sm" class="w-full sm:w-auto" @bind-Value="edit.RepliesPolicy">
									<Prefix><i class="ion-md-undo"></i></Prefix>
									<ChildContent>
										@foreach (var policy in Policies)
										{
											<option value="@policy">@PolicyName(policy)</option>
										}
									</ChildContent>
								</DSelect>
							</div>
							<DToggle Size="DSize.Sm" @bind-Value="edit.Exclusive" LabelText="@Localizer["Keep its members out of the home feed"]" />
							<div class="flex flex-wrap gap-2">
								<DButton Type="submit" Size="DSize.Sm" Color="DColor.Primary" Disabled="@(IsDefaultDisabled || isSaving || string.IsNullOrWhiteSpace(edit.Title))">
									<i class="ion-md-checkmark"></i><span>@Localizer["Save"]</span>
								</DButton>
								@if (isConfirmingDelete)
								{
									<DButton Size="DSize.Sm" Color="DColor.Error" Disabled="@(IsDefaultDisabled || isSaving)" OnClick="Delete">
										<i class="ion-md-trash"></i><span>@Localizer["Delete it for good"]</span>
									</DButton>
									<DButton Size="DSize.Sm" OnClick="() => isConfirmingDelete = false">@Localizer["Cancel"]</DButton>
								}
								else
								{
									<DButton Size="DSize.Sm" Disabled="@(IsDefaultDisabled || isSaving)" OnClick="() => isConfirmingDelete = true">
										<i class="ion-md-trash text-error"></i><span>@Localizer["Delete"]</span>
									</DButton>
								}
							</div>
						</EditForm>

						<h2 class="font-semibold text-sm">@Localizer["Members"] <span class="opacity-60 tabular-nums">@members.Count</span></h2>
						<div class="flex flex-col gap-2" data-list-members>
							@if (members.Count == 0)
							{
								<p class="text-sm opacity-70">@Localizer["Nobody is in this list yet."]</p>
							}
							@foreach (var account in members)
							{
								<div class="flex items-center gap-3 min-w-0" data-member-id="@account.Id">
									@* alt="": the name is next to it. *@
									<img alt="" class="h-8 w-8 flex-none object-cover rounded-full" src="@(account.Avatar ?? "imgs/icon-192.png")" />
									<a class="flex flex-col min-w-0 flex-1" href="@($"account/{Uri.EscapeDataString(account.Id)}")">
										<b class="truncate text-sm">@account.Name</b>
										<span class="text-xs opacity-70 truncate">@("@" + account.Acct)</span>
									</a>
									<DButton Size="DSize.Xs" Disabled="@(IsDefaultDisabled || isSaving)" OnClick="@(() => SetMember(account, false))"
											 title="@Localizer["Remove from the list"]">
										<i class="ion-md-close"></i><span class="hidden sm:inline">@Localizer["Remove"]</span>
									</DButton>
								</div>
							}
						</div>

						<EditForm Model="find" OnValidSubmit="Find" class="flex flex-wrap gap-2 items-center">
							<DInput TValue="string" class="flex-1 min-w-48" @bind-Value="find.Query" Immediate="true" autocomplete="off" type="search"
									placeholder="@Localizer["Find accounts you follow"]" data-list-find>
								<Prefix><i class="ion-md-search"></i></Prefix>
							</DInput>
							<DButton Type="submit" Size="DSize.Sm" Disabled="@(IsDefaultDisabled || isFinding || string.IsNullOrWhiteSpace(find.Query))">
								@if (isFinding)
								{
									<DLoading Size="DSize.Xs" LabelText="@Localizer["loading"]" />
								}
								<span>@Localizer["Search"]</span>
							</DButton>
						</EditForm>
						@if (found is not null)
						{
							<div class="flex flex-col gap-2" data-list-found>
								@if (Candidates.Count == 0)
								{
									<p class="text-sm opacity-70">@Localizer["Only accounts you follow can join a list, and none of them matches."]</p>
								}
								@foreach (var account in Candidates)
								{
									<div class="flex items-center gap-3 min-w-0" data-candidate-id="@account.Id">
										@* alt="": the name is next to it. *@
										<img alt="" class="h-8 w-8 flex-none object-cover rounded-full" src="@(account.Avatar ?? "imgs/icon-192.png")" />
										<span class="flex flex-col min-w-0 flex-1">
											<b class="truncate text-sm">@account.Name</b>
											<span class="text-xs opacity-70 truncate">@("@" + account.Acct)</span>
										</span>
										<DButton Size="DSize.Xs" Color="DColor.Primary" Disabled="@(IsDefaultDisabled || isSaving)" OnClick="@(() => SetMember(account, true))">
											<i class="ion-md-add"></i><span>@Localizer["Add"]</span>
										</DButton>
									</div>
								}
							</div>
						}
					}
				</article>
			}
		</div>
	</div>
</section>

@code {
	static readonly ListRepliesPolicy[] Policies = [ListRepliesPolicy.List, ListRepliesPolicy.Followed, ListRepliesPolicy.None];

	[Inject] ListService ListService { get; set; }
	[Inject] ILocalStorageService LocalStorage { get; set; }

	List<MastodonList> lists = [];
	MastodonList draft = new();
	MastodonList edit = new();
	MastodonList open;
	List<Account> members = [];
	List<Account> found;
	SearchForm find = new();
	string loadedPersonaId;
	bool isSaving;
	bool isFinding;
	bool isConfirmingDelete;

	List<Account> Candidates => found.Where(a => members.All(m => m.Id != a.Id)).ToList();

	string PolicyName(ListRepliesPolicy policy) => policy switch
	{
		ListRepliesPolicy.Followed => Localizer["Replies to anyone you follow"],
		ListRepliesPolicy.None => Localizer["No replies"],
		_ => Localizer["Replies to the list's members"]
	};

	// The persona changed (NavMenu's switcher): its lists are another persona's.
	protected override async Task OnParametersSetAsync()
	{
		if (CascadingState.PersonaId is null)
		{
			IsLoading = false;
			return;
		}
		if (CascadingState.PersonaId == loadedPersonaId)
			return;
		loadedPersonaId = CascadingState.PersonaId;

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

		await LoadData();
	}

	async Task LoadData()
	{
		IsLoading = true;
		open = null;
		members = [];
		found = null;
		lists = await ListService.All();
		IsLoading = false;
	}

	async Task Create()
	{
		isSaving = true;
		var result = await ListService.Save(new MastodonList { Title = draft.Title });
		isSaving = false;
		if (result.IsInvalid)
		{
			Toast.AddResponseError(result);
			return;
		}

		var list = (MastodonList)result.Data;
		lists.Add(list);
		lists = [.. lists.OrderBy(l => l.Title, StringComparer.CurrentCultureIgnoreCase)];
		draft = new();
		Toast.AddResponseSuccess(Localizer["List {0} made.", list.Title]);
		await Toggle(list);
	}

	async Task Toggle(MastodonList list)
	{
		isConfirmingDelete = false;
		found = null;
		find = new();
		if (open?.Id == list.Id)
		{
			open = null;
			members = [];
			return;
		}

		open = list;
		edit = new MastodonList { Id = list.Id, Title = list.Title, RepliesPolicy = list.RepliesPolicy, Exclusive = list.Exclusive };
		members = await ListService.Members(list.Id);
	}

	async Task Save()
	{
		isSaving = true;
		var result = await ListService.Save(edit);
		isSaving = false;
		if (result.IsInvalid)
		{
			Toast.AddResponseError(result);
			return;
		}

		var saved = (MastodonList)result.Data;
		var index = lists.FindIndex(l => l.Id == saved.Id);
		if (index >= 0)
			lists[index] = saved;
		open = saved;
		Toast.AddResponseSuccess(Localizer["List {0} saved.", saved.Title]);
	}

	async Task Delete()
	{
		isSaving = true;
		var result = await ListService.Delete(open.Id);
		isSaving = false;
		isConfirmingDelete = false;
		if (result.IsInvalid)
		{
			Toast.AddResponseError(result);
			return;
		}

		lists.RemoveAll(l => l.Id == open.Id);
		Toast.AddResponseSuccess(Localizer["List {0} deleted.", open.Title]);
		open = null;
		members = [];
	}

	async Task Find()
	{
		isFinding = true;
		found = await ListService.FindFollowed(find.Query);
		isFinding = false;
	}

	async Task SetMember(Account account, bool member)
	{
		isSaving = true;
		var result = await ListService.SetMember(open.Id, account.Id, member);
		isSaving = false;
		if (result.IsInvalid)
		{
			Toast.AddResponseError(result);
			return;
		}

		if (member)
			members.Add(account);
		else
			members.RemoveAll(m => m.Id == account.Id);
		Toast.AddResponseSuccess(member ? Localizer["{0} added to {1}.", account.Name, open.Title] : Localizer["{0} removed from {1}.", account.Name, open.Title]);
	}

	async Task Read(MastodonList list)
	{
		var filter = await LocalStorage.GetItemAsync<FeedFilter>(nameof(FeedFilter)) ?? new();
		filter.TimelineType = TimelineType.Lists;
		filter.ListId = list.Id;
		await LocalStorage.SetItemAsync(nameof(FeedFilter), filter);
		Navigation.NavigateTo("");
	}

	sealed class SearchForm
	{
		public string Query { get; set; }
	}
}