From b7d07324eee4235cbcea219701fd3c602090b2a5 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 6 Jun 2026 20:48:01 -0400
Subject: [PATCH] fix(subs): stop the lock/reload on source actions + regroup
 the row buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Lock/reload: every inline source action (check / backfill / recover / toggle /
remove) ended by refetching the WHOLE subscription list (store.loadAll /
refresh), which blocked the UI and re-rendered the table — collapsing the
expanded row, which read as "locks then resets." The action APIs already return
the updated source, so the store now patches that one row in place
(_patchSource / _dropSource); the post-action loadAll/refresh calls are gone.
Toggling enabled, starting/stopping a backfill, recovering, and removing are now
instant and leave the expansion intact.

Button regroup (operator-flagged: tiny, mis-clickable, not grouped by function):
- New shared SourceActions.vue used by desktop SourceRow + mobile SourceCard.
- Frequent actions stay as size="small" buttons: Check, Backfill/Stop.
- Low-frequency / destructive actions move into a labelled overflow (⋮) menu —
  Preview backfill, Recover dropped near-duplicates, Remove source — so they
  can't be fat-fingered, and the labels spell out recover-vs-backfill.
- Edit moves next to the source URL (its identity), out of the action cluster
  where it sat beside Remove.
- Single-source Remove now confirms (it had no guard before).

Tests: store patches/drops in place without dropping the cache.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../subscriptions/SourceActions.vue           | 91 +++++++++++++++++
 .../components/subscriptions/SourceCard.vue   | 80 +++++----------
 .../components/subscriptions/SourceRow.vue    | 98 +++++++------------
 .../subscriptions/SubscriptionsTab.vue        | 25 +++--
 frontend/src/stores/sources.js                | 35 ++++++-
 frontend/test/sources.spec.js                 | 35 +++++++
 6 files changed, 238 insertions(+), 126 deletions(-)
 create mode 100644 frontend/src/components/subscriptions/SourceActions.vue

diff --git a/frontend/src/components/subscriptions/SourceActions.vue b/frontend/src/components/subscriptions/SourceActions.vue
new file mode 100644
index 0000000..94b2a02
--- /dev/null
+++ b/frontend/src/components/subscriptions/SourceActions.vue
@@ -0,0 +1,91 @@
+<template>
+  <!-- Shared per-source action cluster (desktop SourceRow + mobile SourceCard).
+       Frequent actions stay as buttons; low-frequency / destructive ones move
+       into a labelled overflow menu so they can't be mis-clicked, and the
+       labels spell out what each one does (recover vs backfill). -->
+  <div class="fc-src-actions">
+    <v-btn
+      icon size="small" variant="text" :loading="checking"
+      @click.stop="emit('check', source)"
+    >
+      <v-icon>mdi-play</v-icon>
+      <v-tooltip activator="parent" location="top">
+        Check now — fetch posts published since the last check
+      </v-tooltip>
+    </v-btn>
+    <v-btn
+      icon size="small" variant="text"
+      :color="running ? 'warning' : undefined"
+      @click.stop="emit('backfill', source)"
+    >
+      <v-icon>{{ running ? 'mdi-stop' : 'mdi-magnify-scan' }}</v-icon>
+      <v-tooltip activator="parent" location="top">
+        {{ running
+          ? (recovering ? 'Stop recovery' : 'Stop backfill')
+          : 'Backfill — one-time walk of the FULL post history until complete' }}
+      </v-tooltip>
+    </v-btn>
+
+    <v-menu location="bottom end">
+      <template #activator="{ props: menuProps }">
+        <v-btn icon size="small" variant="text" v-bind="menuProps" @click.stop>
+          <v-icon>mdi-dots-vertical</v-icon>
+          <v-tooltip activator="parent" location="top">More actions</v-tooltip>
+        </v-btn>
+      </template>
+      <v-list density="compact" min-width="260">
+        <v-list-item
+          v-if="isPatreon && !running"
+          prepend-icon="mdi-eye-outline"
+          @click="emit('preview', source)"
+        >
+          <v-list-item-title>Preview backfill</v-list-item-title>
+          <v-list-item-subtitle>
+            Count what a backfill would download — nothing is downloaded
+          </v-list-item-subtitle>
+        </v-list-item>
+        <v-list-item
+          v-if="isPatreon && !running"
+          prepend-icon="mdi-backup-restore"
+          @click="emit('recover', source)"
+        >
+          <v-list-item-title>Recover dropped near-duplicates</v-list-item-title>
+          <v-list-item-subtitle>
+            Re-fetch images previously dropped as near-dups and re-judge them
+            under the current similarity threshold
+          </v-list-item-subtitle>
+        </v-list-item>
+        <v-divider v-if="isPatreon && !running" />
+        <v-list-item
+          base-color="error"
+          prepend-icon="mdi-delete-outline"
+          @click="emit('remove', source)"
+        >
+          <v-list-item-title>Remove source</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  source: { type: Object, required: true },
+  checking: { type: Boolean, default: false },
+})
+const emit = defineEmits(['check', 'backfill', 'recover', 'preview', 'remove'])
+
+const running = computed(() => props.source.backfill_state === 'running')
+const recovering = computed(() => !!props.source.backfill_bypass_seen)
+const isPatreon = computed(() => props.source.platform === 'patreon')
+</script>
+
+<style scoped>
+.fc-src-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+</style>
diff --git a/frontend/src/components/subscriptions/SourceCard.vue b/frontend/src/components/subscriptions/SourceCard.vue
index 0e0617b..c8f5fb2 100644
--- a/frontend/src/components/subscriptions/SourceCard.vue
+++ b/frontend/src/components/subscriptions/SourceCard.vue
@@ -12,10 +12,19 @@
       />
     </div>
 
-    <a
-      :href="source.url" target="_blank" rel="noopener"
-      class="fc-source-card__url" @click.stop
-    >{{ source.url }}</a>
+    <div class="fc-source-card__url-row">
+      <a
+        :href="source.url" target="_blank" rel="noopener"
+        class="fc-source-card__url" @click.stop
+      >{{ source.url }}</a>
+      <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 source</v-tooltip>
+      </v-btn>
+    </div>
 
     <div class="fc-source-card__meta">
       <span>Last {{ formatRelative(source.last_checked_at) }}</span>
@@ -42,61 +51,20 @@
     </div>
 
     <div class="fc-source-card__actions">
-      <v-btn
-        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
-        size="x-small" variant="text"
-        :color="source.backfill_state === 'running' ? 'warning' : undefined"
-        @click.stop="$emit('backfill', source)"
-      >
-        <v-icon>{{ source.backfill_state === 'running' ? 'mdi-stop' : 'mdi-magnify-scan' }}</v-icon>
-        <v-tooltip activator="parent" location="top">
-          {{ source.backfill_state === 'running'
-            ? (source.backfill_bypass_seen ? 'Stop recovery' : 'Stop backfill')
-            : 'Backfill full history' }}
-        </v-tooltip>
-      </v-btn>
-      <v-btn
-        v-if="source.platform === 'patreon' && source.backfill_state !== 'running'"
-        size="x-small" variant="text"
-        @click.stop="$emit('preview', source)"
-      >
-        <v-icon>mdi-eye-outline</v-icon>
-        <v-tooltip activator="parent" location="top">
-          Preview — count what a backfill would download (no download)
-        </v-tooltip>
-      </v-btn>
-      <v-btn
-        v-if="source.platform === 'patreon' && source.backfill_state !== 'running'"
-        size="x-small" variant="text"
-        @click.stop="$emit('recover', source)"
-      >
-        <v-icon>mdi-backup-restore</v-icon>
-        <v-tooltip activator="parent" location="top">
-          Recover — re-fetch dropped near-dups &amp; re-evaluate under the current threshold
-        </v-tooltip>
-      </v-btn>
-      <v-btn 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
-        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>
+      <SourceActions
+        :source="source" :checking="checking"
+        @check="$emit('check', $event)"
+        @backfill="$emit('backfill', $event)"
+        @recover="$emit('recover', $event)"
+        @preview="$emit('preview', $event)"
+        @remove="$emit('remove', $event)"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
+import SourceActions from './SourceActions.vue'
 import SourceHealthDot from './SourceHealthDot.vue'
 import { formatRelative } from '../../utils/date.js'
 
@@ -124,11 +92,15 @@ function onToggleEnabled(value) {
   display: flex; flex-direction: column; gap: 6px;
 }
 .fc-source-card__top { display: flex; align-items: center; gap: 8px; }
+.fc-source-card__url-row {
+  display: flex; align-items: center; gap: 4px;
+}
 .fc-source-card__url {
   color: rgb(var(--v-theme-on-surface-variant));
   text-decoration: none;
   font-size: 0.8rem;
   word-break: break-all;
+  flex: 1 1 auto; min-width: 0;
 }
 .fc-source-card__url:hover { color: rgb(var(--v-theme-accent)); }
 .fc-source-card__meta {
diff --git a/frontend/src/components/subscriptions/SourceRow.vue b/frontend/src/components/subscriptions/SourceRow.vue
index 22873be..554e7d9 100644
--- a/frontend/src/components/subscriptions/SourceRow.vue
+++ b/frontend/src/components/subscriptions/SourceRow.vue
@@ -7,10 +7,22 @@
       <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>
+      <div class="fc-source-row__url-wrap">
+        <a :href="source.url" target="_blank" rel="noopener" class="fc-source-row__url"
+           @click.stop>
+          {{ source.url }}
+        </a>
+        <!-- Edit sits next to the source identity (operator-requested), not in
+             the action cluster where it was easy to fat-finger Remove. -->
+        <v-btn
+          icon="mdi-pencil" size="x-small" variant="text"
+          class="fc-source-row__edit"
+          @click.stop="$emit('edit', source)"
+        >
+          <v-icon>mdi-pencil</v-icon>
+          <v-tooltip activator="parent" location="top">Edit source</v-tooltip>
+        </v-btn>
+      </div>
     </td>
     <td>
       <v-switch
@@ -49,65 +61,20 @@
       <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
-        size="x-small" variant="text"
-        :color="source.backfill_state === 'running' ? 'warning' : undefined"
-        @click.stop="$emit('backfill', source)"
-      >
-        <v-icon>{{ source.backfill_state === 'running' ? 'mdi-stop' : 'mdi-magnify-scan' }}</v-icon>
-        <v-tooltip activator="parent" location="top">
-          {{ source.backfill_state === 'running'
-            ? (source.backfill_bypass_seen ? 'Stop recovery' : 'Stop backfill')
-            : 'Backfill — walk the full post history until complete' }}
-        </v-tooltip>
-      </v-btn>
-      <v-btn
-        v-if="source.platform === 'patreon' && source.backfill_state !== 'running'"
-        size="x-small" variant="text"
-        @click.stop="$emit('preview', source)"
-      >
-        <v-icon>mdi-eye-outline</v-icon>
-        <v-tooltip activator="parent" location="top">
-          Preview — count what a backfill would download (no download)
-        </v-tooltip>
-      </v-btn>
-      <v-btn
-        v-if="source.platform === 'patreon' && source.backfill_state !== 'running'"
-        size="x-small" variant="text"
-        @click.stop="$emit('recover', source)"
-      >
-        <v-icon>mdi-backup-restore</v-icon>
-        <v-tooltip activator="parent" location="top">
-          Recover — re-fetch dropped near-dups &amp; re-evaluate under the current threshold
-        </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>
+      <SourceActions
+        :source="source" :checking="checking"
+        @check="$emit('check', $event)"
+        @backfill="$emit('backfill', $event)"
+        @recover="$emit('recover', $event)"
+        @preview="$emit('preview', $event)"
+        @remove="$emit('remove', $event)"
+      />
     </td>
   </tr>
 </template>
 
 <script setup>
+import SourceActions from './SourceActions.vue'
 import SourceHealthDot from './SourceHealthDot.vue'
 import { formatRelative } from '../../utils/date.js'
 
@@ -129,18 +96,27 @@ function onToggleEnabled(value) {
   padding-right: 0 !important;
 }
 .fc-source-row__url-cell {
-  max-width: 400px;
+  max-width: 420px;
   overflow: hidden;
 }
+.fc-source-row__url-wrap {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+}
 .fc-source-row__url {
   color: rgb(var(--v-theme-on-surface-variant));
   text-decoration: none;
-  display: inline-block;
-  max-width: 100%;
+  flex: 0 1 auto;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* Keep the edit affordance subtle until the row is hovered. */
+.fc-source-row__edit { opacity: 0.5; flex: 0 0 auto; }
+.fc-source-row:hover .fc-source-row__edit { opacity: 1; }
 .fc-source-row__url:hover { color: rgb(var(--v-theme-accent)); }
 .fc-source-row__when {
   color: rgb(var(--v-theme-on-surface-variant));
diff --git a/frontend/src/components/subscriptions/SubscriptionsTab.vue b/frontend/src/components/subscriptions/SubscriptionsTab.vue
index 8744f9d..fc2892e 100644
--- a/frontend/src/components/subscriptions/SubscriptionsTab.vue
+++ b/frontend/src/components/subscriptions/SubscriptionsTab.vue
@@ -491,13 +491,26 @@ function openEditSource(source) {
 }
 
 async function removeSource(source) {
-  await store.remove(source.id, source.artist_id)
-  await refresh()
+  // Confirm — Remove moved into the overflow menu, but a destructive action
+  // still deserves a guard (single-source removal had none before).
+  if (!globalThis.window?.confirm(
+    `Remove this ${source.platform} source?\n${source.url}\n\nThe artist and already-downloaded images stay.`,
+  )) return
+  try {
+    // store._dropSource patches the cache in place — no full reload, so the
+    // table + expansion don't reset (operator-flagged lock/reload, 2026-06-07).
+    await store.remove(source.id, source.artist_id)
+  } catch (e) {
+    toast({ text: `Remove failed: ${e?.body?.detail || e?.message || e}`, type: 'error' })
+  }
 }
 
 async function toggleSourceEnabled({ source, enabled }) {
-  await store.update(source.id, { enabled }, source.artist_id)
-  await refresh()
+  try {
+    await store.update(source.id, { enabled }, source.artist_id)
+  } catch (e) {
+    toast({ text: `Update failed: ${e?.body?.detail || e?.message || e}`, type: 'error' })
+  }
 }
 
 async function onSourceSaved() {
@@ -557,7 +570,7 @@ async function onBackfill(source) {
       await store.startBackfill(source.id, source.artist_id)
       toast({ text: `Backfill started for ${source.artist_name}`, type: 'success' })
     }
-    await store.loadAll()
+    // startBackfill/stopBackfill patch the source in place — no full reload.
   } catch (e) {
     toast({
       text: `Backfill ${running ? 'stop' : 'start'} failed: ${e?.body?.detail || e?.message || e}`,
@@ -573,7 +586,7 @@ async function onRecover(source) {
   try {
     await store.recoverSource(source.id, source.artist_id)
     toast({ text: `Recovery started for ${source.artist_name}`, type: 'success' })
-    await store.loadAll()
+    // recoverSource patches the source in place — no full reload.
   } catch (e) {
     toast({
       text: `Recovery start failed: ${e?.body?.detail || e?.message || e}`,
diff --git a/frontend/src/stores/sources.js b/frontend/src/stores/sources.js
index f16ad8e..0b4d132 100644
--- a/frontend/src/stores/sources.js
+++ b/frontend/src/stores/sources.js
@@ -32,6 +32,31 @@ export const useSourcesStore = defineStore('sources', () => {
     if (artistId != null) byArtist.value.delete(artistId)
   }
 
+  // Patch a single updated source into every cached array IN PLACE, rather than
+  // invalidating + refetching the whole list. The full refetch was what locked
+  // the Subscriptions UI and collapsed the expanded row after every inline
+  // action (check / backfill / recover / toggle) — operator-flagged 2026-06-07.
+  // Map.set on a Vue-reactive ref(Map) triggers re-render; we hand each cache a
+  // NEW array so the table diffs just the one changed row.
+  function _patchSource(updated) {
+    if (!updated || updated.id == null) return
+    for (const [key, arr] of byArtist.value) {
+      const i = arr.findIndex((s) => s.id === updated.id)
+      if (i === -1) continue
+      const next = arr.slice()
+      next[i] = { ...arr[i], ...updated }
+      byArtist.value.set(key, next)
+    }
+  }
+
+  function _dropSource(id) {
+    for (const [key, arr] of byArtist.value) {
+      if (arr.some((s) => s.id === id)) {
+        byArtist.value.set(key, arr.filter((s) => s.id !== id))
+      }
+    }
+  }
+
   async function create(payload) {
     const body = await api.post('/api/sources', { body: payload })
     _invalidate(payload.artist_id)
@@ -40,13 +65,13 @@ export const useSourcesStore = defineStore('sources', () => {
 
   async function update(id, patch, artistIdHint = null) {
     const body = await api.patch(`/api/sources/${id}`, { body: patch })
-    _invalidate(artistIdHint ?? body.artist_id)
+    _patchSource(body)
     return body
   }
 
   async function remove(id, artistIdHint = null) {
     await api.delete(`/api/sources/${id}`)
-    _invalidate(artistIdHint)
+    _dropSource(id)
   }
 
   async function findOrCreateArtist(name) {
@@ -90,12 +115,12 @@ export const useSourcesStore = defineStore('sources', () => {
   // source shows backfill_state 'complete'); 'stop' cancels back to tick mode.
   async function startBackfill(id, artistIdHint = null) {
     const body = await api.post(`/api/sources/${id}/backfill`, { body: { action: 'start' } })
-    _invalidate(artistIdHint ?? body.artist_id)
+    _patchSource(body)
     return body
   }
   async function stopBackfill(id, artistIdHint = null) {
     const body = await api.post(`/api/sources/${id}/backfill`, { body: { action: 'stop' } })
-    _invalidate(artistIdHint ?? body.artist_id)
+    _patchSource(body)
     return body
   }
   // Plan #697: arm a recovery walk — a backfill that bypasses the Patreon
@@ -103,7 +128,7 @@ export const useSourcesStore = defineStore('sources', () => {
   // under the current pHash threshold. Stop with stopBackfill (shared lifecycle).
   async function recoverSource(id, artistIdHint = null) {
     const body = await api.post(`/api/sources/${id}/backfill`, { body: { action: 'recover' } })
-    _invalidate(artistIdHint ?? body.artist_id)
+    _patchSource(body)
     return body
   }
 
diff --git a/frontend/test/sources.spec.js b/frontend/test/sources.spec.js
index 395ede5..2570c76 100644
--- a/frontend/test/sources.spec.js
+++ b/frontend/test/sources.spec.js
@@ -41,6 +41,41 @@ describe('sources store', () => {
     expect(calls[0]).toContain('artist_id=7')
   })
 
+  it('update patches the source in place without dropping the cache', async () => {
+    const s = useSourcesStore()
+    s.byArtist.set(null, [
+      { id: 5, artist_id: 5, enabled: true, backfill_state: null },
+      { id: 6, artist_id: 5, enabled: true },
+    ])
+    stubFetch(() => ({
+      status: 200,
+      body: { id: 5, artist_id: 5, enabled: false, backfill_state: null },
+    }))
+    await s.update(5, { enabled: false }, 5)
+    // Cache survives (no full reload) and only source 5 changed.
+    expect(s.byArtist.has(null)).toBe(true)
+    const arr = s.byArtist.get(null)
+    expect(arr.find(r => r.id === 5).enabled).toBe(false)
+    expect(arr.find(r => r.id === 6).enabled).toBe(true)
+  })
+
+  it('startBackfill patches backfill_state in place', async () => {
+    const s = useSourcesStore()
+    s.byArtist.set(null, [{ id: 5, artist_id: 5, backfill_state: null }])
+    stubFetch(() => ({ status: 200, body: { id: 5, backfill_state: 'running' } }))
+    await s.startBackfill(5, 5)
+    expect(s.byArtist.get(null).find(r => r.id === 5).backfill_state).toBe('running')
+  })
+
+  it('remove drops the source from the cache in place', async () => {
+    const s = useSourcesStore()
+    s.byArtist.set(null, [{ id: 5, artist_id: 5 }, { id: 6, artist_id: 5 }])
+    stubFetch(() => ({ status: 204, body: null }))
+    await s.remove(5, 5)
+    expect(s.byArtist.has(null)).toBe(true)
+    expect(s.byArtist.get(null).map(r => r.id)).toEqual([6])
+  })
+
   it('create invalidates the all-cache and the artist-cache', async () => {
     const s = useSourcesStore()
     s.byArtist.set(null, [])