create time format helper utility and tests

src/frontend/src/flows/manage/authenticatorsSection.ts

@@ -3,6 +3,7 @@ import { isNullish, nonNullish } from "@dfinity/utils";
 import { TemplateResult, html } from "lit-html";
 import { settingsDropdown } from "./settingsDropdown";
 import { Authenticator } from "./types";
+import { formatLastUsage } from "$src/utils/time";
 
 // The maximum number of authenticator (non-recovery) devices we allow.
 // The canister limits the _total_ number of devices (recovery included) to 10,
@@ -133,15 +134,7 @@ export const authenticatorItem = ({
   }
 
   if (lastUsageTimeStamp) {
-    const now = new Date();
-    const diffInDays = Math.round(
-      (lastUsageTimeStamp.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)
-    );
-
-    lastUsageFormattedString = new Intl.RelativeTimeFormat("en", {
-      numeric: "auto",
-      style: "long",
-    }).format(diffInDays, "day");
+    lastUsageFormattedString = formatLastUsage(lastUsageTimeStamp);
   }
 
   return html`

src/frontend/src/utils/time.test.ts

@@ -0,0 +1,45 @@
+import { formatLastUsage } from './time';
+import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest';
+
+describe('formatLastUsage', () => {
+  const NOW = new Date();
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(NOW);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test('formats time within the last hour', () => {
+    const timestamp = new Date(NOW.getTime() - 30 * 60 * 1000); // 30 minutes ago
+    expect(formatLastUsage(timestamp)).toBe(`today at ${timestamp.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' })}`);
+  });
+
+  test('formats time from earlier today', () => {
+    const timestamp = new Date(NOW.getTime() - 7 * 60 * 60 * 1000); // 7 hours ago
+    expect(formatLastUsage(timestamp)).toBe(`today at ${timestamp.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' })}`);
+  });
+
+  test('formats time from yesterday', () => {
+    const timestamp = new Date(NOW.getTime() - 24 * 60 * 60 * 1000); // 24 hours ago
+    expect(formatLastUsage(timestamp)).toBe('yesterday');
+  });
+
+  test('formats time from several days ago', () => {
+    const timestamp = new Date(NOW.getTime() - 5 * 24 * 60 * 60 * 1000); // 5 days ago
+    expect(formatLastUsage(timestamp)).toBe('5 days ago');
+  });
+
+  test('formats time from last month', () => {
+    const timestamp = new Date(NOW.getTime() - 30 * 24 * 60 * 60 * 1000); // ~1 month ago
+    expect(formatLastUsage(timestamp)).toBe('last month');
+  });
+
+  test('formats time from 5 months ago', () => {
+    const timestamp = new Date(NOW.getTime() - 5 * 30 * 24 * 60 * 60 * 1000); // ~1 month ago
+    expect(formatLastUsage(timestamp)).toBe('5 months ago');
+  });
+});

src/frontend/src/utils/time.ts

@@ -0,0 +1,30 @@
+export const formatLastUsage = (timestamp: Date): string => {
+    const now = new Date();
+    const diffInMillis = timestamp.getTime() - now.getTime();
+    const diffInDays = Math.round(diffInMillis / (1000 * 60 * 60 * 24));
+
+    // If more than 25 days, use months
+    if (Math.abs(diffInDays) >= 25) {
+      const diffInMonths = Math.round(diffInDays / 30);
+      return new Intl.RelativeTimeFormat("en", {
+        numeric: "auto",
+        style: "long",
+      }).format(diffInMonths, "month");
+    }
+
+    const relativeTime = new Intl.RelativeTimeFormat("en", {
+      numeric: "auto",
+      style: "long",
+    }).format(diffInDays, "day");
+
+    // If within last 24 hours, append the time
+    if (Math.abs(diffInDays) < 1) {
+      const timeString = new Intl.DateTimeFormat("en", {
+        hour: "numeric",
+        minute: "numeric",
+      }).format(timestamp);
+      return `${relativeTime} at ${timeString}`;
+    }
+
+    return relativeTime;
+  };