refactor(ui): settings-card primitives + fix threshold clamp / card misgroup (#161)

Tier-3 frontend DRY for the ML settings cards, plus the F-D2 clamp bug and the
F-D3 card misgrouping.

New primitives (components/common + composables):
- <SettingToggleRow> — the accent-icon + .fc-section-h label + right-aligned
  switch row (HeadsCard x3, CropProposersCard). iconColor prop absorbs the
  on/off dim.
- <SettingNumberField> — compact numeric field that CLAMPS to [min,max] on
  commit. This fixes F-D2: HeadsCard/CropProposersCard previously sent
  Number(raw) straight to the API, so an out-of-range threshold bounced off the
  400 validator (only TranslationCard clamped). density prop for the grid cards.
- useSettingSave(patchFn) — the busy + patch + toast + revert-on-failure flow
  each card hand-rolled (HeadsCard x6 handlers, CropProposersCard, MLBackfillCard,
  VideoEmbeddingCard). Returns ok/false for the optimistic-switch revert.

Adopted in HeadsCard, CropProposersCard, MLBackfillCard (handler only — its
plain labelled switch is a different affordance), VideoEmbeddingCard.

F-D3: MLThresholdSliders.vue actually rendered a "Video embedding" (frame-
sampling) card but sat under "Tagging → Suggestion thresholds". Renamed it
VideoEmbeddingCard.vue and moved it to the "GPU agent & embeddings" section.

Left deliberately (over-DRY guard): TranslationCard uses an inline error ALERT
(not a toast), already clamps its confidence with a NaN fallback, and lives on
the ImportStore — a genuinely different save pattern, so forcing it onto
useSettingSave would change its UX.

Behaviour-preserving refactor; CI has no Vue type-check so this needs a live
UI pass (toggles persist + revert on failure, thresholds clamp on blur, video
card now under Embeddings).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NsmJSQxnNxGgtM5Yz4GAqi

frontend/src/components/settings/MLBackfillCard.vue

@@ -39,13 +39,14 @@
 import { toast } from '../../utils/toast.js'
 import { onMounted, ref } from 'vue'
 import { useMLStore } from '../../stores/ml.js'
+import { useSettingSave } from '../../composables/useSettingSave.js'
 import MaintenanceTile from '../common/MaintenanceTile.vue'
 import QueueStatusBar from './QueueStatusBar.vue'
 const store = useMLStore()
+const { busy: saving, save } = useSettingSave(store.patchSettings)
 const busy = ref(false)
 const done = ref(false)
 const enabled = ref(true)
-const saving = ref(false)
 onMounted(async () => {
   try {
     await store.loadSettings()
@@ -55,21 +56,12 @@ onMounted(async () => {
   } catch { /* non-fatal */ }
 })
 async function onToggle() {
-  saving.value = true
-  try {
-    await store.patchSettings({ cpu_embed_enabled: enabled.value })
-    toast({
-      text: enabled.value
-        ? 'CPU embedding on — imports queue embeds for the ml-worker'
-        : 'CPU embedding off — the GPU embed backfill owns whole-image embeds',
-      type: 'success',
-    })
-  } catch (e) {
-    toast({ text: `Could not save: ${e.message}`, type: 'error' })
-    enabled.value = !enabled.value
-  } finally {
-    saving.value = false
-  }
+  const ok = await save({ cpu_embed_enabled: enabled.value }, {
+    successMessage: enabled.value
+      ? 'CPU embedding on — imports queue embeds for the ml-worker'
+      : 'CPU embedding off — the GPU embed backfill owns whole-image embeds',
+  })
+  if (!ok) enabled.value = !enabled.value
 }
 async function run() {
   busy.value = true