From e303c89e4d97235411c405c388034a87acd7fdce Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Fri, 27 Mar 2026 17:13:07 +0100
Subject: [PATCH] Refactor `NumberFields` to standalone component (#38455)

---
 .../components/number_fields/index.tsx        | 40 ++++++++
 .../number_fields/styles.module.scss          | 32 +++++++
 app/javascript/mastodon/components/router.tsx |  2 +
 .../components/number_fields.tsx              | 96 +++++++++----------
 .../components/redesign.module.scss           | 31 ------
 5 files changed, 120 insertions(+), 81 deletions(-)
 create mode 100644 app/javascript/mastodon/components/number_fields/index.tsx
 create mode 100644 app/javascript/mastodon/components/number_fields/styles.module.scss

diff --git a/app/javascript/mastodon/components/number_fields/index.tsx b/app/javascript/mastodon/components/number_fields/index.tsx
new file mode 100644
index 0000000000..36e99725c7
--- /dev/null
+++ b/app/javascript/mastodon/components/number_fields/index.tsx
@@ -0,0 +1,40 @@
+import { NavLink } from 'react-router-dom';
+
+import type { MastodonLocationDescriptor } from 'mastodon/components/router';
+
+import classes from './styles.module.scss';
+
+interface WrapperProps {
+  children: React.ReactNode;
+}
+
+export const NumberFields: React.FC<WrapperProps> = ({ children }) => {
+  return <ul className={classes.list}>{children}</ul>;
+};
+
+interface ItemProps {
+  label: React.ReactNode;
+  hint?: string;
+  link?: MastodonLocationDescriptor;
+  children: React.ReactNode;
+}
+
+export const NumberFieldsItem: React.FC<ItemProps> = ({
+  label,
+  hint,
+  link,
+  children,
+}) => {
+  return (
+    <li className={classes.item} title={hint}>
+      {label}
+      {link ? (
+        <NavLink exact to={link}>
+          {children}
+        </NavLink>
+      ) : (
+        <strong>{children}</strong>
+      )}
+    </li>
+  );
+};
diff --git a/app/javascript/mastodon/components/number_fields/styles.module.scss b/app/javascript/mastodon/components/number_fields/styles.module.scss
new file mode 100644
index 0000000000..085bd5051d
--- /dev/null
+++ b/app/javascript/mastodon/components/number_fields/styles.module.scss
@@ -0,0 +1,32 @@
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 8px 0;
+  padding: 0;
+  gap: 4px 20px;
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+
+.item {
+  @container (width < 420px) {
+    flex: 1 1 0px;
+  }
+
+  a,
+  strong {
+    display: block;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    font-size: 15px;
+  }
+
+  a {
+    padding: 0;
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+}
diff --git a/app/javascript/mastodon/components/router.tsx b/app/javascript/mastodon/components/router.tsx
index 1c251d6abc..bd6e4b568f 100644
--- a/app/javascript/mastodon/components/router.tsx
+++ b/app/javascript/mastodon/components/router.tsx
@@ -26,6 +26,8 @@ export type LocationState = MastodonLocationState | null | undefined;
 
 export type MastodonLocation = ReturnType<typeof useLocation<LocationState>>;
 
+export type MastodonLocationDescriptor = LocationDescriptor<LocationState>;
+
 type HistoryPath = Path | LocationDescriptor<LocationState>;
 
 export const browserHistory = createBrowserHistory<LocationState>();
diff --git a/app/javascript/mastodon/features/account_timeline/components/number_fields.tsx b/app/javascript/mastodon/features/account_timeline/components/number_fields.tsx
index 3494718fbf..0fa805ac6b 100644
--- a/app/javascript/mastodon/features/account_timeline/components/number_fields.tsx
+++ b/app/javascript/mastodon/features/account_timeline/components/number_fields.tsx
@@ -3,7 +3,6 @@ import type { FC } from 'react';
 
 import { FormattedMessage, useIntl } from 'react-intl';
 
-import classNames from 'classnames';
 import { NavLink } from 'react-router-dom';
 
 import {
@@ -12,13 +11,15 @@ import {
   StatusesCounter,
 } from '@/mastodon/components/counters';
 import { FormattedDateWrapper } from '@/mastodon/components/formatted_date';
+import {
+  NumberFields,
+  NumberFieldsItem,
+} from '@/mastodon/components/number_fields';
 import { ShortNumber } from '@/mastodon/components/short_number';
 import { useAccount } from '@/mastodon/hooks/useAccount';
 
 import { isRedesignEnabled } from '../common';
 
-import classes from './redesign.module.scss';
-
 const LegacyNumberFields: FC<{ accountId: string }> = ({ accountId }) => {
   const intl = useIntl();
   const account = useAccount(accountId);
@@ -77,56 +78,51 @@ const RedesignNumberFields: FC<{ accountId: string }> = ({ accountId }) => {
   }
 
   return (
-    <ul
-      className={classNames(
-        'account__header__extra__links',
-        classes.fieldNumbersWrapper,
-      )}
-    >
-      <li>
-        <FormattedMessage id='account.posts' defaultMessage='Posts' />
-        <strong title={intl.formatNumber(account.statuses_count)}>
-          <ShortNumber value={account.statuses_count} />
-        </strong>
-      </li>
+    <NumberFields>
+      <NumberFieldsItem
+        label={<FormattedMessage id='account.posts' defaultMessage='Posts' />}
+        hint={intl.formatNumber(account.statuses_count)}
+      >
+        <ShortNumber value={account.statuses_count} />
+      </NumberFieldsItem>
 
-      <li>
-        <FormattedMessage id='account.followers' defaultMessage='Followers' />
-        <NavLink
-          exact
-          to={`/@${account.acct}/followers`}
-          title={intl.formatNumber(account.followers_count)}
-        >
-          <ShortNumber value={account.followers_count} />
-        </NavLink>
-      </li>
+      <NumberFieldsItem
+        label={
+          <FormattedMessage id='account.followers' defaultMessage='Followers' />
+        }
+        hint={intl.formatNumber(account.followers_count)}
+        link={`/@${account.acct}/followers`}
+      >
+        <ShortNumber value={account.followers_count} />
+      </NumberFieldsItem>
 
-      <li>
-        <FormattedMessage id='account.following' defaultMessage='Following' />
-        <NavLink
-          exact
-          to={`/@${account.acct}/following`}
-          title={intl.formatNumber(account.following_count)}
-        >
-          <ShortNumber value={account.following_count} />
-        </NavLink>
-      </li>
+      <NumberFieldsItem
+        label={
+          <FormattedMessage id='account.following' defaultMessage='Following' />
+        }
+        hint={intl.formatNumber(account.following_count)}
+        link={`/@${account.acct}/following`}
+      >
+        <ShortNumber value={account.following_count} />
+      </NumberFieldsItem>
 
-      <li>
-        <FormattedMessage id='account.joined_short' defaultMessage='Joined' />
-        <strong title={intl.formatDate(account.created_at)}>
-          {createdThisYear ? (
-            <FormattedDateWrapper
-              value={account.created_at}
-              month='short'
-              day='2-digit'
-            />
-          ) : (
-            <FormattedDateWrapper value={account.created_at} year='numeric' />
-          )}
-        </strong>
-      </li>
-    </ul>
+      <NumberFieldsItem
+        label={
+          <FormattedMessage id='account.joined_short' defaultMessage='Joined' />
+        }
+        hint={intl.formatDate(account.created_at)}
+      >
+        {createdThisYear ? (
+          <FormattedDateWrapper
+            value={account.created_at}
+            month='short'
+            day='2-digit'
+          />
+        ) : (
+          <FormattedDateWrapper value={account.created_at} year='numeric' />
+        )}
+      </NumberFieldsItem>
+    </NumberFields>
   );
 };
 
diff --git a/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss b/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss
index 40fdc5cfa8..391a6ac7fe 100644
--- a/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss
+++ b/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss
@@ -312,37 +312,6 @@ svg.badgeIcon {
   }
 }
 
-.fieldNumbersWrapper {
-  display: flex;
-  font-size: 13px;
-  padding: 0;
-  margin: 8px 0;
-  gap: 20px;
-
-  li {
-    @container (width < 420px) {
-      flex: 1 1 0px;
-    }
-  }
-
-  a,
-  strong {
-    display: block;
-    font-weight: 600;
-    color: var(--color-text-primary);
-    font-size: 15px;
-  }
-
-  a {
-    padding: 0;
-
-    &:hover,
-    &:focus {
-      text-decoration: underline;
-    }
-  }
-}
-
 .modalCloseButton {
   padding: 8px;
   border-radius: 50%;