Refactor: Relative timestamp component (#38275)

app/javascript/entrypoints/public.tsx

@@ -1,14 +1,20 @@
 import { createRoot } from 'react-dom/client';
 
 import { IntlMessageFormat } from 'intl-messageformat';
-import type { MessageDescriptor, PrimitiveType } from 'react-intl';
+import type {
+  FormatDateOptions,
+  IntlShape,
+  MessageDescriptor,
+  PrimitiveType,
+} from 'react-intl';
 import { defineMessages } from 'react-intl';
 
 import axios from 'axios';
 import { on } from 'delegated-events';
 import { throttle } from 'lodash';
 
-import { timeAgoString } from '../mastodon/components/relative_timestamp';
+import { formatTime } from '@/mastodon/utils/time';
+
 import emojify from '../mastodon/features/emoji/emoji';
 import loadKeyboardExtensions from '../mastodon/load_keyboard_extensions';
 import { loadLocale, getLocale } from '../mastodon/locales';
@@ -58,7 +64,7 @@ function loaded() {
   const formatMessage = (
     { id, defaultMessage }: MessageDescriptor,
     values?: Record<string, PrimitiveType>,
-  ) => {
+  ): string => {
     let message: string | undefined = undefined;
 
     if (id) message = localeData[id];
@@ -126,23 +132,23 @@ function loaded() {
     .querySelectorAll<HTMLTimeElement>('time.time-ago')
     .forEach((content) => {
       const datetime = new Date(content.dateTime);
-      const now = new Date();
 
       const timeGiven = content.dateTime.includes('T');
       content.title = timeGiven
         ? dateTimeFormat.format(datetime)
         : dateFormat.format(datetime);
-      content.textContent = timeAgoString(
-        {
-          formatMessage,
-          formatDate: (date: Date, options) =>
+      const now = Date.now();
+      content.textContent = formatTime({
+        // We don't want to show future dates.
+        timestamp: Math.min(datetime.getTime(), now),
+        now,
+        intl: {
+          formatMessage: formatMessage as IntlShape['formatMessage'],
+          formatDate: (date: Date, options: FormatDateOptions) =>
             new Intl.DateTimeFormat(locale, options).format(date),
         },
-        datetime,
-        now.getTime(),
-        now.getFullYear(),
-        timeGiven,
-      );
+        noTime: !timeGiven,
+      });
     });
 
   updateDefaultQuotePrivacyFromPrivacy(