pl-fe: allow editing account notes on mobile

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

packages/pl-fe/src/features/account/components/header.tsx

@@ -36,6 +36,7 @@ import {
   useUnblockAccountMutation,
   useUnmuteAccountMutation,
   useUnpinAccountMutation,
+  useUpdateAccountNoteMutation,
 } from 'pl-fe/queries/accounts/use-relationship';
 import { useChats } from 'pl-fe/queries/chats';
 import { queryClient } from 'pl-fe/queries/client';
@@ -95,6 +96,10 @@ const messages = defineMessages({
   loadActivities: { id: 'account.load_activities', defaultMessage: 'Fetch latest posts' },
   loadActivitiesSuccess: { id: 'account.load_activities.success', defaultMessage: 'Scheduled fetching latest posts' },
   loadActivitiesFail: { id: 'account.load_activities.fail', defaultMessage: 'Failed to fetch latest posts' },
+  note: { id: 'account_note.modal_header', defaultMessage: 'Edit note for @{name}' },
+  notePlaceholder: { id: 'account_note.placeholder', defaultMessage: 'Add a note' },
+  noteSaved: { id: 'account_note.success', defaultMessage: 'Note saved' },
+  noteSaveFailed: { id: 'account_note.fail', defaultMessage: 'Failed to save note' },
 });
 
 interface IMovedNote {
@@ -147,6 +152,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
   const { mutate: pinAccount } = usePinAccountMutation(account?.id!);
   const { mutate: unpinAccount } = useUnpinAccountMutation(account?.id!);
   const { mutate: removeFromFollowers } = useRemoveAccountFromFollowersMutation(account?.id!);
+  const { mutate: updateAccountNote } = useUpdateAccountNoteMutation(account?.id!);
   const { openModal } = useModalsActions();
   const settings = useSettings();
 
@@ -249,6 +255,19 @@ const Header: React.FC<IHeader> = ({ account }) => {
       .catch(() => toast.error(intl.formatMessage(messages.loadActivitiesFail)));
   };
 
+  const onEditNote = () => {
+    openModal('TEXT_FIELD', {
+      heading: <FormattedMessage id='account_note.modal_header' defaultMessage='Edit note for @{name}' values={{ name: account.acct }} />,
+      placeholder: intl.formatMessage(messages.notePlaceholder),
+      confirm: <FormattedMessage id='account_note.save' defaultMessage='Save note' />,
+      onConfirm: (value) => updateAccountNote(value, {
+        onSuccess: () => toast.success(messages.noteSaved),
+        onError: () => toast.error(messages.noteSaveFailed),
+      }),
+      text: account.relationship?.note || '',
+    });
+  };
+
   const onReport = () => {
     dispatch(initReport(ReportableEntities.ACCOUNT, account));
   };
@@ -487,6 +506,14 @@ const Header: React.FC<IHeader> = ({ account }) => {
         });
       }
 
+      if (account.relationship && features.notes) {
+        menu.push({
+          text: intl.formatMessage(messages.note, { name: account.acct }),
+          action: onEditNote,
+          icon: require('@phosphor-icons/core/regular/note-pencil.svg'),
+        });
+      }
+
       menu.push(null);
 
       if (features.removeFromFollowers && account.relationship?.followed_by) {

packages/pl-fe/src/features/ui/components/panels/account-note-panel.tsx

@@ -13,7 +13,6 @@ import type { Account as AccountEntity } from 'pl-api';
 
 const messages = defineMessages({
   placeholder: { id: 'account_note.placeholder', defaultMessage: 'Click to add a note' },
-  saved: { id: 'generic.saved', defaultMessage: 'Saved' },
 });
 
 interface IAccountNotePanel {

packages/pl-fe/src/locales/en.json

@@ -97,8 +97,12 @@
   "account_moderation_modal.roles.admin": "Admin",
   "account_moderation_modal.roles.moderator": "Moderator",
   "account_moderation_modal.roles.user": "User",
+  "account_note.fail": "Failed to save note",
   "account_note.header": "Note",
+  "account_note.modal_header": "Edit note for @{name}",
   "account_note.placeholder": "Click to add a note",
+  "account_note.save": "Save note",
+  "account_note.success": "Note saved",
   "admin.announcements.action": "Create announcement",
   "admin.announcements.all_day": "All day",
   "admin.announcements.delete": "Delete",

packages/pl-fe/src/modals/text-field-modal.tsx

@@ -12,7 +12,7 @@ interface TextFieldModalProps {
   heading: React.ReactNode;
   placeholder?: string;
   confirm: React.ReactNode;
-  onConfirm: (value?: string) => void;
+  onConfirm: (value: string) => void;
   onCancel?: () => void;
   confirmationTheme?: ButtonThemes;
   text?: string;
@@ -28,7 +28,7 @@ const TextFieldModal: React.FC<TextFieldModalProps & BaseModalProps> = ({
   confirmationTheme,
   text,
 }) => {
-  const [value, setValue] = useState(text);
+  const [value, setValue] = useState(text || '');
 
   const handleClick = () => {
     onClose('TEXT_FIELD');