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

---
 .../features/postbox/PostboxAdminPanel.tsx    | 13 ++---
 webui/src/features/postbox/PostboxPage.tsx    | 51 ++++++++-----------
 webui/src/styles/postbox.css                  | 48 +----------------
 3 files changed, 24 insertions(+), 88 deletions(-)

diff --git a/webui/src/features/postbox/PostboxAdminPanel.tsx b/webui/src/features/postbox/PostboxAdminPanel.tsx
index 7963a64..3318169 100644
--- a/webui/src/features/postbox/PostboxAdminPanel.tsx
+++ b/webui/src/features/postbox/PostboxAdminPanel.tsx
@@ -26,6 +26,7 @@ import { FormGrid,
   SegmentedControl,
   SelectionList,
   SelectionListItem,
+  StatePanel,
   StatusBadge,
   ToggleSwitch,
   i18nMessage,
@@ -800,11 +801,7 @@ function TemplateWorkspace({
             </div>
           </>
         ) : (
-          <div className="postbox-empty">
-            <Boxes size={24} />
-            <strong>Select a template</strong>
-            <p>Published revisions lazily resolve stable unit-specific addresses.</p>
-          </div>
+          <StatePanel size="fill" icon={<Boxes size={24} />} title="Select a template" description="Published revisions lazily resolve stable unit-specific addresses." />
         )}
       </section>
     </div>
@@ -878,11 +875,7 @@ function PostboxWorkspace({
             </dl>
           </>
         ) : (
-          <div className="postbox-empty">
-            <Inbox size={24} />
-            <strong>Select a Postbox</strong>
-            <p>Materialized Postboxes remain durable through vacancy and reassignment.</p>
-          </div>
+          <StatePanel size="fill" icon={<Inbox size={24} />} title="Select a Postbox" description="Materialized Postboxes remain durable through vacancy and reassignment." />
         )}
       </section>
     </div>
diff --git a/webui/src/features/postbox/PostboxPage.tsx b/webui/src/features/postbox/PostboxPage.tsx
index 1436bbb..f304b2c 100644
--- a/webui/src/features/postbox/PostboxPage.tsx
+++ b/webui/src/features/postbox/PostboxPage.tsx
@@ -20,17 +20,21 @@ import {
 } from "lucide-react";
 import { FormGrid,
   ActionBlockerHint,
+  ActionToolbar,
   Button,
   ConfirmDialog,
+  CountBadge,
   DataGridPaginationBar,
   Dialog,
   DismissibleAlert,
   DocumentationHelpLink,
   FormField,
+  FilterBar,
   IconButton,
   SegmentedControl,
   SelectionList,
   SelectionListItem,
+  StatePanel,
   StatusBadge,
   ToggleSwitch,
   hasScope,
@@ -585,7 +589,7 @@ export default function PostboxPage({
     <main className="workspace-data-page module-entry-page postbox-page">
       <div className="postbox-shell">
         <aside className="postbox-directory" data-view-surface="postbox.inbox.directory">
-          <div className="postbox-bar">
+          <ActionToolbar surface="panel-header" className="postbox-bar">
             <div className="postbox-bar-title">
               <Inbox size={17} aria-hidden="true" />
               <strong>Postbox</strong>
@@ -607,7 +611,7 @@ export default function PostboxPage({
                 disabledReason={postboxBusyReason(loadingDirectory, busy)}
               />
             </div>
-          </div>
+          </ActionToolbar>
 
           <div className="postbox-scope-control">
             <label htmlFor="postbox-scope">Inbox view</label>
@@ -639,10 +643,7 @@ export default function PostboxPage({
           <div className="postbox-directory-list">
             {loadingDirectory ? <p className="postbox-note">Loading postboxes</p> : null}
             {!loadingDirectory && !postboxes.length ? (
-              <div className="postbox-empty compact">
-                <Archive size={20} />
-                <strong>No assigned postboxes</strong>
-                <p>Postboxes appear when your account has a current matching function assignment.</p>
+              <StatePanel size="compact" icon={<Archive size={20} />} title="No assigned postboxes" description="Postboxes appear when your account has a current matching function assignment.">
                 <ActionBlockerHint
                   reason={{
                     summary: POSTBOX_INTERFACE_I18N.noPostbox,
@@ -657,10 +658,10 @@ export default function PostboxPage({
                   }}
                   documentation={POSTBOX_DOCUMENTATION}
                 />
-              </div>
+              </StatePanel>
             ) : null}
             {postboxes.length ? (
-              <SelectionList label="Assigned postboxes">
+              <SelectionList variant="navigation" label="Assigned postboxes">
                 {postboxes.map((postbox) => (
                   <SelectionListItem
                     key={postbox.id}
@@ -687,7 +688,7 @@ export default function PostboxPage({
         </aside>
 
         <section className="postbox-message-list" data-view-surface="postbox.inbox.messages">
-          <div className="postbox-bar">
+          <ActionToolbar surface="panel-header" className="postbox-bar">
             <div className="postbox-bar-title">
               {selectedPostbox ? (
                 <>
@@ -705,7 +706,7 @@ export default function PostboxPage({
                   <strong>All postboxes</strong>
                 </>
               )}
-              <span className="postbox-total">{total}</span>
+              <CountBadge tone="neutral">{total}</CountBadge>
             </div>
             <div className="postbox-icon-actions">
               <IconButton
@@ -723,9 +724,9 @@ export default function PostboxPage({
                 disabledReason={postboxBusyReason(loadingMessages, busy)}
               />
             </div>
-          </div>
+          </ActionToolbar>
           <div className="postbox-message-filters">
-            <div className="postbox-search-row">
+            <FilterBar surface="control" wrap="never" className="postbox-search-row">
               <input
                 type="search"
                 value={searchDraft}
@@ -764,7 +765,7 @@ export default function PostboxPage({
                   setSelectedMessage(null);
                 }}
               />
-            </div>
+            </FilterBar>
             <SegmentedControl<MessageStateFilter>
               ariaLabel="Message state"
               width="fill"
@@ -791,14 +792,10 @@ export default function PostboxPage({
           <div className="postbox-messages">
             {loadingMessages ? <p className="postbox-note">Loading messages</p> : null}
             {!loadingMessages && !messages.length ? (
-              <div className="postbox-empty">
-                <MailOpen size={24} />
-                <strong>No messages</strong>
-                <p>This view has no delivered Postbox messages.</p>
-              </div>
+              <StatePanel size="fill" icon={<MailOpen size={24} />} title="No messages" description="This view has no delivered Postbox messages." />
             ) : null}
             {messages.length ? (
-              <SelectionList label="Postbox messages">
+              <SelectionList variant="navigation" label="Postbox messages">
                 {messages.map((message) => (
                   <SelectionListItem
                     key={message.id}
@@ -855,7 +852,7 @@ export default function PostboxPage({
         </section>
 
         <section className="postbox-detail">
-          <div className="postbox-bar">
+          <ActionToolbar surface="panel-header" className="postbox-bar">
             <div className="postbox-bar-title">
               <MailOpen size={17} aria-hidden="true" />
               <strong>{selectedMessage?.subject || "Message"}</strong>
@@ -876,7 +873,7 @@ export default function PostboxPage({
                 <CheckCheck size={16} /> Acknowledge
               </Button>
             </div>
-          </div>
+          </ActionToolbar>
           {selectedMessage ? (
             <MessageDetail
               message={selectedMessage}
@@ -889,17 +886,9 @@ export default function PostboxPage({
               }}
             />
           ) : unavailableSelection ? (
-            <div className="postbox-empty postbox-unavailable-message">
-              <Archive size={24} />
-              <strong>Message unavailable</strong>
-              <p>{unavailableSelection}</p>
-            </div>
+            <StatePanel size="fill" tone="warning" icon={<Archive size={24} />} title="Message unavailable" description={unavailableSelection} className="postbox-unavailable-message" />
           ) : (
-            <div className="postbox-empty">
-              <Inbox size={24} />
-              <strong>Select a message</strong>
-              <p>Source, function context, content, and evidence remain attached to the originating postbox.</p>
-            </div>
+            <StatePanel size="fill" icon={<Inbox size={24} />} title="Select a message" description="Source, function context, content, and evidence remain attached to the originating postbox." />
           )}
         </section>
       </div>
diff --git a/webui/src/styles/postbox.css b/webui/src/styles/postbox.css
index 1afef3c..7c2f4e1 100644
--- a/webui/src/styles/postbox.css
+++ b/webui/src/styles/postbox.css
@@ -52,7 +52,6 @@
   background: var(--panel-soft);
 }
 
-.postbox-bar,
 .postbox-bar-title,
 .postbox-icon-actions,
 .postbox-scope-row,
@@ -68,16 +67,6 @@
   align-items: center;
 }
 
-.postbox-bar {
-  flex: 0 0 auto;
-  min-height: 54px;
-  justify-content: space-between;
-  gap: 10px;
-  border-bottom: var(--border-line);
-  background: var(--panel-header);
-  padding: 8px 12px;
-}
-
 .postbox-bar-title {
   min-width: 0;
   gap: 8px;
@@ -95,18 +84,6 @@
   gap: 5px;
 }
 
-.postbox-total {
-  min-width: 24px;
-  height: 22px;
-  display: inline-grid;
-  place-items: center;
-  border-radius: 999px;
-  background: var(--line);
-  color: var(--text-strong);
-  font-size: 12px;
-  font-weight: 800;
-}
-
 .postbox-scope-control {
   flex: 0 0 auto;
   border-bottom: var(--border-line);
@@ -152,9 +129,7 @@
 }
 
 .postbox-search-row {
-  display: flex;
-  align-items: center;
-  gap: 5px;
+  width: 100%;
 }
 
 .postbox-search-row input {
@@ -383,27 +358,6 @@
   line-height: 1.4;
 }
 
-.postbox-empty {
-  min-height: 100%;
-  display: grid;
-  place-items: center;
-  align-content: center;
-  gap: 7px;
-  padding: 30px;
-  color: var(--muted);
-  text-align: center;
-}
-
-.postbox-empty.compact {
-  min-height: 180px;
-  padding: 20px;
-}
-
-.postbox-empty strong {
-  color: var(--text-strong);
-}
-
-.postbox-empty p,
 .postbox-note {
   max-width: 470px;
   margin: 0;