Adopt shared WebUI structural primitives

webui/src/features/mail/MailBouncePage.tsx

@@ -7,12 +7,9 @@ import { FormGrid, ContentGrid,
   ConfirmDialog,
   DataGrid,
   Dialog,
-  DismissibleAlert,
   DocumentationHelpLink,
   FormField,
-  LoadingFrame,
-  PageScrollViewport,
-  PageTitle,
+  PageLayout,
   StatusBadge,
   TableActionGroup,
   ToggleSwitch,
@@ -194,30 +191,33 @@ export default function MailBouncePage({ settings }: { settings: ApiSettings })
   ];
 
   return (
-    <PageScrollViewport>
-      <div className="content-pad workspace-data-page">
-        <div className="page-heading split workspace-heading">
-          <div><PageTitle loading={loading}>Bounce processing</PageTitle><p>Watch IMAP delivery-status folders and correlate recipient failures with Mail delivery commands.</p></div>
-          <div className="button-row compact-actions">
+    <>
+      <PageLayout
+        title="Bounce processing"
+        description="Watch IMAP delivery-status folders and correlate recipient failures with Mail delivery commands."
+        actions={(
+          <>
             <Button onClick={() => navigate("/mail")}><ArrowLeft size={16} aria-hidden="true" /> Mailbox</Button>
             <DocumentationHelpLink reference={MAIL_BOUNCE_DOCUMENTATION} />
             <Button onClick={() => void load()} disabled={Boolean(pageMutationBlocker)} disabledReason={pageMutationBlocker}><RefreshCw size={16} aria-hidden="true" /> Reload</Button>
             <Button variant="primary" onClick={() => setAddOpen(true)} disabled={Boolean(addWatcherBlocker)} disabledReason={addWatcherBlocker}><Plus size={16} aria-hidden="true" /> Add watcher</Button>
-          </div>
-        </div>
-        {error && <DismissibleAlert tone="danger" resetKey={error} floating>{error}</DismissibleAlert>}
-        {message && <DismissibleAlert tone="success" resetKey={message} floating>{message}</DismissibleAlert>}
-        <LoadingFrame loading={loading} label="Loading bounce processing">
-          <ContentGrid columns={2} collapseAt="workspace" className="">
-            <Card title="Watched mailboxes">
-              <DataGrid id="mail-bounce-sources" rows={sources} columns={sourceColumns} getRowKey={(source) => source.id} emptyText="No bounce mailbox watchers configured." />
-            </Card>
-            <Card title="Delivery-status observations">
-              <DataGrid id="mail-bounce-observations" rows={observations} columns={observationColumns} getRowKey={(item) => item.id} emptyText="No bounce observations recorded." />
-            </Card>
-          </ContentGrid>
-        </LoadingFrame>
-      </div>
+          </>
+        )}
+        loading={loading}
+        loadingLabel="Loading bounce processing"
+        error={error}
+        success={message}
+        documentationType="admin"
+      >
+        <ContentGrid columns={2} collapseAt="workspace" className="">
+          <Card title="Watched mailboxes">
+            <DataGrid id="mail-bounce-sources" rows={sources} columns={sourceColumns} getRowKey={(source) => source.id} emptyText="No bounce mailbox watchers configured." />
+          </Card>
+          <Card title="Delivery-status observations">
+            <DataGrid id="mail-bounce-observations" rows={observations} columns={observationColumns} getRowKey={(item) => item.id} emptyText="No bounce observations recorded." />
+          </Card>
+        </ContentGrid>
+      </PageLayout>
 
       <Dialog open={addOpen} title="Add bounce mailbox watcher" onClose={() => !busy && setAddOpen(false)} footer={<><Button onClick={() => setAddOpen(false)} disabled={Boolean(busy)} disabledReason={busy ? "Wait for the current bounce-processing action to finish." : undefined}>Cancel</Button><Button variant="primary" onClick={() => void addSource()} disabled={Boolean(saveWatcherBlocker)} disabledReason={saveWatcherBlocker}>Add watcher</Button></>}>
         <FormGrid columns={1} collapseAt="standard" className="">
@@ -254,6 +254,6 @@ export default function MailBouncePage({ settings }: { settings: ApiSettings })
         busy={Boolean(busy)}
         onCancel={() => setDeleteSource(null)}
         onConfirm={() => void removeSource()} />
-    </PageScrollViewport>
+    </>
   );
 }

webui/src/features/mail/MailProfileManagement.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState, type ReactNode } from "react";
-import { FormGrid, ActionBlockerHint, AdminSelectionList, ConnectionTree, DocumentationHelpLink, FieldLabel, LoadingFrame, MailServerSettingsPanel, PolicyLockedHint, PolicyPathHelp, PolicyRow, PolicySourcePath, PolicyTable, StageRail, StatusBadge, TableActionGroup, ToggleSwitch, hasMailImapSettings, mailImapSettingsPayload, mailServerSecurityOptions, mailSmtpSettingsPayload, mailTextOrNull, mailTransportCredentialsPayload, mergeDeltaRows, normalizeMailServerSecurity, normalizePolicySourcePathItems, useDeltaWatermarks, type ConnectionTreeColumn, type MailServerConnectionTestResult, type MailServerCredentialSettings, type MailServerImapSettings, type MailServerSmtpSettings, type NormalizedPolicySourcePathItem, type PolicySourcePathItem } from "@govoplan/core-webui";
+import { ActionToolbar, FormGrid, ActionBlockerHint, AdminSelectionList, ConnectionTree, DocumentationHelpLink, FieldLabel, LoadingFrame, MailServerSettingsPanel, PolicyLockedHint, PolicyPathHelp, PolicyRow, PolicySourcePath, PolicyTable, StageRail, StatusBadge, TableActionGroup, ToggleSwitch, hasMailImapSettings, mailImapSettingsPayload, mailServerSecurityOptions, mailSmtpSettingsPayload, mailTextOrNull, mailTransportCredentialsPayload, mergeDeltaRows, normalizeMailServerSecurity, normalizePolicySourcePathItems, useDeltaWatermarks, type ConnectionTreeColumn, type MailServerConnectionTestResult, type MailServerCredentialSettings, type MailServerImapSettings, type MailServerSmtpSettings, type NormalizedPolicySourcePathItem, type PolicySourcePathItem } from "@govoplan/core-webui";
 import { ArrowLeft, ArrowRight, Inbox, KeyRound, Link2, Pencil, Plus, Send, Settings2, Trash2, Unlink } from "lucide-react";
 import type { ApiSettings } from "../../types";
 import {
@@ -1020,13 +1020,13 @@ export function MailProfilePolicyEditor({
         {success && <DismissibleAlert tone="success" resetKey={success} floating>{success}</DismissibleAlert>}
 
         <section className="mail-policy-section policy-section">
-          <div className="subsection-heading split">
+          <ActionToolbar surface="section-header" className="subsection-heading split">
             <h3>i18n:govoplan-mail.profile_allow_list.507dfe6c</h3>
             <div className="button-row compact-actions">
               {lowerLevelLimitToggle("allowed_profile_ids")}
               <Button onClick={() => patchPolicy({ allowed_profile_ids: [] })} disabled={disabled || profileAllowListLocked || selectedProfileIds.size === 0}>i18n:govoplan-mail.clear_allow_list.f69c8c67</Button>
             </div>
-          </div>
+          </ActionToolbar>
           <p className="muted small-note">{selectedProfileIds.size === 0 ? "i18n:govoplan-mail.no_local_profile_allow_list_is_set.31072e39" : i18nMessage("i18n:govoplan-mail.value_profile_s_allowed_by_this_scope.6fe9ba44", { value0: selectedProfileIds.size })}</p>
           <AdminSelectionList
             options={candidateProfiles.map((profile) => ({

webui/src/features/mail/MailboxPage.tsx

@@ -3,6 +3,7 @@ import { Activity, ChevronRight, Home, Mail, Paperclip, RefreshCw, Search, X } f
 import { ToolbarGroup, ActionToolbar,
   ActionBlockerHint,
   Button,
+  CountBadge,
   DataGridPaginationBar,
   DocumentationHelpLink,
   DismissibleAlert,
@@ -395,7 +396,7 @@ export default function MailboxPage({ settings, auth }: { settings: ApiSettings;
                   <span className="mailbox-tree-node-label">
                     <span className="mailbox-tree-node-main">
                       <span>{node.label}</span>
-                      {showCount && <small className="mailbox-folder-count">{node.messageCount}</small>}
+                      {showCount && <CountBadge tone="neutral" size="compact" className="mailbox-folder-count">{node.messageCount}</CountBadge>}
                     </span>
                     {flagText && <small>{flagText}</small>}
                   </span>);
@@ -407,7 +408,7 @@ export default function MailboxPage({ settings, auth }: { settings: ApiSettings;
 
         <section className="file-list-panel mailbox-message-list-panel" aria-label="i18n:govoplan-mail.mailbox_messages.5c06afaf">
           <div className="file-list-sticky">
-            <ActionToolbar className="file-manager-toolbar mailbox-toolbar" aria-label="i18n:govoplan-mail.mail_actions.c08b5f08">
+            <ActionToolbar justify="between" className="file-manager-toolbar mailbox-toolbar" aria-label="i18n:govoplan-mail.mail_actions.c08b5f08">
               <label className="mailbox-profile-field">
                 <span>i18n:govoplan-mail.imap_profile.5165df81</span>
                 <select value={selectedProfileId} disabled={loadingProfiles || loadingFolders || imapProfiles.length === 0} onChange={(event) => selectProfile(event.target.value)}>

webui/src/styles/mail-profiles.css

@@ -186,14 +186,6 @@
   gap: 18px;
 }
 
-.mailbox-toolbar,
-.mailbox-message-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  justify-content: space-between;
-}
-
 .mailbox-toolbar label {
   display: grid;
   gap: 5px;
@@ -396,8 +388,7 @@
 }
 
 @media (max-width: 760px) {
-  .mailbox-toolbar,
-  .mailbox-message-toolbar {
+  .mailbox-toolbar {
     align-items: stretch;
     flex-direction: column;
   }
@@ -458,13 +449,6 @@
 
 .mailbox-folder-count {
   flex: 0 0 auto;
-  min-width: 20px;
-  padding: 1px 6px;
-  border: var(--border-line);
-  border-radius: 999px;
-  background: var(--surface-subtle);
-  color: var(--text);
-  text-align: center;
 }
 
 .mailbox-toolbar.file-manager-toolbar {