From bc1b2fc07e839162098f023107d4397aab2fe8db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 12 Sep 2023 00:28:34 +0200
Subject: [PATCH] Move account notes to a panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../actions/__tests__/account-notes.test.ts   | 64 +-------------
 app/soapbox/actions/account-notes.ts          | 84 +++++--------------
 .../features/ui/components/modal-root.tsx     |  2 -
 .../components/modals/account-note-modal.tsx  | 67 ---------------
 .../ui/components/modals/join-event-modal.tsx |  6 +-
 .../components/panels/account-note-panel.tsx  | 79 +++++++++++++++++
 .../features/ui/util/async-components.ts      |  8 +-
 app/soapbox/locales/cy.json                   |  2 +-
 app/soapbox/locales/el.json                   |  2 +-
 app/soapbox/locales/en-Shaw.json              |  2 +-
 app/soapbox/locales/en.json                   |  5 +-
 app/soapbox/locales/es-AR.json                |  2 +-
 app/soapbox/locales/fa.json                   |  2 +-
 app/soapbox/locales/ga.json                   |  2 +-
 app/soapbox/locales/he.json                   |  2 +-
 app/soapbox/locales/hi.json                   |  2 +-
 app/soapbox/locales/hu.json                   |  2 +-
 app/soapbox/locales/id.json                   |  2 +-
 app/soapbox/locales/io.json                   |  2 +-
 app/soapbox/locales/kk.json                   |  2 +-
 app/soapbox/locales/ko.json                   |  2 +-
 app/soapbox/locales/lt.json                   |  2 +-
 app/soapbox/locales/lv.json                   |  2 +-
 app/soapbox/locales/mk.json                   |  2 +-
 app/soapbox/locales/ms.json                   |  2 +-
 app/soapbox/locales/nn.json                   |  2 +-
 app/soapbox/locales/oc.json                   |  2 +-
 app/soapbox/locales/pt-BR.json                |  2 +-
 app/soapbox/locales/pt.json                   |  2 +-
 app/soapbox/locales/ro.json                   |  2 +-
 app/soapbox/locales/ru.json                   |  2 +-
 app/soapbox/locales/sk.json                   |  2 +-
 app/soapbox/locales/sl.json                   |  2 +-
 app/soapbox/locales/sr-Latn.json              |  2 +-
 app/soapbox/locales/sr.json                   |  2 +-
 app/soapbox/locales/sv.json                   |  2 +-
 app/soapbox/locales/ta.json                   |  2 +-
 app/soapbox/locales/te.json                   |  2 +-
 app/soapbox/locales/th.json                   |  2 +-
 app/soapbox/locales/uk.json                   |  2 +-
 app/soapbox/pages/profile-page.tsx            |  7 ++
 app/soapbox/reducers/account-notes.ts         | 43 ----------
 app/soapbox/reducers/index.ts                 |  4 +-
 43 files changed, 154 insertions(+), 279 deletions(-)
 delete mode 100644 app/soapbox/features/ui/components/modals/account-note-modal.tsx
 create mode 100644 app/soapbox/features/ui/components/panels/account-note-panel.tsx
 delete mode 100644 app/soapbox/reducers/account-notes.ts

diff --git a/app/soapbox/actions/__tests__/account-notes.test.ts b/app/soapbox/actions/__tests__/account-notes.test.ts
index fdae308381..53c1c85dfc 100644
--- a/app/soapbox/actions/__tests__/account-notes.test.ts
+++ b/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);
-  });
-});
diff --git a/app/soapbox/actions/account-notes.ts b/app/soapbox/actions/account-notes.ts
index 691f63fc34..0194c6f81a 100644
--- a/app/soapbox/actions/account-notes.ts
+++ b/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,
 };
diff --git a/app/soapbox/features/ui/components/modal-root.tsx b/app/soapbox/features/ui/components/modal-root.tsx
index 08fd4c88cb..86d1b55ccf 100644
--- a/app/soapbox/features/ui/components/modal-root.tsx
+++ b/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,
diff --git a/app/soapbox/features/ui/components/modals/account-note-modal.tsx b/app/soapbox/features/ui/components/modals/account-note-modal.tsx
deleted file mode 100644
index 95afc614e0..0000000000
--- a/app/soapbox/features/ui/components/modals/account-note-modal.tsx
+++ /dev/null
@@ -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;
diff --git a/app/soapbox/features/ui/components/modals/join-event-modal.tsx b/app/soapbox/features/ui/components/modals/join-event-modal.tsx
index be72049dc0..9aa0573c91 100644
--- a/app/soapbox/features/ui/components/modals/join-event-modal.tsx
+++ b/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;
diff --git a/app/soapbox/features/ui/components/panels/account-note-panel.tsx b/app/soapbox/features/ui/components/panels/account-note-panel.tsx
new file mode 100644
index 0000000000..48c950f66e
--- /dev/null
+++ b/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.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;
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index 4891185fab..cb6d97fa44 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/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');
+}
diff --git a/app/soapbox/locales/cy.json b/app/soapbox/locales/cy.json
index 7a744faa76..2cc15302a4 100644
--- a/app/soapbox/locales/cy.json
+++ b/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",
diff --git a/app/soapbox/locales/el.json b/app/soapbox/locales/el.json
index 11dd34a954..7712c66394 100644
--- a/app/soapbox/locales/el.json
+++ b/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",
diff --git a/app/soapbox/locales/en-Shaw.json b/app/soapbox/locales/en-Shaw.json
index a9de4534c9..9ff22f170d 100644
--- a/app/soapbox/locales/en-Shaw.json
+++ b/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": "𐑕𐑻𐑗 𐑓 𐑩𐑯 𐑩𐑒𐑬𐑯𐑑",
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index f2ac576c9c..724a7267a2 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -80,10 +80,7 @@
   "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.placeholder": "Click to add a note",
   "account_search.placeholder": "Search for an account",
   "actualStatus.edited": "Edited {date}",
   "actualStatuses.quote_tombstone": "Post is unavailable.",
diff --git a/app/soapbox/locales/es-AR.json b/app/soapbox/locales/es-AR.json
index 4889eccb12..7ee1ef56c9 100644
--- a/app/soapbox/locales/es-AR.json
+++ b/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",
diff --git a/app/soapbox/locales/fa.json b/app/soapbox/locales/fa.json
index a149224fd3..72b1f52aa6 100644
--- a/app/soapbox/locales/fa.json
+++ b/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",
diff --git a/app/soapbox/locales/ga.json b/app/soapbox/locales/ga.json
index 067f5f658d..0fe6bce73d 100644
--- a/app/soapbox/locales/ga.json
+++ b/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",
diff --git a/app/soapbox/locales/he.json b/app/soapbox/locales/he.json
index 81900f19e7..18cc11ab9e 100644
--- a/app/soapbox/locales/he.json
+++ b/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": "חפש משתמש",
diff --git a/app/soapbox/locales/hi.json b/app/soapbox/locales/hi.json
index de296af488..26f17eabd9 100644
--- a/app/soapbox/locales/hi.json
+++ b/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",
diff --git a/app/soapbox/locales/hu.json b/app/soapbox/locales/hu.json
index 1f38a2c99b..61427f05c7 100644
--- a/app/soapbox/locales/hu.json
+++ b/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",
diff --git a/app/soapbox/locales/id.json b/app/soapbox/locales/id.json
index 5e1d995a9d..99a83de89a 100644
--- a/app/soapbox/locales/id.json
+++ b/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",
diff --git a/app/soapbox/locales/io.json b/app/soapbox/locales/io.json
index 86c9be31d8..3223be4e45 100644
--- a/app/soapbox/locales/io.json
+++ b/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",
diff --git a/app/soapbox/locales/kk.json b/app/soapbox/locales/kk.json
index 66b46b379c..274a3d70cc 100644
--- a/app/soapbox/locales/kk.json
+++ b/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",
diff --git a/app/soapbox/locales/ko.json b/app/soapbox/locales/ko.json
index e83e30cd41..cc417e0f00 100644
--- a/app/soapbox/locales/ko.json
+++ b/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",
diff --git a/app/soapbox/locales/lt.json b/app/soapbox/locales/lt.json
index 8a1efef344..0403148a13 100644
--- a/app/soapbox/locales/lt.json
+++ b/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",
diff --git a/app/soapbox/locales/lv.json b/app/soapbox/locales/lv.json
index 3843b76894..316108f574 100644
--- a/app/soapbox/locales/lv.json
+++ b/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",
diff --git a/app/soapbox/locales/mk.json b/app/soapbox/locales/mk.json
index 1ca5d7e3d3..71040715f5 100644
--- a/app/soapbox/locales/mk.json
+++ b/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",
diff --git a/app/soapbox/locales/ms.json b/app/soapbox/locales/ms.json
index 6592f766e3..754f5ed73e 100644
--- a/app/soapbox/locales/ms.json
+++ b/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",
diff --git a/app/soapbox/locales/nn.json b/app/soapbox/locales/nn.json
index 585c19eb40..2abb8a6e03 100644
--- a/app/soapbox/locales/nn.json
+++ b/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",
diff --git a/app/soapbox/locales/oc.json b/app/soapbox/locales/oc.json
index 990a485502..d30719b58f 100644
--- a/app/soapbox/locales/oc.json
+++ b/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",
diff --git a/app/soapbox/locales/pt-BR.json b/app/soapbox/locales/pt-BR.json
index 83f2ca46fb..54b6d9d006 100644
--- a/app/soapbox/locales/pt-BR.json
+++ b/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",
diff --git a/app/soapbox/locales/pt.json b/app/soapbox/locales/pt.json
index 0a9fa432c4..7f644118a4 100644
--- a/app/soapbox/locales/pt.json
+++ b/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",
diff --git a/app/soapbox/locales/ro.json b/app/soapbox/locales/ro.json
index fd371ba400..d94c7dbdf9 100644
--- a/app/soapbox/locales/ro.json
+++ b/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",
diff --git a/app/soapbox/locales/ru.json b/app/soapbox/locales/ru.json
index 079a57918c..94fb0f5cb6 100644
--- a/app/soapbox/locales/ru.json
+++ b/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",
diff --git a/app/soapbox/locales/sk.json b/app/soapbox/locales/sk.json
index ce440b9543..b47b9bf274 100644
--- a/app/soapbox/locales/sk.json
+++ b/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",
diff --git a/app/soapbox/locales/sl.json b/app/soapbox/locales/sl.json
index c342c9c48e..ec07cf9b38 100644
--- a/app/soapbox/locales/sl.json
+++ b/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",
diff --git a/app/soapbox/locales/sr-Latn.json b/app/soapbox/locales/sr-Latn.json
index c6cd4def5d..3ac4238527 100644
--- a/app/soapbox/locales/sr-Latn.json
+++ b/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",
diff --git a/app/soapbox/locales/sr.json b/app/soapbox/locales/sr.json
index 9f708598d6..19dd15da40 100644
--- a/app/soapbox/locales/sr.json
+++ b/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",
diff --git a/app/soapbox/locales/sv.json b/app/soapbox/locales/sv.json
index 2a1a4457b9..e7456c2b84 100644
--- a/app/soapbox/locales/sv.json
+++ b/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",
diff --git a/app/soapbox/locales/ta.json b/app/soapbox/locales/ta.json
index 84a866c7be..5e8eaee23f 100644
--- a/app/soapbox/locales/ta.json
+++ b/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",
diff --git a/app/soapbox/locales/te.json b/app/soapbox/locales/te.json
index ae695354f7..338a02b939 100644
--- a/app/soapbox/locales/te.json
+++ b/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",
diff --git a/app/soapbox/locales/th.json b/app/soapbox/locales/th.json
index c561c1dc5b..d7f9c0e581 100644
--- a/app/soapbox/locales/th.json
+++ b/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",
diff --git a/app/soapbox/locales/uk.json b/app/soapbox/locales/uk.json
index 9cfd5ddf0a..834940443b 100644
--- a/app/soapbox/locales/uk.json
+++ b/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",
diff --git a/app/soapbox/pages/profile-page.tsx b/app/soapbox/pages/profile-page.tsx
index 75c4c7ecc2..698edff77b 100644
--- a/app/soapbox/pages/profile-page.tsx
+++ b/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>
diff --git a/app/soapbox/reducers/account-notes.ts b/app/soapbox/reducers/account-notes.ts
deleted file mode 100644
index 0f30b8d604..0000000000
--- a/app/soapbox/reducers/account-notes.ts
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/app/soapbox/reducers/index.ts b/app/soapbox/reducers/index.ts
index 1426954748..0c567df5b7 100644
--- a/app/soapbox/reducers/index.ts
+++ b/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;
\ No newline at end of file
+export default rootReducer;