From ab2847ad3396ce7bde42ed94af9db72e0750d93d Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 21 May 2026 22:15:06 -0400
Subject: [PATCH] =?UTF-8?q?fc3f:=20ArtistCard=20=E2=80=94=20preview=20row?=
 =?UTF-8?q?=20+=20name=20+=20subscription=20chip=20+=20image=20count,=20cl?=
 =?UTF-8?q?icks=20to=20/artist/:slug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/components/discovery/ArtistCard.vue   | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 frontend/src/components/discovery/ArtistCard.vue

diff --git a/frontend/src/components/discovery/ArtistCard.vue b/frontend/src/components/discovery/ArtistCard.vue
new file mode 100644
index 0000000..55564cb
--- /dev/null
+++ b/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>