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,116 @@
+import { type ReactNode, type CSSProperties } from "react";
+import { useTranslation } from "react-i18next";
+import { ChevronDown, Eye, EyeOff, GripVertical, Pencil } from "lucide-react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+// One "island" card inside a SidePanel: a titled glass-card, and — in the panel's edit mode — a drag
+// handle (reorder) and a hide toggle. Generalized from the feed sidebar's WidgetCard so all three
+// panels share the same island look and behavior. `collapsible` groups (the default) get a per-group
+// collapse chevron; non-collapsible groups render as a plain always-open label + control row, and
+// their title can instead act as a trigger via `onTitleClick` (e.g. feed "Your tags" -> tag manager).
+export default function PanelGroup({
+  id,
+  title,
+  editing,
+  collapsible = true,
+  collapsed,
+  hidden,
+  onToggleCollapse,
+  onToggleHidden,
+  onTitleClick,
+  titleActionLabel,
+  children,
+}: {
+  id: string;
+  title: string;
+  editing: boolean;
+  collapsible?: boolean;
+  collapsed: boolean;
+  hidden: boolean;
+  onToggleCollapse: () => void;
+  onToggleHidden: () => void;
+  onTitleClick?: () => void;
+  titleActionLabel?: string;
+  children: ReactNode;
+}) {
+  const { t } = useTranslation();
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+    disabled: !editing,
+  });
+  const style: CSSProperties = { transform: CSS.Transform.toString(transform), transition };
+  // Non-collapsible groups are always open (outside edit mode); collapsible ones honour `collapsed`.
+  const showBody = !editing && (!collapsible || !collapsed);
+  // A non-collapsible group's title acts as a trigger when one is provided.
+  const titleIsTrigger = !editing && !collapsible && !!onTitleClick;
+
+  const titleCls =
+    "flex-1 min-w-0 flex items-center gap-1 text-left select-none text-sm uppercase tracking-wide";
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`glass-card rounded-xl ${
+        isDragging ? "relative z-base shadow-2xl ring-1 ring-accent" : ""
+      } ${hidden && editing ? "opacity-50" : ""}`}
+    >
+      <div className="flex items-center gap-1.5 px-3 py-2">
+        {editing && (
+          <button
+            {...attributes}
+            {...listeners}
+            title={t("sidebar.dragToReorder")}
+            className="-ml-1 cursor-grab active:cursor-grabbing text-muted hover:text-fg touch-none"
+          >
+            <GripVertical className="w-4 h-4" />
+          </button>
+        )}
+        {collapsible && !editing ? (
+          <button
+            onClick={onToggleCollapse}
+            className={`${titleCls} text-muted hover:text-fg transition`}
+          >
+            <span className="truncate">{title}</span>
+          </button>
+        ) : titleIsTrigger ? (
+          <button
+            onClick={onTitleClick}
+            title={titleActionLabel}
+            className={`${titleCls} group text-muted hover:text-accent transition`}
+          >
+            <span className="truncate">{title}</span>
+            <Pencil className="w-3 h-3 shrink-0 text-muted/60 group-hover:text-accent" />
+          </button>
+        ) : (
+          <span className={`${titleCls} text-muted`}>
+            <span className="truncate">{title}</span>
+          </span>
+        )}
+        {editing ? (
+          <button
+            onClick={onToggleHidden}
+            title={hidden ? t("sidebar.showWidget") : t("sidebar.hideWidget")}
+            className="text-muted hover:text-fg"
+          >
+            {hidden ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+          </button>
+        ) : (
+          collapsible && (
+            <button
+              onClick={onToggleCollapse}
+              title={collapsed ? t("sidebar.expand") : t("sidebar.collapse")}
+              className="text-muted hover:text-fg"
+            >
+              <ChevronDown
+                className={`w-4 h-4 transition-transform ${collapsed ? "-rotate-90" : ""}`}
+              />
+            </button>
+          )
+        )}
+      </div>
+      {showBody && <div className="px-3 pb-3">{children}</div>}
+    </div>
+  );
+}