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,126 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+// The Prev / page-input / Next + "N per page" cluster, lifted out of DataTable so a non-table view
+// (the channel manager's card layout) can paginate the same way. Controlled: the caller owns page +
+// size and slices its own rows; this only renders the controls and reports changes. `sizeLabel` lets
+// the caller say "Rows per page" or "Cards per page". Returns null when there's nothing to page.
+
+/** How many pages `total` rows make at `size` (`size <= 0` = "All" = one page). */
+function pageCount(total: number, size: number): number {
+  return size <= 0 ? 1 : Math.max(1, Math.ceil(total / size));
+}
+
+/** Whether a pager would render anything — the ONE owner of that rule. Callers that wrap the pager
+ * in their own chrome gate on this instead of re-deriving it: a drifted second copy is exactly what
+ * left empty control bands behind on tables with nothing to page. */
+export function hasPagerContent(total: number, size: number): boolean {
+  return pageCount(total, size) > 1 || total > 0;
+}
+export default function Pager({
+  page,
+  size,
+  total,
+  pageSizeOptions,
+  onPageChange,
+  onSizeChange,
+  sizeLabel,
+}: {
+  /** Current page (0-based). */
+  page: number;
+  /** Page size; `<= 0` means "All" (one page). */
+  size: number;
+  /** Total item count across all pages. */
+  total: number;
+  pageSizeOptions: number[];
+  onPageChange: (page: number) => void;
+  onSizeChange: (size: number) => void;
+  sizeLabel: string;
+}) {
+  const { t } = useTranslation();
+  const totalPages = pageCount(total, size);
+  const safePage = Math.min(page, totalPages - 1);
+
+  // Local text for the editable "jump to page" box (committed on Enter/blur).
+  const [pageInput, setPageInput] = useState(String(safePage + 1));
+  useEffect(() => setPageInput(String(safePage + 1)), [safePage]);
+
+  // Turning the page — or resizing it, which re-slices from a different first item — swaps the whole
+  // list, so put the reader at its top; landing mid-list in a page you haven't seen is disorienting.
+  // The page scroller is the app's <main> (PageScroller documents itself as the ONE scroller; the
+  // same implicit contract BackToTop and VirtualGrid's getScrollParent already rely on).
+  function scrollListToTop() {
+    document.querySelector("main")?.scrollTo({ top: 0 });
+  }
+  function goToPage(p: number) {
+    onPageChange(p);
+    scrollListToTop();
+  }
+  function commitPageInput() {
+    const n = parseInt(pageInput, 10);
+    if (!isNaN(n)) goToPage(Math.min(totalPages - 1, Math.max(0, n - 1)));
+    else setPageInput(String(safePage + 1));
+  }
+
+  if (!hasPagerContent(total, size)) return null;
+  return (
+    <div className="flex items-center gap-3 flex-wrap">
+      {totalPages > 1 && (
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => goToPage(Math.max(0, safePage - 1))}
+            disabled={safePage === 0}
+            className="glass-card glass-hover flex items-center gap-1 px-3 py-1.5 rounded-lg disabled:opacity-40 transition"
+          >
+            <ChevronLeft className="w-4 h-4" />
+            {t("datatable.pager.prev")}
+          </button>
+          <span className="text-muted flex items-center gap-1.5">
+            {t("datatable.pager.pageLabel")}
+            <input
+              type="number"
+              min={1}
+              max={totalPages}
+              value={pageInput}
+              onChange={(e) => setPageInput(e.target.value)}
+              onBlur={commitPageInput}
+              onKeyDown={(e) => e.key === "Enter" && commitPageInput()}
+              aria-label={t("datatable.pager.pageLabel")}
+              className="w-14 bg-surface border border-border rounded-md px-1.5 py-1 text-xs text-center tabular-nums focus:outline-hidden focus:ring-2 focus:ring-accent/40"
+            />
+            {t("datatable.pager.ofTotal", { total: totalPages })}
+          </span>
+          <button
+            onClick={() => goToPage(Math.min(totalPages - 1, safePage + 1))}
+            disabled={safePage >= totalPages - 1}
+            className="glass-card glass-hover flex items-center gap-1 px-3 py-1.5 rounded-lg disabled:opacity-40 transition"
+          >
+            {t("datatable.pager.next")}
+            <ChevronRight className="w-4 h-4" />
+          </button>
+        </div>
+      )}
+      {total > 0 && (
+        <label className="flex items-center gap-2 text-muted">
+          {sizeLabel}
+          <select
+            value={size}
+            onChange={(e) => {
+              onSizeChange(Number(e.target.value));
+              scrollListToTop();
+            }}
+            className="bg-surface border border-border rounded-md px-1.5 py-1 text-xs focus:outline-hidden focus:ring-2 focus:ring-accent/40"
+          >
+            {pageSizeOptions.map((n) => (
+              <option key={n} value={n}>
+                {n}
+              </option>
+            ))}
+            <option value={0}>{t("datatable.all")}</option>
+          </select>
+        </label>
+      )}
+    </div>
+  );
+}