fix: browse page timestamps show UTC instead of user local time (#482)

* fix: browse page timestamps show UTC instead of user local time

Closes #474

* fix: tests

www/app/(app)/browse/page.tsx

@@ -46,7 +46,7 @@ import useSessionUser from "../../lib/useSessionUser";
 import NextLink from "next/link";
 import { Room, GetTranscriptMinimal } from "../../api";
 import Pagination from "./pagination";
-import { formatTimeMs } from "../../lib/time";
+import { formatTimeMs, formatLocalDate } from "../../lib/time";
 import useApi from "../../lib/useApi";
 import { useError } from "../../(errors)/errorContext";
 import { SourceKind } from "../../api";
@@ -381,15 +381,7 @@ export default function TranscriptBrowser() {
                         ? item.room_name
                         : item.source_kind}
                     </Td>
-                    <Td>
-                      {new Date(item.created_at).toLocaleString("en-US", {
-                        year: "numeric",
-                        month: "long",
-                        day: "numeric",
-                        hour: "numeric",
-                        minute: "numeric",
-                      })}
-                    </Td>
+                    <Td>{formatLocalDate(item.created_at)}</Td>
                     <Td>{formatTimeMs(item.duration)}</Td>
                     <Td>
                       <Menu closeOnSelect={true}>
@@ -466,9 +458,7 @@ export default function TranscriptBrowser() {
                           ? item.room_name
                           : item.source_kind}
                       </Text>
-                      <Text>
-                        Date: {new Date(item.created_at).toLocaleString()}
-                      </Text>
+                      <Text>Date: {formatLocalDate(item.created_at)}</Text>
                       <Text>Duration: {formatTimeMs(item.duration)}</Text>
                     </Box>
                     <Menu>

www/app/lib/time.ts

@@ -28,3 +28,29 @@ export const formatTimeDifference = (seconds: number): string => {
 
   return timeString;
 };
+
+export const formatRelativeTime = (dateString: string): string => {
+  const now = new Date();
+  const past = new Date(dateString);
+  const diffMs = now.getTime() - past.getTime();
+
+  const diffSeconds = Math.floor(diffMs / 1000);
+  const diffMinutes = Math.floor(diffSeconds / 60);
+  const diffHours = Math.floor(diffMinutes / 60);
+  const diffDays = Math.floor(diffHours / 24);
+
+  if (diffSeconds < 60) return `${diffSeconds}s ago`;
+  if (diffMinutes < 60) return `${diffMinutes}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  return `${diffDays}d ago`;
+};
+
+export const formatLocalDate = (dateString: string): string => {
+  return new Date(dateString).toLocaleString(navigator.language || "en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+  });
+};