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/VideoEmbeddingCard.vue

@@ -0,0 +1,54 @@
+<template>
+  <MaintenanceTile
+    icon="mdi-filmstrip"
+    title="Video embedding"
+    blurb="How videos are sampled into frames before embedding."
+  >
+    <div v-if="store.settings">
+      <div class="text-caption fc-muted mb-3">
+        Videos are embedded by sampling frames at a fixed cadence and mean-pooling
+        their SigLIP embeddings. The interval sets the cadence; the cap bounds how
+        many frames a long video samples.
+      </div>
+      <v-row>
+        <v-col cols="12" sm="6">
+          <SettingNumberField
+            v-model="local.video_frame_interval_seconds"
+            label="Frame interval (s)" :min="0.5" :step="0.5"
+            density="comfortable" max-width="none" @change="onSave"
+          />
+        </v-col>
+        <v-col cols="12" sm="6">
+          <SettingNumberField
+            v-model="local.video_max_frames"
+            label="Max frames" :min="1" :step="1"
+            density="comfortable" max-width="none" @change="onSave"
+          />
+        </v-col>
+      </v-row>
+    </div>
+    <div v-else><v-skeleton-loader type="paragraph" /></div>
+  </MaintenanceTile>
+</template>
+
+<script setup>
+import { reactive, watch } from 'vue'
+import { useMLStore } from '../../stores/ml.js'
+import MaintenanceTile from '../common/MaintenanceTile.vue'
+import SettingNumberField from '../common/SettingNumberField.vue'
+import { useSettingSave } from '../../composables/useSettingSave.js'
+
+const store = useMLStore()
+const { save } = useSettingSave(store.patchSettings)
+const local = reactive({})
+watch(() => store.settings, (s) => { if (s) Object.assign(local, s) }, { immediate: true })
+
+// SettingNumberField clamps interval to ≥0.5 and max-frames to ≥1 before this
+// fires, so an out-of-range value never reaches the API.
+function onSave() {
+  save({
+    video_frame_interval_seconds: Number(local.video_frame_interval_seconds),
+    video_max_frames: Number(local.video_max_frames),
+  })
+}
+</script>