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

Port 97b9e8befd7355af7a2a2905a16f5f0527f0b48c to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../glitch/components/hover_card_account.tsx  | 18 ++++++++++++++++++
 .../account/components/account_note.jsx       |  2 +-
 .../flavours/glitch/styles/components.scss    | 19 +++++++++++++++++++
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/app/javascript/flavours/glitch/components/hover_card_account.tsx b/app/javascript/flavours/glitch/components/hover_card_account.tsx
index 56f431a786..caec1a84b0 100644
--- a/app/javascript/flavours/glitch/components/hover_card_account.tsx
+++ b/app/javascript/flavours/glitch/components/hover_card_account.tsx
@@ -1,5 +1,7 @@
 import { useEffect, forwardRef } from 'react';
 
+import { FormattedMessage } from 'react-intl';
+
 import classNames from 'classnames';
 
 import { fetchAccount } from 'flavours/glitch/actions/accounts';
@@ -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));
@@ -57,6 +64,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/flavours/glitch/features/account/components/account_note.jsx b/app/javascript/flavours/glitch/features/account/components/account_note.jsx
index 272a4ee312..e736e7ad64 100644
--- a/app/javascript/flavours/glitch/features/account/components/account_note.jsx
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index d238611caf..b8647cd559 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -11177,6 +11177,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;