diff --git a/packages/pl-fe/src/locales/en.json b/packages/pl-fe/src/locales/en.json index 534d80dd2..25c5354bd 100644 --- a/packages/pl-fe/src/locales/en.json +++ b/packages/pl-fe/src/locales/en.json @@ -259,6 +259,10 @@ "alt_text_modal.header": "Add alt text", "alt_text_modal.saving_failed": "Failed to save alt text", "announcements.title": "Announcements", + "antennas.account.add": "Add to antenna", + "antennas.account.excluded.add": "Add to excluded accounts", + "antennas.account.excluded.remove": "Remove from excluded accounts", + "antennas.account.remove": "Remove from antenna", "antennas.create": "Create antenna", "antennas.create.error": "Error creating antenna", "antennas.create.save": "Create antenna", @@ -284,6 +288,7 @@ "antennas.edit.with_media_only": "Media only", "antennas.edit.with_media_only.hint": "Only include posts with media attachments", "antennas.manage_accounts": "Manage antenna accounts", + "antennas.manage_excluded_accounts": "Manage excluded accounts", "antennas.new.create": "Add antenna", "antennas.subheading": "Your antennas", "app_create.name_label": "App name", @@ -914,6 +919,8 @@ "empty_column.aliases": "You haven't created any account alias yet.", "empty_column.aliases.suggestions": "There are no account suggestions available for the provided term.", "empty_column.antenna": "There is nothing in this antenna yet. When posts matching the criteria will be created, they will appear here.", + "empty_column.antenna_accounts": "There are no accounts in this antenna. Use search to find users to add.", + "empty_column.antenna_excluded_accounts": "There are no excluded accounts in this antenna. Use search to find users to exclude.", "empty_column.antennas": "You don't have any antennas yet. When you create one, it will show up here.", "empty_column.blocks": "You haven't blocked any users yet.", "empty_column.bookmarks": "You don't have any bookmarks yet. When you add one, it will show up here.", diff --git a/packages/pl-fe/src/modals/antenna-editor-modal.tsx b/packages/pl-fe/src/modals/antenna-editor-modal.tsx index 3e7b6ed4e..910d200d5 100644 --- a/packages/pl-fe/src/modals/antenna-editor-modal.tsx +++ b/packages/pl-fe/src/modals/antenna-editor-modal.tsx @@ -3,18 +3,35 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import List, { ListItem } from '@/components/list'; import Button from '@/components/ui/button'; +import { CardHeader, CardTitle } from '@/components/ui/card'; import Form from '@/components/ui/form'; import FormActions from '@/components/ui/form-actions'; import FormGroup from '@/components/ui/form-group'; import Input from '@/components/ui/input'; import Modal from '@/components/ui/modal'; import Spinner from '@/components/ui/spinner'; +import Stack from '@/components/ui/stack'; +import Text from '@/components/ui/text'; import Toggle from '@/components/ui/toggle'; import { SelectDropdown } from '@/features/forms'; -import { useAntenna, useCreateAntenna, useUpdateAntenna } from '@/queries/accounts/use-antennas'; +import { + useAddAccountsToAntenna, + useAddExcludedAccountsToAntenna, + useAntenna, + useAntennaAccounts, + useAntennaExcludedAccounts, + useCreateAntenna, + useRemoveAccountsFromAntenna, + useRemoveExcludedAccountsFromAntenna, + useUpdateAntenna, +} from '@/queries/accounts/use-antennas'; +import { useAccountSearch } from '@/queries/search/use-search-accounts'; import { useModalsActions } from '@/stores/modals'; import toast from '@/toast'; +import Account from './list-editor-modal/components/account'; +import Search from './list-editor-modal/components/search'; + import type { BaseModalProps } from '@/features/ui/components/modal-root'; type Tab = 'info' | 'accounts' | 'excludedAccounts'; @@ -24,6 +41,16 @@ const messages = defineMessages({ editSuccess: { id: 'antennas.edit.success', defaultMessage: 'Antenna updated successfully' }, createError: { id: 'antennas.create.error', defaultMessage: 'Error creating antenna' }, editError: { id: 'antennas.edit.error', defaultMessage: 'Error updating antenna' }, + addToAntenna: { id: 'antennas.account.add', defaultMessage: 'Add to antenna' }, + removeFromAntenna: { id: 'antennas.account.remove', defaultMessage: 'Remove from antenna' }, + addExcludedToAntenna: { + id: 'antennas.account.excluded.add', + defaultMessage: 'Add to excluded accounts', + }, + removeExcludedFromAntenna: { + id: 'antennas.account.excluded.remove', + defaultMessage: 'Remove from excluded accounts', + }, }); interface IAntennaAccountsForm { @@ -31,7 +58,104 @@ interface IAntennaAccountsForm { excluded?: boolean; } -const AntennaAccountsForm: React.FC = () => null; +const AntennaAccountsForm: React.FC = ({ antennaId, excluded = false }) => { + const intl = useIntl(); + + const [searchValue, setSearchValue] = useState(''); + + const { data: accountIds = [] } = useAntennaAccounts(antennaId); + const { data: excludedAccountIds = [] } = useAntennaExcludedAccounts(antennaId); + const { data: searchAccountIds = [] } = useAccountSearch(searchValue, { + following: true, + limit: 5, + }); + + const { mutate: addToAntenna } = useAddAccountsToAntenna(antennaId); + const { mutate: removeFromAntenna } = useRemoveAccountsFromAntenna(antennaId); + const { mutate: addToExcludedAntenna } = useAddExcludedAccountsToAntenna(antennaId); + const { mutate: removeFromExcludedAntenna } = useRemoveExcludedAccountsFromAntenna(antennaId); + + const selectedAccountIds = excluded ? excludedAccountIds : accountIds; + + const onAdd = (accountId: string) => { + if (excluded) { + addToExcludedAntenna([accountId]); + } else { + addToAntenna([accountId]); + } + }; + + const onRemove = (accountId: string) => { + if (excluded) { + removeFromExcludedAntenna([accountId]); + } else { + removeFromAntenna([accountId]); + } + }; + + return ( + + {selectedAccountIds.length > 0 ? ( +
+ + + +
+ {selectedAccountIds.map((accountId) => ( + + ))} +
+
+ ) : ( + + {excluded ? ( + + ) : ( + + )} + + )} + +
+ + + + +
+ {searchAccountIds.map((accountId) => ( + + ))} +
+
+
+ ); +}; interface IEditAntennaForm { antennaId?: string; @@ -208,6 +332,17 @@ const EditAntennaForm: React.FC = ({ antennaId, onTabChange }) onTabChange('accounts'); }} /> + + } + onClick={() => { + onTabChange('excludedAccounts'); + }} + /> )}