feat(settings): tidy Maintenance tab into compact tiles + center the views (pass 2)
CI / lint (push) Successful in 3s
CI / frontend-build (push) Successful in 26s
CI / backend-lint-and-test (push) Successful in 42s
CI / integration (push) Successful in 3m27s

Goal (operator 2026-06-18): the overview of a Settings tab fits one unscrolled
viewport; expanding a tile to read into it is the only reason to scroll.

- Every Maintenance card converted to the collapsible MaintenanceTile (collapsed
  by default = icon + short title + one-line blurb). Task cards (ML backfill,
  centroids, thumbnails, archive re-extract, missing-file repair, DB maintenance)
  sit in a responsive grid; running tasks auto-expand. Tagging config (suggestion
  thresholds, allowlist, aliases) grouped in one Tagging section as collapsible
  tiles; Backup is its own collapsible tile.
- Three labeled sections mirror the Cleanup tab: Backfills and reprocessing /
  Tagging / Storage.
- Center the whole Settings surface: SettingsView is now a centered, width-capped
  (1140px) column so the tab strip and every panel sit in a tidy centered measure
  (was full-width). CleanupView drops its own left-aligned max-width to fill it.

All card logic unchanged - only the chrome.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-18 00:10:58 -04:00
parent 3b435dc0ba
commit 311fe0ee9c
13 changed files with 158 additions and 84 deletions
@@ -1,6 +1,9 @@
<template>
<v-card>
<v-card-title>Tag aliases ({{ store.rows.length }})</v-card-title>
<MaintenanceTile
icon="mdi-tag-arrow-right-outline"
:title="`Tag aliases (${store.rows.length})`"
blurb="Alternate tag spellings that map to a canonical tag."
>
<v-data-table-virtual
:headers="headers" :items="store.rows" :loading="store.loading"
height="360" density="compact"
@@ -18,12 +21,13 @@
/>
</template>
</v-data-table-virtual>
</v-card>
</MaintenanceTile>
</template>
<script setup>
import { onMounted } from 'vue'
import { useAliasesStore } from '../../stores/aliases.js'
import MaintenanceTile from '../common/MaintenanceTile.vue'
const store = useAliasesStore()
const headers = [