feat(fc3a): SubscriptionsView + ArtistSection + SourceRow + router

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-20 12:57:13 -04:00
parent ded5e5f642
commit 79d6d74637
4 changed files with 250 additions and 1 deletions
@@ -0,0 +1,61 @@
+<template>
+  <section class="fc-artist-section">
+    <header class="fc-artist-section__head" @click="$emit('toggle')">
+      <v-icon :icon="open ? 'mdi-chevron-down' : 'mdi-chevron-right'" size="small" />
+      <span class="fc-artist-section__name">{{ artist.name }}</span>
+      <span class="fc-artist-section__meta">
+        {{ sources.length }} source{{ sources.length === 1 ? '' : 's' }}
+        <template v-if="latestChecked">
+          · last check {{ latestChecked }}
+        </template>
+      </span>
+    </header>
+    <div v-if="open" class="fc-artist-section__body">
+      <SourceRow
+        v-for="s in sources" :key="s.id" :source="s"
+        @edit="$emit('edit', $event)"
+        @remove="$emit('remove', $event)"
+        @toggle="$emit('toggle-source', $event)"
+      />
+      <v-btn
+        size="small" variant="text" prepend-icon="mdi-plus"
+        class="fc-artist-section__add"
+        @click="$emit('add-source', artist)"
+      >Add source to {{ artist.name }}</v-btn>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import SourceRow from './SourceRow.vue'
+
+const props = defineProps({
+  artist: { type: Object, required: true },
+  sources: { type: Array, required: true },
+  open: { type: Boolean, default: false },
+})
+defineEmits(['toggle', 'edit', 'remove', 'toggle-source', 'add-source'])
+
+const latestChecked = computed(() => {
+  const dates = props.sources.map(s => s.last_checked_at).filter(Boolean)
+  if (dates.length === 0) return null
+  const latest = dates.sort().slice(-1)[0]
+  return latest.slice(0, 10)
+})
+</script>
+
+<style scoped>
+.fc-artist-section { border-bottom: 1px solid rgb(var(--v-theme-on-surface-variant) / 0.18); }
+.fc-artist-section__head {
+  display: flex; align-items: center; gap: 0.5rem;
+  padding: 0.75rem 0; cursor: pointer; user-select: none;
+}
+.fc-artist-section__name { font-weight: 600; }
+.fc-artist-section__meta {
+  color: rgb(var(--v-theme-on-surface-variant));
+  font-size: 0.85rem;
+}
+.fc-artist-section__body { padding: 0 0 0.75rem 1.5rem; }
+.fc-artist-section__add { margin-top: 0.25rem; }
+</style>
@@ -0,0 +1,43 @@
+<template>
+  <div class="fc-source-row">
+    <v-chip size="x-small" variant="tonal" class="fc-source-row__platform">
+      {{ source.platform }}
+    </v-chip>
+    <a :href="source.url" target="_blank" rel="noopener" class="fc-source-row__url">
+      {{ source.url }}
+    </a>
+    <v-switch
+      :model-value="source.enabled"
+      density="compact" hide-details color="accent"
+      @update:model-value="onToggleEnabled"
+    />
+    <v-btn icon="mdi-pencil" size="x-small" variant="text" @click="$emit('edit', source)" />
+    <v-btn icon="mdi-close" size="x-small" variant="text" @click="$emit('remove', source)" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({ source: { type: Object, required: true } })
+const emit = defineEmits(['edit', 'remove', 'toggle'])
+function onToggleEnabled(value) {
+  emit('toggle', { source: props.source, enabled: value })
+}
+</script>
+
+<style scoped>
+.fc-source-row {
+  display: grid;
+  grid-template-columns: 96px 1fr auto auto auto;
+  gap: 0.75rem;
+  align-items: center;
+  padding: 0.4rem 0;
+}
+.fc-source-row__url {
+  color: rgb(var(--v-theme-on-surface-variant));
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fc-source-row__url:hover { color: rgb(var(--v-theme-accent)); }
+</style>