334 lines
12 KiB
Plaintext
334 lines
12 KiB
Plaintext
 
|
@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; }
|
||
|
|
}
|
||
|
|
}
|