bvandeusen/FabledCurator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 33 Wiki Activity

feat(subs): subscriptions UX batch — error reasons, single-source rows, health sort, bulk backfill
CI / lint (push) Successful in 2s
Details
CI / frontend-build (push) Successful in 24s
Details
CI / backend-lint-and-test (push) Successful in 26s
Details
CI / integration (push) Successful in 3m2s
Details

Browse Source 
Operator-requested follow-ups:
- #1 Failure reason on hover: the red error-count chip now shows source.last_error
  in a tooltip (desktop row + mobile card), so the cause (e.g. the new
  "vanity=cw" message) is visible without opening Downloads.
- #2 Collapse the single-source case: a subscription with exactly one source now
  shows that source's URL + its own actions (Check / Backfill / ⋮ / Edit) inline
  on the artist row — no expand needed for the common case. Multi-source keeps
  the artist-level actions + expandable per-source table.
- #3 Sort by health: the Health column is sortable on a numeric rank
  (never/ok/warn/fail) and the table defaults to worst-first, name as tiebreak.
- #4 Drop Preview: removed the low-value bounded-peek action from the menu and
  all its wiring (backend endpoint + store fn left in place, unused).
- #5 Backfill selected: a "Backfill" button in the bulk bar arms a run-until-done
  backfill on every enabled, not-already-running source in the selection.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-06-06 21:00:47 -04:00
parent b7d07324ee
commit e4e35163ab
4 changed files with 140 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/subscriptions/SourceActions.vue
+1 -11
View File
@@ -34,16 +34,6 @@
</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"
@@ -75,7 +65,7 @@ const props = defineProps({
source: { type: Object, required: true },
checking: { type: Boolean, default: false },
})
const emit = defineEmits(['check', 'backfill', 'recover', 'preview', 'remove'])
const emit = defineEmits(['check', 'backfill', 'recover', 'remove'])
const running = computed(() => props.source.backfill_state === 'running')
const recovering = computed(() => !!props.source.backfill_bypass_seen)
frontend/src/components/subscriptions/SourceCard.vue
+6 -3
View File
@@ -32,7 +32,11 @@
<v-chip
v-if="(source.consecutive_failures || 0) > 0"
size="x-small" color="error" variant="tonal" label
>{{ source.consecutive_failures }} err</v-chip>
>{{ source.consecutive_failures }} err
<v-tooltip v-if="source.last_error" activator="parent" location="top" max-width="480">
<span style="white-space: pre-wrap; word-break: break-word;">{{ source.last_error }}</span>
</v-tooltip>
</v-chip>
<v-chip
v-else-if="source.backfill_state === 'running'"
size="x-small" color="info" variant="tonal" label
@@ -56,7 +60,6 @@
@check="$emit('check', $event)"
@backfill="$emit('backfill', $event)"
@recover="$emit('recover', $event)"
@preview="$emit('preview', $event)"
@remove="$emit('remove', $event)"
/>
</div>
@@ -76,7 +79,7 @@ const props = defineProps({
checking: { type: Boolean, default: false },
warningThreshold: { type: Number, default: 5 },
})
const emit = defineEmits(['edit', 'remove', 'toggle', 'check', 'backfill', 'recover', 'preview'])
const emit = defineEmits(['edit', 'remove', 'toggle', 'check', 'backfill', 'recover'])
function onToggleEnabled(value) {
emit('toggle', { source: props.source, enabled: value })
frontend/src/components/subscriptions/SourceRow.vue
+11 -3
View File
@@ -42,7 +42,12 @@
<v-chip
v-if="(source.consecutive_failures || 0) > 0"
size="x-small" color="error" variant="tonal" label
>{{ source.consecutive_failures }}</v-chip>
>{{ source.consecutive_failures }}
<!-- #1: show the actual failure reason on hover instead of a bare count. -->
<v-tooltip v-if="source.last_error" activator="parent" location="top" max-width="480">
<span class="fc-source-row__err-text">{{ source.last_error }}</span>
</v-tooltip>
</v-chip>
<v-chip
v-else-if="source.backfill_state === 'running'"
size="x-small" color="info" variant="tonal" label
@@ -66,7 +71,6 @@
@check="$emit('check', $event)"
@backfill="$emit('backfill', $event)"
@recover="$emit('recover', $event)"
@preview="$emit('preview', $event)"
@remove="$emit('remove', $event)"
/>
</td>
@@ -83,7 +87,7 @@ const props = defineProps({
checking: { type: Boolean, default: false },
warningThreshold: { type: Number, default: 5 },
})
const emit = defineEmits(['edit', 'remove', 'toggle', 'check', 'backfill', 'recover', 'preview'])
const emit = defineEmits(['edit', 'remove', 'toggle', 'check', 'backfill', 'recover'])
function onToggleEnabled(value) {
emit('toggle', { source: props.source, enabled: value })
@@ -127,6 +131,10 @@ function onToggleEnabled(value) {
color: rgb(var(--v-theme-on-surface-variant));
opacity: 0.6;
}
.fc-source-row__err-text {
white-space: pre-wrap;
word-break: break-word;
}
.fc-source-row__actions {
white-space: nowrap;
text-align: right;
frontend/src/components/subscriptions/SubscriptionsTab.vue
+122 -50
View File
@@ -54,6 +54,9 @@
<v-btn size="small" variant="text" prepend-icon="mdi-toggle-switch-off-outline" @click="bulkSetEnabled(false)">
Disable all
</v-btn>
<v-btn size="small" variant="text" prepend-icon="mdi-magnify-scan" @click="bulkBackfill">
Backfill
</v-btn>
<v-btn size="small" variant="text" color="error" prepend-icon="mdi-delete" @click="bulkDelete">
Delete
</v-btn>
@@ -82,6 +85,7 @@
item-value="key"
v-model="selected"
v-model:expanded="expanded"
v-model:sort-by="sortBy"
:items-per-page="50"
:items-per-page-options="ITEMS_PER_PAGE_OPTIONS"
density="comfortable"
@@ -89,7 +93,13 @@
@click:row="onRowClick"
>
<template #item.name="{ item }">
<span class="fc-subs__name">{{ item.artist.name }}</span>
<div class="fc-subs__name">{{ item.artist.name }}</div>
<!-- #2: single-source subscriptions show their URL inline (no expand). -->
<a
v-if="item.singleSource"
:href="item.singleSource.url" target="_blank" rel="noopener"
class="fc-subs__sub-url" @click.stop
>{{ item.singleSource.url }}</a>
</template>
<template #item.platforms="{ item }">
@@ -121,32 +131,60 @@
</template>
<template #item.actions="{ item }">
<v-btn
icon size="small" variant="text"
:loading="anyChecking(item.sources)"
@click.stop="checkAll(item)"
>
<v-icon>mdi-refresh</v-icon>
<v-tooltip activator="parent" location="top">Check all sources</v-tooltip>
</v-btn>
<v-btn icon size="small" variant="text" @click.stop="openAddSource(item.artist)">
<v-icon>mdi-plus</v-icon>
<v-tooltip activator="parent" location="top">Add source</v-tooltip>
</v-btn>
<v-btn
icon size="small" variant="text"
:to="`/posts?artist_id=${item.artist.id}`" @click.stop
>
<v-icon>mdi-rss</v-icon>
<v-tooltip activator="parent" location="top">View posts</v-tooltip>
</v-btn>
<v-btn
icon size="small" variant="text"
:to="`/artist/${item.artist.slug}`" @click.stop
>
<v-icon>mdi-account</v-icon>
<v-tooltip activator="parent" location="top">Open artist page</v-tooltip>
</v-btn>
<!-- #2: single source → its own actions inline (Check / Backfill / ⋮),
plus Edit, so the row is actionable without expanding. -->
<template v-if="item.singleSource">
<SourceActions
:source="item.singleSource"
:checking="store.checkingIds.has(item.singleSource.id)"
@check="onCheck" @backfill="onBackfill"
@recover="onRecover" @remove="removeSource"
/>
<v-btn icon size="small" variant="text" @click.stop="openEditSource(item.singleSource)">
<v-icon>mdi-pencil</v-icon>
<v-tooltip activator="parent" location="top">Edit source</v-tooltip>
</v-btn>
<v-btn icon size="small" variant="text" @click.stop="openAddSource(item.artist)">
<v-icon>mdi-plus</v-icon>
<v-tooltip activator="parent" location="top">Add another source</v-tooltip>
</v-btn>
<v-btn
icon size="small" variant="text"
:to="`/artist/${item.artist.slug}`" @click.stop
>
<v-icon>mdi-account</v-icon>
<v-tooltip activator="parent" location="top">Open artist page</v-tooltip>
</v-btn>
</template>
<!-- Multi-source → artist-level actions; expand for per-source rows. -->
<template v-else>
<v-btn
icon size="small" variant="text"
:loading="anyChecking(item.sources)"
@click.stop="checkAll(item)"
>
<v-icon>mdi-refresh</v-icon>
<v-tooltip activator="parent" location="top">Check all sources</v-tooltip>
</v-btn>
<v-btn icon size="small" variant="text" @click.stop="openAddSource(item.artist)">
<v-icon>mdi-plus</v-icon>
<v-tooltip activator="parent" location="top">Add source</v-tooltip>
</v-btn>
<v-btn
icon size="small" variant="text"
:to="`/posts?artist_id=${item.artist.id}`" @click.stop
>
<v-icon>mdi-rss</v-icon>
<v-tooltip activator="parent" location="top">View posts</v-tooltip>
</v-btn>
<v-btn
icon size="small" variant="text"
:to="`/artist/${item.artist.slug}`" @click.stop
>
<v-icon>mdi-account</v-icon>
<v-tooltip activator="parent" location="top">Open artist page</v-tooltip>
</v-btn>
</template>
</template>
<template #expanded-row="{ columns, item }">
@@ -176,7 +214,6 @@
@check="onCheck"
@backfill="onBackfill"
@recover="onRecover"
@preview="onPreview"
/>
<tr v-if="item.sources.length === 0">
<td colspan="8" class="fc-subs__sources-empty">
@@ -254,7 +291,6 @@
@check="onCheck"
@backfill="onBackfill"
@recover="onRecover"
@preview="onPreview"
/>
<div v-if="item.sources.length === 0" class="fc-subs__sources-empty">
No sources yet. Tap + to add one.
@@ -270,11 +306,6 @@
@saved="onSourceSaved"
/>
<ArtistCreateDialog v-model="showArtistDialog" @created="onArtistCreated" />
<PreviewDialog
v-model="showPreviewDialog"
:source="previewTarget"
@backfill="onPreviewBackfill"
/>
</div>
</template>
@@ -291,7 +322,7 @@ import SourceCard from './SourceCard.vue'
import SourceHealthDot from './SourceHealthDot.vue'
import SourceFormDialog from './SourceFormDialog.vue'
import ArtistCreateDialog from './ArtistCreateDialog.vue'
import PreviewDialog from './PreviewDialog.vue'
import SourceActions from './SourceActions.vue'
import PlatformChip from './PlatformChip.vue'
import SchedulerStatusBar from './SchedulerStatusBar.vue'
import { formatRelative } from '../../utils/date.js'
@@ -325,6 +356,12 @@ const statusFilter = ref('all')
const needsAttention = ref(false)
const expanded = ref([])
const selected = ref([])
// #3: default to worst-health first, name as the tiebreak (the table header
// stays clickable to re-sort by any column).
const sortBy = ref([
{ key: 'health', order: 'desc' },
{ key: 'name', order: 'asc' },
])
// Mobile card list drives the same `selected`/`expanded` key arrays the
// desktop v-data-table binds, so selection + bulk actions work identically.
@@ -342,8 +379,6 @@ const showSourceDialog = ref(false)
const editingSource = ref(null)
const editingArtist = ref(null)
const showArtistDialog = ref(false)
const showPreviewDialog = ref(false)
const previewTarget = ref(null)
const artistFilter = computed(() => {
const raw = route.query.artist_id
@@ -382,7 +417,7 @@ const headers = [
{ title: 'Subscription', key: 'name', sortable: true, align: 'start' },
{ title: 'Platforms', key: 'platforms', sortable: false, align: 'start', width: 240 },
{ title: 'Sources', key: 'sources_count', sortable: true, align: 'start', width: 90 },
{ title: 'Health', key: 'health', sortable: false, align: 'start', width: 80 },
{ title: 'Health', key: 'health', sortable: true, align: 'start', width: 80 },
{ title: 'Last activity',key: 'last_activity', sortable: true, align: 'start', width: 140 },
{ title: 'Actions', key: 'actions', sortable: false, align: 'end', width: 200 },
]
@@ -403,10 +438,26 @@ const groups = computed(() => {
lastActivity,
name: g.artist.name,
last_activity: lastActivity ?? '',
// #3: numeric health rank so the Health column is sortable worst-first.
health: healthRank(worstSource, failureThreshold.value),
// #2: when a subscription has exactly one source, surface it on the
// artist row directly (URL + actions) so the common case needs no expand.
singleSource: g.sources.length === 1 ? g.sources[0] : null,
}
})
})
// 0 never-checked · 1 ok · 2 warning · 3 failing — higher = worse, so a
// descending sort floats the broken subscriptions to the top.
function healthRank(source, threshold) {
if (!source) return 0
if (!source.last_checked_at) return 0
const f = source.consecutive_failures || 0
if (f === 0) return 1
if (f < threshold) return 2
return 3
}
// A group "needs attention" if any of its sources has accumulated
// failures OR has never been checked — the ones worth acting on.
function groupNeedsAttention(g) {
@@ -595,18 +646,6 @@ async function onRecover(source) {
}
}
// Plan #708 B4: open the dry-run preview dialog (it self-fetches on open).
function onPreview(source) {
previewTarget.value = source
showPreviewDialog.value = true
}
// "Start backfill" from inside the preview dialog → arm it + close.
async function onPreviewBackfill(source) {
showPreviewDialog.value = false
await onBackfill(source)
}
async function checkAll(group) {
let ok = 0
let conflict = 0
@@ -662,6 +701,28 @@ async function bulkSetEnabled(enabled) {
selected.value = []
}
// #5: arm a run-until-done backfill on every enabled source in the selected
// subscriptions (skips ones already backfilling). Patches each row in place.
async function bulkBackfill() {
const sel = resolveSelectedGroups()
let armed = 0
for (const g of sel) {
for (const s of g.sources) {
if (!s.enabled || s.backfill_state === 'running') continue
try {
await store.startBackfill(s.id, s.artist_id)
armed += 1
} catch { /* keep going */ }
}
}
toast({
text: armed ? `Backfill started on ${armed} source${armed === 1 ? '' : 's'}`
: 'Nothing to backfill (already running or disabled)',
type: armed ? 'success' : 'info',
})
selected.value = []
}
async function bulkDelete() {
const groups = resolveSelectedGroups()
const total = groups.reduce((n, g) => n + g.sources.length, 0)
@@ -746,6 +807,17 @@ async function bulkDelete() {
}
.fc-subs__mactions { display: flex; gap: 2px; }
.fc-subs__name { font-weight: 600; }
.fc-subs__sub-url {
display: block;
max-width: 460px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.76rem;
color: rgb(var(--v-theme-on-surface-variant));
text-decoration: none;
}
.fc-subs__sub-url:hover { color: rgb(var(--v-theme-accent)); }
.fc-subs__chips {
display: flex; flex-wrap: wrap; gap: 4px;
}