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,69 @@
+import type { ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
+import { X } from "lucide-react";
+
+type BannerTone = "accent" | "warning";
+
+const TONES: Record<BannerTone, { bar: string; icon: string; action: string }> = {
+  accent: {
+    bar: "bg-accent/15 border-accent/30",
+    icon: "text-accent",
+    action: "btn-primary",
+  },
+  warning: {
+    bar: "bg-warn/15 border-warn/30",
+    icon: "text-warn",
+    action: "btn-warn",
+  },
+};
+
+// Shared top-of-app notification bar. VersionBanner and DemoBanner are thin wrappers over this;
+// a future news-ticker variant can build on the same shell (rotating content as children).
+export default function Banner({
+  tone,
+  icon: Icon,
+  children,
+  action,
+  onDismiss,
+  dismissTitle,
+  role,
+}: {
+  tone: BannerTone;
+  icon: LucideIcon;
+  children: ReactNode;
+  action?: { label: string; onClick: () => void };
+  onDismiss?: () => void;
+  dismissTitle?: string;
+  /** `"status"` for a bar that APPEARS in response to something the user just did, so a screen
+   * reader announces it. Left unset for the permanent bars (demo, version): those are part of the
+   * page when it loads, and announcing them on every visit is noise, not information. */
+  role?: "status";
+}) {
+  const c = TONES[tone];
+  return (
+    <div
+      role={role}
+      className={`shrink-0 flex items-center gap-2 px-4 py-2 text-sm border-b text-fg ${c.bar}`}
+    >
+      <Icon className={`w-4 h-4 shrink-0 ${c.icon}`} />
+      <span className="min-w-0">{children}</span>
+      {action && (
+        <button
+          onClick={action.onClick}
+          className={`ml-1 px-2.5 py-1 rounded-lg font-semibold transition ${c.action}`}
+        >
+          {action.label}
+        </button>
+      )}
+      {onDismiss && (
+        <button
+          onClick={onDismiss}
+          title={dismissTitle}
+          className="ml-auto p-1 rounded-md text-muted hover:text-fg hover:bg-card transition"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      )}
+    </div>
+  );
+}