refactor(webui): adopt semantic workspace actions

webui/src/features/postbox/PostboxPage.tsx

@@ -10,7 +10,6 @@ import {
   Paperclip,
   Pencil,
   Plus,
-  RefreshCw,
   Reply,
   Search,
   Send,
@@ -20,7 +19,6 @@ import {
 } from "lucide-react";
 import { FormGrid,
   ActionBlockerHint,
-  ActionToolbar,
   Button,
   ConfirmDialog,
   CountBadge,
@@ -43,6 +41,7 @@ import { FormGrid,
   usePlatformLanguage,
   useUnsavedChanges,
   useUnsavedDraftGuard,
+  WorkspaceActionBar,
   type ApiSettings,
   type AuthInfo
 } from "@govoplan/core-webui";
@@ -589,29 +588,25 @@ 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">
-          <ActionToolbar surface="panel-header" className="postbox-bar">
+          <WorkspaceActionBar
-            <div className="postbox-bar-title">
+            scope="collection-pane"
+            variant="collection"
+            refreshable
+            reloadAction={{ onReload: () => void loadDirectory(), loading: loadingDirectory || busy }}
+            className="postbox-bar"
+            contextActions={<div className="postbox-bar-title">
               <Inbox size={17} aria-hidden="true" />
               <strong>Postbox</strong>
-              <DocumentationHelpLink reference={POSTBOX_DOCUMENTATION} />
+            </div>}
-            </div>
+            helpAction={<DocumentationHelpLink reference={POSTBOX_DOCUMENTATION} />}
-            <div className="postbox-icon-actions">
+            createAction={<IconButton
-              <IconButton
                 label="New unified view"
                 icon={<Plus size={16} />}
                 onClick={openNewGrouping}
                 disabled={busy}
                 disabledReason={postboxBusyReason(false, busy)}
+            />}
           />
-              <IconButton
-                label="Refresh"
-                icon={<RefreshCw size={16} />}
-                onClick={() => requestDiscard(() => void loadDirectory())}
-                disabled={loadingDirectory || busy}
-                disabledReason={postboxBusyReason(loadingDirectory, busy)}
-              />
-            </div>
-          </ActionToolbar>
 
           <div className="postbox-scope-control">
             <label htmlFor="postbox-scope">Inbox view</label>
@@ -688,8 +683,13 @@ export default function PostboxPage({
         </aside>
 
         <section className="postbox-message-list" data-view-surface="postbox.inbox.messages">
-          <ActionToolbar surface="panel-header" className="postbox-bar">
+          <WorkspaceActionBar
-            <div className="postbox-bar-title">
+            scope="collection-pane"
+            variant="collection"
+            refreshable
+            reloadAction={{ onReload: () => void loadMessages(), loading: loadingMessages || busy, label: "Refresh messages" }}
+            className="postbox-bar"
+            contextActions={<div className="postbox-bar-title">
               {selectedPostbox ? (
                 <>
                   <Building2 size={17} aria-hidden="true" />
@@ -707,24 +707,15 @@ export default function PostboxPage({
                 </>
               )}
               <CountBadge tone="neutral">{total}</CountBadge>
-            </div>
+            </div>}
-            <div className="postbox-icon-actions">
+            createAction={<IconButton
-              <IconButton
                 label="New message"
                 icon={<Send size={16} />}
                 onClick={openCompose}
                 disabled={Boolean(composeDisabledReason)}
                 disabledReason={composeDisabledReason}
+            />}
           />
-              <IconButton
-                label="Refresh messages"
-                icon={<RefreshCw size={16} />}
-                onClick={() => requestDiscard(() => void loadMessages())}
-                disabled={loadingMessages || busy}
-                disabledReason={postboxBusyReason(loadingMessages, busy)}
-              />
-            </div>
-          </ActionToolbar>
           <div className="postbox-message-filters">
             <FilterBar surface="control" wrap="never" className="postbox-search-row">
               <input
@@ -852,12 +843,15 @@ export default function PostboxPage({
         </section>
 
         <section className="postbox-detail">
-          <ActionToolbar surface="panel-header" className="postbox-bar">
+          <WorkspaceActionBar
-            <div className="postbox-bar-title">
+            scope="detail-pane"
+            variant="detail"
+            className="postbox-bar"
+            contextActions={<div className="postbox-bar-title">
               <MailOpen size={17} aria-hidden="true" />
               <strong>{selectedMessage?.subject || "Message"}</strong>
-            </div>
+            </div>}
-            <div className="button-row compact-actions">
+            primaryActions={<div className="button-row compact-actions">
               <Button
                 onClick={openReply}
                 disabled={Boolean(replyDisabledReason)}
@@ -872,8 +866,8 @@ export default function PostboxPage({
               >
                 <CheckCheck size={16} /> Acknowledge
               </Button>
-            </div>
+            </div>}
-          </ActionToolbar>
+          />
           {selectedMessage ? (
             <MessageDetail
               message={selectedMessage}