Merge commit 'cffa8de6267a57673b7f6264fab671153f965d23' into glitch-soc/merge-upstream

app/javascript/mastodon/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;

app/javascript/mastodon/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;
   }
 }
 

app/javascript/mastodon/features/collections/detail/collection_list_item.tsx

@@ -53,12 +53,7 @@ export const CollectionMetaData: React.FC<{
         id='collections.last_updated_at'
         defaultMessage='Last updated: {date}'
         values={{
-          date: (
-            <RelativeTimestamp
-              timestamp={collection.updated_at}
-              short={false}
-            />
-          ),
+          date: <RelativeTimestamp timestamp={collection.updated_at} long />,
         }}
         tagName='li'
       />

app/javascript/mastodon/features/notifications/components/report.jsx

@@ -49,7 +49,7 @@ class Report extends ImmutablePureComponent {
 
         <div className='notification__report__details'>
           <div>
-            <RelativeTimestamp timestamp={report.get('created_at')} short={false} /> · <FormattedMessage id='report_notification.attached_statuses' defaultMessage='{count, plural, one {# post} other {# posts}} attached' values={{ count: report.get('status_ids').size }} />
+            <RelativeTimestamp timestamp={report.get('created_at')} long /> · <FormattedMessage id='report_notification.attached_statuses' defaultMessage='{count, plural, one {# post} other {# posts}} attached' values={{ count: report.get('status_ids').size }} />
             <br />
             <strong>{intl.formatMessage(messages[report.get('category')])}</strong>
           </div>

app/javascript/mastodon/features/ui/components/compare_history_modal.jsx

@@ -50,7 +50,7 @@ class CompareHistoryModal extends PureComponent {
     const content = currentVersion.get('content');
     const spoilerContent = escapeTextContentForBrowser(currentVersion.get('spoiler_text'));
 
-    const formattedDate = <RelativeTimestamp timestamp={currentVersion.get('created_at')} short={false} />;
+    const formattedDate = <RelativeTimestamp timestamp={currentVersion.get('created_at')} long />;
     const formattedName = <InlineAccount accountId={currentVersion.get('account')} />;
 
     const label = currentVersion.get('original') ? (