feat(ui): redesign /subscriptions as v-data-table with expandable source rows (GS-style)

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

frontend/src/components/subscriptions/ArtistSection.vue

@@ -1,64 +0,0 @@
-<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"
-        :checking="checkingIds.has(s.id)"
-        @edit="$emit('edit', $event)"
-        @remove="$emit('remove', $event)"
-        @toggle="$emit('toggle-source', $event)"
-        @check="$emit('check', $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 },
-  checkingIds: { type: Set, default: () => new Set() },
-})
-defineEmits(['toggle', 'edit', 'remove', 'toggle-source', 'add-source', 'check'])
-
-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>

frontend/src/components/subscriptions/SourceRow.vue

@@ -1,25 +1,63 @@
 <template>
-  <div class="fc-source-row">
-    <SourceHealthDot :source="source" :warning-threshold="warningThreshold" />
-    <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-play" size="x-small" variant="text"
-      :loading="checking"
-      @click="$emit('check', source)"
-    />
-    <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>
+  <tr class="fc-source-row">
+    <td class="fc-source-row__health">
+      <SourceHealthDot :source="source" :warning-threshold="warningThreshold" />
+    </td>
+    <td>
+      <v-chip size="x-small" variant="tonal" label>{{ source.platform }}</v-chip>
+    </td>
+    <td class="fc-source-row__url-cell">
+      <a :href="source.url" target="_blank" rel="noopener" class="fc-source-row__url"
+         @click.stop>
+        {{ source.url }}
+      </a>
+    </td>
+    <td>
+      <v-switch
+        :model-value="source.enabled"
+        density="compact" hide-details color="accent"
+        @click.stop
+        @update:model-value="onToggleEnabled"
+      />
+    </td>
+    <td class="fc-source-row__when">
+      {{ formatRelative(source.last_checked_at) }}
+    </td>
+    <td class="fc-source-row__when">
+      {{ formatRelative(source.next_check_at, { future: true }) }}
+    </td>
+    <td>
+      <v-chip
+        v-if="(source.consecutive_failures || 0) > 0"
+        size="x-small" color="error" variant="tonal" label
+      >{{ source.consecutive_failures }}</v-chip>
+      <span v-else class="fc-source-row__zero">0</span>
+    </td>
+    <td class="fc-source-row__actions">
+      <v-btn
+        icon="mdi-play" size="x-small" variant="text"
+        :loading="checking"
+        @click.stop="$emit('check', source)"
+      >
+        <v-icon>mdi-play</v-icon>
+        <v-tooltip activator="parent" location="top">Check now</v-tooltip>
+      </v-btn>
+      <v-btn
+        icon="mdi-pencil" size="x-small" variant="text"
+        @click.stop="$emit('edit', source)"
+      >
+        <v-icon>mdi-pencil</v-icon>
+        <v-tooltip activator="parent" location="top">Edit</v-tooltip>
+      </v-btn>
+      <v-btn
+        icon="mdi-close" size="x-small" variant="text" color="error"
+        @click.stop="$emit('remove', source)"
+      >
+        <v-icon>mdi-close</v-icon>
+        <v-tooltip activator="parent" location="top">Remove</v-tooltip>
+      </v-btn>
+    </td>
+  </tr>
 </template>
 
 <script setup>
@@ -31,25 +69,59 @@ const props = defineProps({
   warningThreshold: { type: Number, default: 5 },
 })
 const emit = defineEmits(['edit', 'remove', 'toggle', 'check'])
+
 function onToggleEnabled(value) {
   emit('toggle', { source: props.source, enabled: value })
 }
+
+function formatRelative(iso, opts = {}) {
+  if (!iso) return opts.future ? '—' : 'Never'
+  const then = new Date(iso).getTime()
+  const now = Date.now()
+  const diff = (then - now) / 1000  // seconds; positive = future, negative = past
+  const abs = Math.abs(diff)
+
+  let body
+  if (abs < 60) body = `${Math.floor(abs)}s`
+  else if (abs < 3600) body = `${Math.floor(abs / 60)}m`
+  else if (abs < 86400) body = `${Math.floor(abs / 3600)}h`
+  else body = `${Math.floor(abs / 86400)}d`
+
+  if (opts.future) return diff <= 0 ? 'imminent' : `in ${body}`
+  return `${body} ago`
+}
 </script>
 
 <style scoped>
-.fc-source-row {
-  display: grid;
-  grid-template-columns: auto 96px 1fr auto auto auto auto;
-  gap: 0.75rem;
-  align-items: center;
-  padding: 0.4rem 0;
+.fc-source-row__health {
+  width: 24px;
+  padding-right: 0 !important;
+}
+.fc-source-row__url-cell {
+  max-width: 400px;
+  overflow: hidden;
 }
 .fc-source-row__url {
   color: rgb(var(--v-theme-on-surface-variant));
   text-decoration: none;
+  display: inline-block;
+  max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .fc-source-row__url:hover { color: rgb(var(--v-theme-accent)); }
+.fc-source-row__when {
+  color: rgb(var(--v-theme-on-surface-variant));
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.fc-source-row__zero {
+  color: rgb(var(--v-theme-on-surface-variant));
+  opacity: 0.6;
+}
+.fc-source-row__actions {
+  white-space: nowrap;
+  text-align: right;
+}
 </style>