feat(settings): tidy Maintenance tab into compact tiles + center the views (pass 2)
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:
@@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<v-card class="fc-backup-card">
|
||||
<CardHeading icon="mdi-database-export" title="Backups" />
|
||||
<v-card-text>
|
||||
<MaintenanceTile
|
||||
icon="mdi-database-export"
|
||||
title="Backups"
|
||||
blurb="Database + image backups, schedules and restore."
|
||||
>
|
||||
<p class="fc-muted text-body-2 mb-4">
|
||||
pg_dump for the database (fast, nightly-schedulable);
|
||||
tar+zstd for the images (slow, manual only). Files live in
|
||||
@@ -80,8 +82,6 @@
|
||||
@delete="onDelete"
|
||||
@tag="onTag"
|
||||
/>
|
||||
</v-card-text>
|
||||
|
||||
<BackupConfirmModal
|
||||
v-model="confirmOpen"
|
||||
:action="confirmAction"
|
||||
@@ -90,7 +90,7 @@
|
||||
:description="confirmDescription"
|
||||
@confirm="onConfirmSubmit"
|
||||
/>
|
||||
</v-card>
|
||||
</MaintenanceTile>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -98,7 +98,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
|
||||
import { useBackupStore } from '../../stores/backup.js'
|
||||
import BackupConfirmModal from '../modal/DestructiveConfirmModal.vue'
|
||||
import CardHeading from '../common/CardHeading.vue'
|
||||
import MaintenanceTile from '../common/MaintenanceTile.vue'
|
||||
import BackupRunsTable from './BackupRunsTable.vue'
|
||||
|
||||
const store = useBackupStore()
|
||||
|
||||
Reference in New Issue
Block a user