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>