From ca55d92c680af4224bea6ddad747b2f1fd29a32a Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Tue, 26 May 2026 16:00:47 -0400
Subject: [PATCH] =?UTF-8?q?feat(artist-view):=20ArtistManagementTab=20?=
 =?UTF-8?q?=E2=80=94=20Overview=20chips=20(Subscription=20badge=20+=20subs?=
 =?UTF-8?q?cription=20count)=20+=20Frequent=20tags=20+=20Activity=20sparkl?=
 =?UTF-8?q?ine=20+=20Subscriptions=20table=20+=20Danger=20zone.=20'View=20?=
 =?UTF-8?q?posts'=20chip=20and=20'Credential=20health=20=C2=B7=20FC-3b'=20?=
 =?UTF-8?q?placeholder=20chip=20dropped;=20'Sources'=20section=20renamed?=
 =?UTF-8?q?=20to=20'Subscriptions'?=
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>
---
 .../components/artist/ArtistManagementTab.vue | 133 ++++++++++++++++++
 1 file changed, 133 insertions(+)
 create mode 100644 frontend/src/components/artist/ArtistManagementTab.vue

diff --git a/frontend/src/components/artist/ArtistManagementTab.vue b/frontend/src/components/artist/ArtistManagementTab.vue
new file mode 100644
index 0000000..b78c2a1
--- /dev/null
+++ b/frontend/src/components/artist/ArtistManagementTab.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="fc-artist-mgmt">
+    <section class="fc-artist-mgmt__sec">
+      <h2 class="fc-h2">Overview</h2>
+      <div class="fc-artist-mgmt__chips">
+        <v-chip
+          size="small"
+          :variant="overview.is_subscription ? 'flat' : 'outlined'"
+          :color="overview.is_subscription ? 'accent' : undefined"
+          prepend-icon="mdi-rss"
+        >{{ overview.is_subscription ? 'Subscription' : 'One-off' }}</v-chip>
+        <v-chip
+          size="small" variant="outlined" prepend-icon="mdi-link-variant"
+          :to="`/subscriptions?artist_id=${overview.id}`"
+        >{{ overview.sources.length }} subscription{{ overview.sources.length === 1 ? '' : 's' }}</v-chip>
+      </div>
+    </section>
+
+    <section v-if="overview.cooccurring_tags.length" class="fc-artist-mgmt__sec">
+      <h2 class="fc-h2">Frequent tags</h2>
+      <div class="fc-artist-mgmt__tags">
+        <v-chip
+          v-for="t in overview.cooccurring_tags" :key="t.id"
+          size="small" @click="openTag(t.id)"
+        >{{ t.name }} <span class="fc-artist-mgmt__tagc">{{ t.count }}</span></v-chip>
+      </div>
+    </section>
+
+    <section v-if="overview.activity.length" class="fc-artist-mgmt__sec">
+      <h2 class="fc-h2">Activity</h2>
+      <svg
+        class="fc-artist-mgmt__spark" :viewBox="`0 0 ${sparkW} ${sparkH}`"
+        preserveAspectRatio="none" role="img" aria-label="posts over time"
+      >
+        <polyline :points="sparkPoints" fill="none"
+                  stroke="rgb(var(--v-theme-accent))" stroke-width="2" />
+      </svg>
+    </section>
+
+    <section v-if="overview.sources.length" class="fc-artist-mgmt__sec">
+      <div class="fc-artist-mgmt__sec-head">
+        <h2 class="fc-h2">Subscriptions</h2>
+        <RouterLink
+          :to="`/subscriptions?artist_id=${overview.id}`"
+          class="fc-artist-mgmt__manage"
+        >Manage subscriptions →</RouterLink>
+      </div>
+      <v-table density="compact">
+        <thead>
+          <tr><th>Platform</th><th>URL</th><th class="text-right">Images</th></tr>
+        </thead>
+        <tbody>
+          <tr v-for="s in overview.sources" :key="s.id">
+            <td>{{ s.platform }}</td>
+            <td class="fc-artist-mgmt__url">{{ s.url }}</td>
+            <td class="text-right">{{ s.image_count }}</td>
+          </tr>
+        </tbody>
+      </v-table>
+    </section>
+
+    <section class="fc-artist-mgmt__sec">
+      <h2 class="fc-h2">Danger zone</h2>
+      <ArtistDangerZone
+        :slug="overview.slug"
+        :artist-id="overview.id"
+        :artist-name="overview.name"
+      />
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRouter, RouterLink } from 'vue-router'
+
+import ArtistDangerZone from './ArtistDangerZone.vue'
+
+const props = defineProps({
+  overview: { type: Object, required: true },
+})
+
+const router = useRouter()
+
+const sparkW = 600
+const sparkH = 80
+const sparkPoints = computed(() => {
+  const a = props.overview.activity ?? []
+  if (a.length === 0) return ''
+  const max = Math.max(...a.map(p => p.count), 1)
+  const stepX = a.length > 1 ? sparkW / (a.length - 1) : 0
+  return a.map((p, i) => {
+    const x = i * stepX
+    const y = sparkH - (p.count / max) * (sparkH - 4) - 2
+    return `${x.toFixed(1)},${y.toFixed(1)}`
+  }).join(' ')
+})
+
+function openTag (tagId) {
+  router.push({ name: 'gallery', query: { tag_id: tagId } })
+}
+</script>
+
+<style scoped>
+.fc-artist-mgmt { padding-top: 1rem; }
+.fc-h2 {
+  font-family: 'Fraunces', Georgia, serif;
+  font-size: 20px; font-weight: 500; margin-bottom: 8px;
+}
+.fc-artist-mgmt__sec { margin-bottom: 28px; }
+.fc-artist-mgmt__chips { display: flex; gap: 8px; flex-wrap: wrap; }
+.fc-artist-mgmt__tags { display: flex; flex-wrap: wrap; gap: 6px; }
+.fc-artist-mgmt__tagc {
+  color: rgb(var(--v-theme-on-surface-variant));
+  margin-left: 4px;
+  font-variant-numeric: tabular-nums;
+}
+.fc-artist-mgmt__spark { width: 100%; height: 80px; }
+.fc-artist-mgmt__url {
+  max-width: 380px; overflow: hidden; text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fc-artist-mgmt__sec-head {
+  display: flex; align-items: baseline; justify-content: space-between;
+  margin-bottom: 0.25rem;
+}
+.fc-artist-mgmt__manage {
+  font-size: 0.85rem;
+  color: rgb(var(--v-theme-accent));
+  text-decoration: none;
+}
+.fc-artist-mgmt__manage:hover { text-decoration: underline; }
+</style>