bvandeusen/FabledCurator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 33 Wiki Activity

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

Browse Source 
- 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>
This commit is contained in:
Bryan Van Deusen
2026-05-28 11:20:07 -04:00
parent 2358cedf3e
commit eebc8e2413
34 changed files with 166 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/cleanup/MinDimensionCard.vue
+4 -3
View File
@@ -62,6 +62,7 @@
</template>
<script setup>
import { toast } from '../../utils/toast.js'
import { onMounted, ref } from 'vue'
import DestructiveConfirmModal from '../modal/DestructiveConfirmModal.vue'
@@ -94,7 +95,7 @@ async function onPreview() {
try {
preview.value = await store.previewMinDim(minW.value, minH.value)
} catch (e) {
window.__fcToast?.({ text: `Preview failed: ${e.message}`, type: 'error' })
toast({ text: `Preview failed: ${e.message}`, type: 'error' })
} finally {
busy.value = false
}
@@ -108,12 +109,12 @@ function onDeleteClick() {
async function onConfirmedDelete(token) {
try {
const res = await store.deleteMinDim(minW.value, minH.value, token)
window.__fcToast?.({
toast({
text: `Deleted ${res.deleted} image(s)`, type: 'success',
})
preview.value = null
} catch (e) {
window.__fcToast?.({ text: `Delete failed: ${e.message}`, type: 'error' })
toast({ text: `Delete failed: ${e.message}`, type: 'error' })
}
}
</script>
frontend/src/components/cleanup/SingleColorAuditCard.vue
+6 -5
View File
@@ -93,6 +93,7 @@
</template>
<script setup>
import { toast } from '../../utils/toast.js'
import { onMounted, onUnmounted, ref } from 'vue'
import DestructiveConfirmModal from '../modal/DestructiveConfirmModal.vue'
@@ -124,7 +125,7 @@ function startPoll(id) {
if (fresh.status !== 'running') stopPoll()
} catch (e) {
stopPoll()
window.__fcToast?.({ text: `Audit poll failed: ${e.message}`, type: 'error' })
toast({ text: `Audit poll failed: ${e.message}`, type: 'error' })
}
}, 5000)
}
@@ -142,7 +143,7 @@ async function onStart() {
audit.value = await store.getAudit(res.audit_id)
startPoll(res.audit_id)
} catch (e) {
window.__fcToast?.({ text: `Scan start failed: ${e.message}`, type: 'error' })
toast({ text: `Scan start failed: ${e.message}`, type: 'error' })
} finally {
busy.value = false
}
@@ -155,7 +156,7 @@ async function onCancel() {
audit.value = await store.getAudit(audit.value.id)
stopPoll()
} catch (e) {
window.__fcToast?.({ text: `Cancel failed: ${e.message}`, type: 'error' })
toast({ text: `Cancel failed: ${e.message}`, type: 'error' })
}
}
@@ -167,12 +168,12 @@ function onApplyClick() {
async function onConfirmedApply(token) {
try {
const res = await store.applyAudit(audit.value.id, token)
window.__fcToast?.({
toast({
text: `Deleted ${res.deleted} image(s)`, type: 'success',
})
audit.value = await store.getAudit(audit.value.id)
} catch (e) {
window.__fcToast?.({ text: `Apply failed: ${e.message}`, type: 'error' })
toast({ text: `Apply failed: ${e.message}`, type: 'error' })
}
}
</script>
frontend/src/components/cleanup/TransparencyAuditCard.vue
+6 -5
View File
@@ -80,6 +80,7 @@
</template>
<script setup>
import { toast } from '../../utils/toast.js'
import { onMounted, onUnmounted, ref } from 'vue'
import DestructiveConfirmModal from '../modal/DestructiveConfirmModal.vue'
@@ -109,7 +110,7 @@ function startPoll(id) {
if (fresh.status !== 'running') stopPoll()
} catch (e) {
stopPoll()
window.__fcToast?.({ text: `Audit poll failed: ${e.message}`, type: 'error' })
toast({ text: `Audit poll failed: ${e.message}`, type: 'error' })
}
}, 5000)
}
@@ -125,7 +126,7 @@ async function onStart() {
audit.value = await store.getAudit(res.audit_id)
startPoll(res.audit_id)
} catch (e) {
window.__fcToast?.({ text: `Scan start failed: ${e.message}`, type: 'error' })
toast({ text: `Scan start failed: ${e.message}`, type: 'error' })
} finally {
busy.value = false
}
@@ -138,7 +139,7 @@ async function onCancel() {
audit.value = await store.getAudit(audit.value.id)
stopPoll()
} catch (e) {
window.__fcToast?.({ text: `Cancel failed: ${e.message}`, type: 'error' })
toast({ text: `Cancel failed: ${e.message}`, type: 'error' })
}
}
@@ -150,12 +151,12 @@ function onApplyClick() {
async function onConfirmedApply(token) {
try {
const res = await store.applyAudit(audit.value.id, token)
window.__fcToast?.({
toast({
text: `Deleted ${res.deleted} image(s)`, type: 'success',
})
audit.value = await store.getAudit(audit.value.id)
} catch (e) {
window.__fcToast?.({ text: `Apply failed: ${e.message}`, type: 'error' })
toast({ text: `Apply failed: ${e.message}`, type: 'error' })
}
}
</script>
frontend/src/components/common/ErrorDetailModal.vue
+2 -1
View File
@@ -33,6 +33,7 @@
</template>
<script setup>
import { toast } from '../../utils/toast.js'
import { computed, ref, watch } from 'vue'
import { copyText } from '../../utils/clipboard.js'
@@ -119,7 +120,7 @@ async function onCopy () {
if (copiedTimer) clearTimeout(copiedTimer)
copiedTimer = setTimeout(() => { copied.value = false }, 1500)
} catch (e) {
window.__fcToast?.({ text: `Copy failed: ${e.message}`, type: 'error' })
toast({ text: `Copy failed: ${e.message}`, type: 'error' })
}
}
</script>
frontend/src/components/credentials/ExtensionKeyBar.vue
+4 -3
View File
@@ -26,6 +26,7 @@
</template>
<script setup>
import { toast } from '../../utils/toast.js'
import { onMounted, ref } from 'vue'
import { useCredentialsStore } from '../../stores/credentials.js'
import { copyText } from '../../utils/clipboard.js'
@@ -39,9 +40,9 @@ async function copyKey() {
if (!store.extensionKey) return
try {
await copyText(store.extensionKey)
globalThis.window?.__fcToast?.({ text: 'Copied', type: 'success' })
toast({ text: 'Copied', type: 'success' })
} catch {
globalThis.window?.__fcToast?.({ text: 'Copy failed', type: 'error' })
toast({ text: 'Copy failed', type: 'error' })
}
}
@@ -50,7 +51,7 @@ function confirmRotate() { showRotateConfirm.value = true }
async function doRotate() {
showRotateConfirm.value = false
await store.rotateKey()
globalThis.window?.__fcToast?.({ text: 'Key rotated', type: 'success' })
toast({ text: 'Key rotated', type: 'success' })
}
</script>
frontend/src/components/downloads/DownloadDetailModal.vue
+3 -2
View File
@@ -101,6 +101,7 @@
</template>
<script setup>
import { toast } from '../../utils/toast.js'
import { computed } from 'vue'
import { copyText } from '../../utils/clipboard.js'
@@ -133,9 +134,9 @@ const allDiagnostics = computed(() => {
async function onCopy(label, text) {
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' })
}
}
frontend/src/components/downloads/DownloadEventRow.vue
+7 -12
View File
@@ -86,11 +86,13 @@
</template>
<script setup>
import { toast } from '../../utils/toast.js'
import { computed, ref } from 'vue'
import { RouterLink } from 'vue-router'
import PlatformChip from '../subscriptions/PlatformChip.vue'
import { useSourcesStore } from '../../stores/sources.js'
import { downloadStatusColor, downloadStatusIcon, downloadStatusLabel } from '../../utils/downloadStatus.js'
const props = defineProps({ event: { type: Object, required: true } })
defineEmits(['open'])
@@ -98,16 +100,9 @@ defineEmits(['open'])
const sourcesStore = useSourcesStore()
const retrying = ref(false)
const _STATUS = {
ok: { color: 'success', icon: 'mdi-check-circle', label: 'Completed' },
error: { color: 'error', icon: 'mdi-alert-circle', label: 'Failed' },
running: { color: 'info', icon: 'mdi-progress-clock', label: 'Running' },
pending: { color: 'grey', icon: 'mdi-clock-outline', label: 'Queued' },
skipped: { color: 'warning', icon: 'mdi-skip-next', label: 'Skipped' },
}
const statusColor = computed(() => _STATUS[props.event.status]?.color || 'grey')
const statusIcon = computed(() => _STATUS[props.event.status]?.icon || 'mdi-help-circle')
const statusLabel = computed(() => _STATUS[props.event.status]?.label || props.event.status)
const statusColor = computed(() => downloadStatusColor(props.event.status))
const statusIcon = computed(() => downloadStatusIcon(props.event.status))
const statusLabel = computed(() => downloadStatusLabel(props.event.status))
function fmtTime(iso) {
if (!iso) return '—'
@@ -131,12 +126,12 @@ async function onRetry() {
retrying.value = true
try {
await sourcesStore.checkNow(props.event.source_id)
globalThis.window?.__fcToast?.({
toast({
text: `Source check re-queued`, type: 'success',
})
} catch (e) {
const isInFlight = !!e?.body?.download_event_id
globalThis.window?.__fcToast?.({
toast({
text: isInFlight ? 'Already running' : `Retry failed: ${e?.detail || e?.message || e}`,
type: isInFlight ? 'info' : 'error',
})
frontend/src/components/modal/SuggestionsPanel.vue
+3 -2
View File
@@ -38,6 +38,7 @@
</template>
<script setup>
import { toast } from '../../utils/toast.js'
import { computed, ref, watch } from 'vue'
import { useSuggestionsStore, CATEGORY_LABELS } from '../../stores/suggestions.js'
import SuggestionsCategoryGroup from './SuggestionsCategoryGroup.vue'
@@ -57,7 +58,7 @@ watch(() => props.imageId, (id) => { if (id != null) store.load(id) }, { immedia
async function onAccept(s) {
try { await store.accept(s) }
catch (e) { window.__fcToast?.({ text: `Accept failed: ${e.message}`, type: 'error' }) }
catch (e) { toast({ text: `Accept failed: ${e.message}`, type: 'error' }) }
}
const aliasDialog = ref(false)
@@ -68,7 +69,7 @@ async function onAliasConfirm(canonicalTagId) {
await store.aliasAccept(aliasTarget.value, canonicalTagId)
aliasDialog.value = false
} catch (e) {
window.__fcToast?.({ text: `Alias failed: ${e.message}`, type: 'error' })
toast({ text: `Alias failed: ${e.message}`, type: 'error' })
}
}
</script>
frontend/src/components/settings/BackupRunsTable.vue
+3 -7
View File
@@ -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
+6 -5
View File
@@ -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
+2 -1
View File
@@ -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
+3 -2
View File
@@ -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
+2 -1
View File
@@ -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
+2 -1
View File
@@ -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
+2 -8
View File
@@ -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
+2 -1
View File
@@ -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>
frontend/src/components/subscriptions/ArtistCreateDialog.vue
+2 -1
View File
@@ -20,6 +20,7 @@
</template>
<script setup>
import { toast } from '../../utils/toast.js'
import { ref, watch } from 'vue'
import { useSourcesStore } from '../../stores/sources.js'
@@ -44,7 +45,7 @@ async function submit() {
busy.value = true
try {
const { artist, created } = await store.findOrCreateArtist(name.value.trim())
globalThis.window?.__fcToast?.({
toast({
text: created ? 'Artist created' : 'Artist already exists',
type: 'success',
})
frontend/src/components/subscriptions/CredentialCard.vue
+3 -2
View File
@@ -98,6 +98,7 @@
</template>
<script setup>
import { toast } from '../../utils/toast.js'
import { computed, ref } from 'vue'
import PlatformChip from './PlatformChip.vue'
import { useCredentialsStore } from '../../stores/credentials.js'
@@ -126,11 +127,11 @@ async function onVerify() {
const res = await credsStore.verify(props.platform.key)
verifyResult.value = res
const type = res.valid === true ? 'success' : (res.valid === false ? 'error' : 'info')
window.__fcToast?.({ text: `${props.platform.name}: ${res.reason}`, type })
toast({ text: `${props.platform.name}: ${res.reason}`, type })
if (res.valid === true) emit('verified')
} catch (e) {
verifyResult.value = { valid: false, reason: e.message }
window.__fcToast?.({ text: `Verify failed: ${e.message}`, type: 'error' })
toast({ text: `Verify failed: ${e.message}`, type: 'error' })
} finally {
verifying.value = false
}
frontend/src/components/subscriptions/DownloadStatChips.vue
+8 -16
View File
@@ -1,38 +1,30 @@
<template>
<div class="fc-dl-stats">
<v-chip
v-for="s in STAT_DEFS" :key="s.key"
v-for="s in STAT_DEFS" :key="s.value"
:color="s.color"
:variant="activeStatus === s.key ? 'elevated' : 'tonal'"
:variant="activeStatus === s.value ? 'elevated' : 'tonal'"
:prepend-icon="s.icon"
size="default"
:class="{ 'fc-dl-stats__active': activeStatus === s.key }"
@click="$emit('select', activeStatus === s.key ? null : s.key)"
:class="{ 'fc-dl-stats__active': activeStatus === s.value }"
@click="$emit('select', activeStatus === s.value ? null : s.value)"
>
{{ s.label }}
<strong class="ms-1">{{ stats[s.key] ?? 0 }}</strong>
<strong class="ms-1">{{ stats[s.value] ?? 0 }}</strong>
</v-chip>
</div>
</template>
<script setup>
import { DOWNLOAD_STATUSES as STAT_DEFS } from '../../utils/downloadStatus.js'
defineProps({
stats: { type: Object, required: true },
// The currently-active status filter key (pending|running|ok|error|
// The currently-active status filter value (pending|running|ok|error|
// skipped) or null. Highlights the matching chip.
activeStatus: { type: String, default: null },
})
defineEmits(['select'])
// status keys come straight from the backend ENUM
// (pending|running|ok|error|skipped); display order + icons are UI-only.
const STAT_DEFS = [
{ key: 'pending', label: 'Queued', color: 'grey', icon: 'mdi-clock-outline' },
{ key: 'running', label: 'Running', color: 'info', icon: 'mdi-progress-clock' },
{ key: 'ok', label: 'Completed', color: 'success', icon: 'mdi-check-circle' },
{ key: 'error', label: 'Failed', color: 'error', icon: 'mdi-alert-circle' },
{ key: 'skipped', label: 'Skipped', color: 'warning', icon: 'mdi-skip-next' },
]
</script>
<style scoped>
frontend/src/components/subscriptions/DownloadsFilterPopover.vue
+3 -9
View File
@@ -68,6 +68,7 @@
import { computed, reactive, ref, watch } from 'vue'
import { useSourcesStore } from '../../stores/sources.js'
import { DOWNLOAD_STATUSES, downloadStatusLabel } from '../../utils/downloadStatus.js'
const props = defineProps({
modelValue: { type: Object, required: true },
@@ -76,14 +77,7 @@ const emit = defineEmits(['update:modelValue'])
const sourcesStore = useSourcesStore()
const STATUS_OPTIONS = [
{ title: 'Queued', value: 'pending' },
{ title: 'Running', value: 'running' },
{ title: 'Completed', value: 'ok' },
{ title: 'Failed', value: 'error' },
{ title: 'Skipped', value: 'skipped' },
]
const STATUS_LABEL = Object.fromEntries(STATUS_OPTIONS.map((o) => [o.value, o.title]))
const STATUS_OPTIONS = DOWNLOAD_STATUSES.map((s) => ({ title: s.label, value: s.value }))
const open = ref(false)
const local = reactive({
@@ -122,7 +116,7 @@ function onArtistPick(id) {
const activePills = computed(() => {
const out = []
if (local.status) out.push({ key: 'status', label: `Status: ${STATUS_LABEL[local.status] || local.status}` })
if (local.status) out.push({ key: 'status', label: `Status: ${downloadStatusLabel(local.status)}` })
if (local.artist_id) out.push({ key: 'artist_id', label: `Artist: ${local.artist_name || `#${local.artist_id}`}` })
if (local.from_date) out.push({ key: 'from_date', label: `From ${local.from_date}` })
if (local.to_date) out.push({ key: 'to_date', label: `To ${local.to_date}` })
frontend/src/components/subscriptions/DownloadsTab.vue
+5 -4
View File
@@ -113,6 +113,7 @@
</template>
<script setup>
import { toast } from '../../utils/toast.js'
import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
@@ -167,12 +168,12 @@ async function refresh() {
async function onRetrySource(source) {
try {
await sourcesStore.checkNow(source.id)
globalThis.window?.__fcToast?.({ text: `Retry queued for ${source.artist_name || source.platform}`, type: 'success' })
toast({ text: `Retry queued for ${source.artist_name || source.platform}`, type: 'success' })
} catch (e) {
if (e?.body?.download_event_id) {
globalThis.window?.__fcToast?.({ text: 'Already running — see below', type: 'info' })
toast({ text: 'Already running — see below', type: 'info' })
} else {
globalThis.window?.__fcToast?.({ text: `Retry failed: ${e?.detail || e?.message || e}`, type: 'error' })
toast({ text: `Retry failed: ${e?.detail || e?.message || e}`, type: 'error' })
}
} finally {
await Promise.all([store.loadFailing(), store.loadStats(24), store.loadFirst()])
@@ -199,7 +200,7 @@ async function onRetryAll(sources) {
const parts = []
if (ok) parts.push(`${ok} queued`)
if (conflict) parts.push(`${conflict} already running`)
globalThis.window?.__fcToast?.({ text: parts.join(', ') || 'Nothing to retry', type: 'info' })
toast({ text: parts.join(', ') || 'Nothing to retry', type: 'info' })
}
// Live auto-refresh: while any download is queued or running, poll the
frontend/src/components/subscriptions/MaintenanceMenu.vue
+5 -4
View File
@@ -31,6 +31,7 @@
</template>
<script setup>
import { toast } from '../../utils/toast.js'
import { useImportStore } from '../../stores/import.js'
const emit = defineEmits(['refresh'])
@@ -39,10 +40,10 @@ const importStore = useImportStore()
async function onRetry() {
try {
await importStore.retryFailed()
globalThis.window?.__fcToast?.({ text: 'Retry queued', type: 'success' })
toast({ text: 'Retry queued', type: 'success' })
emit('refresh')
} catch (e) {
globalThis.window?.__fcToast?.({ text: `Retry failed: ${e?.detail || e?.message || e}`, type: 'error' })
toast({ text: `Retry failed: ${e?.detail || e?.message || e}`, type: 'error' })
}
}
@@ -50,13 +51,13 @@ async function onClear() {
try {
const body = await importStore.clearStuck()
const n = body?.cleared ?? 0
globalThis.window?.__fcToast?.({
toast({
text: n ? `Cleared ${n} stuck task${n === 1 ? '' : 's'}` : 'Nothing stuck',
type: 'success',
})
emit('refresh')
} catch (e) {
globalThis.window?.__fcToast?.({ text: `Clear failed: ${e?.detail || e?.message || e}`, type: 'error' })
toast({ text: `Clear failed: ${e?.detail || e?.message || e}`, type: 'error' })
}
}
</script>
frontend/src/components/subscriptions/SchedulerStatusBar.vue
+2 -9
View File
@@ -24,6 +24,7 @@
<script setup>
import { computed } from 'vue'
import { formatRelative } from '../../utils/date.js'
const props = defineProps({
// { last_tick_at, next_due_at, due_now, auto_sources } | null
@@ -45,16 +46,8 @@ const health = computed(() => {
return tickAgeMs.value <= STALE_MS ? 'ok' : 'stale'
})
function rel(ms) {
const s = Math.max(0, Math.floor(ms / 1000))
if (s < 60) return `${s}s ago`
if (s < 3600) return `${Math.floor(s / 60)}m ago`
if (s < 86400) return `${Math.floor(s / 3600)}h ago`
return `${Math.floor(s / 86400)}d ago`
}
const lastRanLabel = computed(() =>
tickAgeMs.value == null ? 'never' : rel(tickAgeMs.value),
formatRelative(props.status?.last_tick_at, { nullText: 'never' }),
)
const nextLabel = computed(() => {
frontend/src/components/subscriptions/SourceHealthDot.vue
+7 -21
View File
@@ -22,6 +22,7 @@
<script setup>
import { computed } from 'vue'
import { formatRelative } from '../../utils/date.js'
const props = defineProps({
source: { type: Object, required: true },
@@ -38,28 +39,13 @@ const level = computed(() => {
const ariaLabel = computed(() => `source health: ${level.value}`)
function relativeTime(iso) {
if (!iso) return 'Never'
const then = new Date(iso).getTime()
const now = Date.now()
const diff = Math.abs(now - then) / 1000
if (diff < 60) return `${Math.floor(diff)}s`
if (diff < 3600) return `${Math.floor(diff / 60)}m`
if (diff < 86400) return `${Math.floor(diff / 3600)}h`
return `${Math.floor(diff / 86400)}d`
}
const lastCheckedText = computed(() => formatRelative(props.source.last_checked_at))
const lastCheckedText = computed(() => {
if (!props.source.last_checked_at) return 'Never'
return `${relativeTime(props.source.last_checked_at)} ago`
})
const nextCheckText = computed(() => {
if (!props.source.next_check_at) return null
const due = new Date(props.source.next_check_at).getTime()
if (due <= Date.now()) return 'imminent'
return `in ~${relativeTime(props.source.next_check_at)}`
})
const nextCheckText = computed(() =>
props.source.next_check_at
? formatRelative(props.source.next_check_at, { future: true })
: null,
)
const truncatedError = computed(() => {
const e = props.source.last_error || ''
frontend/src/components/subscriptions/SourceRow.vue
+1 -17
View File
@@ -62,6 +62,7 @@
<script setup>
import SourceHealthDot from './SourceHealthDot.vue'
import { formatRelative } from '../../utils/date.js'
const props = defineProps({
source: { type: Object, required: true },
@@ -73,23 +74,6 @@ const emit = defineEmits(['edit', 'remove', 'toggle', 'check'])
function onToggleEnabled(value) {
emit('toggle', { source: props.source, enabled: value })
}
function formatRelative(iso, opts = {}) {
if (!iso) return opts.future ? '—' : 'Never'
const then = new Date(iso).getTime()
const now = Date.now()
const diff = (then - now) / 1000 // seconds; positive = future, negative = past
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 (opts.future) return diff <= 0 ? 'imminent' : `in ${body}`
return `${body} ago`
}
</script>
<style scoped>
frontend/src/components/subscriptions/SubscriptionsTab.vue
+8 -16
View File
@@ -199,6 +199,7 @@
</template>
<script setup>
import { toast } from '../../utils/toast.js'
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useSourcesStore } from '../../stores/sources.js'
@@ -210,6 +211,7 @@ import SourceFormDialog from './SourceFormDialog.vue'
import ArtistCreateDialog from './ArtistCreateDialog.vue'
import PlatformChip from './PlatformChip.vue'
import SchedulerStatusBar from './SchedulerStatusBar.vue'
import { formatRelative } from '../../utils/date.js'
const ITEMS_PER_PAGE_OPTIONS = [
{ value: 25, title: '25' },
@@ -365,16 +367,6 @@ function pickWorstSource(sources, threshold) {
return sources.reduce((worst, s) => (level(s) > level(worst) ? s : worst), sources[0])
}
function formatRelative(iso) {
if (!iso) return 'Never'
const then = new Date(iso).getTime()
const diff = (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`
}
function onRowClick(_evt, { item }) {
const key = item.key
const idx = expanded.value.indexOf(key)
@@ -419,19 +411,19 @@ function onArtistCreated(artist) {
async function onCheck(source) {
try {
const body = await store.checkNow(source.id)
globalThis.window?.__fcToast?.({
toast({
text: `Check enqueued (event #${body.download_event_id})`,
type: 'success',
})
} catch (e) {
if (e?.body?.download_event_id) {
globalThis.window?.__fcToast?.({
toast({
text: 'Already running — see Downloads',
type: 'info',
})
router.push({ path: '/subscriptions', query: { tab: 'downloads', source_id: source.id } })
} else {
globalThis.window?.__fcToast?.({
toast({
text: `Check failed: ${e?.detail || e?.message || e}`,
type: 'error',
})
@@ -454,7 +446,7 @@ async function checkAll(group) {
const parts = []
if (ok) parts.push(`${ok} queued`)
if (conflict) parts.push(`${conflict} already running`)
globalThis.window?.__fcToast?.({
toast({
text: parts.join(', ') || 'Nothing to check (no enabled sources)',
type: 'info',
})
@@ -481,7 +473,7 @@ async function bulkSetEnabled(enabled) {
}
}
await refresh()
globalThis.window?.__fcToast?.({
toast({
text: `${changed} source${changed === 1 ? '' : 's'} ${enabled ? 'enabled' : 'disabled'}`,
type: 'success',
})
@@ -504,7 +496,7 @@ async function bulkDelete() {
}
}
await refresh()
globalThis.window?.__fcToast?.({
toast({
text: `${deleted} source${deleted === 1 ? '' : 's'} deleted`,
type: 'success',
})
frontend/src/stores/gallerySelection.js
+3 -2
View File
@@ -1,4 +1,5 @@
import { defineStore } from 'pinia'
import { toast } from '../utils/toast.js'
import { ref, computed } from 'vue'
import { useApi } from '../composables/useApi.js'
@@ -51,7 +52,7 @@ export const useGallerySelectionStore = defineStore('gallerySelection', () => {
body: { image_ids: order.value, tag_id: tagId, source }
})
await refresh()
globalThis.window?.__fcToast?.({
toast({
text: `Added to ${body.added_count} image(s)`, type: 'success'
})
return body
@@ -62,7 +63,7 @@ export const useGallerySelectionStore = defineStore('gallerySelection', () => {
body: { image_ids: order.value, tag_id: tagId }
})
await refresh()
globalThis.window?.__fcToast?.({
toast({
text: `Removed from ${body.removed_count} image(s)`, type: 'success'
})
return body
frontend/src/stores/import.js
+7 -6
View File
@@ -1,4 +1,5 @@
import { defineStore } from 'pinia'
import { toast } from '../utils/toast.js'
import { ref, computed } from 'vue'
import { useApi } from '../composables/useApi.js'
@@ -37,7 +38,7 @@ export const useImportStore = defineStore('import', () => {
settings.value = await api.patch('/api/settings/import', { body: patch })
} catch (e) {
settingsError.value = e.message
window.__fcToast?.({ text: `Settings save failed: ${e.message}`, type: 'error' })
toast({ text: `Settings save failed: ${e.message}`, type: 'error' })
throw e
}
}
@@ -68,7 +69,7 @@ export const useImportStore = defineStore('import', () => {
const label = mode === 'deep'
? 'Deep scan triggered (re-applying sidecar metadata + filling NULL phash/artist on existing rows)'
: mode === 'verify' ? 'Library verify triggered' : 'Quick scan triggered'
window.__fcToast?.({ text: label, type: 'success' })
toast({ text: label, type: 'success' })
await refreshStatus()
// Re-poll twice over ~5s and produce an HONEST follow-up toast.
// Operator-flagged 2026-05-25: the prior "no new files" message was
@@ -91,22 +92,22 @@ export const useImportStore = defineStore('import', () => {
const refreshedCount = sameBatch.filter(t => t.status === 'complete' && t.result_image_id).length
const newImported = sameBatch.filter(t => t.status === 'complete' && t.result_image_id && !t.error).length
if (mode === 'deep' && sameBatch.length > 0) {
window.__fcToast?.({
toast({
text: `Deep scan finished — ${sameBatch.length} file(s) processed`,
type: 'info',
})
} else if (mode === 'quick' && sameBatch.length > 0) {
window.__fcToast?.({
toast({
text: `Quick scan finished — ${newImported} new file(s) queued`,
type: 'info',
})
} else {
window.__fcToast?.({ text: 'Library is up to date', type: 'info' })
toast({ text: 'Library is up to date', type: 'info' })
}
}, 2000)
} catch (e) {
triggerError.value = e.message
window.__fcToast?.({ text: `Scan failed: ${e.message}`, type: 'error' })
toast({ text: `Scan failed: ${e.message}`, type: 'error' })
throw e
}
}
frontend/src/stores/modal.js
+2 -1
View File
@@ -1,4 +1,5 @@
import { defineStore } from 'pinia'
import { toast } from '../utils/toast.js'
import { ref, computed } from 'vue'
import { useApi } from '../composables/useApi.js'
@@ -96,7 +97,7 @@ export const useModalStore = defineStore('modal', () => {
})
} catch (e) {
current.value.tags = prev
window.__fcToast?.({ text: `Failed to remove tag: ${e.message}`, type: 'error' })
toast({ text: `Failed to remove tag: ${e.message}`, type: 'error' })
throw e
}
}
frontend/src/stores/seriesManage.js
+2 -1
View File
@@ -1,4 +1,5 @@
import { defineStore } from 'pinia'
import { toast } from '../utils/toast.js'
import { ref } from 'vue'
import { useApi } from '../composables/useApi.js'
@@ -59,7 +60,7 @@ export const useSeriesManageStore = defineStore('seriesManage', () => {
})
pickerSelection.value = []
await refresh()
globalThis.window?.__fcToast?.({ text: 'Added to series', type: 'success' })
toast({ text: 'Added to series', type: 'success' })
}
async function remove(imageId) {
frontend/src/stores/suggestions.js
+3 -2
View File
@@ -1,4 +1,5 @@
import { defineStore } from 'pinia'
import { toast } from '../utils/toast.js'
import { ref } from 'vue'
import { useApi } from '../composables/useApi.js'
@@ -54,7 +55,7 @@ export const useSuggestionsStore = defineStore('suggestions', () => {
body: { tag_id: tagId }
})
_drop(suggestion.category, s => s === suggestion)
window.__fcToast?.({
toast({
text: `Tagged: ${suggestion.display_name}`,
type: 'success'
})
@@ -69,7 +70,7 @@ export const useSuggestionsStore = defineStore('suggestions', () => {
}
})
_drop(suggestion.category, s => s === suggestion)
window.__fcToast?.({
toast({
text: `Aliased & tagged: ${suggestion.display_name}`,
type: 'success'
})
frontend/src/utils/date.js
+19
View File
@@ -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
+21
View File
@@ -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
+8
View File
@@ -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)
}