refactor(webui): use central status and action components

webui/src/features/notifications/NotificationCenterPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { Bell, Check, ExternalLink, RefreshCw, Send, XCircle } from "lucide-react";
-import { Button, DismissibleAlert, hasScope, type ApiSettings, type AuthInfo } from "@govoplan/core-webui";
+import { AdminIconButton, Button, DismissibleAlert, SegmentedControl, StatusBadge, hasScope, type ApiSettings, type AuthInfo } from "@govoplan/core-webui";
 import { deliverPendingNotifications, listNotifications, updateNotification, type NotificationMessage } from "../../api/notifications";
 import { safeNotificationActionUrl } from "../../security/actionUrl";
 
@@ -99,17 +99,16 @@ export default function NotificationCenterPage({ settings, auth }: { settings: A
               <strong>Notifications</strong>
               {unreadCount > 0 ? <span className="notifications-count">{unreadCount}</span> : null}
             </div>
-            <Button className="notifications-icon-button" onClick={() => void load()} title="Refresh" disabled={loading || busy}>
-              <RefreshCw size={16} />
-            </Button>
-          </div>
-          <div className="notifications-filter-row" role="tablist" aria-label="Notification status">
-            {statusFilters.map((status) => (
-              <button key={status} className={status === statusFilter ? "is-active" : ""} type="button" onClick={() => setStatusFilter(status)} role="tab" aria-selected={status === statusFilter}>
-                {status}
-              </button>
-            ))}
+            <AdminIconButton label="Refresh" icon={<RefreshCw size={16} aria-hidden="true" />} onClick={() => void load()} disabled={loading || busy} />
           </div>
+          <SegmentedControl
+            className="notifications-status-filter"
+            options={statusFilters.map((status) => ({ id: status, label: status }))}
+            value={statusFilter}
+            onChange={setStatusFilter}
+            ariaLabel="Notification status"
+            width="fill"
+          />
           <div className="notifications-list">
             {loading ? <div className="notifications-note">Loading notifications</div> : null}
             {!loading && notifications.length === 0 ? <div className="notifications-note">No notifications in this view.</div> : null}
@@ -177,7 +176,7 @@ function NotificationDetails({ notification }: { notification: NotificationMessa
     <div className="notifications-detail">
       <section className="notifications-message">
         <div className="notifications-message-meta">
-          <span className={`notifications-status status-${notification.status}`}>{formatStatus(notification.status)}</span>
+          <StatusBadge status={notification.status} label={formatStatus(notification.status)} />
           <span>{notification.channel}</span>
           <span>{formatDate(notification.created_at)}</span>
         </div>