refactor(webui): centralize notification selection

webui/package.json

@@ -14,10 +14,11 @@
     "./styles/notifications.css": "./src/styles/notifications.css"
   },
   "scripts": {
-    "test:action-url": "rm -rf .component-test-build && mkdir -p .component-test-build && printf '{\"type\":\"commonjs\"}\\n' > .component-test-build/package.json && tsc -p tsconfig.tests.json && node .component-test-build/tests/action-url.test.js"
+    "test:action-url": "rm -rf .component-test-build && mkdir -p .component-test-build && printf '{\"type\":\"commonjs\"}\\n' > .component-test-build/package.json && tsc -p tsconfig.tests.json && node .component-test-build/tests/action-url.test.js",
+    "test:ui-structure": "node scripts/test-notification-page-structure.mjs"
   },
   "peerDependencies": {
-    "@govoplan/core-webui": "^0.1.8",
+    "@govoplan/core-webui": "^0.1.9",
     "lucide-react": "^1.23.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

webui/scripts/test-notification-page-structure.mjs

@@ -0,0 +1,18 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+
+const pagePath = fileURLToPath(new URL("../src/features/notifications/NotificationCenterPage.tsx", import.meta.url));
+const stylesPath = fileURLToPath(new URL("../src/styles/notifications.css", import.meta.url));
+const page = readFileSync(pagePath, "utf8");
+const styles = readFileSync(stylesPath, "utf8");
+
+assert.match(page, /SelectionList,[\s\S]*SelectionListItem,[\s\S]*from "@govoplan\/core-webui"/);
+assert.match(page, /<SelectionList label="Notifications" className="notifications-selection-list">/);
+assert.match(page, /<SelectionListItem[\s\S]*selected=\{selected\?\.id === notification\.id\}/);
+assert.match(page, /className=\{`notifications-list-item \$\{notification\.read_at \? "is-read" : ""\}`\}/);
+assert.doesNotMatch(page, /<button[\s\S]{0,160}notifications-list-item/);
+assert.doesNotMatch(styles, /\.notifications-list-item:(?:hover|focus-visible)/);
+assert.doesNotMatch(styles, /\.notifications-list-item\.is-selected/);
+
+console.log("Notification rows use the central selection-list contract.");

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, SelectionList, SelectionListItem, 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,37 +99,40 @@ 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}>
+            <AdminIconButton label="Refresh" icon={<RefreshCw size={16} aria-hidden="true" />} onClick={() => void load()} 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>
-            ))}
           </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}
-            {notifications.map((notification) => (
+            {notifications.length > 0 ? (
-              <button
+              <SelectionList label="Notifications" className="notifications-selection-list">
-                key={notification.id}
+                {notifications.map((notification) => (
-                type="button"
+                  <SelectionListItem
-                className={`notifications-list-item ${selected?.id === notification.id ? "is-selected" : ""} ${notification.read_at ? "is-read" : ""}`}
+                    key={notification.id}
-                onClick={() => setSelectedId(notification.id)}
+                    selected={selected?.id === notification.id}
-              >
+                    className={`notifications-list-item ${notification.read_at ? "is-read" : ""}`}
-                <span className="notifications-list-heading">
+                    onClick={() => setSelectedId(notification.id)}
-                  <strong>{notification.subject || notification.event_kind}</strong>
+                  >
-                  <small>{formatStatus(notification.status)}</small>
+                    <span className="notifications-list-heading">
-                </span>
+                      <strong>{notification.subject || notification.event_kind}</strong>
-                <span className="notifications-list-meta">
+                      <small>{formatStatus(notification.status)}</small>
-                  <span>{notification.source_module}</span>
+                    </span>
-                  <span>{formatDate(notification.created_at)}</span>
+                    <span className="notifications-list-meta">
-                </span>
+                      <span>{notification.source_module}</span>
-              </button>
+                      <span>{formatDate(notification.created_at)}</span>
-            ))}
+                    </span>
+                  </SelectionListItem>
+                ))}
+              </SelectionList>
+            ) : null}
           </div>
         </aside>
         <section className="notifications-workspace">
@@ -177,7 +180,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>

webui/src/styles/notifications.css

@@ -65,40 +65,9 @@
   font-weight: 800;
 }
 
-.notifications-icon-button.btn {
+.notifications-status-filter {
-  width: 34px;
+  width: calc(100% - 16px);
-  min-width: 34px;
+  margin: 8px;
-  height: 34px;
-  justify-content: center;
-  padding: 0;
-}
-
-.notifications-filter-row {
-  display: flex;
-  gap: 5px;
-  padding: 8px;
-  border-bottom: var(--border-line);
-  overflow-x: auto;
-}
-
-.notifications-filter-row button {
-  min-height: 28px;
-  border: 0;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--muted);
-  cursor: pointer;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 700;
-  padding: 0 8px;
-  text-transform: capitalize;
-}
-
-.notifications-filter-row button:hover,
-.notifications-filter-row button.is-active {
-  background: var(--sidebar-hover-bg);
-  color: var(--text-strong);
 }
 
 .notifications-list {
@@ -110,27 +79,14 @@
   padding: 8px;
 }
 
+.notifications-selection-list {
+  gap: 4px;
+}
+
 .notifications-list-item {
-  width: 100%;
   display: grid;
   gap: 4px;
   min-height: 58px;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--text);
-  cursor: pointer;
-  padding: 9px;
-  text-align: left;
-}
-
-.notifications-list-item:hover,
-.notifications-list-item.is-selected {
-  background: var(--sidebar-hover-bg);
-}
-
-.notifications-list-item.is-selected {
-  box-shadow: inset 3px 0 var(--accent);
 }
 
 .notifications-list-item.is-read {
@@ -230,29 +186,6 @@
   font-weight: 700;
 }
 
-.notifications-status {
-  border-radius: 999px;
-  background: var(--panel-soft);
-  color: var(--text);
-  padding: 3px 8px;
-}
-
-.notifications-status.status-failed {
-  background: var(--danger-soft);
-  color: var(--danger-text);
-}
-
-.notifications-status.status-sent {
-  background: var(--success-soft);
-  color: var(--green);
-}
-
-.notifications-status.status-queued,
-.notifications-status.status-pending {
-  background: var(--warning-bg);
-  color: var(--warning-text);
-}
-
 .notifications-action-link {
   width: max-content;
   max-width: 100%;