Fix stale synced status label and show exact sync time on hover

frontend/src/lib/components/layout/StatusBar.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
+  import { onMount } from "svelte";
   import { sync } from "../../stores/sync.svelte.js";
   import { ui } from "../../stores/ui.svelte.js";
-  import { formatNumber, formatRelativeTime } from "../../utils/format.js";
+  import {
+    formatNumber,
+    formatRelativeTime,
+    formatTimestamp,
+  } from "../../utils/format.js";
 
+  const RELATIVE_TIME_REFRESH_MS = 10_000;
   const isMac = navigator.platform.toUpperCase().includes("MAC");
   const mod = isMac ? "Cmd" : "Ctrl";
+  let relativeTimeTick = $state(0);
 
   let progressText = $derived.by(() => {
     if (!sync.syncing || !sync.progress) return null;
@@ -20,6 +27,24 @@
     }
     return "Syncing...";
   });
+
+  let lastSyncText = $derived.by(() => {
+    relativeTimeTick;
+    return sync.lastSync
+      ? formatRelativeTime(sync.lastSync)
+      : null;
+  });
+
+  let lastSyncTimestamp = $derived(
+    sync.lastSync ? formatTimestamp(sync.lastSync) : null,
+  );
+
+  onMount(() => {
+    const interval = window.setInterval(() => {
+      relativeTimeTick = Date.now();
+    }, RELATIVE_TIME_REFRESH_MS);
+    return () => window.clearInterval(interval);
+  });
 </script>
 
 <footer class="status-bar">
@@ -84,9 +109,11 @@
     {#if progressText}
       {#if sync.versionMismatch}<span class="sep">&middot;</span>{/if}
       <span class="sync-progress">{progressText}</span>
-    {:else if sync.lastSync}
+    {:else if lastSyncText}
       {#if sync.versionMismatch}<span class="sep">&middot;</span>{/if}
-      <span>synced {formatRelativeTime(sync.lastSync)}</span>
+      <span title={lastSyncTimestamp ?? undefined}>
+        synced {lastSyncText}
+      </span>
     {/if}
     {#if sync.serverVersion}
       {#if sync.versionMismatch || progressText || sync.lastSync}

frontend/src/lib/components/layout/StatusBar.test.ts

@@ -0,0 +1,71 @@
+// @vitest-environment jsdom
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from "vitest";
+import { mount, tick, unmount } from "svelte";
+// @ts-ignore
+import StatusBar from "./StatusBar.svelte";
+import { sync } from "../../stores/sync.svelte.js";
+
+describe("StatusBar", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-04-08T05:00:00Z"));
+    sync.syncing = false;
+    sync.progress = null;
+    sync.lastSync = "2026-04-08T05:00:00Z";
+    sync.stats = null;
+    sync.serverVersion = null;
+    sync.versionMismatch = false;
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.useRealTimers();
+    sync.lastSync = null;
+    sync.stats = null;
+    sync.serverVersion = null;
+    sync.versionMismatch = false;
+    sync.progress = null;
+    sync.syncing = false;
+  });
+
+  it("refreshes the sync label as time passes", async () => {
+    const component = mount(StatusBar, {
+      target: document.body,
+    });
+
+    await tick();
+    const syncLabel = document.querySelector(
+      ".status-right span:last-of-type",
+    );
+    const expectedTitle = new Date(sync.lastSync!).toLocaleString(
+      undefined,
+      {
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+      },
+    );
+
+    expect(document.body.textContent).toContain(
+      "synced just now",
+    );
+    expect(syncLabel?.getAttribute("title")).toBe(expectedTitle);
+
+    await vi.advanceTimersByTimeAsync(70_000);
+    await tick();
+
+    expect(document.body.textContent).toContain(
+      "synced 1m ago",
+    );
+
+    unmount(component);
+  });
+});