Adopt shared WebUI layout primitives

webui/src/features/mail/MailboxPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Activity, ChevronRight, Home, Mail, Paperclip, RefreshCw, Search, X } from "lucide-react";
-import {
+import { ToolbarGroup, ActionToolbar,
   ActionBlockerHint,
   Button,
   DataGridPaginationBar,
@@ -407,7 +407,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">
-            <div className="file-manager-toolbar mailbox-toolbar" aria-label="i18n:govoplan-mail.mail_actions.c08b5f08">
+            <ActionToolbar 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)}>
@@ -415,8 +415,8 @@ export default function MailboxPage({ settings, auth }: { settings: ApiSettings;
                   {imapProfiles.map((profile) => <option key={profile.id} value={profile.id}>{profile.name}</option>)}
                 </select>
               </label>
-              <span className="mailbox-toolbar-meta">{selectedProfile?.imap ? transportLabel(selectedProfile) : "i18n:govoplan-mail.no_imap_profile_selected.e7d1516f"}</span>
-              <div className="mailbox-toolbar-actions">
+              <ToolbarGroup grow className="mailbox-toolbar-meta">{selectedProfile?.imap ? transportLabel(selectedProfile) : "i18n:govoplan-mail.no_imap_profile_selected.e7d1516f"}</ToolbarGroup>
+              <ToolbarGroup align="end" className="mailbox-toolbar-actions">
                 <DocumentationHelpLink reference={MAILBOX_DOCUMENTATION} />
                 {hasAnyScope(auth, ["mail:bounce:read", "mail:bounce:manage"]) &&
                 <Button onClick={() => navigate("/mail/bounces")} title="Open bounce processing">
@@ -435,8 +435,8 @@ export default function MailboxPage({ settings, auth }: { settings: ApiSettings;
                   <RefreshCw size={16} aria-hidden="true" />
                   i18n:govoplan-mail.messages.f1702b46
                 </Button>
-              </div>
-            </div>
+              </ToolbarGroup>
+            </ActionToolbar>
 
             {noImapProfiles &&
             <ActionBlockerHint