bvandeusen
da89fe6be2
Gallery store handles cursor pagination, date-group merging across pages, tag filter, timeline buckets, and jump-to-month. Stale response detection via an inflightId counter prevents out-of-order page additions when the user toggles filters quickly. GalleryItem is a square thumbnail card with hover/focus accent outline, keyboard activation (Enter/Space → open), video badge for video MIME types, and a broken-image fallback if the thumbnail URL fails to load. EmptyState points operators to /settings?tab=import so the empty path is self-guiding. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
28 lines
879 B
Vue
28 lines
879 B
Vue
<template>
|
|
<div class="fc-empty">
|
|
<v-icon size="56" icon="mdi-image-off-outline" class="fc-empty__icon" />
|
|
<h2 class="fc-empty__title">No images yet</h2>
|
|
<p class="fc-empty__body">
|
|
Drop files into <code>/import</code> and run a scan from
|
|
<RouterLink to="/settings?tab=import">Settings → Import</RouterLink>.
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.fc-empty {
|
|
text-align: center;
|
|
padding: 96px 24px;
|
|
color: rgb(var(--v-theme-on-surface));
|
|
}
|
|
.fc-empty__icon { color: rgb(var(--v-theme-accent)); margin-bottom: 16px; }
|
|
.fc-empty__title {
|
|
font-family: 'Fraunces', Georgia, serif;
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
}
|
|
.fc-empty__body { color: rgb(var(--v-theme-on-surface-variant, var(--v-theme-on-surface))); }
|
|
code { background: rgb(var(--v-theme-surface-light)); padding: 1px 6px; border-radius: 4px; }
|
|
</style>
|