From 97b9e8befd7355af7a2a2905a16f5f0527f0b48c Mon Sep 17 00:00:00 2001
From: Renaud Chaput <renchap@gmail.com>
Date: Tue, 6 Aug 2024 08:53:59 +0200
Subject: [PATCH] Add account notes to hover cards (#31300)

---
 .../components/hover_card_account.tsx         | 18 ++++++++++++++++++
 .../account/components/account_note.jsx       |  2 +-
 app/javascript/mastodon/locales/en.json       |  2 +-
 .../styles/mastodon/components.scss           | 19 +++++++++++++++++++
 4 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/app/javascript/mastodon/components/hover_card_account.tsx b/app/javascript/mastodon/components/hover_card_account.tsx
index 8933e14a98..05033e4ac7 100644
--- a/app/javascript/mastodon/components/hover_card_account.tsx
+++ b/app/javascript/mastodon/components/hover_card_account.tsx
@@ -1,5 +1,7 @@
 import { useEffect, forwardRef } from 'react';
 
+import { FormattedMessage } from 'react-intl';
+
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 
@@ -25,6 +27,11 @@ export const HoverCardAccount = forwardRef<
     accountId ? state.accounts.get(accountId) : undefined,
   );
 
+  const note = useAppSelector(
+    (state) =>
+      state.relationships.getIn([accountId, 'note']) as string | undefined,
+  );
+
   useEffect(() => {
     if (accountId && !account) {
       dispatch(fetchAccount(accountId));
@@ -53,6 +60,17 @@ export const HoverCardAccount = forwardRef<
               className='hover-card__bio'
             />
             <AccountFields fields={account.fields} limit={2} />
+            {note && note.length > 0 && (
+              <dl className='hover-card__note'>
+                <dt className='hover-card__note-label'>
+                  <FormattedMessage
+                    id='account.account_note_header'
+                    defaultMessage='Personal note'
+                  />
+                </dt>
+                <dd>{note}</dd>
+              </dl>
+            )}
           </div>
 
           <div className='hover-card__number'>
diff --git a/app/javascript/mastodon/features/account/components/account_note.jsx b/app/javascript/mastodon/features/account/components/account_note.jsx
index 272a4ee312..e736e7ad64 100644
--- a/app/javascript/mastodon/features/account/components/account_note.jsx
+++ b/app/javascript/mastodon/features/account/components/account_note.jsx
@@ -151,7 +151,7 @@ class AccountNote extends ImmutablePureComponent {
     return (
       <div className='account__header__account-note'>
         <label htmlFor={`account-note-${account.get('id')}`}>
-          <FormattedMessage id='account.account_note_header' defaultMessage='Note' /> <InlineAlert show={saved} />
+          <FormattedMessage id='account.account_note_header' defaultMessage='Personal note' /> <InlineAlert show={saved} />
         </label>
 
         <Textarea
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index e9a1d1899f..a6fa4764b2 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -11,7 +11,7 @@
   "about.not_available": "This information has not been made available on this server.",
   "about.powered_by": "Decentralized social media powered by {mastodon}",
   "about.rules": "Server rules",
-  "account.account_note_header": "Note",
+  "account.account_note_header": "Personal note",
   "account.add_or_remove_from_list": "Add or Remove from lists",
   "account.badges.bot": "Automated",
   "account.badges.group": "Group",
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index fa25a08150..8ecda33aab 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -10628,6 +10628,25 @@ noscript {
     }
   }
 
+  &__note {
+    &-label {
+      color: $dark-text-color;
+      font-size: 12px;
+      font-weight: 500;
+      text-transform: uppercase;
+    }
+
+    dd {
+      white-space: pre-line;
+      color: $secondary-text-color;
+      overflow: hidden;
+      line-clamp: 3; // Not yet supported in browers
+      display: -webkit-box; // The next 3 properties are needed
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+    }
+  }
+
   .display-name {
     font-size: 15px;
     line-height: 22px;