From f2d834c852cc8fe00c51e76e7c0366ebb1fb826f Mon Sep 17 00:00:00 2001
From: Echo <ChaosExAnima@users.noreply.github.com>
Date: Thu, 19 Mar 2026 12:04:15 +0100
Subject: [PATCH] [Glitch] Profile redesign: Adjust account number fields to be
 stacked

Port 2af5c8551dce440b3bc297951ef6095c9df1577b to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../components/number_fields.tsx              | 125 ++++++++++++------
 .../components/redesign.module.scss           |  18 +++
 2 files changed, 104 insertions(+), 39 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/number_fields.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/number_fields.tsx
index a1118d9c5a..9ec639f75c 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/components/number_fields.tsx
+++ b/app/javascript/flavours/glitch/features/account_timeline/components/number_fields.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import type { FC } from 'react';
 
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -18,9 +19,7 @@ import { isRedesignEnabled } from '../common';
 
 import classes from './redesign.module.scss';
 
-export const AccountNumberFields: FC<{ accountId: string }> = ({
-  accountId,
-}) => {
+const LegacyNumberFields: FC<{ accountId: string }> = ({ accountId }) => {
   const intl = useIntl();
   const account = useAccount(accountId);
 
@@ -29,23 +28,16 @@ export const AccountNumberFields: FC<{ accountId: string }> = ({
   }
 
   return (
-    <div
-      className={classNames(
-        'account__header__extra__links',
-        isRedesignEnabled() && classes.fieldNumbersWrapper,
-      )}
-    >
-      {!isRedesignEnabled() && (
-        <NavLink
-          to={`/@${account.acct}`}
-          title={intl.formatNumber(account.statuses_count)}
-        >
-          <ShortNumber
-            value={account.statuses_count}
-            renderer={StatusesCounter}
-          />
-        </NavLink>
-      )}
+    <div className='account__header__extra__links'>
+      <NavLink
+        to={`/@${account.acct}`}
+        title={intl.formatNumber(account.statuses_count)}
+      >
+        <ShortNumber
+          value={account.statuses_count}
+          renderer={StatusesCounter}
+        />
+      </NavLink>
 
       <NavLink
         exact
@@ -68,25 +60,80 @@ export const AccountNumberFields: FC<{ accountId: string }> = ({
           renderer={FollowersCounter}
         />
       </NavLink>
-
-      {isRedesignEnabled() && (
-        <FormattedMessage
-          id='account.joined_long'
-          defaultMessage='Joined on {date}'
-          values={{
-            date: (
-              <strong>
-                <FormattedDateWrapper
-                  value={account.created_at}
-                  year='numeric'
-                  month='short'
-                  day='2-digit'
-                />
-              </strong>
-            ),
-          }}
-        />
-      )}
     </div>
   );
 };
+
+const RedesignNumberFields: FC<{ accountId: string }> = ({ accountId }) => {
+  const intl = useIntl();
+  const account = useAccount(accountId);
+  const createdThisYear = useMemo(
+    () => account?.created_at.includes(new Date().getFullYear().toString()),
+    [account?.created_at],
+  );
+
+  if (!account) {
+    return null;
+  }
+
+  return (
+    <ul
+      className={classNames(
+        'account__header__extra__links',
+        classes.fieldNumbersWrapper,
+      )}
+    >
+      <li>
+        <FormattedMessage id='account.posts' defaultMessage='Posts' />
+        <strong>
+          <ShortNumber value={account.statuses_count} />
+        </strong>
+      </li>
+
+      <li>
+        <NavLink
+          exact
+          to={`/@${account.acct}/followers`}
+          title={intl.formatNumber(account.followers_count)}
+        >
+          <FormattedMessage id='account.followers' defaultMessage='Followers' />
+          <strong>
+            <ShortNumber value={account.followers_count} />
+          </strong>
+        </NavLink>
+      </li>
+
+      <li>
+        <NavLink
+          exact
+          to={`/@${account.acct}/following`}
+          title={intl.formatNumber(account.following_count)}
+        >
+          <FormattedMessage id='account.following' defaultMessage='Following' />
+          <strong>
+            <ShortNumber value={account.following_count} />
+          </strong>
+        </NavLink>
+      </li>
+
+      <li>
+        <FormattedMessage id='account.joined_short' defaultMessage='Joined' />
+        <strong>
+          {createdThisYear ? (
+            <FormattedDateWrapper
+              value={account.created_at}
+              month='short'
+              day='2-digit'
+            />
+          ) : (
+            <FormattedDateWrapper value={account.created_at} year='numeric' />
+          )}
+        </strong>
+      </li>
+    </ul>
+  );
+};
+
+export const AccountNumberFields = isRedesignEnabled()
+  ? RedesignNumberFields
+  : LegacyNumberFields;
diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss b/app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss
index e761c761d9..bf3736c096 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss
+++ b/app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss
@@ -308,16 +308,34 @@ svg.badgeIcon {
 }
 
 .fieldNumbersWrapper {
+  display: flex;
   font-size: 13px;
   padding: 0;
+  margin: 8px 0;
+  gap: 20px;
+
+  li {
+    @container (width < 420px) {
+      flex: 1 1 0px;
+    }
+  }
 
   a {
+    color: inherit;
     font-weight: unset;
+    padding: 0;
+
+    &:hover,
+    &:focus {
+      color: var(--color-text-brand-soft);
+    }
   }
 
   strong {
+    display: block;
     font-weight: 600;
     color: var(--color-text-primary);
+    font-size: 15px;
   }
 }