matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: list modal ux improvements

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-08-16 09:49:31 +02:00
parent 108a73fbc5
commit a90d879156
3 changed files with 33 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/pl-api/lib/features.ts
View File

@ -1128,6 +1128,11 @@ const getFeatures = (instance: Instance) => {
*/
listsFavourites: instance.api_versions['favourite_list.fedibird.pl-api'] >= 1,
/**
* Can set to receive notifications for new posts in a list.
*/
listsNotifications: instance.api_versions['kmyblue_list_notification.fedibird.pl-api'] >= 1,
listsRepliesPolicy: any([
v.software === FRIENDICA && gte(v.version, '2024.12.0'),
v.software === GOTOSOCIAL,

3
packages/pl-fe/src/locales/en.json
View File

@ -813,6 +813,7 @@
"empty_column.interaction_requests": "There are no pending interaction requests.",
"empty_column.link_timeline": "There are no posts with this link yet.",
"empty_column.list": "There is nothing in this list yet. When members of this list create new posts, they will appear here.",
"empty_column.list_members": "There are no members in this list. Use search to find users to add.",
"empty_column.lists": "You don't have any lists yet. When you create one, it will show up here.",
"empty_column.mutes": "You haven't muted any users yet.",
"empty_column.notifications": "You don't have any notifications yet. Interact with others to start the conversation.",
@ -1093,7 +1094,7 @@
"list.click_to_add": "Click here to add people",
"list_adder.header_title": "Add or remove from lists",
"lists.account.add": "Add to list",
"lists.account.remove": "Remove from list",
"lists.account.remove": "List members",
"lists.delete": "Delete list",
"lists.edit": "Edit list",
"lists.edit.save": "Save list",

47
packages/pl-fe/src/modals/list-editor-modal/components/list-members-form.tsx
View File

@ -1,7 +1,9 @@
import React, { useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { CardHeader, CardTitle } from 'pl-fe/components/ui/card';
import Stack from 'pl-fe/components/ui/stack';
import Text from 'pl-fe/components/ui/text';
import { useListAccounts } from 'pl-fe/queries/accounts/use-lists';
import { useAccountSearch } from 'pl-fe/queries/search/use-search-accounts';
@ -10,7 +12,7 @@ import Search from './search';
const messages = defineMessages({
addToList: { id: 'lists.account.add', defaultMessage: 'Add to list' },
removeFromList: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
removeFromList: { id: 'lists.account.remove', defaultMessage: 'List members' },
});
interface IListMembersForm {
@ -26,29 +28,32 @@ const ListMembersForm: React.FC<IListMembersForm> = ({ listId }) => {
const { data: searchAccountIds = [] } = useAccountSearch(searchValue, { following: true, limit: 5 });
return (
<>
{accountIds.length > 0 && (
<>
<div>
<CardHeader>
<CardTitle title={intl.formatMessage(messages.removeFromList)} />
</CardHeader>
<div className='max-h-48 overflow-y-auto'>
{accountIds.map(accountId => <Account key={accountId} listId={listId} accountId={accountId} added={accountIds.includes(accountId)} />)}
</div>
<Stack space={2}>
{accountIds.length > 0 ? (
<div>
<CardHeader>
<CardTitle title={intl.formatMessage(messages.removeFromList)} />
</CardHeader>
<div className='max-h-48 overflow-y-auto'>
{accountIds.map(accountId => <Account key={accountId} listId={listId} accountId={accountId} added={accountIds.includes(accountId)} />)}
</div>
<br />
</>
</div>
) : (
<Text theme='muted' size='sm'>
<FormattedMessage id='empty_column.list_members' defaultMessage='There are no members in this list. Use search to find users to add.' />
</Text>
)}
<CardHeader>
<CardTitle title={intl.formatMessage(messages.addToList)} />
</CardHeader>
<Search value={searchValue} onSubmit={setSearchValue} />
<div className='max-h-48 overflow-y-auto'>
{searchAccountIds.map(accountId => <Account key={accountId} listId={listId} accountId={accountId} added={accountIds.includes(accountId)} />)}
<div>
<CardHeader>
<CardTitle title={intl.formatMessage(messages.addToList)} />
</CardHeader>
<Search value={searchValue} onSubmit={setSearchValue} />
<div className='max-h-48 overflow-y-auto'>
{searchAccountIds.map(accountId => <Account key={accountId} listId={listId} accountId={accountId} added={accountIds.includes(accountId)} />)}
</div>
</div>
</>
</Stack>
);
};