GovOPlaN/govoplan-core
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): unify heading help, table sizing and navigation contracts

Browse Source 
Verified with the coordinated workspace changes by devkit full run
2026-09-08T225814-186389-0000-3e3ed7cd (all seven phases passed).
This shared UI pass does not mark the individual module reviews complete.
This commit is contained in:
zemion
2026-09-09 02:03:16 +02:00
parent 6591aaa3fd
commit 6d37aa527f
54 changed files with 1728 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/conformance/CardTableLayoutScenario.tsx
Executable
+46
View File
@@ -0,0 +1,46 @@
import { useState } from "react";
import { Eye } from "lucide-react";
import Button from "../src/components/Button";
import Card from "../src/components/Card";
import ConnectionTree from "../src/components/ConnectionTree";
import ContentSection from "../src/components/ContentSection";
import LoadingFrame from "../src/components/LoadingFrame";
import DataGrid, { type DataGridColumn } from "../src/components/table/DataGrid";
import TableActionGroup from "../src/components/table/TableActionGroup";
type Row = { id: string; name: string; detail: string };
const rows: Row[] = ["Alpha", "Beta", "Gamma"].map((name) => ({ id: name, name, detail: "A long configured value ".repeat(12) }));
/** The real shared surfaces, without module-local inset or width overrides. */
export default function CardTableLayoutScenario() {
const [loading, setLoading] = useState(false);
const [inspected, setInspected] = useState("");
const columns: DataGridColumn<Row>[] = [
{ id: "name", header: "Name", minWidth: 160, value: (row) => row.name },
{ id: "detail", header: "Details", minWidth: 220, value: (row) => row.detail },
{ id: "actions", header: "Actions", columnType: "actions", sticky: "end", render: (row) => <TableActionGroup actions={[
{ id: "inspect", label: `Inspect ${row.name}`, icon: <Eye />, onClick: () => setInspected(row.name) }
]} /> }
];
const grid = (id: string) => <DataGrid id={`card-table-${id}`} rows={rows} columns={columns} getRowKey={(row) => row.id} />;
const tree = () => <ConnectionTree rows={rows} columns={[{ id: "name", header: "Name", render: (row: Row) => row.name }]} getRowKey={(row) => row.id} />;
return <main style={{ padding: 16, minWidth: 0, display: "grid", gap: 16, gridTemplateColumns: "minmax(0, 1fr)" }}>
<Button onClick={() => setLoading((value) => !value)}>Toggle loading</Button>
<output data-testid="card-table-inspected">{inspected}</output>
<Card title="Direct table" data-testid="direct-table">{grid("direct")}</Card>
<Card title="Collapsible table" data-testid="collapsible-table" collapsible persistCollapse={false}>{grid("collapsible")}</Card>
<Card title="Loading table" data-testid="loading-table"><LoadingFrame loading={loading} indicator="none" label="Loading rows">{grid("loading")}</LoadingFrame></Card>
<Card title="Admin table" data-testid="admin-table"><div className="admin-table-surface">{grid("admin")}</div></Card>
<Card title="Loading admin table" data-testid="loading-admin-table"><LoadingFrame loading={loading} indicator="none" label="Loading rows"><div className="admin-table-surface">{grid("loading-admin")}</div></LoadingFrame></Card>
<Card title="Connection table" data-testid="connection-table">{tree()}</Card>
<Card title="Loading connection table" data-testid="loading-connection-table"><LoadingFrame loading={loading} indicator="none" label="Loading rows">{tree()}</LoadingFrame></Card>
<Card title="Explicit table" data-testid="explicit-table" bodyLayout="table"><LoadingFrame loading={loading} indicator="none" label="Loading rows">{grid("explicit")}</LoadingFrame></Card>
<Card title="Table with context" data-testid="table-with-context" bodyLayout="table">
<ContentSection density="default" spacing="none">Meaningful table context</ContentSection>
{grid("context")}
</Card>
<Card title="Mixed content" data-testid="mixed-content"><p>Ordinary content keeps its inset.</p>{grid("mixed")}</Card>
<Card title="Loading mixed content" data-testid="loading-mixed-content"><LoadingFrame loading={loading} indicator="none" label="Loading rows"><p>Ordinary content keeps its inset.</p>{grid("loading-mixed")}</LoadingFrame></Card>
<div data-testid="standalone-table">{grid("standalone")}</div>
</main>;
}