Adopt shared WebUI structural primitives

webui/src/features/notifications/NotificationCenterPage.tsx

@@ -2,15 +2,20 @@ import { useEffect, useMemo, useState } from "react";
 import { Bell, Check, ExternalLink, RefreshCw, Send, XCircle } from "lucide-react";
 import {
   ActionBlockerHint,
+  ActionToolbar,
   AdminIconButton,
   Button,
   ConfirmDialog,
+  CountBadge,
   DismissibleAlert,
   DocumentationHelpLink,
   SegmentedControl,
   SelectionList,
   SelectionListItem,
+  StatePanel,
   StatusBadge,
+  WorkspaceFrame,
+  WorkspaceLayout,
   hasScope,
   i18nMessage,
   type ApiSettings,
@@ -152,7 +157,7 @@ export default function NotificationCenterPage({ settings, auth }: { settings: A
 
   if (!canRead) {
     return (
-      <main className="notifications-page">
+      <WorkspaceFrame as="main" height="viewport" surface="plain" className="notifications-page" label="Notification center">
         <div className="notifications-permission-state">
           <ActionBlockerHint
             tone="warning"
@@ -167,19 +172,31 @@ export default function NotificationCenterPage({ settings, auth }: { settings: A
             documentation={NOTIFICATIONS_DOCUMENTATION}
           />
         </div>
-      </main>
+      </WorkspaceFrame>
     );
   }
 
   return (
-    <main className="notifications-page">
-      <div className="notifications-shell">
-        <aside className="notifications-sidebar">
-          <div className="notifications-sidebar-bar">
+    <WorkspaceFrame as="main" height="viewport" surface="plain" className="notifications-page" label="Notification center">
+      <WorkspaceLayout
+        variant="split"
+        primarySize="default"
+        primaryScrollable={false}
+        contentScrollable={false}
+        surface="contained"
+        primaryClassName="notifications-sidebar"
+        contentClassName="notifications-workspace"
+        primaryLabel="i18n:govoplan-notifications.notifications"
+        contentLabel="i18n:govoplan-notifications.surface.center"
+        interfaceId="notifications.center.workspace"
+        helpContextId="notifications.page.center"
+        helpModuleId="notifications"
+        primary={<>
+          <ActionToolbar surface="panel-header" className="notifications-sidebar-bar">
             <div className="notifications-title">
               <Bell size={17} />
               <strong>i18n:govoplan-notifications.notifications</strong>
-              {unreadCount > 0 ? <span className="notifications-count">{unreadCount}</span> : null}
+              {unreadCount > 0 ? <CountBadge>{unreadCount}</CountBadge> : null}
             </div>
             <AdminIconButton
               label="i18n:govoplan-notifications.refresh"
@@ -188,7 +205,7 @@ export default function NotificationCenterPage({ settings, auth }: { settings: A
               disabled={loading || busy}
               disabledReason={loading ? NOTIFICATIONS_I18N.loading : busy ? NOTIFICATIONS_I18N.actionActive : undefined}
             />
-          </div>
+          </ActionToolbar>
           <SegmentedControl
             className="notifications-status-filter"
             options={statusFilters.map((status) => ({ id: status, label: statusLabel(status) }))}
@@ -201,7 +218,7 @@ export default function NotificationCenterPage({ settings, auth }: { settings: A
             {loading ? <div className="notifications-note">i18n:govoplan-notifications.loading_notifications</div> : null}
             {!loading && notifications.length === 0 ? <div className="notifications-note">i18n:govoplan-notifications.no_notifications</div> : null}
             {notifications.length > 0 ? (
-              <SelectionList label="i18n:govoplan-notifications.notifications" className="notifications-selection-list">
+              <SelectionList variant="navigation" label="i18n:govoplan-notifications.notifications" className="notifications-selection-list">
                 {notifications.map((notification) => (
                   <SelectionListItem
                     key={notification.id}
@@ -222,9 +239,9 @@ export default function NotificationCenterPage({ settings, auth }: { settings: A
               </SelectionList>
             ) : null}
           </div>
-        </aside>
-        <section className="notifications-workspace">
-          <div className="notifications-topbar">
+        </>}
+      >
+          <ActionToolbar surface="panel-header" className="notifications-topbar">
             <div className="notifications-title-line">
               <Bell size={18} />
               <strong>{selected?.subject || selected?.event_kind || "i18n:govoplan-notifications.surface.center"}</strong>
@@ -244,7 +261,7 @@ export default function NotificationCenterPage({ settings, auth }: { settings: A
                 <Send size={16} /> i18n:govoplan-notifications.dispatch_pending
               </Button>
             </div>
-          </div>
+          </ActionToolbar>
 
           {error ? <DismissibleAlert tone="danger" compact resetKey={error}>{error}</DismissibleAlert> : null}
 
@@ -264,14 +281,9 @@ export default function NotificationCenterPage({ settings, auth }: { settings: A
           ) : null}
 
           {selected ? <NotificationDetails notification={selected} /> : (
-            <div className="notifications-empty-state">
-              <Bell size={22} />
-              <h1>i18n:govoplan-notifications.notifications</h1>
-              <p>i18n:govoplan-notifications.select_notification_help</p>
-            </div>
+            <StatePanel size="fill" icon={<Bell size={22} />} title="i18n:govoplan-notifications.notifications" description="i18n:govoplan-notifications.select_notification_help" />
           )}
-        </section>
-      </div>
+      </WorkspaceLayout>
       <ConfirmDialog
         open={confirmingAction === "cancel"}
         title="i18n:govoplan-notifications.cancel_delivery_title"
@@ -291,7 +303,7 @@ export default function NotificationCenterPage({ settings, auth }: { settings: A
         onCancel={() => setConfirmingAction(null)}
         onConfirm={() => void confirmAction()}
       />
-    </main>
+    </WorkspaceFrame>
   );
 }
 
@@ -330,10 +342,10 @@ function NotificationDetails({ notification }: { notification: NotificationMessa
       </section>
 
       <section className="notifications-attempts">
-        <div className="notifications-section-heading">
+        <ActionToolbar surface="section-header" className="notifications-section-heading">
           <h2>i18n:govoplan-notifications.delivery_attempts</h2>
           <DocumentationHelpLink reference={NOTIFICATIONS_DELIVERY_DOCUMENTATION} />
-        </div>
+        </ActionToolbar>
         {notification.attempts.length === 0 ? <p className="muted">i18n:govoplan-notifications.no_delivery_attempt</p> : null}
         {notification.attempts.map((attempt) => (
           <div className="notifications-attempt" key={attempt.id}>