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

pl-fe: list modal improvements

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-07-19 07:07:45 +02:00
parent eb11da9920
commit 4b658345b4
3 changed files with 74 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1081,6 +1081,7 @@
"lists.edit.title": "List title",
"lists.exclusive": "Hide members in Home",
"lists.exclusive_hint": "If someone is on this list, hide them in your Home feed to avoid seeing their posts twice.",
"lists.manage_members": "Manage list members",
"lists.new.create": "Add list",
"lists.new.create_title": "Add list",
"lists.new.save": "Save list",

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

@ -22,7 +22,13 @@ const messages = defineMessages({
repliesPolicyFollowed: { id: 'lists.replies_policy.followed', defaultMessage: 'Any followed user' },
});
const ListForm = () => {
interface IListForm {
onTabChange: (tab: 'members') => void;
}
const ListForm: React.FC<IListForm> = ({
onTabChange,
}) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const features = useFeatures();
@ -65,39 +71,42 @@ const ListForm = () => {
/>
</FormGroup>
{(features.listsRepliesPolicy || features.listsExclusive) && (
<List>
{features.listsRepliesPolicy && (
<ListItem
label={<FormattedMessage id='lists.edit.show_replies_to' defaultMessage='Include replies from list members to' />}
>
<SelectDropdown
key={repliesPolicy}
className='max-w-fit'
items={{
none: intl.formatMessage(messages.repliesPolicyNone),
list: intl.formatMessage(messages.repliesPolicyList),
followed: intl.formatMessage(messages.repliesPolicyFollowed),
}}
defaultValue={repliesPolicy || 'list'}
onChange={handleChangeRepliesPolicy}
/>
</ListItem>
)}
<List>
{features.listsRepliesPolicy && (
<ListItem
label={<FormattedMessage id='lists.edit.show_replies_to' defaultMessage='Include replies from list members to' />}
>
<SelectDropdown
key={repliesPolicy}
className='max-w-fit'
items={{
none: intl.formatMessage(messages.repliesPolicyNone),
list: intl.formatMessage(messages.repliesPolicyList),
followed: intl.formatMessage(messages.repliesPolicyFollowed),
}}
defaultValue={repliesPolicy || 'list'}
onChange={handleChangeRepliesPolicy}
/>
</ListItem>
)}
{features.listsExclusive && (
<ListItem
label={<FormattedMessage id='lists.exclusive' defaultMessage='Hide members in Home' />}
hint={<FormattedMessage id='lists.exclusive_hint' defaultMessage='If someone is on this list, hide them in your Home feed to avoid seeing their posts twice.' />}
>
<Toggle
checked={exclusive}
onChange={handleChangeExclusive}
/>
</ListItem>
)}
</List>
)}
{features.listsExclusive && (
<ListItem
label={<FormattedMessage id='lists.exclusive' defaultMessage='Hide members in Home' />}
hint={<FormattedMessage id='lists.exclusive_hint' defaultMessage='If someone is on this list, hide them in your Home feed to avoid seeing their posts twice.' />}
>
<Toggle
checked={exclusive}
onChange={handleChangeExclusive}
/>
</ListItem>
)}
<ListItem
label={<FormattedMessage id='lists.manage_members' defaultMessage='Manage list members' />}
onClick={() => onTabChange('members')}
/>
</List>
<FormActions>
<Button onClick={handleClick} disabled={disabled}>

53
packages/pl-fe/src/modals/list-editor-modal/index.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect } from 'react';
import React, { useEffect, useState } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { setupListEditor, resetListEditor } from 'pl-fe/actions/lists';
@ -27,6 +27,8 @@ const ListEditorModal: React.FC<BaseModalProps & ListEditorModalProps> = ({ list
const intl = useIntl();
const dispatch = useAppDispatch();
const [tab, setTab] = useState<'info' | 'members'>('info');
const accountIds = useAppSelector((state) => state.listEditor.accounts.items);
const searchAccountIds = useAppSelector((state) => state.listEditor.suggestions.items);
@ -44,30 +46,37 @@ const ListEditorModal: React.FC<BaseModalProps & ListEditorModalProps> = ({ list
return (
<Modal
title={<FormattedMessage id='lists.edit' defaultMessage='Edit list' />}
title={tab === 'info' ? <FormattedMessage id='lists.edit' defaultMessage='Edit list' /> : <FormattedMessage id='lists.manage_members' defaultMessage='Manage list memebrs' />}
onClose={onClickClose}
onBack={tab === 'members' ? () => setTab('info') : undefined}
>
<EditListForm />
{tab === 'info'
? <EditListForm onTabChange={setTab} />
: (
<>
{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} accountId={accountId} />)}
</div>
</div>
<br />
</>
)}
{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} accountId={accountId} />)}
</div>
</div>
)}
<br />
<CardHeader>
<CardTitle title={intl.formatMessage(messages.addToList)} />
</CardHeader>
<Search />
<div className='max-h-48 overflow-y-auto'>
{searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)}
</div>
<CardHeader>
<CardTitle title={intl.formatMessage(messages.addToList)} />
</CardHeader>
<Search />
<div className='max-h-48 overflow-y-auto'>
{searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)}
</div>
</>
)}
</Modal>
);
};