refactor(e10): move the platform components into components/ui/ and enforce the boundary

The app HAS a platform layer -- AnchoredPopover (22 importers, with arrows/typeahead/Escape/anchor-flip), QueryState (21), Modal (17), PageShell, DataTable, Tabs, Tooltip and ~26 more -- but it sat flat among ~160 feature components with nothing marking it as one. Several of those files describe themselves as 'the one place' or 'canonical' and were still bypassed by hand-rolled markup, because a layer nobody can see is a layer nobody uses; three separate inventory passes of this codebase misread it the same way. Moves the 33 domain-free modules into components/ui/, rewrites the imports in 89 files, and makes the boundary a lint rule rather than a convention: inside ui/ a one-level-up import (a feature component) and any lib/api slice are errors. The rule was verified to fire on both and to leave generic lib/ helpers alone. README.md states which side of the line a component belongs on and why. No behaviour change: 3x tsc, eslint, knip, prettier and 687 vitest tests all green; no backend file touched.
2026-09-05 16:58:29 +02:00
parent 31fa554b87
commit 5bfcf5d83a
138 changed files with 262 additions and 189 deletions
@@ -0,0 +1,68 @@
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Redo2, Undo2 } from "lucide-react";
+
+// Reusable undo/redo buttons with Ctrl/Cmd+Z (undo) and Ctrl/Cmd+Y or Ctrl/Cmd+Shift+Z
+// (redo) shortcuts. Pairs with useUndoable but takes plain props, so it works with any
+// undo source. The shortcuts ignore keystrokes while a text field is focused.
+export default function UndoToolbar({
+  canUndo,
+  canRedo,
+  onUndo,
+  onRedo,
+}: {
+  canUndo: boolean;
+  canRedo: boolean;
+  onUndo: () => void;
+  onRedo: () => void;
+}) {
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (!(e.ctrlKey || e.metaKey)) return;
+      const tgt = e.target as HTMLElement | null;
+      if (tgt && (tgt.tagName === "INPUT" || tgt.tagName === "TEXTAREA" || tgt.isContentEditable))
+        return;
+      const k = e.key.toLowerCase();
+      if (k === "z" && !e.shiftKey) {
+        if (canUndo) {
+          e.preventDefault();
+          onUndo();
+        }
+      } else if (k === "y" || (k === "z" && e.shiftKey)) {
+        if (canRedo) {
+          e.preventDefault();
+          onRedo();
+        }
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [canUndo, canRedo, onUndo, onRedo]);
+
+  const btn =
+    "p-1.5 rounded-lg border border-border text-muted enabled:hover:text-fg enabled:hover:border-accent disabled:opacity-30 transition";
+  return (
+    <div className="inline-flex items-center gap-1">
+      <button
+        onClick={onUndo}
+        disabled={!canUndo}
+        title={t("common.undo")}
+        aria-label={t("common.undo")}
+        className={btn}
+      >
+        <Undo2 className="w-4 h-4" />
+      </button>
+      <button
+        onClick={onRedo}
+        disabled={!canRedo}
+        title={t("common.redo")}
+        aria-label={t("common.redo")}
+        className={btn}
+      >
+        <Redo2 className="w-4 h-4" />
+      </button>
+    </div>
+  );
+}