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/components/settings/BackupRunsTable.vue

@@ -59,6 +59,8 @@
 </template>
 
 <script setup>
+import { formatRelative as fmtRelative } from '../../utils/date.js'
+
 defineProps({ runs: { type: Array, default: () => [] } })
 defineEmits(['restore', 'delete', 'tag'])
 
@@ -92,13 +94,7 @@ function formatBytes(b) {
   return `${v.toFixed(i === 0 ? 0 : 1)} ${units[i]}`
 }
 function formatRelative(iso) {
-  if (!iso) return '—'
-  const then = new Date(iso).getTime()
-  const diff = Math.max(0, (Date.now() - then) / 1000)
-  if (diff < 60) return `${Math.floor(diff)}s ago`
-  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
-  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
-  return `${Math.floor(diff / 86400)}d ago`
+  return fmtRelative(iso, { nullText: '—' })
 }
 </script>
 

frontend/src/components/settings/BrowserExtensionCard.vue

@@ -108,6 +108,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { computed, onMounted, ref } from 'vue'
 import { useApi } from '../../composables/useApi.js'
 import { copyText } from '../../utils/clipboard.js'
@@ -147,7 +148,7 @@ async function loadKey() {
     apiKey.value = key
   } catch (e) {
     apiKey.value = ''
-    window.__fcToast?.({
+    toast({
       text: `Failed to load extension API key: ${e.message}`,
       type: 'error',
     })
@@ -160,9 +161,9 @@ async function rotateKey() {
     const { key } = await api.post('/api/settings/extension_api_key/rotate')
     apiKey.value = key
     keyShown.value = true
-    window.__fcToast?.({ text: 'Extension API key rotated.', type: 'success' })
+    toast({ text: 'Extension API key rotated.', type: 'success' })
   } catch (e) {
-    window.__fcToast?.({
+    toast({
       text: `Rotate failed: ${e.message}`,
       type: 'error',
     })
@@ -174,9 +175,9 @@ async function rotateKey() {
 async function copy(text, label) {
   try {
     await copyText(text)
-    window.__fcToast?.({ text: `${label} copied.`, type: 'success' })
+    toast({ text: `${label} copied.`, type: 'success' })
   } catch (e) {
-    window.__fcToast?.({ text: `Copy failed: ${e.message}`, type: 'error' })
+    toast({ text: `Copy failed: ${e.message}`, type: 'error' })
   }
 }
 </script>

frontend/src/components/settings/CentroidRecomputeCard.vue

@@ -16,6 +16,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { ref } from 'vue'
 import { useMLStore } from '../../stores/ml.js'
 const store = useMLStore()
@@ -24,7 +25,7 @@ const done = ref(false)
 async function run() {
   busy.value = true
   try { await store.triggerRecomputeCentroids(); done.value = true }
-  catch (e) { window.__fcToast?.({ text: e.message, type: 'error' }) }
+  catch (e) { toast({ text: e.message, type: 'error' }) }
   finally { busy.value = false }
 }
 </script>

frontend/src/components/settings/ImportTaskList.vue

@@ -125,6 +125,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { computed, ref } from 'vue'
 import { useImportStore } from '../../stores/import.js'
 import ErrorDetailModal from '../common/ErrorDetailModal.vue'
@@ -177,9 +178,9 @@ async function onRefetch(item) {
   try {
     const res = await store.refetchTask(item.id)
     const msg = _REFETCH_MSG[res.status] || { text: `Re-fetch: ${res.status}`, type: 'info' }
-    window.__fcToast?.(msg)
+    toast(msg)
   } catch (e) {
-    window.__fcToast?.({ text: `Re-fetch failed: ${e.message}`, type: 'error' })
+    toast({ text: `Re-fetch failed: ${e.message}`, type: 'error' })
   } finally {
     refetching.value = null
   }

frontend/src/components/settings/MLBackfillCard.vue

@@ -15,6 +15,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { ref } from 'vue'
 import { useMLStore } from '../../stores/ml.js'
 const store = useMLStore()
@@ -23,7 +24,7 @@ const done = ref(false)
 async function run() {
   busy.value = true
   try { await store.triggerBackfill(); done.value = true }
-  catch (e) { window.__fcToast?.({ text: e.message, type: 'error' }) }
+  catch (e) { toast({ text: e.message, type: 'error' }) }
   finally { busy.value = false }
 }
 </script>

frontend/src/components/settings/MLThresholdSliders.vue

@@ -17,6 +17,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { reactive, watch } from 'vue'
 import { useMLStore } from '../../stores/ml.js'
 
@@ -35,6 +36,6 @@ async function save() {
   const patch = {}
   for (const f of fields) patch[f.key] = local[f.key]
   try { await store.patchSettings(patch) }
-  catch (e) { window.__fcToast?.({ text: e.message, type: 'error' }) }
+  catch (e) { toast({ text: e.message, type: 'error' }) }
 }
 </script>

frontend/src/components/settings/SystemActivityTab.vue

@@ -154,6 +154,7 @@
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import { useSystemActivityStore } from '../../stores/systemActivity.js'
+import { formatRelative as fmtRelative } from '../../utils/date.js'
 import ErrorDetailModal from '../common/ErrorDetailModal.vue'
 import QueuesTable from './QueuesTable.vue'
 
@@ -277,14 +278,7 @@ function formatDuration(ms) {
   return `${(ms / 60_000).toFixed(1)} min`
 }
 function formatRelative(iso) {
-  if (!iso) return '—'
-  const then = new Date(iso).getTime()
-  const now = Date.now()
-  const diff = Math.max(0, (now - then) / 1000)
-  if (diff < 60) return `${Math.floor(diff)}s ago`
-  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
-  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
-  return `${Math.floor(diff / 86400)}d ago`
+  return fmtRelative(iso, { nullText: '—' })
 }
 </script>
 

frontend/src/components/settings/ThumbnailBackfillCard.vue

@@ -16,6 +16,7 @@
 </template>
 
 <script setup>
+import { toast } from '../../utils/toast.js'
 import { ref } from 'vue'
 import { useThumbnailsStore } from '../../stores/thumbnails.js'
 const store = useThumbnailsStore()
@@ -24,7 +25,7 @@ const done = ref(false)
 async function run () {
   busy.value = true
   try { await store.triggerBackfill(); done.value = true }
-  catch (e) { window.__fcToast?.({ text: e.message, type: 'error' }) }
+  catch (e) { toast({ text: e.message, type: 'error' }) }
   finally { busy.value = false }
 }
 </script>