fix(subs): stop the lock/reload on source actions + regroup the row buttons
CI / lint (push) Successful in 2s
CI / frontend-build (push) Successful in 22s
CI / backend-lint-and-test (push) Successful in 24s
CI / integration (push) Successful in 3m2s

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>
This commit is contained in:
2026-06-06 20:48:01 -04:00
parent c65da42593
commit b7d07324ee
6 changed files with 238 additions and 126 deletions
@@ -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 {