Add account notes to hover cards (#31300)

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'>

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

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

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;