feat(fc2a): add gallery Pinia store, GalleryItem, and EmptyState
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>
This commit is contained in:
@@ -0,0 +1,27 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user