bvandeusen
e4e35163ab
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>
118 lines
4.1 KiB
Vue
118 lines
4.1 KiB
Vue
<template>
|
|
<div class="fc-source-card">
|
|
<div class="fc-source-card__top">
|
|
<SourceHealthDot :source="source" :warning-threshold="warningThreshold" />
|
|
<v-chip size="x-small" variant="tonal" label>{{ source.platform }}</v-chip>
|
|
<v-spacer />
|
|
<v-switch
|
|
:model-value="source.enabled"
|
|
density="compact" hide-details color="accent"
|
|
@click.stop
|
|
@update:model-value="onToggleEnabled"
|
|
/>
|
|
</div>
|
|
|
|
<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>
|
|
<span>Next {{ formatRelative(source.next_check_at, { future: true }) }}</span>
|
|
<v-chip
|
|
v-if="(source.consecutive_failures || 0) > 0"
|
|
size="x-small" color="error" variant="tonal" label
|
|
>{{ 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
|
|
>{{ source.backfill_bypass_seen ? 'Recovering' : 'Backfilling'
|
|
}}{{ source.backfill_posts
|
|
? ` · ${source.backfill_posts} posts`
|
|
: (source.backfill_chunks ? ` (${source.backfill_chunks})` : '') }}</v-chip>
|
|
<v-chip
|
|
v-else-if="source.backfill_state === 'complete'"
|
|
size="x-small" color="success" variant="tonal" label
|
|
>Backfilled</v-chip>
|
|
<v-chip
|
|
v-else-if="source.backfill_state === 'stalled'"
|
|
size="x-small" color="warning" variant="tonal" label
|
|
>Stalled</v-chip>
|
|
</div>
|
|
|
|
<div class="fc-source-card__actions">
|
|
<SourceActions
|
|
:source="source" :checking="checking"
|
|
@check="$emit('check', $event)"
|
|
@backfill="$emit('backfill', $event)"
|
|
@recover="$emit('recover', $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'
|
|
|
|
// Mobile-stacked equivalent of SourceRow (the desktop <tr>) — same data and
|
|
// emits, but laid out vertically so the wide source columns never force the
|
|
// lateral scroll the operator flagged on phones.
|
|
const props = defineProps({
|
|
source: { type: Object, required: true },
|
|
checking: { type: Boolean, default: false },
|
|
warningThreshold: { type: Number, default: 5 },
|
|
})
|
|
const emit = defineEmits(['edit', 'remove', 'toggle', 'check', 'backfill', 'recover'])
|
|
|
|
function onToggleEnabled(value) {
|
|
emit('toggle', { source: props.source, enabled: value })
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fc-source-card {
|
|
padding: 8px 10px;
|
|
border: 1px solid rgb(var(--v-theme-surface-light));
|
|
border-radius: 6px;
|
|
background: rgb(var(--v-theme-surface));
|
|
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 {
|
|
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
|
|
font-size: 0.78rem; color: rgb(var(--v-theme-on-surface-variant));
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.fc-source-card__actions {
|
|
display: flex; gap: 2px; justify-content: flex-end;
|
|
}
|
|
</style>
|