refactor(ui): CardHeading primitive for icon+title card/dialog headings (DRY pattern sweep)

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>

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

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()

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()