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,79 @@
+import { useSyncExternalStore } from "react";
+import { useTranslation } from "react-i18next";
+import { AlertCircle, AlertTriangle, CheckCircle2, Info, X, XCircle } from "lucide-react";
+import { dismiss, getActiveToasts, subscribe, type NotifLevel } from "../../lib/notifications";
+
+export const LEVEL_STYLE: Record<NotifLevel, { icon: typeof Info; color: string; bar: string }> = {
+  info: { icon: Info, color: "text-info", bar: "bg-info" },
+  success: { icon: CheckCircle2, color: "text-success", bar: "bg-success" },
+  warning: { icon: AlertTriangle, color: "text-warn", bar: "bg-warn" },
+  error: { icon: AlertCircle, color: "text-danger", bar: "bg-danger" },
+  fatal: { icon: XCircle, color: "text-danger", bar: "bg-danger" },
+};
+
+export default function Toaster() {
+  const { t } = useTranslation();
+  const toasts = useSyncExternalStore(subscribe, getActiveToasts, getActiveToasts);
+
+  return (
+    // Stable, always-mounted polite live region — a polite region must PRE-EXIST in the DOM for a
+    // screen reader to announce content later inserted into it (a region created together with its
+    // first message is unreliably announced). `aria-live` (not role="status") on purpose:
+    // role="status" implies aria-atomic="true", which would re-read the WHOLE stack on every toast;
+    // aria-live defaults atomic=false, so only the newly-added toast is spoken. Error/fatal toasts
+    // additionally carry role="alert", which announces assertively on insertion regardless.
+    <div
+      aria-live="polite"
+      className="absolute bottom-4 left-4 z-overlay flex flex-col gap-2 w-80 max-w-[calc(100vw-2rem)]"
+    >
+      {toasts.map((toast) => {
+        const { icon: Icon, color, bar } = LEVEL_STYLE[toast.level];
+        const urgent = toast.level === "error" || toast.level === "fatal";
+        return (
+          <div
+            key={toast.id}
+            role={urgent ? "alert" : undefined}
+            className="toast-card glass relative overflow-hidden rounded-xl px-3 py-3 flex items-start gap-3 animate-[popIn_0.16s_ease]"
+          >
+            <Icon className={`w-5 h-5 shrink-0 mt-0.5 ${color}`} />
+            <div className="min-w-0 flex-1">
+              {toast.title && <div className="text-sm font-semibold">{toast.title}</div>}
+              <div className="text-sm wrap-break-word">
+                {toast.message}
+                {toast.repeat > 1 && (
+                  <span className="ml-1.5 align-middle text-2xs font-semibold text-muted tabular-nums">
+                    ×{toast.repeat}
+                  </span>
+                )}
+              </div>
+              {toast.action && (
+                <button
+                  onClick={() => {
+                    toast.action!.onClick();
+                    dismiss(toast.id);
+                  }}
+                  className="mt-1 text-accent text-sm font-semibold hover:underline"
+                >
+                  {toast.action.label}
+                </button>
+              )}
+            </div>
+            <button
+              onClick={() => dismiss(toast.id)}
+              className="shrink-0 text-muted hover:text-fg"
+              title={t("notifications.dismiss")}
+            >
+              <X className="w-4 h-4" />
+            </button>
+            {toast.duration && (
+              <div
+                className={`absolute left-0 bottom-0 h-0.5 w-full origin-left ${bar}`}
+                style={{ animation: `toastbar ${toast.duration}ms linear forwards` }}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}