- );
-}
// Per-user view: sync status + your own API usage + (for real accounts) the manual sync actions.
function Overview({ me }: { me: Me }) {
@@ -107,29 +83,29 @@ function Overview({ me }: { me: Me }) {
{s ? (
+ );
+}
diff --git a/frontend/src/components/ui/form.tsx b/frontend/src/components/ui/form.tsx
new file mode 100644
index 0000000..c99fcd3
--- /dev/null
+++ b/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 (
+
+ );
+}
+
+/** 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 (
+
+
+ {title}
+
+ {children}
+
+ );
+}
+
+/** 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 (
+
+
+ {children}
+
+
+ );
+}
+
+/** 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 (
+
+ {label}
+ {children}
+
+ );
+}
diff --git a/frontend/src/lib/useDismiss.ts b/frontend/src/lib/useDismiss.ts
new file mode 100644
index 0000000..58c7fbe
--- /dev/null
+++ b/frontend/src/lib/useDismiss.ts
@@ -0,0 +1,32 @@
+import { useEffect, type RefObject } from "react";
+
+/** While `active`, close (call `onClose`) on Escape or a mousedown outside ALL of the given
+ * element(s). The reusable half of the popover/dropdown pattern that several components each
+ * hand-rolled; positioning stays with the caller (it varies per popover). Pass the panel ref
+ * (and optionally a trigger ref so clicking the trigger doesn't immediately re-close). */
+export function useDismiss(
+ active: boolean,
+ onClose: () => void,
+ refs: RefObject | RefObject[],
+): void {
+ useEffect(() => {
+ if (!active) return;
+ const list = Array.isArray(refs) ? refs : [refs];
+ const onDown = (e: MouseEvent) => {
+ const target = e.target as Node;
+ if (!list.some((r) => r.current?.contains(target))) onClose();
+ };
+ const onKey = (e: KeyboardEvent) => {
+ if (e.key === "Escape") onClose();
+ };
+ document.addEventListener("mousedown", onDown);
+ document.addEventListener("keydown", onKey);
+ return () => {
+ document.removeEventListener("mousedown", onDown);
+ document.removeEventListener("keydown", onKey);
+ };
+ // Matches the original effects: (re)subscribe only when open/closed toggles. Refs are
+ // stable and onClose is read fresh from this run's closure.
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [active]);
+}