diff --git a/packages/pl-fe/src/locales/en.json b/packages/pl-fe/src/locales/en.json index e4c9f8bfb..57410cf6a 100644 --- a/packages/pl-fe/src/locales/en.json +++ b/packages/pl-fe/src/locales/en.json @@ -284,6 +284,7 @@ "birthday_panel.title": "Birthdays", "birthdays_modal.empty": "None of your friends have birthday today.", "block_modal.auto_expire": "Automatically expire block?", + "block_modal.note.hint": "You can leave an optional note to remember why you blocked this account. This note is only visible to you.", "bookmark_folders.add.fail": "Failed to create bookmark folder", "bookmark_folders.add.success": "Bookmark folder created successfully", "bookmark_folders.all_bookmarks": "All bookmarks", @@ -1273,6 +1274,9 @@ "mute_modal.auto_expire": "Automatically expire mute?", "mute_modal.duration": "Duration", "mute_modal.hide_notifications": "Hide notifications from this user?", + "mute_modal.note.hint": "You can leave an optional note to remember why you muted this account. This note is only visible to you.", + "mute_modal.note.label.add": "Add account note", + "mute_modal.note.label.edit": "Edit account note", "my_groups_panel.title": "My groups", "navigation.chats": "Chats", "navigation.compose": "Compose", diff --git a/packages/pl-fe/src/modals/block-mute-modal.tsx b/packages/pl-fe/src/modals/block-mute-modal.tsx index c90f6c4b4..329e845ee 100644 --- a/packages/pl-fe/src/modals/block-mute-modal.tsx +++ b/packages/pl-fe/src/modals/block-mute-modal.tsx @@ -1,21 +1,29 @@ import React, { useState } from 'react'; -import { FormattedMessage } from 'react-intl'; +import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { initReport, ReportableEntities } from 'pl-fe/actions/reports'; import { useAccount } from 'pl-fe/api/hooks/accounts/use-account'; +import FormGroup from 'pl-fe/components/ui/form-group'; import HStack from 'pl-fe/components/ui/hstack'; import Modal from 'pl-fe/components/ui/modal'; import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; +import Textarea from 'pl-fe/components/ui/textarea'; import Toggle from 'pl-fe/components/ui/toggle'; import DurationSelector from 'pl-fe/features/compose/components/polls/duration-selector'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useFeatures } from 'pl-fe/hooks/use-features'; -import { useBlockAccountMutation, useMuteAccountMutation } from 'pl-fe/queries/accounts/use-relationship'; +import { useBlockAccountMutation, useMuteAccountMutation, useUpdateAccountNoteMutation } from 'pl-fe/queries/accounts/use-relationship'; +import toast from 'pl-fe/toast'; import type { BlockAccountParams, MuteAccountParams } from 'pl-api'; import type { BaseModalProps } from 'pl-fe/features/ui/components/modal-root'; +const messages = defineMessages({ + notePlaceholder: { id: 'account_note.placeholder', defaultMessage: 'Add a note' }, + noteSaveFailed: { id: 'account_note.fail', defaultMessage: 'Failed to save note' }, +}); + interface BlockMuteModalProps { action: 'BLOCK' | 'MUTE'; accountId: string; @@ -24,16 +32,21 @@ interface BlockMuteModalProps { const BlockMuteModal: React.FC = ({ accountId, statusId, onClose, action }) => { const dispatch = useAppDispatch(); + const intl = useIntl(); - const { account } = useAccount(accountId || undefined); + const { account } = useAccount(accountId || undefined, { withRelationship: true }); const [notifications, setNotifications] = useState(true); const [duration, setDuration] = useState(0); const [isSubmitting, setIsSubmitting] = useState(false); - const { blocksDuration, mutesDuration } = useFeatures(); + const [note, setNote] = useState(undefined); + const { notes, blocksDuration, mutesDuration } = useFeatures(); const canSetDuration = action === 'MUTE' ? mutesDuration : blocksDuration; + const currentNote = account?.relationship?.note; + const { mutate: muteAccount } = useMuteAccountMutation(accountId); const { mutate: blockAccount } = useBlockAccountMutation(accountId); + const { mutate: updateAccountNote } = useUpdateAccountNoteMutation(accountId); if (!account) return null; @@ -49,6 +62,11 @@ const BlockMuteModal: React.FC = ({ accoun onClose('BLOCK_MUTE'); }, }); + if (notes && note !== undefined && note !== currentNote) { + updateAccountNote(note, { + onError: () => toast.error(messages.noteSaveFailed), + }); + } }; const handleBlockAndReport = () => { @@ -123,6 +141,39 @@ const BlockMuteModal: React.FC = ({ accoun )} + {notes && ( + + ) : ( + + ) + )} + hintText={ + action === 'MUTE' ? ( + + ) : ( + + ) + } + > +