refactor(ui): shared form primitives (Switch, Section, SettingRow, HintLabel)

components/ui/form.tsx replaces the per-panel copies:
- Switch — was duplicated in SettingsPanel (Switch) + ConfigPanel (Toggle) +
  Sidebar (inline labeled toggle).
- Section (with a card variant) — was in SettingsPanel + Stats (plain) and
  AdminUsers (glass card).
- SettingRow + HintLabel — the label+hint+control row was identical in SettingsPanel + Stats.
No visual change intended (Sidebar's toggle gains the standard knob shadow).

frontend/src/components/ui/form.tsx

@@ -0,0 +1,85 @@
+import type { ReactNode } from "react";
+import Tooltip from "../Tooltip";
+
+// Shared form/settings primitives, factored out of the many panels that each re-declared
+// them (Settings, Config, Stats, admin pages, Setup wizard). Visual contract unchanged.
+
+/** Pill on/off switch — the bare control; compose it with your own label/row. */
+export function Switch({
+  checked,
+  onChange,
+}: {
+  checked: boolean;
+  onChange: (v: boolean) => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={() => onChange(!checked)}
+      className={`w-9 h-5 rounded-full transition relative shrink-0 ${checked ? "bg-accent" : "bg-border"}`}
+    >
+      <span
+        className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-all ${
+          checked ? "left-[18px]" : "left-0.5"
+        }`}
+      />
+    </button>
+  );
+}
+
+/** A titled settings block. Default = a plain block with an uppercase caption; `card` wraps it
+ * in a glass card (the admin pages' style). */
+export function Section({
+  title,
+  card,
+  children,
+}: {
+  title: string;
+  card?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <div className={card ? "glass rounded-2xl p-4 mb-4" : "mb-6"}>
+      <div className={`text-xs uppercase tracking-wide text-muted ${card ? "mb-3" : "mb-2"}`}>
+        {title}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+/** A label that reveals an explanatory caption on hover (dotted underline) when `hint` is set.
+ * No-op styling when there's no hint, so it's safe to use unconditionally. */
+export function HintLabel({ hint, children }: { hint?: string; children: ReactNode }) {
+  return (
+    <Tooltip hint={hint ?? ""}>
+      <span
+        className={
+          hint
+            ? "underline decoration-dotted decoration-muted/40 underline-offset-4 cursor-help"
+            : ""
+        }
+      >
+        {children}
+      </span>
+    </Tooltip>
+  );
+}
+
+/** A settings row: a (hint-able) label on the left, a control on the right. */
+export function SettingRow({
+  label,
+  hint,
+  children,
+}: {
+  label: string;
+  hint?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3 py-1.5 text-sm">
+      <HintLabel hint={hint}>{label}</HintLabel>
+      {children}
+    </div>
+  );
+}