Files
FabledCurator/frontend/src/components/settings/MaintenancePanel.vue
T
bvandeusen 83c1745fd0
CI / lint (push) Successful in 3s
CI / frontend-build (push) Successful in 20s
CI / backend-lint-and-test (push) Successful in 33s
CI / integration (push) Successful in 3m45s
feat(ui): translation-forward post text + Settings card (#143 step 5)
PostCard + modal ProvenancePanel show the English title/description by default when
a translation exists, with a per-card "show original (<lang>)" toggle — translated
bodies render as plain text, originals keep their sanitized HTML. New
TranslationCard in Settings → Ingestion & filters: enable switch, Interpreter base
URL (generic placeholder, no default host), target language, a reachability
indicator + untranslated-posts count + "Translate now".

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CDgx8bQS5YrGRK76v8HUnM
2026-07-07 12:38:41 -04:00

131 lines
3.9 KiB
Vue

<template>
<div class="fc-maint">
<p class="fc-muted text-body-2 mb-5">
Processing, tagging and storage tools, grouped by system. Heads train
nightly and auto-apply earned tags. Click a tile to open it.
</p>
<section class="fc-section">
<h3 class="fc-section__title">Ingestion &amp; filters</h3>
<p class="fc-section__hint">
What gets imported dedup sensitivity, size/transparency/solid-color
filters. Applies to downloads and folder imports alike.
</p>
<div class="fc-tile-stack">
<ImportFiltersForm />
<TranslationCard />
</div>
</section>
<section class="fc-section">
<h3 class="fc-section__title">GPU agent &amp; embeddings</h3>
<p class="fc-section__hint">
The desktop agent that does the heavy lifting, its failure triage, and
the CPU fallback.
</p>
<div class="fc-tile-stack">
<GpuAgentCard />
<GpuTriageCard />
<MLBackfillCard />
</div>
</section>
<section class="fc-section">
<h3 class="fc-section__title">Tagging</h3>
<p class="fc-section__hint">
Suggestion thresholds, trained heads and tag aliases.
</p>
<div class="fc-tile-stack">
<MLThresholdSliders />
<CropProposersCard />
<HeadsCard />
<AliasTable />
</div>
</section>
<section class="fc-section">
<h3 class="fc-section__title">Library health</h3>
<p class="fc-section__hint">
Self-healing and repair: missing files, thumbnails, database upkeep.
</p>
<div class="fc-tile-grid">
<MissingFileRepairCard />
<ThumbnailBackfillCard />
<DbMaintenanceCard />
<ArchiveReextractCard />
</div>
</section>
<section class="fc-section">
<h3 class="fc-section__title">Storage</h3>
<p class="fc-section__hint">Database + image backups and restore.</p>
<div class="fc-tile-stack">
<BackupCard />
</div>
</section>
</div>
</template>
<script setup>
import { onMounted, onUnmounted } from 'vue'
import ImportFiltersForm from './ImportFiltersForm.vue'
import TranslationCard from './TranslationCard.vue'
import MLBackfillCard from './MLBackfillCard.vue'
import ThumbnailBackfillCard from './ThumbnailBackfillCard.vue'
import ArchiveReextractCard from './ArchiveReextractCard.vue'
import MissingFileRepairCard from './MissingFileRepairCard.vue'
import GpuTriageCard from './GpuTriageCard.vue'
import DbMaintenanceCard from './DbMaintenanceCard.vue'
import MLThresholdSliders from './MLThresholdSliders.vue'
import CropProposersCard from './CropProposersCard.vue'
import HeadsCard from './HeadsCard.vue'
import GpuAgentCard from './GpuAgentCard.vue'
import AliasTable from './AliasTable.vue'
import BackupCard from './BackupCard.vue'
import { useSystemActivityStore } from '../../stores/systemActivity.js'
// Poll queue depths so each task tile's QueueStatusBar shows live pending
// counts — the operator can see a backfill is already queued/running before
// re-triggering it.
const activity = useSystemActivityStore()
let qTimer = null
onMounted(() => {
activity.loadQueues()
qTimer = setInterval(() => {
if (!document.hidden) activity.loadQueues()
}, 4000)
})
onUnmounted(() => {
if (qTimer) { clearInterval(qTimer); qTimer = null }
})
</script>
<style scoped>
.fc-section { margin-bottom: 24px; }
.fc-section__title {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgb(var(--v-theme-accent));
margin-bottom: 2px;
}
.fc-section__hint {
font-size: 0.8rem;
color: rgb(var(--v-theme-on-surface-variant));
margin-bottom: 12px;
}
.fc-tile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 14px;
align-items: start;
}
.fc-tile-stack {
display: flex;
flex-direction: column;
gap: 12px;
}
</style>