Merge branch 'account-notes-panel' into 'develop'

Move account notes to a panel

See merge request soapbox-pub/soapbox!2661

app/soapbox/actions/__tests__/account-notes.test.ts

@@ -1,19 +1,13 @@
-import { Map as ImmutableMap } from 'immutable';
-
 import { __stub } from 'soapbox/api';
-import { buildAccount, buildRelationship } from 'soapbox/jest/factory';
 import { mockStore, rootState } from 'soapbox/jest/test-helpers';
-import { ReducerRecord, EditRecord } from 'soapbox/reducers/account-notes';
 
-import { changeAccountNoteComment, initAccountNoteModal, submitAccountNote } from '../account-notes';
+import { submitAccountNote } from '../account-notes';
 
 describe('submitAccountNote()', () => {
   let store: ReturnType<typeof mockStore>;
 
   beforeEach(() => {
-    const state = rootState
-      .set('account_notes', ReducerRecord({ edit: EditRecord({ account: '1', comment: 'hello' }) }));
-    store = mockStore(state);
+    store = mockStore(rootState);
   });
 
   describe('with a successful API request', () => {
@@ -26,10 +20,9 @@ describe('submitAccountNote()', () => {
     it('post the note to the API', async() => {
       const expectedActions = [
         { type: 'ACCOUNT_NOTE_SUBMIT_REQUEST' },
-        { type: 'MODAL_CLOSE', modalType: undefined },
         { type: 'ACCOUNT_NOTE_SUBMIT_SUCCESS', relationship: {} },
       ];
-      await store.dispatch(submitAccountNote());
+      await store.dispatch(submitAccountNote('1', 'hello'));
       const actions = store.getActions();
 
       expect(actions).toEqual(expectedActions);
@@ -51,59 +44,10 @@ describe('submitAccountNote()', () => {
           error: new Error('Network Error'),
         },
       ];
-      await store.dispatch(submitAccountNote());
+      await store.dispatch(submitAccountNote('1', 'hello'));
       const actions = store.getActions();
 
       expect(actions).toEqual(expectedActions);
     });
   });
 });
-
-describe('initAccountNoteModal()', () => {
-  let store: ReturnType<typeof mockStore>;
-
-  beforeEach(() => {
-    const state = rootState
-      .set('relationships', ImmutableMap({ '1': buildRelationship({ note: 'hello' }) }));
-    store = mockStore(state);
-  });
-
-  it('dispatches the proper actions', async() => {
-    const account = buildAccount({
-      id: '1',
-      acct: 'justin-username',
-      display_name: 'Justin L',
-      avatar: 'test.jpg',
-      verified: true,
-    });
-    const expectedActions = [
-      { type: 'ACCOUNT_NOTE_INIT_MODAL', account, comment: 'hello' },
-      { type: 'MODAL_CLOSE', modalType: 'ACCOUNT_NOTE' },
-      { type: 'MODAL_OPEN', modalType: 'ACCOUNT_NOTE' },
-    ];
-    await store.dispatch(initAccountNoteModal(account));
-    const actions = store.getActions();
-
-    expect(actions).toEqual(expectedActions);
-  });
-});
-
-describe('changeAccountNoteComment()', () => {
-  let store: ReturnType<typeof mockStore>;
-
-  beforeEach(() => {
-    const state = rootState;
-    store = mockStore(state);
-  });
-
-  it('dispatches the proper actions', async() => {
-    const comment = 'hello world';
-    const expectedActions = [
-      { type: 'ACCOUNT_NOTE_CHANGE_COMMENT', comment },
-    ];
-    await store.dispatch(changeAccountNoteComment(comment));
-    const actions = store.getActions();
-
-    expect(actions).toEqual(expectedActions);
-  });
-});

app/soapbox/actions/account-notes.ts

@@ -1,82 +1,44 @@
 import api from '../api';
 
-import { openModal, closeModal } from './modals';
-
 import type { AxiosError } from 'axios';
 import type { AnyAction } from 'redux';
-import type { Account } from 'soapbox/schemas';
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store';
 
 const ACCOUNT_NOTE_SUBMIT_REQUEST = 'ACCOUNT_NOTE_SUBMIT_REQUEST';
 const ACCOUNT_NOTE_SUBMIT_SUCCESS = 'ACCOUNT_NOTE_SUBMIT_SUCCESS';
 const ACCOUNT_NOTE_SUBMIT_FAIL = 'ACCOUNT_NOTE_SUBMIT_FAIL';
 
-const ACCOUNT_NOTE_INIT_MODAL = 'ACCOUNT_NOTE_INIT_MODAL';
+const submitAccountNote = (id: string, value: string) =>
+  (dispatch: React.Dispatch<AnyAction>, getState: () => RootState) => {
+    dispatch(submitAccountNoteRequest());
 
-const ACCOUNT_NOTE_CHANGE_COMMENT = 'ACCOUNT_NOTE_CHANGE_COMMENT';
-
-const submitAccountNote = () => (dispatch: React.Dispatch<AnyAction>, getState: () => RootState) => {
-  dispatch(submitAccountNoteRequest());
-
-  const id = getState().account_notes.edit.account;
-
-  return api(getState)
-    .post(`/api/v1/accounts/${id}/note`, {
-      comment: getState().account_notes.edit.comment,
-    })
-    .then(response => {
-      dispatch(closeModal());
-      dispatch(submitAccountNoteSuccess(response.data));
-    })
-    .catch(error => dispatch(submitAccountNoteFail(error)));
-};
-
-function submitAccountNoteRequest() {
-  return {
-    type: ACCOUNT_NOTE_SUBMIT_REQUEST,
+    return api(getState)
+      .post(`/api/v1/accounts/${id}/note`, {
+        comment: value,
+      })
+      .then(response => {
+        dispatch(submitAccountNoteSuccess(response.data));
+      })
+      .catch(error => dispatch(submitAccountNoteFail(error)));
   };
-}
 
-function submitAccountNoteSuccess(relationship: any) {
-  return {
-    type: ACCOUNT_NOTE_SUBMIT_SUCCESS,
-    relationship,
-  };
-}
+const submitAccountNoteRequest = () => ({
+  type: ACCOUNT_NOTE_SUBMIT_REQUEST,
+});
 
-function submitAccountNoteFail(error: AxiosError) {
-  return {
-    type: ACCOUNT_NOTE_SUBMIT_FAIL,
-    error,
-  };
-}
+const submitAccountNoteSuccess = (relationship: any) => ({
+  type: ACCOUNT_NOTE_SUBMIT_SUCCESS,
+  relationship,
+});
 
-const initAccountNoteModal = (account: Account) => (dispatch: AppDispatch, getState: () => RootState) => {
-  const comment = getState().relationships.get(account.id)!.note;
-
-  dispatch({
-    type: ACCOUNT_NOTE_INIT_MODAL,
-    account,
-    comment,
-  });
-
-  dispatch(openModal('ACCOUNT_NOTE'));
-};
-
-function changeAccountNoteComment(comment: string) {
-  return {
-    type: ACCOUNT_NOTE_CHANGE_COMMENT,
-    comment,
-  };
-}
+const submitAccountNoteFail = (error: AxiosError) => ({
+  type: ACCOUNT_NOTE_SUBMIT_FAIL,
+  error,
+});
 
 export {
   submitAccountNote,
-  initAccountNoteModal,
-  changeAccountNoteComment,
   ACCOUNT_NOTE_SUBMIT_REQUEST,
   ACCOUNT_NOTE_SUBMIT_SUCCESS,
   ACCOUNT_NOTE_SUBMIT_FAIL,
-  ACCOUNT_NOTE_INIT_MODAL,
-  ACCOUNT_NOTE_CHANGE_COMMENT,
 };

app/soapbox/features/ui/components/modal-root.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import Base from 'soapbox/components/modal-root';
 import {
   AccountModerationModal,
-  AccountNoteModal,
   ActionsModal,
   BirthdaysModal,
   BoostModal,
@@ -50,7 +49,6 @@ import ModalLoading from './modal-loading';
 /* eslint sort-keys: "error" */
 const MODAL_COMPONENTS = {
   'ACCOUNT_MODERATION': AccountModerationModal,
-  'ACCOUNT_NOTE': AccountNoteModal,
   'ACTIONS': ActionsModal,
   'BIRTHDAYS': BirthdaysModal,
   'BOOST': BoostModal,

app/soapbox/features/ui/components/modals/account-note-modal.tsx

@@ -1,67 +0,0 @@
-import React from 'react';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-
-import { changeAccountNoteComment, submitAccountNote } from 'soapbox/actions/account-notes';
-import { closeModal } from 'soapbox/actions/modals';
-import { useAccount } from 'soapbox/api/hooks';
-import { Modal, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-
-const messages = defineMessages({
-  placeholder: { id: 'account_note.placeholder', defaultMessage: 'No comment provided' },
-  save: { id: 'account_note.save', defaultMessage: 'Save' },
-});
-
-const AccountNoteModal = () => {
-  const intl = useIntl();
-  const dispatch = useAppDispatch();
-
-  const isSubmitting = useAppSelector((state) => state.account_notes.edit.isSubmitting);
-  const accountId = useAppSelector((state) => state.account_notes.edit.account);
-  const { account } = useAccount(accountId || undefined);
-  const comment = useAppSelector((state) => state.account_notes.edit.comment);
-
-  const onClose = () => {
-    dispatch(closeModal('ACCOUNT_NOTE'));
-  };
-
-  const handleCommentChange: React.ChangeEventHandler<HTMLTextAreaElement> = e => {
-    dispatch(changeAccountNoteComment(e.target.value));
-  };
-
-  const handleSubmit = () => {
-    dispatch(submitAccountNote());
-  };
-
-  const handleKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = e => {
-    if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
-      handleSubmit();
-    }
-  };
-
-  return (
-    <Modal
-      title={<FormattedMessage id='account_note.target' defaultMessage='Note for @{target}' values={{ target: account!.acct }} />}
-      onClose={onClose}
-      confirmationAction={handleSubmit}
-      confirmationText={intl.formatMessage(messages.save)}
-      confirmationDisabled={isSubmitting}
-    >
-      <Text theme='muted'>
-        <FormattedMessage id='account_note.hint' defaultMessage='You can keep notes about this user for yourself (this will not be shared with them):' />
-      </Text>
-
-      <textarea
-        className='setting-text light'
-        placeholder={intl.formatMessage(messages.placeholder)}
-        value={comment}
-        onChange={handleCommentChange}
-        onKeyDown={handleKeyDown}
-        disabled={isSubmitting}
-        autoFocus
-      />
-    </Modal>
-  );
-};
-
-export default AccountNoteModal;

app/soapbox/features/ui/components/modals/join-event-modal.tsx

@@ -12,11 +12,11 @@ const messages = defineMessages({
   join: { id: 'join_event.join', defaultMessage: 'Request join' },
 });
 
-interface IAccountNoteModal {
+interface IJoinEventModal {
   statusId: string
 }
 
-const AccountNoteModal: React.FC<IAccountNoteModal> = ({ statusId }) => {
+const JoinEventModal: React.FC<IJoinEventModal> = ({ statusId }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
@@ -66,4 +66,4 @@ const AccountNoteModal: React.FC<IAccountNoteModal> = ({ statusId }) => {
   );
 };
 
-export default AccountNoteModal;
+export default JoinEventModal;

app/soapbox/features/ui/components/panels/account-note-panel.tsx

@@ -0,0 +1,79 @@
+import debounce from 'lodash/debounce';
+import React, { useEffect, useRef, useState } from 'react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import Textarea from 'react-textarea-autosize';
+
+import { submitAccountNote } from 'soapbox/actions/account-notes';
+import { HStack, Text, Widget } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+
+import type { AppDispatch } from 'soapbox/store';
+import type { Account as AccountEntity } from 'soapbox/types/entities';
+
+const onSave = debounce(
+  (dispatch: AppDispatch, id: string, value: string, callback: () => void) =>
+    dispatch(submitAccountNote(id, value)).then(() => callback()),
+  900,
+);
+
+const messages = defineMessages({
+  placeholder: { id: 'account_note.placeholder', defaultMessage: 'Click to add a note' },
+  saved: { id: 'generic.saved', defaultMessage: 'Saved' },
+});
+
+interface IAccountNotePanel {
+  account: AccountEntity
+}
+
+const AccountNotePanel: React.FC<IAccountNotePanel> = ({ account }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const textarea = useRef<HTMLTextAreaElement>(null);
+
+  const [value, setValue] = useState<string | undefined>(account.relationship?.note);
+  const [saved, setSaved] = useState(false);
+
+  const handleChange: React.ChangeEventHandler<HTMLTextAreaElement> = e => {
+    setValue(e.target.value);
+
+    onSave(dispatch, account.id, e.target.value, () => {
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2000);
+    });
+  };
+
+  useEffect(() => {
+    setValue(account.relationship?.note);
+  }, [account.relationship?.note]);
+
+  if (!account) {
+    return null;
+  }
+
+  return (
+    <Widget
+      title={<HStack space={2} alignItems='center'>
+        <label htmlFor={`account-note-${account.id}`}>
+          <FormattedMessage id='account_note.header' defaultMessage='Note' />
+        </label>
+        {saved && (
+          <Text theme='success' tag='span' className='leading-none'>
+            <FormattedMessage id='generic.saved' defaultMessage='Saved' />
+          </Text>
+        )}
+      </HStack>}
+    >
+      <Textarea
+        id={`account-note-${account.id}`}
+        className='mx-[-8px] w-full resize-none rounded-md border-0 bg-transparent p-2 text-sm text-gray-800 transition-colors placeholder:text-gray-600 focus:border-0 focus:bg-white focus:shadow-none focus:ring-0 motion-reduce:transition-none dark:text-white dark:placeholder:text-gray-600 focus:dark:bg-primary-900'
+        placeholder={intl.formatMessage(messages.placeholder)}
+        value={value || ''}
+        onChange={handleChange}
+        ref={textarea}
+      />
+    </Widget>
+  );
+};
+
+export default AccountNotePanel;

app/soapbox/features/ui/util/async-components.ts

@@ -214,10 +214,6 @@ export function BirthdayPanel() {
   return import(/* webpackChunkName: "features/ui" */'../../../components/birthday-panel');
 }
 
-export function AccountNoteModal() {
-  return import(/* webpackChunkName: "features/ui" */'../components/modals/account-note-modal');
-}
-
 export function ListEditor() {
   return import(/* webpackChunkName: "features/list_editor" */'../../list-editor');
 }
@@ -641,3 +637,7 @@ export function EditAnnouncementModal() {
 export function FollowedTags() {
   return import(/* webpackChunkName: "features/followed-tags" */'../../followed-tags');
 }
+
+export function AccountNotePanel() {
+  return import(/* webpackChunkName: "features/account_note_panel" */'../components/panels/account-note-panel');
+}

app/soapbox/locales/cy.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/el.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/en-Shaw.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "𐑕𐑻𐑗 𐑓 𐑩𐑯 𐑩𐑒𐑬𐑯𐑑",

app/soapbox/locales/en.json

@@ -80,10 +80,8 @@
   "account_moderation_modal.roles.moderator": "Moderator",
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
-  "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
-  "account_note.save": "Save",
-  "account_note.target": "Note for @{target}",
+  "account_note.header": "Note",
+  "account_note.placeholder": "Click to add a note",
   "account_search.placeholder": "Search for an account",
   "actualStatus.edited": "Edited {date}",
   "actualStatuses.quote_tombstone": "Post is unavailable.",
@@ -768,6 +766,7 @@
   "gdpr.learn_more": "Learn more",
   "gdpr.message": "{siteTitle} uses session cookies, which are essential to the website's functioning.",
   "gdpr.title": "{siteTitle} uses cookies",
+  "generic.saved": "Saved",
   "getting_started.open_source_notice": "{code_name} is open source software. You can contribute or report issues at {code_link} (v{code_version}).",
   "group.banned.message": "You are banned from {group}",
   "group.cancel_request": "Cancel Request",

app/soapbox/locales/es-AR.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/fa.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/ga.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/he.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "חפש משתמש",

app/soapbox/locales/hi.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/hu.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/id.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/io.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/kk.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/ko.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/lt.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/lv.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/mk.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/ms.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/nn.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/oc.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/pt-BR.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/pt.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/ro.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/ru.json

@@ -80,7 +80,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/sk.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/sl.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/sr-Latn.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/sr.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/sv.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/ta.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/te.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/th.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/locales/uk.json

@@ -78,7 +78,7 @@
   "account_moderation_modal.roles.user": "User",
   "account_moderation_modal.title": "Moderate @{acct}",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
-  "account_note.placeholder": "No comment provided",
+  "account_note.placeholder": "Click to add a note",
   "account_note.save": "Save",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Search for an account",

app/soapbox/pages/profile-page.tsx

@@ -15,6 +15,7 @@ import {
   SignUpPanel,
   CtaBanner,
   PinnedAccountsPanel,
+  AccountNotePanel,
 } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
 import { getAcct, isLocal } from 'soapbox/utils/accounts';
@@ -117,6 +118,12 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
             {Component => <Component key='sign-up-panel' />}
           </BundleContainer>
         )}
+
+        {features.notes && me !== account?.id && (
+          <BundleContainer fetchComponent={AccountNotePanel}>
+            {Component => <Component account={account} />}
+          </BundleContainer>
+        )}
         <BundleContainer fetchComponent={ProfileMediaPanel}>
           {Component => <Component account={account} />}
         </BundleContainer>

app/soapbox/reducers/account-notes.ts

@@ -1,43 +0,0 @@
-import { Record as ImmutableRecord } from 'immutable';
-
-import {
-  ACCOUNT_NOTE_INIT_MODAL,
-  ACCOUNT_NOTE_CHANGE_COMMENT,
-  ACCOUNT_NOTE_SUBMIT_REQUEST,
-  ACCOUNT_NOTE_SUBMIT_FAIL,
-  ACCOUNT_NOTE_SUBMIT_SUCCESS,
-} from '../actions/account-notes';
-
-import type { AnyAction } from 'redux';
-
-export const EditRecord = ImmutableRecord({
-  isSubmitting: false,
-  account: null as string | null,
-  comment: '',
-});
-
-export const ReducerRecord = ImmutableRecord({
-  edit: EditRecord(),
-});
-
-type State = ReturnType<typeof ReducerRecord>;
-
-export default function account_notes(state: State = ReducerRecord(), action: AnyAction) {
-  switch (action.type) {
-    case ACCOUNT_NOTE_INIT_MODAL:
-      return state.withMutations((state) => {
-        state.setIn(['edit', 'isSubmitting'], false);
-        state.setIn(['edit', 'account'], action.account.get('id'));
-        state.setIn(['edit', 'comment'], action.comment);
-      });
-    case ACCOUNT_NOTE_CHANGE_COMMENT:
-      return state.setIn(['edit', 'comment'], action.comment);
-    case ACCOUNT_NOTE_SUBMIT_REQUEST:
-      return state.setIn(['edit', 'isSubmitting'], true);
-    case ACCOUNT_NOTE_SUBMIT_FAIL:
-    case ACCOUNT_NOTE_SUBMIT_SUCCESS:
-      return state.setIn(['edit', 'isSubmitting'], false);
-    default:
-      return state;
-  }
-}

app/soapbox/reducers/index.ts

@@ -5,7 +5,6 @@ import { AUTH_LOGGED_OUT } from 'soapbox/actions/auth';
 import * as BuildConfig from 'soapbox/build-config';
 import entities from 'soapbox/entity-store/reducer';
 
-import account_notes from './account-notes';
 import accounts_meta from './accounts-meta';
 import admin from './admin';
 import admin_announcements from './admin-announcements';
@@ -68,7 +67,6 @@ import user_lists from './user-lists';
 import verification from './verification';
 
 const reducers = {
-  account_notes,
   accounts_meta,
   admin,
   admin_announcements,
@@ -167,4 +165,4 @@ const rootReducer: typeof appReducer = (state, action) => {
   }
 };
 
-export default rootReducer;
+export default rootReducer;