feat(subs-hub): collapse /credentials + /downloads into /subscriptions hub with three GS-style subtabs
Replaces the three top-level routes with a single `/subscriptions` parent
owning the whole download-pipeline domain. Internal tab state via `?tab=`
query param, mirroring ArtistView's pattern. TopNav auto-drops the two
removed entries (route-driven via meta.title). Bookmark-safe redirects
from `/credentials` and `/downloads` route into the appropriate subtab.
**Subtab 1 — Subscriptions (default).** Carries over the existing
artist-grouped expandable table; adds (a) status filter dropdown, (b)
bulk-select column with Enable/Disable/Delete-all actions, (c) GS-style
color-coded `PlatformChip` per distinct platform in the collapsed row.
Reuses SourceRow, SourceHealthDot, SourceFormDialog, ArtistCreateDialog.
**Subtab 2 — Downloads.** Full GS dashboard. Five colored stat chips up
top (Queued/Running/Completed/Failed/Skipped, sourced from new
`GET /api/downloads/stats?window_hours=`). Popover-style filter UI
(Status/Source/FromDate/ToDate) with active-filter pills below.
Maintenance menu wraps existing /api/import/retry-failed and
/api/import/clear-stuck endpoints; Export-failed-logs item disabled with
a "v2" tooltip. Per-row Retry preserved via existing DownloadEventRow.
**Subtab 3 — Settings.** Four sections: ExtensionKeyBar (top), GS-style
per-platform CredentialCard grid (md=6 v-row/v-col, dashed border if
unset / accent border if set, expandable how-to panel), Downloader card
(rate limit, validate_files), Schedule defaults card (default interval,
event retention, failure warning threshold). The Downloader and Schedule
sections were extracted out of components/settings/ImportFiltersForm.vue
— SettingsView's Import tab now owns only image-import filters.
**Backend:** new `GET /api/downloads/stats` returns
{pending, running, ok, error, skipped} count grouped by status over the
configurable window. Status keys stay raw from the ENUM; UI does the
display-label mapping. Two integration tests pin the response shape +
window_hours validation.
**Util:** `frontend/src/utils/platformColor.js` — single source of truth
for the six platforms' color + icon + label, mirroring GS's palette
(patreon=red mdi-patreon, subscribestar=amber mdi-star,
hentaifoundry=purple mdi-palette, discord=indigo mdi-discord,
pixiv=blue mdi-alpha-p-box, deviantart=green mdi-deviantart). Unknown
platform falls back to grey + mdi-web.
Deferred (explicit non-goals): subscription import/export, "Trigger Due
Now" scheduler-tick button (needs new backend endpoint), Export Failed
Logs CSV dump.
This commit is contained in:
@@ -0,0 +1,521 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="fc-subs__bar">
|
||||
<v-btn color="accent" prepend-icon="mdi-plus" @click="openAddSource(null)">
|
||||
Add subscription
|
||||
</v-btn>
|
||||
<v-btn variant="outlined" prepend-icon="mdi-account-plus" @click="showArtistDialog = true">
|
||||
New artist
|
||||
</v-btn>
|
||||
<v-spacer />
|
||||
<v-select
|
||||
v-model="statusFilter"
|
||||
:items="STATUS_OPTIONS"
|
||||
density="compact" variant="outlined" hide-details
|
||||
style="max-width: 180px"
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
density="compact" variant="outlined" hide-details clearable
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
placeholder="Search subscriptions"
|
||||
style="max-width: 320px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<v-slide-y-transition>
|
||||
<v-card
|
||||
v-if="selected.length"
|
||||
variant="tonal" color="info"
|
||||
class="fc-subs__bulk mb-3"
|
||||
>
|
||||
<v-card-text class="d-flex align-center pa-3 ga-3">
|
||||
<span class="text-body-2">
|
||||
{{ selected.length }} selected
|
||||
</span>
|
||||
<v-spacer />
|
||||
<v-btn size="small" variant="text" prepend-icon="mdi-toggle-switch" @click="bulkSetEnabled(true)">
|
||||
Enable all
|
||||
</v-btn>
|
||||
<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" color="error" prepend-icon="mdi-delete" @click="bulkDelete">
|
||||
Delete
|
||||
</v-btn>
|
||||
<v-btn size="small" variant="text" @click="selected = []">Clear</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-slide-y-transition>
|
||||
|
||||
<v-alert v-if="store.error" type="error" variant="tonal" closable class="mb-3">
|
||||
{{ String(store.error) }}
|
||||
</v-alert>
|
||||
|
||||
<div v-if="store.loading && groups.length === 0" class="fc-subs__loading">
|
||||
<v-progress-circular indeterminate color="accent" size="36" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="filteredGroups.length === 0" class="fc-subs__empty">
|
||||
<p v-if="groups.length === 0">No subscriptions yet. Add your first artist.</p>
|
||||
<p v-else>No subscriptions match the current filter.</p>
|
||||
</div>
|
||||
|
||||
<v-card v-else class="fc-subs__card" variant="outlined">
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="filteredGroups"
|
||||
item-value="key"
|
||||
v-model="selected"
|
||||
v-model:expanded="expanded"
|
||||
:items-per-page="50"
|
||||
:items-per-page-options="ITEMS_PER_PAGE_OPTIONS"
|
||||
density="comfortable"
|
||||
hover show-select show-expand
|
||||
@click:row="onRowClick"
|
||||
>
|
||||
<template #item.name="{ item }">
|
||||
<span class="fc-subs__name">{{ item.artist.name }}</span>
|
||||
</template>
|
||||
|
||||
<template #item.platforms="{ item }">
|
||||
<div class="fc-subs__chips">
|
||||
<PlatformChip
|
||||
v-for="p in item.platforms" :key="p"
|
||||
:platform="p" size="x-small"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #item.sources_count="{ item }">
|
||||
<v-chip size="x-small" variant="tonal" label>
|
||||
{{ item.sources.length }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template #item.health="{ item }">
|
||||
<SourceHealthDot
|
||||
v-if="item.worstSource"
|
||||
:source="item.worstSource"
|
||||
:warning-threshold="failureThreshold"
|
||||
/>
|
||||
<span v-else class="fc-subs__zero">—</span>
|
||||
</template>
|
||||
|
||||
<template #item.last_activity="{ item }">
|
||||
<span class="fc-subs__when">{{ formatRelative(item.lastActivity) }}</span>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<template #expanded-row="{ columns, item }">
|
||||
<tr class="fc-subs__sources-row">
|
||||
<td :colspan="columns.length" class="fc-subs__sources-cell">
|
||||
<v-table density="compact" class="fc-subs__sources-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Platform</th>
|
||||
<th>URL</th>
|
||||
<th>Enabled</th>
|
||||
<th>Last check</th>
|
||||
<th>Next check</th>
|
||||
<th>Errors</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<SourceRow
|
||||
v-for="s in item.sources" :key="s.id" :source="s"
|
||||
:checking="store.checkingIds.has(s.id)"
|
||||
:warning-threshold="failureThreshold"
|
||||
@edit="openEditSource"
|
||||
@remove="removeSource"
|
||||
@toggle="toggleSourceEnabled"
|
||||
@check="onCheck"
|
||||
/>
|
||||
<tr v-if="item.sources.length === 0">
|
||||
<td colspan="8" class="fc-subs__sources-empty">
|
||||
No sources yet. Click + to add one.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card>
|
||||
|
||||
<SourceFormDialog
|
||||
v-model="showSourceDialog"
|
||||
:source="editingSource"
|
||||
:initial-artist="editingArtist"
|
||||
@saved="onSourceSaved"
|
||||
/>
|
||||
<ArtistCreateDialog v-model="showArtistDialog" @created="onArtistCreated" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useSourcesStore } from '../../stores/sources.js'
|
||||
import { usePlatformsStore } from '../../stores/platforms.js'
|
||||
import { useImportStore } from '../../stores/import.js'
|
||||
import SourceRow from './SourceRow.vue'
|
||||
import SourceHealthDot from './SourceHealthDot.vue'
|
||||
import SourceFormDialog from './SourceFormDialog.vue'
|
||||
import ArtistCreateDialog from './ArtistCreateDialog.vue'
|
||||
import PlatformChip from './PlatformChip.vue'
|
||||
|
||||
const ITEMS_PER_PAGE_OPTIONS = [
|
||||
{ value: 25, title: '25' },
|
||||
{ value: 50, title: '50' },
|
||||
{ value: 100, title: '100' },
|
||||
{ value: -1, title: 'All' },
|
||||
]
|
||||
const STATUS_OPTIONS = [
|
||||
{ title: 'All status', value: 'all' },
|
||||
{ title: 'Enabled', value: 'enabled' },
|
||||
{ title: 'Disabled', value: 'disabled' },
|
||||
{ title: 'Has errors', value: 'errors' },
|
||||
{ title: 'Stale', value: 'stale' },
|
||||
]
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const store = useSourcesStore()
|
||||
const platformsStore = usePlatformsStore()
|
||||
const importStore = useImportStore()
|
||||
|
||||
const search = ref('')
|
||||
const statusFilter = ref('all')
|
||||
const expanded = ref([])
|
||||
const selected = ref([])
|
||||
const showSourceDialog = ref(false)
|
||||
const editingSource = ref(null)
|
||||
const editingArtist = ref(null)
|
||||
const showArtistDialog = ref(false)
|
||||
|
||||
const artistFilter = computed(() => {
|
||||
const raw = route.query.artist_id
|
||||
return raw == null ? null : Number(raw)
|
||||
})
|
||||
|
||||
const failureThreshold = computed(() =>
|
||||
importStore.settings?.download_failure_warning_threshold ?? 5,
|
||||
)
|
||||
|
||||
async function refresh() {
|
||||
await store.loadAll()
|
||||
await platformsStore.loadAll()
|
||||
if (!importStore.settings) await importStore.loadSettings()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
refresh()
|
||||
if (artistFilter.value != null) {
|
||||
expanded.value = [`artist-${artistFilter.value}`]
|
||||
}
|
||||
})
|
||||
watch(() => route.query.artist_id, refresh)
|
||||
|
||||
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: 'Last activity',key: 'last_activity', sortable: true, align: 'start', width: 140 },
|
||||
{ title: 'Actions', key: 'actions', sortable: false, align: 'end', width: 200 },
|
||||
]
|
||||
|
||||
const groups = computed(() => {
|
||||
const all = store.sourcesByArtistGrouped()
|
||||
return all.map((g) => {
|
||||
const worstSource = pickWorstSource(g.sources, failureThreshold.value)
|
||||
const lastActivity = pickLastActivity(g.sources)
|
||||
const platforms = [...new Set(g.sources.map((s) => s.platform).filter(Boolean))]
|
||||
return {
|
||||
key: `artist-${g.artist.id}`,
|
||||
artist: g.artist,
|
||||
sources: g.sources,
|
||||
sources_count: g.sources.length,
|
||||
platforms,
|
||||
worstSource,
|
||||
lastActivity,
|
||||
name: g.artist.name,
|
||||
last_activity: lastActivity ?? '',
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const filteredGroups = computed(() => {
|
||||
let arr = groups.value
|
||||
if (artistFilter.value != null) {
|
||||
arr = arr.filter((g) => g.artist.id === artistFilter.value)
|
||||
}
|
||||
if (statusFilter.value !== 'all') {
|
||||
arr = arr.filter((g) => groupMatchesStatus(g, statusFilter.value))
|
||||
}
|
||||
const q = search.value?.trim().toLowerCase()
|
||||
if (q) {
|
||||
arr = arr.filter(
|
||||
(g) =>
|
||||
g.artist.name.toLowerCase().includes(q) ||
|
||||
g.sources.some(
|
||||
(s) =>
|
||||
(s.url || '').toLowerCase().includes(q) ||
|
||||
(s.platform || '').toLowerCase().includes(q),
|
||||
),
|
||||
)
|
||||
}
|
||||
return arr
|
||||
})
|
||||
|
||||
function groupMatchesStatus(g, status) {
|
||||
if (status === 'enabled') return g.sources.some((s) => s.enabled)
|
||||
if (status === 'disabled') return g.sources.every((s) => !s.enabled)
|
||||
if (status === 'errors') return g.sources.some((s) => (s.consecutive_failures || 0) > 0)
|
||||
if (status === 'stale') return g.sources.some((s) => !s.last_checked_at)
|
||||
return true
|
||||
}
|
||||
|
||||
function pickLastActivity(sources) {
|
||||
let max = null
|
||||
for (const s of sources) {
|
||||
if (s.last_checked_at && (!max || s.last_checked_at > max)) max = s.last_checked_at
|
||||
}
|
||||
return max
|
||||
}
|
||||
|
||||
function pickWorstSource(sources, threshold) {
|
||||
if (!sources || sources.length === 0) return null
|
||||
function level(s) {
|
||||
if (!s.last_checked_at) return 0
|
||||
const f = s.consecutive_failures || 0
|
||||
if (f === 0) return 1
|
||||
if (f < threshold) return 2
|
||||
return 3
|
||||
}
|
||||
return sources.reduce((worst, s) => (level(s) > level(worst) ? s : worst), sources[0])
|
||||
}
|
||||
|
||||
function formatRelative(iso) {
|
||||
if (!iso) return 'Never'
|
||||
const then = new Date(iso).getTime()
|
||||
const diff = (Date.now() - then) / 1000
|
||||
if (diff < 60) return `${Math.floor(diff)}s ago`
|
||||
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
|
||||
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
|
||||
return `${Math.floor(diff / 86400)}d ago`
|
||||
}
|
||||
|
||||
function onRowClick(_evt, { item }) {
|
||||
const key = item.key
|
||||
const idx = expanded.value.indexOf(key)
|
||||
if (idx === -1) expanded.value = [...expanded.value, key]
|
||||
else expanded.value = expanded.value.filter((k) => k !== key)
|
||||
}
|
||||
|
||||
function openAddSource(artist) {
|
||||
editingSource.value = null
|
||||
editingArtist.value = artist
|
||||
showSourceDialog.value = true
|
||||
}
|
||||
|
||||
function openEditSource(source) {
|
||||
editingSource.value = source
|
||||
editingArtist.value = {
|
||||
id: source.artist_id, name: source.artist_name, slug: source.artist_slug,
|
||||
}
|
||||
showSourceDialog.value = true
|
||||
}
|
||||
|
||||
async function removeSource(source) {
|
||||
await store.remove(source.id, source.artist_id)
|
||||
await refresh()
|
||||
}
|
||||
|
||||
async function toggleSourceEnabled({ source, enabled }) {
|
||||
await store.update(source.id, { enabled }, source.artist_id)
|
||||
await refresh()
|
||||
}
|
||||
|
||||
async function onSourceSaved() {
|
||||
showSourceDialog.value = false
|
||||
await refresh()
|
||||
}
|
||||
|
||||
function onArtistCreated(artist) {
|
||||
showArtistDialog.value = false
|
||||
openAddSource(artist)
|
||||
}
|
||||
|
||||
async function onCheck(source) {
|
||||
try {
|
||||
const body = await store.checkNow(source.id)
|
||||
globalThis.window?.__fcToast?.({
|
||||
text: `Check enqueued (event #${body.download_event_id})`,
|
||||
type: 'success',
|
||||
})
|
||||
} catch (e) {
|
||||
if (e?.body?.download_event_id) {
|
||||
globalThis.window?.__fcToast?.({
|
||||
text: 'Already running — see Downloads',
|
||||
type: 'info',
|
||||
})
|
||||
router.push({ path: '/subscriptions', query: { tab: 'downloads', source_id: source.id } })
|
||||
} else {
|
||||
globalThis.window?.__fcToast?.({
|
||||
text: `Check failed: ${e?.detail || e?.message || e}`,
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function checkAll(group) {
|
||||
let ok = 0
|
||||
let conflict = 0
|
||||
for (const s of group.sources) {
|
||||
if (!s.enabled) continue
|
||||
try {
|
||||
await store.checkNow(s.id)
|
||||
ok += 1
|
||||
} catch (e) {
|
||||
if (e?.body?.download_event_id) conflict += 1
|
||||
}
|
||||
}
|
||||
const parts = []
|
||||
if (ok) parts.push(`${ok} queued`)
|
||||
if (conflict) parts.push(`${conflict} already running`)
|
||||
globalThis.window?.__fcToast?.({
|
||||
text: parts.join(', ') || 'Nothing to check (no enabled sources)',
|
||||
type: 'info',
|
||||
})
|
||||
}
|
||||
|
||||
function anyChecking(sources) {
|
||||
return sources.some((s) => store.checkingIds.has(s.id))
|
||||
}
|
||||
|
||||
function resolveSelectedGroups() {
|
||||
return groups.value.filter((g) => selected.value.includes(g.key))
|
||||
}
|
||||
|
||||
async function bulkSetEnabled(enabled) {
|
||||
const groups = resolveSelectedGroups()
|
||||
let changed = 0
|
||||
for (const g of groups) {
|
||||
for (const s of g.sources) {
|
||||
if (s.enabled === enabled) continue
|
||||
try {
|
||||
await store.update(s.id, { enabled }, s.artist_id)
|
||||
changed += 1
|
||||
} catch { /* keep going */ }
|
||||
}
|
||||
}
|
||||
await refresh()
|
||||
globalThis.window?.__fcToast?.({
|
||||
text: `${changed} source${changed === 1 ? '' : 's'} ${enabled ? 'enabled' : 'disabled'}`,
|
||||
type: 'success',
|
||||
})
|
||||
selected.value = []
|
||||
}
|
||||
|
||||
async function bulkDelete() {
|
||||
const groups = resolveSelectedGroups()
|
||||
const total = groups.reduce((n, g) => n + g.sources.length, 0)
|
||||
if (!globalThis.window?.confirm(
|
||||
`Delete ${total} source${total === 1 ? '' : 's'} across ${groups.length} subscription${groups.length === 1 ? '' : 's'}? Artist rows remain.`,
|
||||
)) return
|
||||
let deleted = 0
|
||||
for (const g of groups) {
|
||||
for (const s of g.sources) {
|
||||
try {
|
||||
await store.remove(s.id, s.artist_id)
|
||||
deleted += 1
|
||||
} catch { /* keep going */ }
|
||||
}
|
||||
}
|
||||
await refresh()
|
||||
globalThis.window?.__fcToast?.({
|
||||
text: `${deleted} source${deleted === 1 ? '' : 's'} deleted`,
|
||||
type: 'success',
|
||||
})
|
||||
selected.value = []
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fc-subs__bar {
|
||||
display: flex; gap: 0.75rem; align-items: center;
|
||||
padding-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.fc-subs__loading, .fc-subs__empty {
|
||||
display: flex; justify-content: center; padding: 2rem;
|
||||
color: rgb(var(--v-theme-on-surface-variant));
|
||||
}
|
||||
.fc-subs__card {
|
||||
background: rgb(var(--v-theme-surface));
|
||||
}
|
||||
.fc-subs__name { font-weight: 600; }
|
||||
.fc-subs__chips {
|
||||
display: flex; flex-wrap: wrap; gap: 4px;
|
||||
}
|
||||
.fc-subs__when {
|
||||
color: rgb(var(--v-theme-on-surface-variant));
|
||||
white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.fc-subs__zero {
|
||||
color: rgb(var(--v-theme-on-surface-variant));
|
||||
opacity: 0.6;
|
||||
}
|
||||
.fc-subs__sources-row td {
|
||||
padding: 0 !important;
|
||||
background: rgb(var(--v-theme-surface-light));
|
||||
}
|
||||
.fc-subs__sources-cell {
|
||||
padding-left: 2rem !important;
|
||||
border-top: 1px solid rgb(var(--v-theme-on-surface-variant) / 0.15);
|
||||
}
|
||||
.fc-subs__sources-table {
|
||||
background: transparent !important;
|
||||
}
|
||||
.fc-subs__sources-empty {
|
||||
color: rgb(var(--v-theme-on-surface-variant));
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
.fc-subs__bulk { border-radius: 8px; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user