From 9deebfa1339a864336e204adf9f5993fc2847f9c Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Tue, 9 Jun 2026 23:22:01 -0400
Subject: [PATCH] refactor(ui): CardHeading primitive for icon+title
 card/dialog headings (DRY pattern sweep)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The icon+title v-card-title heading (d-flex align-center + gap + <v-icon size=small> +
<span>) was hand-rolled identically in 13 cards/dialogs (15 heading instances).
Consolidate to <CardHeading icon title> (components/common) with an iconColor
prop (error headings) and a default slot for trailing content (spacer+actions,
inline status chip). Adopted everywhere the pattern appears — all-or-nothing per
the hardened DRY process.

Over-DRY guard: plain text-only <v-card-title> one-liners are NOT this pattern
and stay; DownloadDetailModal leads with a status CHIP (not an icon), a different
concept, left alone. §8b: the only remaining d-flex align-center v-card-title is
that intentional variant. Catalog updated.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/artist/ArtistDangerZone.vue    |  6 ++---
 .../components/cleanup/MinDimensionCard.vue   |  6 ++---
 .../cleanup/SingleColorAuditCard.vue          |  6 ++---
 .../cleanup/TransparencyAuditCard.vue         |  6 ++---
 .../src/components/common/CardHeading.vue     | 25 +++++++++++++++++++
 .../components/common/ErrorDetailModal.vue    | 10 +++++---
 .../src/components/settings/BackupCard.vue    |  6 ++---
 .../settings/BrowserExtensionCard.vue         |  7 +++---
 .../components/settings/ImportTaskList.vue    |  6 ++---
 .../settings/PostMaintenanceCard.vue          |  6 ++---
 .../settings/SystemActivitySummary.vue        |  7 +++---
 .../components/settings/SystemActivityTab.vue | 19 ++++++--------
 .../settings/TagMaintenanceCard.vue           |  6 ++---
 .../subscriptions/PreviewDialog.vue           |  9 ++++---
 14 files changed, 66 insertions(+), 59 deletions(-)
 create mode 100644 frontend/src/components/common/CardHeading.vue

diff --git a/frontend/src/components/artist/ArtistDangerZone.vue b/frontend/src/components/artist/ArtistDangerZone.vue
index 0de1ced..275c4a4 100644
--- a/frontend/src/components/artist/ArtistDangerZone.vue
+++ b/frontend/src/components/artist/ArtistDangerZone.vue
@@ -1,9 +1,6 @@
 <template>
   <v-card class="fc-danger-zone mt-8" variant="outlined">
-    <v-card-title class="d-flex align-center" style="gap: 10px;">
-      <v-icon icon="mdi-alert-octagon" color="error" size="small" />
-      <span>Danger zone</span>
-    </v-card-title>
+    <CardHeading icon="mdi-alert-octagon" icon-color="error" title="Danger zone" />
     <v-card-text>
       <p class="text-body-2 fc-muted mb-4">
         Cascade-delete this artist and every image, source, post, and
@@ -37,6 +34,7 @@ import { useRouter } from 'vue-router'
 
 import DestructiveConfirmModal from '../modal/DestructiveConfirmModal.vue'
 import { useAdminStore } from '../../stores/admin.js'
+import CardHeading from '../common/CardHeading.vue'
 
 const props = defineProps({
   slug: { type: String, required: true },
diff --git a/frontend/src/components/cleanup/MinDimensionCard.vue b/frontend/src/components/cleanup/MinDimensionCard.vue
index 0769fd9..632a6e2 100644
--- a/frontend/src/components/cleanup/MinDimensionCard.vue
+++ b/frontend/src/components/cleanup/MinDimensionCard.vue
@@ -1,9 +1,6 @@
 <template>
   <v-card class="fc-clean-card">
-    <v-card-title class="d-flex align-center" style="gap: 10px;">
-      <v-icon icon="mdi-image-size-select-small" size="small" />
-      <span>Minimum dimensions</span>
-    </v-card-title>
+    <CardHeading icon="mdi-image-size-select-small" title="Minimum dimensions" />
     <v-card-text>
       <p class="fc-muted text-body-2 mb-3">
         Find and delete images smaller than the threshold. Mirrors the
@@ -67,6 +64,7 @@ import { onMounted, ref } from 'vue'
 
 import DestructiveConfirmModal from '../modal/DestructiveConfirmModal.vue'
 import { useCleanupStore } from '../../stores/cleanup.js'
+import CardHeading from '../common/CardHeading.vue'
 
 // Backend's preview response hands the full Tier-C confirm token back
 // as `confirm_token` (e.g. `delete-min-dim-1a2b3c4d`); passed straight
diff --git a/frontend/src/components/cleanup/SingleColorAuditCard.vue b/frontend/src/components/cleanup/SingleColorAuditCard.vue
index 98d10d4..31467cc 100644
--- a/frontend/src/components/cleanup/SingleColorAuditCard.vue
+++ b/frontend/src/components/cleanup/SingleColorAuditCard.vue
@@ -1,9 +1,6 @@
 <template>
   <v-card class="fc-clean-card">
-    <v-card-title class="d-flex align-center" style="gap: 10px;">
-      <v-icon icon="mdi-palette-swatch" size="small" />
-      <span>Single-color audit</span>
-    </v-card-title>
+    <CardHeading icon="mdi-palette-swatch" title="Single-color audit" />
     <v-card-text>
       <p class="fc-muted text-body-2 mb-3">
         Scan library for images dominated by one color within the
@@ -97,6 +94,7 @@ import { toast } from '../../utils/toast.js'
 import { onMounted, onUnmounted, ref } from 'vue'
 
 import DestructiveConfirmModal from '../modal/DestructiveConfirmModal.vue'
+import CardHeading from '../common/CardHeading.vue'
 import { useCleanupStore } from '../../stores/cleanup.js'
 
 const store = useCleanupStore()
diff --git a/frontend/src/components/cleanup/TransparencyAuditCard.vue b/frontend/src/components/cleanup/TransparencyAuditCard.vue
index d42a655..7ff5dd0 100644
--- a/frontend/src/components/cleanup/TransparencyAuditCard.vue
+++ b/frontend/src/components/cleanup/TransparencyAuditCard.vue
@@ -1,9 +1,6 @@
 <template>
   <v-card class="fc-clean-card">
-    <v-card-title class="d-flex align-center" style="gap: 10px;">
-      <v-icon icon="mdi-checkerboard" size="small" />
-      <span>Transparency audit</span>
-    </v-card-title>
+    <CardHeading icon="mdi-checkerboard" title="Transparency audit" />
     <v-card-text>
       <p class="fc-muted text-body-2 mb-3">
         Scan library for images whose transparent-pixel fraction exceeds
@@ -84,6 +81,7 @@ import { toast } from '../../utils/toast.js'
 import { onMounted, onUnmounted, ref } from 'vue'
 
 import DestructiveConfirmModal from '../modal/DestructiveConfirmModal.vue'
+import CardHeading from '../common/CardHeading.vue'
 import { useCleanupStore } from '../../stores/cleanup.js'
 
 const store = useCleanupStore()
diff --git a/frontend/src/components/common/CardHeading.vue b/frontend/src/components/common/CardHeading.vue
new file mode 100644
index 0000000..d574385
--- /dev/null
+++ b/frontend/src/components/common/CardHeading.vue
@@ -0,0 +1,25 @@
+<template>
+  <!-- Canonical card/dialog heading: an optional leading icon + the title, with
+       a default slot for trailing content (a v-spacer + actions, or an inline
+       status chip). The icon+title v-card-title row was hand-rolled identically
+       in 14 cards/dialogs (DRY pattern sweep 2026-06-09). Plain text-only
+       v-card-titles are NOT this pattern and keep using <v-card-title> directly. -->
+  <v-card-title class="d-flex align-center fc-card-heading">
+    <v-icon v-if="icon" :icon="icon" :color="iconColor || undefined" size="small" />
+    <span>{{ title }}</span>
+    <slot />
+  </v-card-title>
+</template>
+
+<script setup>
+defineProps({
+  icon: { type: String, default: '' },
+  title: { type: String, default: '' },
+  // e.g. 'error' for danger/error headings; '' keeps the default text color.
+  iconColor: { type: String, default: '' },
+})
+</script>
+
+<style scoped>
+.fc-card-heading { gap: 10px; }
+</style>
diff --git a/frontend/src/components/common/ErrorDetailModal.vue b/frontend/src/components/common/ErrorDetailModal.vue
index 6c378b3..1fd8151 100644
--- a/frontend/src/components/common/ErrorDetailModal.vue
+++ b/frontend/src/components/common/ErrorDetailModal.vue
@@ -2,14 +2,15 @@
   <v-dialog :model-value="modelValue" max-width="900"
             @update:model-value="$emit('update:modelValue', $event)">
     <v-card>
-      <v-card-title class="d-flex align-center" style="gap: 12px;">
-        <v-icon icon="mdi-alert-circle-outline" color="error" />
-        <span>{{ displayTitle }}</span>
+      <CardHeading
+        icon="mdi-alert-circle-outline" icon-color="error"
+        :title="displayTitle"
+      >
         <v-spacer />
         <v-btn icon variant="text" size="small" @click="close">
           <v-icon>mdi-close</v-icon>
         </v-btn>
-      </v-card-title>
+      </CardHeading>
       <v-card-text>
         <dl v-if="contextRows.length" class="fc-err-context">
           <template v-for="(row, idx) in contextRows" :key="idx">
@@ -37,6 +38,7 @@ import { toast } from '../../utils/toast.js'
 import { computed, ref, watch } from 'vue'
 
 import { copyText } from '../../utils/clipboard.js'
+import CardHeading from './CardHeading.vue'
 
 const props = defineProps({
   modelValue: { type: Boolean, default: false },
diff --git a/frontend/src/components/settings/BackupCard.vue b/frontend/src/components/settings/BackupCard.vue
index f169fae..079a243 100644
--- a/frontend/src/components/settings/BackupCard.vue
+++ b/frontend/src/components/settings/BackupCard.vue
@@ -1,9 +1,6 @@
 <template>
   <v-card class="fc-backup-card">
-    <v-card-title class="d-flex align-center" style="gap: 10px;">
-      <v-icon icon="mdi-database-export" size="small" />
-      <span>Backups</span>
-    </v-card-title>
+    <CardHeading icon="mdi-database-export" title="Backups" />
     <v-card-text>
       <p class="fc-muted text-body-2 mb-4">
         pg_dump for the database (fast, nightly-schedulable);
@@ -101,6 +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 BackupRunsTable from './BackupRunsTable.vue'
 
 const store = useBackupStore()
diff --git a/frontend/src/components/settings/BrowserExtensionCard.vue b/frontend/src/components/settings/BrowserExtensionCard.vue
index 0fcfc52..0424975 100644
--- a/frontend/src/components/settings/BrowserExtensionCard.vue
+++ b/frontend/src/components/settings/BrowserExtensionCard.vue
@@ -1,12 +1,10 @@
 <template>
   <v-card class="fc-ext-card">
-    <v-card-title class="d-flex align-center" style="gap: 10px;">
-      <v-icon icon="mdi-puzzle" size="small" />
-      <span>Browser extension</span>
+    <CardHeading icon="mdi-puzzle" title="Browser extension">
       <span v-if="manifest?.installed" class="text-caption fc-muted">
         · Firefox · v{{ manifest.version }}
       </span>
-    </v-card-title>
+    </CardHeading>
 
     <v-card-text>
       <p class="fc-muted text-body-2">
@@ -112,6 +110,7 @@ import { toast } from '../../utils/toast.js'
 import { computed, onMounted, ref } from 'vue'
 import { useApi } from '../../composables/useApi.js'
 import { copyText } from '../../utils/clipboard.js'
+import CardHeading from '../common/CardHeading.vue'
 
 const api = useApi()
 
diff --git a/frontend/src/components/settings/ImportTaskList.vue b/frontend/src/components/settings/ImportTaskList.vue
index a3c78e2..2ad717e 100644
--- a/frontend/src/components/settings/ImportTaskList.vue
+++ b/frontend/src/components/settings/ImportTaskList.vue
@@ -1,7 +1,6 @@
 <template>
   <v-card>
-    <v-card-title class="d-flex align-center" style="gap: 12px;">
-      <span>Recent import tasks</span>
+    <CardHeading title="Recent import tasks">
       <v-spacer />
       <v-select
         v-model="statusFilter" :items="statusOptions" density="compact"
@@ -29,7 +28,7 @@
       >
         Clear completed…
       </v-btn>
-    </v-card-title>
+    </CardHeading>
     <v-data-table-virtual
       :headers="headers" :items="store.tasks" :loading="store.tasksLoading"
       height="480" density="compact" no-data-text="No tasks yet — trigger a scan above."
@@ -129,6 +128,7 @@ import { toast } from '../../utils/toast.js'
 import { computed, ref } from 'vue'
 import { useImportStore } from '../../stores/import.js'
 import ErrorDetailModal from '../common/ErrorDetailModal.vue'
+import CardHeading from '../common/CardHeading.vue'
 
 const store = useImportStore()
 const statusFilter = ref(null)
diff --git a/frontend/src/components/settings/PostMaintenanceCard.vue b/frontend/src/components/settings/PostMaintenanceCard.vue
index 7e2c348..71b07cd 100644
--- a/frontend/src/components/settings/PostMaintenanceCard.vue
+++ b/frontend/src/components/settings/PostMaintenanceCard.vue
@@ -1,9 +1,6 @@
 <template>
   <v-card class="fc-post-maint">
-    <v-card-title class="d-flex align-center" style="gap: 10px;">
-      <v-icon icon="mdi-post-outline" size="small" />
-      <span>Post maintenance</span>
-    </v-card-title>
+    <CardHeading icon="mdi-post-outline" title="Post maintenance" />
     <v-card-text>
       <p class="fc-muted text-body-2 mb-4">
         Remove <strong>bare posts</strong> — post rows with no images (neither
@@ -61,6 +58,7 @@ import { ref } from 'vue'
 
 import { useAdminStore } from '../../stores/admin.js'
 import SampleNameGrid from '../common/SampleNameGrid.vue'
+import CardHeading from '../common/CardHeading.vue'
 
 const store = useAdminStore()
 const preview = ref(null)
diff --git a/frontend/src/components/settings/SystemActivitySummary.vue b/frontend/src/components/settings/SystemActivitySummary.vue
index 354f94f..baa62a5 100644
--- a/frontend/src/components/settings/SystemActivitySummary.vue
+++ b/frontend/src/components/settings/SystemActivitySummary.vue
@@ -1,8 +1,6 @@
 <template>
   <v-card class="fc-activity-summary">
-    <v-card-title class="d-flex align-center" style="gap: 10px;">
-      <v-icon icon="mdi-pulse" size="small" />
-      <span>System activity (last min)</span>
+    <CardHeading icon="mdi-pulse" title="System activity (last min)">
       <v-spacer />
       <v-btn
         variant="text" size="small" rounded="pill"
@@ -11,7 +9,7 @@
         View activity
         <v-icon end size="small">mdi-arrow-right</v-icon>
       </v-btn>
-    </v-card-title>
+    </CardHeading>
 
     <v-card-text>
       <v-alert
@@ -36,6 +34,7 @@ import { onMounted, onUnmounted } from 'vue'
 
 import { useSystemActivityStore } from '../../stores/systemActivity.js'
 import QueuesTable from './QueuesTable.vue'
+import CardHeading from '../common/CardHeading.vue'
 
 defineEmits(['open-activity'])
 
diff --git a/frontend/src/components/settings/SystemActivityTab.vue b/frontend/src/components/settings/SystemActivityTab.vue
index a4690f9..65fd7b7 100644
--- a/frontend/src/components/settings/SystemActivityTab.vue
+++ b/frontend/src/components/settings/SystemActivityTab.vue
@@ -2,14 +2,12 @@
   <div class="fc-activity">
     <!-- Queues + workers pane -->
     <v-card class="mb-4">
-      <v-card-title class="d-flex align-center" style="gap: 10px;">
-        <v-icon icon="mdi-pulse" size="small" />
-        <span>Queues + workers</span>
+      <CardHeading icon="mdi-pulse" title="Queues + workers">
         <v-spacer />
         <span class="text-caption fc-muted">
           updated {{ formatRelative(store.queues?.fetched_at) }}
         </span>
-      </v-card-title>
+      </CardHeading>
       <v-card-text>
         <QueuesTable
           :queues="store.queues"
@@ -21,14 +19,12 @@
 
     <!-- Recent failures pane -->
     <v-card class="mb-4">
-      <v-card-title class="d-flex align-center" style="gap: 10px;">
-        <v-icon icon="mdi-alert-circle-outline" size="small" />
-        <span>Recent failures (last 24h)</span>
+      <CardHeading icon="mdi-alert-circle-outline" title="Recent failures (last 24h)">
         <v-spacer />
         <span class="text-caption fc-muted">
           {{ failureCount }} failures
         </span>
-      </v-card-title>
+      </CardHeading>
       <v-card-text>
         <div v-if="errorTypes.length" class="mb-3 fc-pills">
           <v-chip
@@ -79,9 +75,7 @@
 
     <!-- All activity pane -->
     <v-card>
-      <v-card-title class="d-flex align-center" style="gap: 10px;">
-        <v-icon icon="mdi-format-list-bulleted" size="small" />
-        <span>All recent activity</span>
+      <CardHeading icon="mdi-format-list-bulleted" title="All recent activity">
         <v-spacer />
         <v-select
           v-model="filterQueue"
@@ -102,7 +96,7 @@
           <v-icon start size="small">mdi-refresh</v-icon>
           Refresh
         </v-btn>
-      </v-card-title>
+      </CardHeading>
       <v-card-text>
         <v-table density="compact">
           <thead>
@@ -157,6 +151,7 @@ import { useSystemActivityStore } from '../../stores/systemActivity.js'
 import { formatRelative as fmtRelative } from '../../utils/date.js'
 import ErrorDetailModal from '../common/ErrorDetailModal.vue'
 import QueuesTable from './QueuesTable.vue'
+import CardHeading from '../common/CardHeading.vue'
 
 // Click-to-open modal for full error text. Replaces the unusable
 // :title="..." tooltip (operator-flagged 2026-05-26: SQLAlchemy
diff --git a/frontend/src/components/settings/TagMaintenanceCard.vue b/frontend/src/components/settings/TagMaintenanceCard.vue
index dca22a6..233c2d4 100644
--- a/frontend/src/components/settings/TagMaintenanceCard.vue
+++ b/frontend/src/components/settings/TagMaintenanceCard.vue
@@ -1,9 +1,6 @@
 <template>
   <v-card class="fc-tag-maint">
-    <v-card-title class="d-flex align-center" style="gap: 10px;">
-      <v-icon icon="mdi-tag-remove" size="small" />
-      <span>Tag maintenance</span>
-    </v-card-title>
+    <CardHeading icon="mdi-tag-remove" title="Tag maintenance" />
     <v-card-text>
       <p class="fc-muted text-body-2 mb-4">
         Remove tags with zero image associations and zero series-page
@@ -196,6 +193,7 @@ import { ref } from 'vue'
 
 import { useAdminStore } from '../../stores/admin.js'
 import SampleNameGrid from '../common/SampleNameGrid.vue'
+import CardHeading from '../common/CardHeading.vue'
 
 const store = useAdminStore()
 const preview = ref(null)
diff --git a/frontend/src/components/subscriptions/PreviewDialog.vue b/frontend/src/components/subscriptions/PreviewDialog.vue
index 7639526..0dac268 100644
--- a/frontend/src/components/subscriptions/PreviewDialog.vue
+++ b/frontend/src/components/subscriptions/PreviewDialog.vue
@@ -6,10 +6,10 @@
     @update:model-value="$emit('update:modelValue', $event)"
   >
     <v-card v-if="source">
-      <v-card-title class="d-flex align-center">
-        <v-icon class="mr-2">mdi-eye-outline</v-icon>
-        Preview · {{ source.artist_name }}
-      </v-card-title>
+      <CardHeading
+        icon="mdi-eye-outline"
+        :title="`Preview · ${source.artist_name}`"
+      />
       <v-card-subtitle class="fc-preview__url">{{ source.url }}</v-card-subtitle>
 
       <v-card-text>
@@ -70,6 +70,7 @@
 import { ref, watch } from 'vue'
 import { useSourcesStore } from '../../stores/sources.js'
 import { formatRelative } from '../../utils/date.js'
+import CardHeading from '../common/CardHeading.vue'
 
 const props = defineProps({
   modelValue: { type: Boolean, default: false },