Tweak

web/apps/photos/src/components/pages/gallery/PreviewCard.tsx

@@ -1,5 +1,5 @@
 import { Overlay } from "@/base/components/containers";
-import { formatDateRelative } from "@/base/i18n-date";
+import { formattedDateRelative } from "@/base/i18n-date";
 import log from "@/base/log";
 import { downloadManager } from "@/gallery/services/download";
 import { enteFileDeletionDate } from "@/media/file";
@@ -360,35 +360,9 @@ export default function PreviewCard(props: IProps) {
 
             {props?.activeCollectionID === TRASH_SECTION && file.isTrashed && (
                 <FileAndCollectionNameOverlay>
-                    <p>{formatDateRelative(enteFileDeletionDate(file))}</p>
+                    <p>{formattedDateRelative(enteFileDeletionDate(file))}</p>
                 </FileAndCollectionNameOverlay>
             )}
         </Cont>
     );
 }
-
-/*
-function formatDateRelative(date: number) {
-    const units = {
-        year: 24 * 60 * 60 * 1000 * 365,
-        month: (24 * 60 * 60 * 1000 * 365) / 12,
-        day: 24 * 60 * 60 * 1000,
-        hour: 60 * 60 * 1000,
-        minute: 60 * 1000,
-        second: 1000,
-    };
-    const relativeDateFormat = new Intl.RelativeTimeFormat(i18n.language, {
-        localeMatcher: "best fit",
-        numeric: "always",
-        style: "long",
-    });
-    const elapsed = date - Date.now(); // "Math.abs" accounts for both "past" & "future" scenarios
-
-    for (const u in units)
-        if (Math.abs(elapsed) > units[u] || u === "second")
-            return relativeDateFormat.format(
-                Math.round(elapsed / units[u]),
-                u as Intl.RelativeTimeFormatUnit,
-            );
-}
-*/

web/packages/base/i18n-date.ts

@@ -6,9 +6,9 @@
  */
 import i18n from "i18next";
 
-let _relativeDateFormat: Intl.RelativeTimeFormat | undefined;
+let _relativeTimeFormat: Intl.RelativeTimeFormat | undefined;
 
-export const formatDateRelative = (date: Date) => {
+export const formattedDateRelative = (date: Date) => {
     const units: [Intl.RelativeTimeFormatUnit, number][] = [
         ["year", 24 * 60 * 60 * 1000 * 365],
         ["month", (24 * 60 * 60 * 1000 * 365) / 12],
@@ -18,20 +18,21 @@ export const formatDateRelative = (date: Date) => {
         ["second", 1000],
     ];
 
-    const relativeDateFormat = (_relativeDateFormat ??=
+    // Math.abs accounts for both past and future scenarios.
+    const elapsed = Math.abs(date.getTime() - Date.now());
+
+    // Lazily created, then cached, instance of RelativeTimeFormat.
+    const relativeTimeFormat = (_relativeTimeFormat ??=
         new Intl.RelativeTimeFormat(i18n.language, {
             localeMatcher: "best fit",
             numeric: "always",
             style: "short",
         }));
 
-    // Math.abs accounts for both past and future scenarios.
-    const elapsed = Math.abs(date.getTime() - Date.now());
-
     for (const [u, d] of units) {
         if (elapsed > d)
-            return relativeDateFormat.format(Math.round(elapsed / d), u);
+            return relativeTimeFormat.format(Math.round(elapsed / d), u);
     }
 
-    return relativeDateFormat.format(Math.round(elapsed / 1000), "second");
+    return relativeTimeFormat.format(Math.round(elapsed / 1000), "second");
 };

web/packages/base/i18n.ts

@@ -230,7 +230,8 @@ export const setLocaleInUse = async (locale: SupportedLocale) => {
 
 let _numberFormat: Intl.NumberFormat | undefined;
 /**
- * Lazily created instance of NumberFormat used by {@link formattedNumber}.
+ * Lazily created, cached, instance of NumberFormat used by
+ * {@link formattedNumber}.
  *
  * See: [Note: Changing locale causes a full reload].
  */

web/packages/shared/time/format.ts

@@ -1,5 +1,7 @@
 import i18n, { t } from "i18next";
 
+// TODO: Move to @/base/date
+
 const dateTimeFullFormatter1 = new Intl.DateTimeFormat(i18n.language, {
     weekday: "short",
     month: "short",