From dfbb92752b0a9387b5816e75a27300237951b094 Mon Sep 17 00:00:00 2001
From: Albrecht Degering <albrecht@degering.name>
Date: Tue, 18 Aug 2026 13:17:31 +0200
Subject: [PATCH] Adopt shared WebUI structural primitives

---
 .../DistributionListsPage.tsx                 | 102 ++++-----
 webui/src/styles/dist-lists.css               | 195 +-----------------
 2 files changed, 56 insertions(+), 241 deletions(-)

diff --git a/webui/src/features/distributionLists/DistributionListsPage.tsx b/webui/src/features/distributionLists/DistributionListsPage.tsx
index 6b6bf99..a5abffd 100644
--- a/webui/src/features/distributionLists/DistributionListsPage.tsx
+++ b/webui/src/features/distributionLists/DistributionListsPage.tsx
@@ -18,18 +18,28 @@ import { DialogSection, ToolbarGroup, FormGrid, ActionToolbar,
   ApiError,
   Button,
   ConfirmDialog,
+  ContentSection,
   DataGrid,
   DataGridRowActions,
   Dialog,
   DocumentationHelpLink,
   DismissibleAlert,
+  FilterBar,
   FormField,
   IconButton,
   LoadingFrame,
+  MetricCard,
+  MetricGrid,
   SearchableSelect,
   SegmentedControl,
+  SelectionList,
+  SelectionListItem,
+  SelectionListItemContent,
+  StatePanel,
   StatusBadge,
   ToggleSwitch,
+  WorkspaceFrame,
+  WorkspaceLayout,
   formatDateTime,
   hasScope,
   useUnsavedChanges,
@@ -528,10 +538,18 @@ export default function DistributionListsPage({ settings, auth }: Props) {
   }
 
   return (
-    <main className="dist-lists-page">
-      <div className="dist-lists-shell">
-        <aside className="dist-lists-sidebar" aria-label="Distribution lists">
-          <ActionToolbar className="dist-lists-sidebar-toolbar">
+    <WorkspaceFrame as="main" height="viewport" surface="plain" className="dist-lists-page" label="Distribution lists workspace">
+      <WorkspaceLayout
+        variant="split"
+        primarySize="compact"
+        surface="contained"
+        primaryScrollable={false}
+        contentScrollable={false}
+        primaryLabel="Distribution lists"
+        contentLabel="Distribution list workspace"
+        contentClassName="dist-lists-workspace"
+        primary={<>
+          <ActionToolbar surface="panel-header">
             <strong>Distribution Lists</strong>
             <span>
               <IconButton
@@ -552,7 +570,7 @@ export default function DistributionListsPage({ settings, auth }: Props) {
               />
             </span>
           </ActionToolbar>
-          <div className="dist-lists-search">
+          <FilterBar surface="panel">
             <input
               type="search"
               value={search}
@@ -560,30 +578,25 @@ export default function DistributionListsPage({ settings, auth }: Props) {
               placeholder="Search lists"
               aria-label="Search distribution lists"
             />
-          </div>
+          </FilterBar>
           <LoadingFrame loading={loading} className="dist-lists-list-frame">
-            <div className="dist-lists-list">
+            <SelectionList variant="navigation" label="Distribution lists">
               {visibleItems.map((item) => (
-                <button
+                <SelectionListItem
                   key={item.id}
-                  type="button"
-                  className={item.id === selectedId ? "is-selected" : ""}
+                  selected={item.id === selectedId}
                   onClick={() => selectItem(item)}
                 >
-                  <span>
-                    <strong>{item.name}</strong>
-                    <small>{item.revision.entries.length} entries · revision {item.current_revision}</small>
-                  </span>
+                  <SelectionListItemContent title={item.name} description={`${item.revision.entries.length} entries · revision ${item.current_revision}`} />
                   <StatusBadge status={item.revision.definition_kind} label={item.revision.definition_kind} />
-                </button>
+                </SelectionListItem>
               ))}
-              {!visibleItems.length ? <div className="dist-lists-empty">No distribution lists</div> : null}
-            </div>
+              {!visibleItems.length ? <StatePanel size="compact" description="No distribution lists" /> : null}
+            </SelectionList>
           </LoadingFrame>
-        </aside>
-
-        <section className="dist-lists-workspace">
-          <ActionToolbar className="dist-lists-workspace-toolbar">
+        </>}
+      >
+          <ActionToolbar surface="panel-header" className="dist-lists-workspace-toolbar">
             <span className="dist-lists-current-title">
               <strong>{selected?.name ?? "No distribution list selected"}</strong>
               {selected ? <small>Revision {selected.current_revision} · {selected.scope_type} scope</small> : null}
@@ -626,7 +639,7 @@ export default function DistributionListsPage({ settings, auth }: Props) {
 
           <LoadingFrame loading={loading} className="dist-lists-content-frame">
             {!selected ? (
-              <div className="dist-lists-empty">Create or select a distribution list.</div>
+              <StatePanel size="fill" title="Distribution lists" description="Create or select a distribution list." />
             ) : view === "definition" ? (
               <DefinitionEditor
                 draft={draft}
@@ -671,12 +684,12 @@ export default function DistributionListsPage({ settings, auth }: Props) {
                 </section>
                 {preview ? (
                   <>
-                    <div className="dist-lists-metrics">
-                      <Metric label="Included" value={preview.recipients.length} />
-                      <Metric label="Excluded" value={preview.excluded.length} />
-                      <Metric label="Providers" value={preview.provider_evidence.length} />
-                      <Metric label="Source state" value={preview.stale ? "Stale" : "Current"} />
-                    </div>
+                    <MetricGrid columns={4} density="compact" minimum="compact">
+                      <MetricCard density="compact" label="Included" value={preview.recipients.length} />
+                      <MetricCard density="compact" label="Excluded" value={preview.excluded.length} />
+                      <MetricCard density="compact" label="Providers" value={preview.provider_evidence.length} />
+                      <MetricCard density="compact" label="Source state" value={preview.stale ? "Stale" : "Current"} />
+                    </MetricGrid>
                     {preview.diagnostics.map((diagnostic, index) => (
                       <DismissibleAlert
                         key={`${diagnostic.code}-${index}`}
@@ -708,18 +721,18 @@ export default function DistributionListsPage({ settings, auth }: Props) {
                     />
                   </>
                 ) : (
-                  <div className="dist-lists-empty">Expand the saved revision to inspect recipients and decisions.</div>
+                  <StatePanel size="default" description="Expand the saved revision to inspect recipients and decisions." />
                 )}
               </div>
             ) : (
               <div className="dist-lists-content">
-                <div className="dist-lists-section-heading">
+                <ActionToolbar surface="section-header" className="dist-lists-section-heading">
                   <span>
                     <strong>Frozen snapshots</strong>
                     <small>Immutable recipient evidence held by consumers</small>
                   </span>
                   <IconButton label="Refresh snapshots" icon={<RefreshCw size={16} />} variant="ghost" onClick={() => void openSnapshots()} />
-                </div>
+                </ActionToolbar>
                 <DataGrid
                   id="distribution-list-snapshots"
                   rows={snapshots}
@@ -731,8 +744,7 @@ export default function DistributionListsPage({ settings, auth }: Props) {
               </div>
             )}
           </LoadingFrame>
-        </section>
-      </div>
+      </WorkspaceLayout>
 
       <Dialog
         open={createOpen}
@@ -808,7 +820,7 @@ export default function DistributionListsPage({ settings, auth }: Props) {
         onConfirm={() => void removeItem()}
         onCancel={() => setDeleteOpen(false)}
       />
-    </main>
+    </WorkspaceFrame>
   );
 }
 
@@ -856,8 +868,8 @@ function DefinitionEditor({
         </FormField>
       </section>
 
-      <section className="dist-lists-section">
-        <div className="dist-lists-section-heading">
+      <ContentSection>
+        <ActionToolbar surface="section-header" className="dist-lists-section-heading">
           <span>
             <strong>Parameters</strong>
             <small>Typed values supplied by Campaign, Reporting, or Workflow</small>
@@ -869,7 +881,7 @@ function DefinitionEditor({
           >
             <Plus size={15} /> Add parameter
           </Button>
-        </div>
+        </ActionToolbar>
         <div className="dist-lists-parameter-list">
           {draft.parameters.map((parameter, index) => (
             <div className="dist-lists-parameter-row" key={`${parameter.key}-${index}`}>
@@ -889,12 +901,12 @@ function DefinitionEditor({
               <IconButton label="Remove parameter" icon={<Trash2 size={15} />} variant="ghost" disabled={!canWrite} onClick={() => onChange({ ...draft, parameters: draft.parameters.filter((_, itemIndex) => itemIndex !== index) })} />
             </div>
           ))}
-          {!draft.parameters.length ? <div className="dist-lists-inline-empty">No parameters</div> : null}
+          {!draft.parameters.length ? <StatePanel size="inline" description="No parameters" /> : null}
         </div>
-      </section>
+      </ContentSection>
 
-      <section className="dist-lists-section dist-lists-entry-section">
-        <div className="dist-lists-section-heading">
+      <ContentSection className="dist-lists-entry-section">
+        <ActionToolbar surface="section-header" className="dist-lists-section-heading">
           <span>
             <strong>Audience entries</strong>
             <small>Mixed local and provider-owned references; revisions are immutable after save</small>
@@ -902,7 +914,7 @@ function DefinitionEditor({
           <Button variant="primary" disabled={!canWrite} onClick={onAddEntry}>
             <Plus size={15} /> Add entry
           </Button>
-        </div>
+        </ActionToolbar>
         <DataGrid
           id="distribution-list-entries"
           rows={draft.entries}
@@ -911,7 +923,7 @@ function DefinitionEditor({
           emptyText="No audience entries."
           className="dist-lists-grid"
         />
-      </section>
+      </ContentSection>
     </div>
   );
 }
@@ -1144,10 +1156,6 @@ function ParameterValueField({ parameter, value, onChange }: { parameter: Distri
   );
 }
 
-function Metric({ label, value }: { label: string; value: string | number }) {
-  return <span><small>{label}</small><strong>{value}</strong></span>;
-}
-
 function emptyPayload(): DistributionListPayload {
   return {
     name: "",
diff --git a/webui/src/styles/dist-lists.css b/webui/src/styles/dist-lists.css
index ec9564b..772fa3f 100644
--- a/webui/src/styles/dist-lists.css
+++ b/webui/src/styles/dist-lists.css
@@ -1,34 +1,3 @@
-.dist-lists-page {
-  position: relative;
-  height: calc(100vh - 115px);
-  min-width: 0;
-  min-height: 0;
-  padding: 0;
-  overflow: hidden;
-  color: var(--text);
-  background: var(--bg);
-}
-
-.dist-lists-page *,
-.dist-lists-page *::before,
-.dist-lists-page *::after {
-  box-sizing: border-box;
-}
-
-.dist-lists-shell {
-  display: grid;
-  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-  border: var(--border-line);
-  background: var(--panel);
-}
-
-.dist-lists-sidebar,
-.dist-lists-workspace,
 .dist-lists-list-frame,
 .dist-lists-content-frame,
 .dist-lists-content {
@@ -36,32 +5,6 @@
   min-height: 0;
 }
 
-.dist-lists-sidebar {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  border-right: var(--border-line);
-  background: var(--panel-soft);
-}
-
-.dist-lists-sidebar-toolbar,
-.dist-lists-workspace-toolbar,
-.dist-lists-section-heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  flex: 0 0 auto;
-  border-bottom: var(--border-line);
-  background: var(--panel-header);
-}
-
-.dist-lists-sidebar-toolbar {
-  min-height: 52px;
-  padding: 8px 10px 8px 14px;
-}
-
-.dist-lists-sidebar-toolbar > span,
 .dist-lists-toolbar-actions,
 .dist-lists-row-actions,
 .dist-lists-preview-actions,
@@ -71,62 +14,11 @@
   gap: 7px;
 }
 
-.dist-lists-search {
-  padding: 9px;
-  border-bottom: var(--border-line);
-  background: var(--panel);
-}
-
-.dist-lists-search input {
-  width: 100%;
-  min-height: 34px;
-  padding: 7px 9px;
-}
-
 .dist-lists-list-frame {
   flex: 1 1 auto;
   overflow: hidden;
 }
 
-.dist-lists-list {
-  height: 100%;
-  overflow: auto;
-  padding: 6px;
-}
-
-.dist-lists-list > button {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  min-height: 56px;
-  padding: 8px 9px;
-  border: 0;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--text);
-  cursor: pointer;
-  text-align: left;
-}
-
-.dist-lists-list > button:hover,
-.dist-lists-list > button:focus-visible {
-  background: var(--primary-soft);
-  outline: none;
-}
-
-.dist-lists-list > button.is-selected {
-  background: var(--primary-soft-strong);
-  box-shadow: inset 3px 0 0 var(--accent);
-}
-
-.dist-lists-list > button > span:first-child {
-  min-width: 0;
-}
-
-.dist-lists-list strong,
-.dist-lists-list small,
 .dist-lists-current-title strong,
 .dist-lists-current-title small,
 .dist-lists-source-cell strong,
@@ -137,14 +29,12 @@
   white-space: nowrap;
 }
 
-.dist-lists-list strong,
 .dist-lists-current-title strong,
 .dist-lists-source-cell strong {
   color: var(--text-strong);
   font-size: 13px;
 }
 
-.dist-lists-list small,
 .dist-lists-current-title small,
 .dist-lists-source-cell small {
   margin-top: 3px;
@@ -152,16 +42,8 @@
   font-size: 11px;
 }
 
-.dist-lists-workspace {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--bg);
-}
-
 .dist-lists-workspace-toolbar {
-  min-height: 58px;
-  padding: 8px 10px 8px 14px;
+  min-width: 0;
 }
 
 .dist-lists-current-title {
@@ -202,17 +84,6 @@
   padding: 14px;
 }
 
-.dist-lists-empty,
-.dist-lists-inline-empty {
-  display: grid;
-  place-items: center;
-  min-height: 110px;
-  padding: 18px;
-  color: var(--muted);
-  font-size: 13px;
-  text-align: center;
-}
-
 .dist-lists-definition-fields {
   display: grid;
   grid-template-columns: minmax(220px, 1.4fr) minmax(160px, 0.7fr) minmax(160px, 0.7fr);
@@ -240,22 +111,10 @@
   resize: vertical;
 }
 
-.dist-lists-section {
-  min-width: 0;
-  margin-bottom: 14px;
-  border: var(--border-line);
-  background: var(--panel);
-}
-
 .dist-lists-entry-section {
   min-height: 260px;
 }
 
-.dist-lists-section-heading {
-  min-height: 44px;
-  padding: 7px 10px;
-}
-
 .dist-lists-section-heading > span {
   min-width: 0;
 }
@@ -323,39 +182,6 @@
   padding-bottom: 1px;
 }
 
-.dist-lists-metrics {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(110px, 1fr));
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-.dist-lists-metrics > span {
-  min-height: 62px;
-  padding: 9px 10px;
-  border: var(--border-line);
-  border-radius: var(--radius-sm);
-  background: var(--panel);
-}
-
-.dist-lists-metrics small,
-.dist-lists-metrics strong {
-  display: block;
-}
-
-.dist-lists-metrics small {
-  color: var(--muted);
-  font-size: 10px;
-  text-transform: uppercase;
-}
-
-.dist-lists-metrics strong {
-  margin-top: 6px;
-  color: var(--text-strong);
-  font-size: 15px;
-  text-transform: capitalize;
-}
-
 .dist-lists-content > .alert {
   margin: 8px 0;
 }
@@ -475,10 +301,6 @@
 }
 
 @media (max-width: 1040px) {
-  .dist-lists-shell {
-    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
-  }
-
   .dist-lists-workspace-toolbar {
     align-items: flex-start;
   }
@@ -505,20 +327,6 @@
     overflow: auto;
   }
 
-  .dist-lists-shell {
-    display: flex;
-    min-height: calc(100vh - 115px);
-    overflow: visible;
-    flex-direction: column;
-  }
-
-  .dist-lists-sidebar {
-    min-height: 230px;
-    max-height: 36vh;
-    border-right: 0;
-    border-bottom: var(--border-line);
-  }
-
   .dist-lists-workspace {
     min-height: 560px;
   }
@@ -537,7 +345,6 @@
 
   .dist-lists-definition-fields,
   .dist-lists-preview-inputs,
-  .dist-lists-metrics,
   .dist-lists-channel-fieldset,
   .dist-lists-parameter-row {
     grid-template-columns: minmax(0, 1fr);