fc3f: ArtistCard — preview row + name + subscription chip + image count, clicks to /artist/:slug

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/components/discovery/ArtistCard.vue

@@ -0,0 +1,59 @@
+<template>
+  <v-card class="fc-artistcard" @click="onCardClick">
+    <div class="fc-artistcard__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-artistcard__noimg">
+        No preview
+      </div>
+    </div>
+    <v-card-text class="fc-artistcard__body">
+      <div class="fc-artistcard__name">{{ card.name }}</div>
+      <div class="fc-artistcard__meta">
+        <v-chip
+          v-if="card.is_subscription"
+          size="x-small" label prepend-icon="mdi-rss"
+        >Subscription</v-chip>
+        <span v-else />
+        <span class="fc-artistcard__count">{{ card.image_count }}</span>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+
+const props = defineProps({ card: { type: Object, required: true } })
+const router = useRouter()
+
+function onCardClick() {
+  router.push({ name: 'artist', params: { slug: props.card.slug } })
+}
+</script>
+
+<style scoped>
+.fc-artistcard { cursor: pointer; }
+.fc-artistcard__previews {
+  display: grid; grid-template-columns: repeat(3, 1fr);
+  gap: 2px; aspect-ratio: 3 / 1; background: rgb(var(--v-theme-surface-light));
+}
+.fc-artistcard__previews img { width: 100%; height: 100%; object-fit: cover; }
+.fc-artistcard__noimg {
+  grid-column: 1 / -1; display: flex; align-items: center;
+  justify-content: center;
+  color: rgb(var(--v-theme-on-surface-variant)); font-size: 12px;
+}
+.fc-artistcard__body { padding: 8px 12px; }
+.fc-artistcard__name { font-weight: 600; }
+.fc-artistcard__meta {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-top: 4px;
+}
+.fc-artistcard__count {
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--v-theme-on-surface-variant));
+}
+</style>