refactor(webui): centralize notification selection

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 { AdminIconButton, Button, DismissibleAlert, SegmentedControl, StatusBadge, 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";
 
@@ -112,23 +112,27 @@ export default function NotificationCenterPage({ settings, auth }: { settings: A
           <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) => (
-              <button
-                key={notification.id}
-                type="button"
-                className={`notifications-list-item ${selected?.id === notification.id ? "is-selected" : ""} ${notification.read_at ? "is-read" : ""}`}
-                onClick={() => setSelectedId(notification.id)}
-              >
-                <span className="notifications-list-heading">
-                  <strong>{notification.subject || notification.event_kind}</strong>
-                  <small>{formatStatus(notification.status)}</small>
-                </span>
-                <span className="notifications-list-meta">
-                  <span>{notification.source_module}</span>
-                  <span>{formatDate(notification.created_at)}</span>
-                </span>
-              </button>
-            ))}
+            {notifications.length > 0 ? (
+              <SelectionList label="Notifications" className="notifications-selection-list">
+                {notifications.map((notification) => (
+                  <SelectionListItem
+                    key={notification.id}
+                    selected={selected?.id === notification.id}
+                    className={`notifications-list-item ${notification.read_at ? "is-read" : ""}`}
+                    onClick={() => setSelectedId(notification.id)}
+                  >
+                    <span className="notifications-list-heading">
+                      <strong>{notification.subject || notification.event_kind}</strong>
+                      <small>{formatStatus(notification.status)}</small>
+                    </span>
+                    <span className="notifications-list-meta">
+                      <span>{notification.source_module}</span>
+                      <span>{formatDate(notification.created_at)}</span>
+                    </span>
+                  </SelectionListItem>
+                ))}
+              </SelectionList>
+            ) : null}
           </div>
         </aside>
         <section className="notifications-workspace">

webui/src/styles/notifications.css

@@ -79,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 {