From a262f990f8a7b81d82725f1295c698f4ec68b4ad Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 25 Mar 2023 08:46:32 +0100
Subject: [PATCH 01/16] Change design of account rows in web UI (#24247)

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/account.jsx    | 62 +++++++++++++++----
 .../glitch/styles/components/accounts.scss    | 23 +++++--
 .../glitch/styles/components/status.scss      |  6 +-
 3 files changed, 73 insertions(+), 18 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx
index 78cf59e345..77c7a71945 100644
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@@ -6,6 +6,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import { Skeleton } from 'flavours/glitch/components/skeleton';
+import { counterRenderer } from 'flavours/glitch/components/common_counter';
+import ShortNumber from 'flavours/glitch/components/short_number';
+import Icon from 'flavours/glitch/components/icon';
 
 import { me } from '../initial_state';
 
@@ -27,6 +30,26 @@ const messages = defineMessages({
   block: { id: 'account.block', defaultMessage: 'Block @{name}' },
 });
 
+class VerifiedBadge extends React.PureComponent {
+
+  static propTypes = {
+    link: PropTypes.string.isRequired,
+    verifiedAt: PropTypes.string.isRequired,
+  };
+
+  render () {
+    const { link } = this.props;
+
+    return (
+      <span className='verified-badge'>
+        <Icon id='check' className='verified-badge__mark' />
+        <span dangerouslySetInnerHTML={{ __html: link }} />
+      </span>
+    );
+  }
+
+}
+
 class Account extends ImmutablePureComponent {
 
   static propTypes = {
@@ -81,7 +104,11 @@ class Account extends ImmutablePureComponent {
           <div className='account__wrapper'>
             <div className='account__display-name'>
               <div className='account__avatar-wrapper'><Skeleton width={36} height={36} /></div>
-              <DisplayName />
+
+              <div>
+                <DisplayName />
+                <Skeleton width='7ch' />
+              </div>
             </div>
           </div>
         </div>
@@ -135,24 +162,37 @@ class Account extends ImmutablePureComponent {
       }
     }
 
-    let mute_expires_at;
+    let muteTimeRemaining;
+
     if (account.get('mute_expires_at')) {
-      mute_expires_at =  <div><RelativeTimestamp timestamp={account.get('mute_expires_at')} futureDate /></div>;
+      muteTimeRemaining = <>· <RelativeTimestamp timestamp={account.get('mute_expires_at')} futureDate /></>;
+    }
+
+    let verification;
+
+    const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at'));
+
+    if (firstVerifiedField) {
+      verification = <>· <VerifiedBadge link={firstVerifiedField.get('value')} verifiedAt={firstVerifiedField.get('verified_at')} /></>;
     }
 
     return (
       <div className='account'>
         <div className='account__wrapper'>
           <Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
-            <div className='account__avatar-wrapper'><Avatar account={account} size={size} /></div>
-            {mute_expires_at}
-            <DisplayName account={account} />
-          </Permalink>
-          {buttons ?
-            <div className='account__relationship'>
-              {buttons}
+            <div className='account__avatar-wrapper'>
+              <Avatar account={account} size={size} />
             </div>
-            : null}
+
+            <div>
+              <DisplayName account={account} />
+              <ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining}
+            </div>
+          </Permalink>
+
+          <div className='account__relationship'>
+            {buttons}
+          </div>
         </div>
       </div>
     );
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index 5d4426fbc6..f84158b384 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -12,10 +12,12 @@
     text-decoration: none;
     font-size: 14px;
 
-    &--with-note {
-      strong {
-        display: inline;
-      }
+    .display-name {
+      margin-bottom: 4px;
+    }
+
+    .display-name strong {
+      display: inline;
     }
   }
 
@@ -749,6 +751,19 @@
   }
 }
 
+.verified-badge {
+  display: inline-flex;
+  align-items: center;
+  color: $valid-value-color;
+  gap: 4px;
+
+  a {
+    color: inherit;
+    font-weight: 500;
+    text-decoration: none;
+  }
+}
+
 .moved-account-banner,
 .follow-request-banner,
 .account-memorial-banner {
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index 0b720637de..85e3165a88 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -626,7 +626,7 @@
 
 .status__display-name,
 .account__display-name {
-  strong {
+  .display-name strong {
     color: $primary-text-color;
   }
 }
@@ -641,12 +641,12 @@ a.status__display-name,
 .reply-indicator__display-name,
 .detailed-status__display-name,
 .account__display-name {
-  &:hover strong {
+  &:hover .display-name strong {
     text-decoration: underline;
   }
 }
 
-.account__display-name strong {
+.account__display-name .display-name strong {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;

From e0aba64a64257e00b3afdecfa76e6a42246e78a4 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 1 Apr 2023 09:27:23 +0200
Subject: [PATCH 02/16] [Glitch] Fix regressions from change in account row
 design in web UI

Port 46483ae849bc06ee74f4745f4564b213e742c51c

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/account.jsx    | 20 +++++++++++--------
 .../glitch/components/server_banner.jsx       |  2 +-
 .../flavours/glitch/features/about/index.jsx  |  2 +-
 .../glitch/styles/components/accounts.scss    | 12 +++++++++++
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx
index 77c7a71945..d94d51067d 100644
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@@ -9,6 +9,7 @@ import { Skeleton } from 'flavours/glitch/components/skeleton';
 import { counterRenderer } from 'flavours/glitch/components/common_counter';
 import ShortNumber from 'flavours/glitch/components/short_number';
 import Icon from 'flavours/glitch/components/icon';
+import classNames from 'classnames';
 
 import { me } from '../initial_state';
 
@@ -61,6 +62,7 @@ class Account extends ImmutablePureComponent {
     onMuteNotifications: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
     hidden: PropTypes.bool,
+    minimal: PropTypes.bool,
     actionIcon: PropTypes.string,
     actionTitle: PropTypes.string,
     defaultAction: PropTypes.string,
@@ -96,14 +98,14 @@ class Account extends ImmutablePureComponent {
   };
 
   render () {
-    const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size } = this.props;
+    const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props;
 
     if (!account) {
       return (
-        <div className='account'>
+        <div className={classNames('account', { 'account--minimal': minimal })}>
           <div className='account__wrapper'>
             <div className='account__display-name'>
-              <div className='account__avatar-wrapper'><Skeleton width={36} height={36} /></div>
+              <div className='account__avatar-wrapper'><Skeleton width={size} height={size} /></div>
 
               <div>
                 <DisplayName />
@@ -177,7 +179,7 @@ class Account extends ImmutablePureComponent {
     }
 
     return (
-      <div className='account'>
+      <div className={classNames('account', { 'account--minimal': minimal })}>
         <div className='account__wrapper'>
           <Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
             <div className='account__avatar-wrapper'>
@@ -186,13 +188,15 @@ class Account extends ImmutablePureComponent {
 
             <div>
               <DisplayName account={account} />
-              <ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining}
+              {!minimal && <><ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining}</>}
             </div>
           </Permalink>
 
-          <div className='account__relationship'>
-            {buttons}
-          </div>
+          {!minimal && (
+            <div className='account__relationship'>
+              {buttons}
+            </div>
+          )}
         </div>
       </div>
     );
diff --git a/app/javascript/flavours/glitch/components/server_banner.jsx b/app/javascript/flavours/glitch/components/server_banner.jsx
index 677e13706b..1b449ff1a8 100644
--- a/app/javascript/flavours/glitch/components/server_banner.jsx
+++ b/app/javascript/flavours/glitch/components/server_banner.jsx
@@ -63,7 +63,7 @@ class ServerBanner extends PureComponent {
           <div className='server-banner__meta__column'>
             <h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4>
 
-            <Account id={server.getIn(['contact', 'account', 'id'])} size={36} />
+            <Account id={server.getIn(['contact', 'account', 'id'])} size={36} minimal />
           </div>
 
           <div className='server-banner__meta__column'>
diff --git a/app/javascript/flavours/glitch/features/about/index.jsx b/app/javascript/flavours/glitch/features/about/index.jsx
index 79b5f8114e..0b78385562 100644
--- a/app/javascript/flavours/glitch/features/about/index.jsx
+++ b/app/javascript/flavours/glitch/features/about/index.jsx
@@ -128,7 +128,7 @@ class About extends PureComponent {
             <div className='about__meta__column'>
               <h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4>
 
-              <Account id={server.getIn(['contact', 'account', 'id'])} size={36} />
+              <Account id={server.getIn(['contact', 'account', 'id'])} size={36} minimal />
             </div>
 
             <hr className='about__meta__divider' />
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index f84158b384..1330b412e7 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -21,6 +21,18 @@
     }
   }
 
+  &--minimal {
+    .account__display-name {
+      .display-name {
+        margin-bottom: 0;
+      }
+
+      .display-name strong {
+        display: block;
+      }
+    }
+  }
+
   &__note {
     overflow: hidden;
     text-overflow: ellipsis;

From 00db5c8ade430d7d51661323d79f0c955faa5821 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sun, 23 Apr 2023 22:24:53 +0200
Subject: [PATCH 03/16] [Glitch] Split VerifiedBadge from Account component

Partial port of 0461f83320378fb8cee679da896ce35cec5bcbf3 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/account.jsx    | 22 +---------------
 .../glitch/components/verified_badge.jsx      | 25 +++++++++++++++++++
 2 files changed, 26 insertions(+), 21 deletions(-)
 create mode 100644 app/javascript/flavours/glitch/components/verified_badge.jsx

diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx
index d94d51067d..4eda14daf4 100644
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@@ -8,8 +8,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { Skeleton } from 'flavours/glitch/components/skeleton';
 import { counterRenderer } from 'flavours/glitch/components/common_counter';
 import ShortNumber from 'flavours/glitch/components/short_number';
-import Icon from 'flavours/glitch/components/icon';
 import classNames from 'classnames';
+import VerifiedBadge from 'flavours/glitch/components/verified_badge';
 
 import { me } from '../initial_state';
 
@@ -31,26 +31,6 @@ const messages = defineMessages({
   block: { id: 'account.block', defaultMessage: 'Block @{name}' },
 });
 
-class VerifiedBadge extends React.PureComponent {
-
-  static propTypes = {
-    link: PropTypes.string.isRequired,
-    verifiedAt: PropTypes.string.isRequired,
-  };
-
-  render () {
-    const { link } = this.props;
-
-    return (
-      <span className='verified-badge'>
-        <Icon id='check' className='verified-badge__mark' />
-        <span dangerouslySetInnerHTML={{ __html: link }} />
-      </span>
-    );
-  }
-
-}
-
 class Account extends ImmutablePureComponent {
 
   static propTypes = {
diff --git a/app/javascript/flavours/glitch/components/verified_badge.jsx b/app/javascript/flavours/glitch/components/verified_badge.jsx
new file mode 100644
index 0000000000..575cbcde1a
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/verified_badge.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from 'flavours/glitch/components/icon';
+
+class VerifiedBadge extends React.PureComponent {
+
+  static propTypes = {
+    link: PropTypes.string.isRequired,
+    verifiedAt: PropTypes.string.isRequired,
+  };
+
+  render () {
+    const { link } = this.props;
+
+    return (
+      <span className='verified-badge'>
+        <Icon id='check' className='verified-badge__mark' />
+        <span dangerouslySetInnerHTML={{ __html: link }} />
+      </span>
+    );
+  }
+
+}
+
+export default VerifiedBadge;
\ No newline at end of file

From 2efb22f455fafccdd89c0902bd670ede0b055822 Mon Sep 17 00:00:00 2001
From: fusagiko / takayamaki <24884114+takayamaki@users.noreply.github.com>
Date: Sun, 7 May 2023 16:10:58 +0900
Subject: [PATCH 04/16] [Glitch] Rewrite VerifiedBadge component as function
 component

Port 140aa6b054bb73b10a33bda17090453dd550267a to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/account.jsx    |  2 +-
 .../glitch/components/verified_badge.jsx      | 25 -------------------
 .../glitch/components/verified_badge.tsx      | 14 +++++++++++
 3 files changed, 15 insertions(+), 26 deletions(-)
 delete mode 100644 app/javascript/flavours/glitch/components/verified_badge.jsx
 create mode 100644 app/javascript/flavours/glitch/components/verified_badge.tsx

diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx
index 4eda14daf4..834d945d86 100644
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@@ -155,7 +155,7 @@ class Account extends ImmutablePureComponent {
     const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at'));
 
     if (firstVerifiedField) {
-      verification = <>· <VerifiedBadge link={firstVerifiedField.get('value')} verifiedAt={firstVerifiedField.get('verified_at')} /></>;
+      verification = <>· <VerifiedBadge link={firstVerifiedField.get('value')} /></>;
     }
 
     return (
diff --git a/app/javascript/flavours/glitch/components/verified_badge.jsx b/app/javascript/flavours/glitch/components/verified_badge.jsx
deleted file mode 100644
index 575cbcde1a..0000000000
--- a/app/javascript/flavours/glitch/components/verified_badge.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Icon from 'flavours/glitch/components/icon';
-
-class VerifiedBadge extends React.PureComponent {
-
-  static propTypes = {
-    link: PropTypes.string.isRequired,
-    verifiedAt: PropTypes.string.isRequired,
-  };
-
-  render () {
-    const { link } = this.props;
-
-    return (
-      <span className='verified-badge'>
-        <Icon id='check' className='verified-badge__mark' />
-        <span dangerouslySetInnerHTML={{ __html: link }} />
-      </span>
-    );
-  }
-
-}
-
-export default VerifiedBadge;
\ No newline at end of file
diff --git a/app/javascript/flavours/glitch/components/verified_badge.tsx b/app/javascript/flavours/glitch/components/verified_badge.tsx
new file mode 100644
index 0000000000..78686b521b
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/verified_badge.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon } from './icon';
+
+type Props = {
+  link: string;
+};
+export const VerifiedBadge: React.FC<Props> = ({ link }) => (
+  <span className='verified-badge'>
+    <Icon id='check' className='verified-badge__mark' />
+    <span dangerouslySetInnerHTML={{ __html: link }} />
+  </span>
+);
+
+export default VerifiedBadge;

From e7ec2641a0270c24057d2cb679115084fdd76d85 Mon Sep 17 00:00:00 2001
From: Renaud Chaput <renchap@gmail.com>
Date: Tue, 9 May 2023 03:11:56 +0200
Subject: [PATCH 05/16] [Glitch] Fix linting issues with VerifiedBadge
 component

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 app/javascript/flavours/glitch/components/account.jsx      | 2 +-
 .../flavours/glitch/components/verified_badge.tsx          | 7 ++-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx
index 834d945d86..65c39ab48c 100644
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@@ -9,7 +9,7 @@ import { Skeleton } from 'flavours/glitch/components/skeleton';
 import { counterRenderer } from 'flavours/glitch/components/common_counter';
 import ShortNumber from 'flavours/glitch/components/short_number';
 import classNames from 'classnames';
-import VerifiedBadge from 'flavours/glitch/components/verified_badge';
+import { VerifiedBadge } from 'flavours/glitch/components/verified_badge';
 
 import { me } from '../initial_state';
 
diff --git a/app/javascript/flavours/glitch/components/verified_badge.tsx b/app/javascript/flavours/glitch/components/verified_badge.tsx
index 78686b521b..6b421ba42c 100644
--- a/app/javascript/flavours/glitch/components/verified_badge.tsx
+++ b/app/javascript/flavours/glitch/components/verified_badge.tsx
@@ -1,14 +1,11 @@
-import React from 'react';
 import { Icon } from './icon';
 
-type Props = {
+interface Props {
   link: string;
-};
+}
 export const VerifiedBadge: React.FC<Props> = ({ link }) => (
   <span className='verified-badge'>
     <Icon id='check' className='verified-badge__mark' />
     <span dangerouslySetInnerHTML={{ __html: link }} />
   </span>
 );
-
-export default VerifiedBadge;

From 32ec0d2472d89d6b5c5920df364b0ace547c13a0 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Sat, 24 Jun 2023 17:24:31 +0200
Subject: [PATCH 06/16] [Glitch] Fix verified badge in account lists
 potentially including rel="me" links

Port 55e7c08a83547424024bac311d5459cb82cf6dae to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../glitch/components/verified_badge.tsx       | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/app/javascript/flavours/glitch/components/verified_badge.tsx b/app/javascript/flavours/glitch/components/verified_badge.tsx
index 6b421ba42c..9a6adcfa86 100644
--- a/app/javascript/flavours/glitch/components/verified_badge.tsx
+++ b/app/javascript/flavours/glitch/components/verified_badge.tsx
@@ -1,11 +1,27 @@
 import { Icon } from './icon';
 
+const domParser = new DOMParser();
+
+const stripRelMe = (html: string) => {
+  const document = domParser.parseFromString(html, 'text/html').documentElement;
+
+  document.querySelectorAll<HTMLAnchorElement>('a[rel]').forEach((link) => {
+    link.rel = link.rel
+      .split(' ')
+      .filter((x: string) => x !== 'me')
+      .join(' ');
+  });
+
+  const body = document.querySelector('body');
+  return body ? { __html: body.innerHTML } : undefined;
+};
+
 interface Props {
   link: string;
 }
 export const VerifiedBadge: React.FC<Props> = ({ link }) => (
   <span className='verified-badge'>
     <Icon id='check' className='verified-badge__mark' />
-    <span dangerouslySetInnerHTML={{ __html: link }} />
+    <span dangerouslySetInnerHTML={stripRelMe(link)} />
   </span>
 );

From b8cbaba283e84c4811729d456cbf835fd60e8266 Mon Sep 17 00:00:00 2001
From: Emelia Smith <ThisIsMissEm@users.noreply.github.com>
Date: Thu, 11 May 2023 07:55:10 +0200
Subject: [PATCH 07/16] [Glitch] Split `EmptyAccount` out of `Account`
 component

Partial port of b8a2430642ac3a7d181ea078fb04654e2a200934 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/account.jsx    | 17 ++--------
 .../glitch/components/empty_account.tsx       | 33 +++++++++++++++++++
 2 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 app/javascript/flavours/glitch/components/empty_account.tsx

diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx
index 65c39ab48c..6a0c2ae917 100644
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@@ -5,11 +5,11 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { Skeleton } from 'flavours/glitch/components/skeleton';
 import { counterRenderer } from 'flavours/glitch/components/common_counter';
 import ShortNumber from 'flavours/glitch/components/short_number';
 import classNames from 'classnames';
 import { VerifiedBadge } from 'flavours/glitch/components/verified_badge';
+import { EmptyAccount } from 'flavours/glitch/components/empty_account';
 
 import { me } from '../initial_state';
 
@@ -81,20 +81,7 @@ class Account extends ImmutablePureComponent {
     const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props;
 
     if (!account) {
-      return (
-        <div className={classNames('account', { 'account--minimal': minimal })}>
-          <div className='account__wrapper'>
-            <div className='account__display-name'>
-              <div className='account__avatar-wrapper'><Skeleton width={size} height={size} /></div>
-
-              <div>
-                <DisplayName />
-                <Skeleton width='7ch' />
-              </div>
-            </div>
-          </div>
-        </div>
-      );
+      return <EmptyAccount size={size} minimal={minimal} />;
     }
 
     if (hidden) {
diff --git a/app/javascript/flavours/glitch/components/empty_account.tsx b/app/javascript/flavours/glitch/components/empty_account.tsx
new file mode 100644
index 0000000000..55322fb575
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/empty_account.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { DisplayName } from 'flavours/glitch/components/display_name';
+import { Skeleton } from 'flavours/glitch/components/skeleton';
+
+interface Props {
+  size?: number;
+  minimal?: boolean;
+}
+
+export const EmptyAccount: React.FC<Props> = ({
+  size = 46,
+  minimal = false,
+}) => {
+  return (
+    <div className={classNames('account', { 'account--minimal': minimal })}>
+      <div className='account__wrapper'>
+        <div className='account__display-name'>
+          <div className='account__avatar-wrapper'>
+            <Skeleton width={size} height={size} />
+          </div>
+
+          <div>
+            <DisplayName />
+            <Skeleton width='7ch' />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

From b047b981cd8367308e744fed0fe70137152cecc7 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Sat, 2 Dec 2023 16:27:12 +0100
Subject: [PATCH 08/16] [Glitch] Enforce import order with ESLint

Port d27216dc4616d80659c0cc5d2a55394e0e1ae874 to glitch-soc
---
 app/javascript/flavours/glitch/components/account.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx
index 6a0c2ae917..78b39dfb63 100644
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@@ -2,14 +2,16 @@ import PropTypes from 'prop-types';
 
 import { defineMessages, injectIntl } from 'react-intl';
 
+import classNames from 'classnames';
+
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import { counterRenderer } from 'flavours/glitch/components/common_counter';
-import ShortNumber from 'flavours/glitch/components/short_number';
-import classNames from 'classnames';
-import { VerifiedBadge } from 'flavours/glitch/components/verified_badge';
+
 import { EmptyAccount } from 'flavours/glitch/components/empty_account';
+import ShortNumber from 'flavours/glitch/components/short_number';
+import { VerifiedBadge } from 'flavours/glitch/components/verified_badge';
 
 import { me } from '../initial_state';
 

From 98a7b95058e8851d774bbe9878eb2aa1179713a9 Mon Sep 17 00:00:00 2001
From: Renaud Chaput <renchap@gmail.com>
Date: Wed, 24 May 2023 12:38:50 +0200
Subject: [PATCH 09/16] [Glitch] Update inconsistent `defaultMessage` in
 `Account` component

Partial port of e58c36d308f7e7e26154837d53da0185a0db7f16 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 app/javascript/flavours/glitch/components/account.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx
index 78b39dfb63..249b0d5c77 100644
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@@ -24,7 +24,7 @@ import { RelativeTimestamp } from './relative_timestamp';
 const messages = defineMessages({
   follow: { id: 'account.follow', defaultMessage: 'Follow' },
   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
-  requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' },
+  requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
   unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
   unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
   mute_notifications: { id: 'account.mute_notifications', defaultMessage: 'Mute notifications from @{name}' },

From f1691eca556b95b89704ba6dc4880eef9b4e5b14 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Thu, 1 Jun 2023 14:47:55 +0200
Subject: [PATCH 10/16] [Glitch] Fix overflow behavior of account rows

Port 5fae2de454806730742b7be7435ae1c4fb97cf3c to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/account.jsx      | 10 +++++++---
 .../glitch/styles/components/accounts.scss      | 17 +++++++++++++++++
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx
index 249b0d5c77..d4ebd2801a 100644
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@@ -144,7 +144,7 @@ class Account extends ImmutablePureComponent {
     const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at'));
 
     if (firstVerifiedField) {
-      verification = <>· <VerifiedBadge link={firstVerifiedField.get('value')} /></>;
+      verification = <VerifiedBadge link={firstVerifiedField.get('value')} />;
     }
 
     return (
@@ -155,9 +155,13 @@ class Account extends ImmutablePureComponent {
               <Avatar account={account} size={size} />
             </div>
 
-            <div>
+            <div className='account__contents'>
               <DisplayName account={account} />
-              {!minimal && <><ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining}</>}
+              {!minimal && (
+                <div className='account__details'>
+                  <ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining}
+                </div>
+              )}
             </div>
           </Permalink>
 
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index 1330b412e7..7b265c9c35 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -763,11 +763,28 @@
   }
 }
 
+.account__contents {
+  overflow: hidden;
+}
+
+.account__details {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 1em;
+}
+
 .verified-badge {
   display: inline-flex;
   align-items: center;
   color: $valid-value-color;
   gap: 4px;
+  overflow: hidden;
+  white-space: nowrap;
+
+  > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
   a {
     color: inherit;

From 0421b44f222e102d7f9e9082bb4dfe7085df5593 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Tue, 6 Jun 2023 04:14:28 +0200
Subject: [PATCH 11/16] [Glitch] Change follow button in account row to be more
 obvious in web UI (#24956)

Port 0ddc89528213859bf4caeefd475a93ed973ab0e0 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/account.jsx    | 41 ++++++++++---------
 .../glitch/styles/components/accounts.scss    |  6 ++-
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx
index d4ebd2801a..663c614cd1 100644
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@@ -16,6 +16,7 @@ import { VerifiedBadge } from 'flavours/glitch/components/verified_badge';
 import { me } from '../initial_state';
 
 import { Avatar } from './avatar';
+import Button from './button';
 import { DisplayName } from './display_name';
 import { IconButton } from './icon_button';
 import Permalink from './permalink';
@@ -24,13 +25,13 @@ import { RelativeTimestamp } from './relative_timestamp';
 const messages = defineMessages({
   follow: { id: 'account.follow', defaultMessage: 'Follow' },
   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
-  requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
-  unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
-  unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
-  mute_notifications: { id: 'account.mute_notifications', defaultMessage: 'Mute notifications from @{name}' },
-  unmute_notifications: { id: 'account.unmute_notifications', defaultMessage: 'Unmute notifications from @{name}' },
-  mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
-  block: { id: 'account.block', defaultMessage: 'Block @{name}' },
+  cancel_follow_request: { id: 'account.cancel_follow_request', defaultMessage: 'Withdraw follow request' },
+  unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' },
+  unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' },
+  mute_notifications: { id: 'account.mute_notifications_short', defaultMessage: 'Mute notifications' },
+  unmute_notifications: { id: 'account.unmute_notifications_short', defaultMessage: 'Unmute notifications' },
+  mute: { id: 'account.mute_short', defaultMessage: 'Mute' },
+  block: { id: 'account.block_short', defaultMessage: 'Block' },
 });
 
 class Account extends ImmutablePureComponent {
@@ -97,39 +98,39 @@ class Account extends ImmutablePureComponent {
 
     let buttons;
 
-    if (onActionClick) {
-      if (actionIcon) {
-        buttons = <IconButton icon={actionIcon} title={actionTitle} onClick={this.handleAction} />;
-      }
-    } else if (account.get('id') !== me && account.get('relationship', null) !== null) {
+    if (actionIcon && onActionClick) {
+      buttons = <IconButton icon={actionIcon} title={actionTitle} onClick={this.handleAction} />;
+    } else if (!actionIcon && account.get('id') !== me && account.get('relationship', null) !== null) {
       const following = account.getIn(['relationship', 'following']);
       const requested = account.getIn(['relationship', 'requested']);
       const blocking  = account.getIn(['relationship', 'blocking']);
       const muting  = account.getIn(['relationship', 'muting']);
 
       if (requested) {
-        buttons = <IconButton disabled icon='hourglass' title={intl.formatMessage(messages.requested)} />;
+        buttons = <Button text={intl.formatMessage(messages.cancel_follow_request)} onClick={this.handleFollow} />;
       } else if (blocking) {
-        buttons = <IconButton active icon='unlock' title={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />;
+        buttons = <Button text={intl.formatMessage(messages.unblock)} onClick={this.handleBlock} />;
       } else if (muting) {
         let hidingNotificationsButton;
+
         if (account.getIn(['relationship', 'muting_notifications'])) {
-          hidingNotificationsButton = <IconButton active icon='bell' title={intl.formatMessage(messages.unmute_notifications, { name: account.get('username') })} onClick={this.handleUnmuteNotifications} />;
+          hidingNotificationsButton = <Button text={intl.formatMessage(messages.unmute_notifications)} onClick={this.handleUnmuteNotifications} />;
         } else {
-          hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username')  })} onClick={this.handleMuteNotifications} />;
+          hidingNotificationsButton = <Button text={intl.formatMessage(messages.mute_notifications)} onClick={this.handleMuteNotifications} />;
         }
+
         buttons = (
           <>
-            <IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />
+            <Button text={intl.formatMessage(messages.unmute)} onClick={this.handleMute} />
             {hidingNotificationsButton}
           </>
         );
       } else if (defaultAction === 'mute') {
-        buttons = <IconButton icon='volume-off' title={intl.formatMessage(messages.mute, { name: account.get('username') })} onClick={this.handleMute} />;
+        buttons = <Button title={intl.formatMessage(messages.mute)} onClick={this.handleMute} />;
       } else if (defaultAction === 'block') {
-        buttons = <IconButton icon='lock' title={intl.formatMessage(messages.block, { name: account.get('username') })} onClick={this.handleBlock} />;
+        buttons = <Button text={intl.formatMessage(messages.block)} onClick={this.handleBlock} />;
       } else if (!account.get('moved') || following) {
-        buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />;
+        buttons = <Button text={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} />;
       }
     }
 
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index 7b265c9c35..842d550fbf 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -55,6 +55,7 @@
 
 .account__wrapper {
   display: flex;
+  align-items: center;
 }
 
 .account__avatar-wrapper {
@@ -143,9 +144,10 @@
 }
 
 .account__relationship {
-  height: 18px;
-  padding: 10px;
   white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 
 .account__header__wrapper {

From 17372a3ec0aed532825d04f4c9f09fd9f9975412 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Fri, 23 Jun 2023 16:34:27 +0200
Subject: [PATCH 12/16] [Glitch] Change labels and styles on the onboarding
 screen in `Account` component

Partial port of a985d587e13494b78ef2879e4d97f78a2df693db to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/account.jsx         | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx
index 663c614cd1..86395407c4 100644
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
 
@@ -50,6 +50,7 @@ class Account extends ImmutablePureComponent {
     actionTitle: PropTypes.string,
     defaultAction: PropTypes.string,
     onActionClick: PropTypes.func,
+    withBio: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -81,7 +82,7 @@ class Account extends ImmutablePureComponent {
   };
 
   render () {
-    const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props;
+    const { account, intl, hidden, withBio, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props;
 
     if (!account) {
       return <EmptyAccount size={size} minimal={minimal} />;
@@ -172,6 +173,15 @@ class Account extends ImmutablePureComponent {
             </div>
           )}
         </div>
+
+        {withBio && (account.get('note').length > 0 ? (
+          <div
+            className='account__note translate'
+            dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
+          />
+        ) : (
+          <div className='account__note account__note--missing'><FormattedMessage id='account.no_bio' defaultMessage='No description provided.' /></div>
+        ))}
       </div>
     );
   }

From dc917cfcdffd34d151bd8fde12ed91166875765d Mon Sep 17 00:00:00 2001
From: fusagiko / takayamaki <24884114+takayamaki@users.noreply.github.com>
Date: Sat, 8 Jul 2023 18:11:22 +0900
Subject: [PATCH 13/16] [Glitch] Fix account.jsx imports (#25541)

Port remaining part of e0d230fb37848efd788eea54a83869a63ff0fb39,
20e85c0e837ef17219a1c317d7962286c9b4237d and
9d45a444f90ca6b939eecb52167fc7f39765c438 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 app/javascript/flavours/glitch/components/account.jsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx
index 86395407c4..911bf46e89 100644
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@@ -7,16 +7,15 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { counterRenderer } from 'flavours/glitch/components/common_counter';
-
 import { EmptyAccount } from 'flavours/glitch/components/empty_account';
-import ShortNumber from 'flavours/glitch/components/short_number';
+import { ShortNumber } from 'flavours/glitch/components/short_number';
 import { VerifiedBadge } from 'flavours/glitch/components/verified_badge';
 
 import { me } from '../initial_state';
 
 import { Avatar } from './avatar';
-import Button from './button';
+import { Button } from './button';
+import { FollowersCounter } from './counters';
 import { DisplayName } from './display_name';
 import { IconButton } from './icon_button';
 import Permalink from './permalink';
@@ -161,7 +160,7 @@ class Account extends ImmutablePureComponent {
               <DisplayName account={account} />
               {!minimal && (
                 <div className='account__details'>
-                  <ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining}
+                  <ShortNumber value={account.get('followers_count')} renderer={FollowersCounter} /> {verification} {muteTimeRemaining}
                 </div>
               )}
             </div>

From 28d4f3ab70b67b5e842bac3890f3ba3808c0c2e3 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Sat, 2 Dec 2023 17:05:54 +0100
Subject: [PATCH 14/16] Fix account component styling wrt. upstream

---
 app/javascript/flavours/glitch/components/account.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx
index 911bf46e89..61c0d45cef 100644
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@@ -53,7 +53,7 @@ class Account extends ImmutablePureComponent {
   };
 
   static defaultProps = {
-    size: 36,
+    size: 46,
   };
 
   handleFollow = () => {
@@ -157,7 +157,7 @@ class Account extends ImmutablePureComponent {
             </div>
 
             <div className='account__contents'>
-              <DisplayName account={account} />
+              <DisplayName account={account} inline />
               {!minimal && (
                 <div className='account__details'>
                   <ShortNumber value={account.get('followers_count')} renderer={FollowersCounter} /> {verification} {muteTimeRemaining}

From 09062d393fbbe333337d1e0421e6afc8dd4dd1fa Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Sat, 2 Dec 2023 17:12:38 +0100
Subject: [PATCH 15/16] Fix more styling issues

---
 .../flavours/glitch/styles/components/accounts.scss        | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index 842d550fbf..e5ac494425 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -6,7 +6,9 @@
 
   .account__display-name {
     flex: 1 1 auto;
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: 10px;
     color: $darker-text-color;
     overflow: hidden;
     text-decoration: none;
@@ -55,13 +57,12 @@
 
 .account__wrapper {
   display: flex;
+  gap: 10px;
   align-items: center;
 }
 
 .account__avatar-wrapper {
   float: left;
-  margin-inline-start: 12px;
-  margin-inline-end: 12px;
 }
 
 .account__avatar {

From 21df2a68ac7827b63f012fd8c28e7888f6830c39 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Sat, 2 Dec 2023 17:16:21 +0100
Subject: [PATCH 16/16] Hide followers count when hidden by instance or user

---
 app/javascript/flavours/glitch/components/account.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx
index 61c0d45cef..6342ef6f48 100644
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@@ -160,7 +160,9 @@ class Account extends ImmutablePureComponent {
               <DisplayName account={account} inline />
               {!minimal && (
                 <div className='account__details'>
-                  <ShortNumber value={account.get('followers_count')} renderer={FollowersCounter} /> {verification} {muteTimeRemaining}
+                  {account.get('followers_count') !== -1 && (
+                    <ShortNumber value={account.get('followers_count')} renderer={FollowersCounter} />
+                  )} {verification} {muteTimeRemaining}
                 </div>
               )}
             </div>