Adopt semantic mail action layout

webui/src/features/mail/MailBouncePage.tsx

@@ -9,6 +9,7 @@ import { FormGrid, ContentGrid,
   Dialog,
   DocumentationHelpLink,
   FormField,
+  PageActionBar,
   PageLayout,
   StatusBadge,
   TableActionGroup,
@@ -193,16 +194,17 @@ export default function MailBouncePage({ settings }: { settings: ApiSettings })
   return (
     <>
       <PageLayout
+        archetype="collection"
         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>
-          </>
-        )}
+        actions={<PageActionBar
+          variant="collection"
+          refreshable
+          reloadAction={<Button onClick={() => void load()} disabled={Boolean(pageMutationBlocker)} disabledReason={pageMutationBlocker}><RefreshCw size={16} aria-hidden="true" /> Reload</Button>}
+          contextActions={<Button onClick={() => navigate("/mail")}><ArrowLeft size={16} aria-hidden="true" /> Mailbox</Button>}
+          helpAction={<DocumentationHelpLink reference={MAIL_BOUNCE_DOCUMENTATION} />}
+          createAction={<Button variant="primary" onClick={() => setAddOpen(true)} disabled={Boolean(addWatcherBlocker)} disabledReason={addWatcherBlocker}><Plus size={16} aria-hidden="true" /> Add watcher</Button>}
+        />}
         loading={loading}
         loadingLabel="Loading bounce processing"
         error={error}