feat(fc2c-i): tag directory view with previews, filter, search

frontend/src/components/discovery/TagCard.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-card class="fc-tagcard" @click="$emit('open', card.id)">
+    <div class="fc-tagcard__previews">
+      <img
+        v-for="(t, i) in card.preview_thumbnails" :key="i"
+        :src="t" alt="" loading="lazy"
+      />
+      <div v-if="card.preview_thumbnails.length === 0" class="fc-tagcard__noimg">
+        No preview
+      </div>
+    </div>
+    <v-card-text class="fc-tagcard__body">
+      <div class="fc-tagcard__name">
+        {{ card.name }}
+        <span v-if="card.kind === 'character' && card.fandom_name"
+              class="fc-tagcard__fandom">— {{ card.fandom_name }}</span>
+      </div>
+      <div class="fc-tagcard__meta">
+        <v-chip size="x-small" label>{{ card.kind }}</v-chip>
+        <span class="fc-tagcard__count">{{ card.image_count }}</span>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+defineProps({ card: { type: Object, required: true } })
+defineEmits(['open'])
+</script>
+
+<style scoped>
+.fc-tagcard { cursor: pointer; }
+.fc-tagcard__previews {
+  display: grid; grid-template-columns: repeat(3, 1fr);
+  gap: 2px; aspect-ratio: 3 / 1; background: rgb(var(--v-theme-surface-light));
+}
+.fc-tagcard__previews img { width: 100%; height: 100%; object-fit: cover; }
+.fc-tagcard__noimg {
+  grid-column: 1 / -1; display: flex; align-items: center;
+  justify-content: center; color: rgb(var(--v-theme-on-surface));
+  opacity: 0.5; font-size: 12px;
+}
+.fc-tagcard__body { padding: 8px 12px; }
+.fc-tagcard__name { font-weight: 600; }
+.fc-tagcard__fandom { font-weight: 400; opacity: 0.7; }
+.fc-tagcard__meta {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-top: 4px;
+}
+.fc-tagcard__count { font-variant-numeric: tabular-nums; opacity: 0.8; }
+</style>

frontend/src/views/TagsView.vue

@@ -0,0 +1,97 @@
+<template>
+  <v-container fluid class="py-6">
+    <h1 class="fc-h1 mb-4">Tags</h1>
+
+    <div class="fc-tags__controls">
+      <v-text-field
+        v-model="search" density="compact" variant="outlined"
+        prepend-inner-icon="mdi-magnify" hide-details
+        placeholder="Search tags" clearable style="max-width: 320px;"
+      />
+      <v-chip-group
+        v-model="kind" selected-class="text-accent" mandatory="false"
+      >
+        <v-chip v-for="k in KINDS" :key="k" :value="k" filter size="small">
+          {{ k }}
+        </v-chip>
+      </v-chip-group>
+    </div>
+
+    <v-alert v-if="store.error" type="error" variant="tonal" closable class="my-4">
+      Failed to load: {{ store.error }}
+    </v-alert>
+    <v-alert v-else-if="store.isEmpty" type="info" variant="tonal" class="my-4">
+      No tags match.
+    </v-alert>
+
+    <div class="fc-tags__grid">
+      <TagCard
+        v-for="c in store.cards" :key="c.id" :card="c" @open="openTag"
+      />
+    </div>
+
+    <div v-if="store.loading" class="fc-tags__sentinel">
+      <v-progress-circular indeterminate color="accent" size="28" />
+    </div>
+    <div v-else-if="store.hasMore" ref="sentinelEl" class="fc-tags__sentinel" />
+  </v-container>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useTagDirectoryStore } from '../stores/tagDirectory.js'
+import TagCard from '../components/discovery/TagCard.vue'
+
+const KINDS = ['artist', 'character', 'copyright', 'general', 'series', 'meta']
+const store = useTagDirectoryStore()
+const router = useRouter()
+
+const search = ref('')
+const kind = ref(null)
+const sentinelEl = ref(null)
+
+let debounce = null
+watch(search, (v) => {
+  if (debounce) clearTimeout(debounce)
+  debounce = setTimeout(() => store.setQuery(v || ''), 300)
+})
+watch(kind, (v) => store.setKind(v || null))
+
+let observer = null
+function attachObserver() {
+  if (observer) observer.disconnect()
+  if (!sentinelEl.value) return
+  observer = new IntersectionObserver(([e]) => {
+    if (e.isIntersecting && store.hasMore && !store.loading) store.loadMore()
+  }, { rootMargin: '600px' })
+  observer.observe(sentinelEl.value)
+}
+watch(sentinelEl, attachObserver)
+onMounted(() => { store.reset(); attachObserver() })
+onUnmounted(() => observer && observer.disconnect())
+
+function openTag(tagId) {
+  router.push({ name: 'gallery', query: { tag_id: tagId } })
+}
+</script>
+
+<style scoped>
+.fc-h1 {
+  font-family: 'Fraunces', Georgia, serif;
+  font-size: 32px; font-weight: 500;
+  color: rgb(var(--v-theme-on-surface));
+}
+.fc-tags__controls {
+  display: flex; align-items: center; gap: 16px;
+  flex-wrap: wrap; margin-bottom: 16px;
+}
+.fc-tags__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 12px;
+}
+.fc-tags__sentinel {
+  display: flex; justify-content: center; padding: 32px 0; min-height: 60px;
+}
+</style>