pl-fe: Ask for updating account note when blocking/muting accounts

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

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",

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<BlockMuteModalProps & BaseModalProps> = ({ 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<string | undefined>(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<BlockMuteModalProps & BaseModalProps> = ({ 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<BlockMuteModalProps & BaseModalProps> = ({ accoun
           </label>
         )}
 
+        {notes && (
+          <FormGroup
+            labelText={(
+              currentNote ? (
+                <FormattedMessage id='mute_modal.note.label.edit' defaultMessage='Edit account note' />
+              ) : (
+                <FormattedMessage id='mute_modal.note.label.add' defaultMessage='Add account note' />
+              )
+            )}
+            hintText={
+              action === 'MUTE' ? (
+                <FormattedMessage
+                  id='mute_modal.note.hint'
+                  defaultMessage='You can leave an optional note to remember why you muted this account. This note is only visible to you.'
+                />
+              ) : (
+                <FormattedMessage
+                  id='block_modal.note.hint'
+                  defaultMessage='You can leave an optional note to remember why you blocked this account. This note is only visible to you.'
+                />
+              )
+            }
+          >
+            <Textarea
+              className='mt-1'
+              value={note === undefined ? currentNote || '' : note}
+              onChange={({ target }) => setNote(target.value)}
+              autoComplete='off'
+              placeholder={intl.formatMessage(messages.notePlaceholder)}
+            />
+          </FormGroup>
+        )}
+
         {canSetDuration && (
           <>
             <label>