bvandeusen
eebc8e2413
- 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>
106 lines
3.4 KiB
Vue
106 lines
3.4 KiB
Vue
<template>
|
|
<section class="fc-suggestions" aria-label="Tag suggestions">
|
|
<h3 class="fc-suggestions__title">Suggestions</h3>
|
|
|
|
<div v-if="store.loading" class="fc-suggestions__skeleton">
|
|
<div v-for="i in 4" :key="i" class="fc-suggestions__skel-row" />
|
|
</div>
|
|
<v-alert v-else-if="store.error" type="error" variant="tonal" density="compact">
|
|
{{ store.error }}
|
|
</v-alert>
|
|
<div v-else-if="isEmpty" class="text-caption">
|
|
No suggestions above threshold.
|
|
</div>
|
|
|
|
<template v-else>
|
|
<SuggestionsCategoryGroup
|
|
v-for="cat in peopleCats" :key="cat"
|
|
v-show="store.byCategory[cat] && store.byCategory[cat].length"
|
|
:label="labelFor(cat)" :items="store.byCategory[cat] || []"
|
|
@accept="onAccept" @alias="onAlias" @dismiss="store.dismiss"
|
|
/>
|
|
<SuggestionsCategoryGroup
|
|
v-if="store.byCategory.general && store.byCategory.general.length"
|
|
label="General" :items="store.byCategory.general"
|
|
collapsible :default-open="false"
|
|
@accept="onAccept" @alias="onAlias" @dismiss="store.dismiss"
|
|
/>
|
|
</template>
|
|
|
|
<v-dialog v-model="aliasDialog" max-width="480">
|
|
<AliasPickerDialog
|
|
v-if="aliasTarget"
|
|
:category="aliasTarget.category"
|
|
@confirm="onAliasConfirm" @cancel="aliasDialog = false"
|
|
/>
|
|
</v-dialog>
|
|
</section>
|
|
</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'
|
|
import AliasPickerDialog from './AliasPickerDialog.vue'
|
|
|
|
const props = defineProps({ imageId: { type: Number, required: true } })
|
|
const store = useSuggestionsStore()
|
|
|
|
const peopleCats = ['artist', 'character', 'copyright']
|
|
function labelFor(c) { return CATEGORY_LABELS[c] || c }
|
|
|
|
const isEmpty = computed(() =>
|
|
Object.values(store.byCategory).every(list => !list || list.length === 0)
|
|
)
|
|
|
|
watch(() => props.imageId, (id) => { if (id != null) store.load(id) }, { immediate: true })
|
|
|
|
async function onAccept(s) {
|
|
try { await store.accept(s) }
|
|
catch (e) { toast({ text: `Accept failed: ${e.message}`, type: 'error' }) }
|
|
}
|
|
|
|
const aliasDialog = ref(false)
|
|
const aliasTarget = ref(null)
|
|
function onAlias(s) { aliasTarget.value = s; aliasDialog.value = true }
|
|
async function onAliasConfirm(canonicalTagId) {
|
|
try {
|
|
await store.aliasAccept(aliasTarget.value, canonicalTagId)
|
|
aliasDialog.value = false
|
|
} catch (e) {
|
|
toast({ text: `Alias failed: ${e.message}`, type: 'error' })
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fc-suggestions {
|
|
margin-top: 16px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid rgb(var(--v-theme-surface-light));
|
|
}
|
|
.fc-suggestions__title {
|
|
font-family: 'Fraunces', Georgia, serif;
|
|
font-size: 16px; font-weight: 500;
|
|
color: rgb(var(--v-theme-on-surface));
|
|
margin-bottom: 8px;
|
|
}
|
|
.fc-suggestions__skeleton { display: flex; flex-direction: column; gap: 8px; }
|
|
.fc-suggestions__skel-row {
|
|
height: 18px; border-radius: 4px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgb(var(--v-theme-surface)) 0%,
|
|
rgb(var(--v-theme-surface-light)) 50%,
|
|
rgb(var(--v-theme-surface)) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: fc-shimmer 1.4s infinite;
|
|
}
|
|
@keyframes fc-shimmer {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
</style>
|