refactor(dry-F2): centralize shared UI primitives (relative-time, toast, download-status)

- utils/date.js: add formatRelative(iso, {future,nullText}); migrate 6 sites
  (SourceRow, SubscriptionsTab, SourceHealthDot, SchedulerStatusBar +
  thin adapters in BackupRunsTable/SystemActivityTab for their '—' null text).
  PostCard (30d->absolute) and CredentialCard (mo/y buckets) intentionally
  keep bespoke formatters.
- utils/toast.js: toast(opts) wraps the globalThis.window?.__fcToast?.(...)
  incantation; migrate 63 call sites across 24 files.
- utils/downloadStatus.js: single source for the download-event status enum
  -> label/color/icon; collapse the 3 duplicate maps (DownloadStatChips,
  DownloadsFilterPopover, DownloadEventRow).

Net -33 lines. Platform metadata was already centralized in platformColor.js.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/utils/date.js

@@ -13,3 +13,22 @@ export function formatPostDate(iso) {
   if (isNaN(d.getTime())) return null
   return `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}, ${d.getUTCFullYear()}`
 }
+
+// Compact relative formatter: "5m ago" (past) or "in 3h" (future). Null /
+// invalid input returns `nullText`. Pass { future: true } for upcoming
+// timestamps; a future time already elapsed reads as "imminent".
+export function formatRelative(iso, opts = {}) {
+  const { future = false, nullText = future ? '—' : 'Never' } = opts
+  if (!iso) return nullText
+  const then = new Date(iso).getTime()
+  if (isNaN(then)) return nullText
+  const diff = (then - Date.now()) / 1000  // +ve = future
+  const abs = Math.abs(diff)
+  let body
+  if (abs < 60) body = `${Math.floor(abs)}s`
+  else if (abs < 3600) body = `${Math.floor(abs / 60)}m`
+  else if (abs < 86400) body = `${Math.floor(abs / 3600)}h`
+  else body = `${Math.floor(abs / 86400)}d`
+  if (future) return diff <= 0 ? 'imminent' : `in ${body}`
+  return `${body} ago`
+}

frontend/src/utils/downloadStatus.js

@@ -0,0 +1,21 @@
+// Single source of truth for the download-event status enum -> display
+// metadata (label/color/icon). Mirrors the backend ENUM
+// (pending|running|ok|error|skipped). Used by the stat chips, the filter
+// dropdown, and the event rows so they never drift apart.
+
+export const DOWNLOAD_STATUSES = [
+  { value: 'pending', label: 'Queued',    color: 'grey',    icon: 'mdi-clock-outline' },
+  { value: 'running', label: 'Running',   color: 'info',    icon: 'mdi-progress-clock' },
+  { value: 'ok',      label: 'Completed', color: 'success', icon: 'mdi-check-circle' },
+  { value: 'error',   label: 'Failed',    color: 'error',   icon: 'mdi-alert-circle' },
+  { value: 'skipped', label: 'Skipped',   color: 'warning', icon: 'mdi-skip-next' },
+]
+
+const _BY_VALUE = Object.fromEntries(DOWNLOAD_STATUSES.map((s) => [s.value, s]))
+
+export function downloadStatusMeta(value) {
+  return _BY_VALUE[value] || { value, label: value, color: 'grey', icon: 'mdi-help-circle' }
+}
+export const downloadStatusLabel = (v) => downloadStatusMeta(v).label
+export const downloadStatusColor = (v) => downloadStatusMeta(v).color
+export const downloadStatusIcon = (v) => downloadStatusMeta(v).icon

frontend/src/utils/toast.js

@@ -0,0 +1,8 @@
+// Centralized toast trigger. App.vue registers the actual snackbar on
+// window.__fcToast; this wraps the optional-chaining lookup so call sites
+// don't repeat `globalThis.window?.__fcToast?.(...)` everywhere.
+//
+// opts: { text: string, type?: 'success' | 'error' | 'info' | 'warning' }
+export function toast(opts) {
+  globalThis.window?.__fcToast?.(opts)
+}