feat(frontend): schema-linking types + columns modal

2026-07-06 23:25:00 +02:00
parent 9de87d2d51
commit 1d877d98ec
3 changed files with 126 additions and 0 deletions
@@ -0,0 +1,58 @@
+import type { ReactElement } from "react";
+import type { SchemaTable } from "../api/types";
+import { Dialog, DialogContent, DialogTitle } from "../components/ui/dialog";
+
+export function SchemaColumnsDialog({
+  table,
+  open,
+  readOnly,
+  selected,
+  onToggle,
+  onClose,
+}: {
+  table: SchemaTable;
+  open: boolean;
+  readOnly: boolean;
+  selected: Set<string>;
+  onToggle: (column: string) => void;
+  onClose: () => void;
+}): ReactElement {
+  return (
+    <Dialog open={open} onOpenChange={(o) => { if (!o) onClose(); }}>
+      <DialogContent className="grid max-h-[70vh] w-[70vw] max-w-[46rem] grid-rows-[auto_1fr] gap-3 sm:max-w-[46rem]">
+        <DialogTitle className="font-mono text-sm">{table.name}</DialogTitle>
+        <div className="min-h-0 overflow-auto">
+          <ul className="flex flex-col divide-y divide-border/50">
+            {table.columns.map((col) => {
+              const on = selected.has(col.name);
+              const strong = on && !readOnly;
+              return (
+                <li key={col.name} className="flex items-start gap-3 py-2">
+                  {!readOnly && (
+                    <input
+                      type="checkbox"
+                      className="mt-0.5 size-4 shrink-0 accent-[oklch(var(--primary))]"
+                      checked={on}
+                      onChange={() => onToggle(col.name)}
+                      aria-label={col.name}
+                    />
+                  )}
+                  <div className="min-w-0">
+                    <div className={`font-mono text-sm ${strong ? "font-bold text-foreground" : "text-foreground/90"}`}>
+                      {col.name}
+                    </div>
+                    {col.description ? (
+                      <p className={`text-sm ${strong ? "font-semibold text-foreground" : "text-muted-foreground"}`}>
+                        {col.description}
+                      </p>
+                    ) : null}
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}