Migrate Notifications interface patterns

webui/src/features/notifications/NotificationCenterPage.tsx

@@ -1,8 +1,29 @@
 import { useEffect, useMemo, useState } from "react";
 import { Bell, Check, ExternalLink, RefreshCw, Send, XCircle } from "lucide-react";
-import { AdminIconButton, Button, DismissibleAlert, SegmentedControl, SelectionList, SelectionListItem, StatusBadge, hasScope, type ApiSettings, type AuthInfo } from "@govoplan/core-webui";
+import {
+  ActionBlockerHint,
+  AdminIconButton,
+  Button,
+  ConfirmDialog,
+  DismissibleAlert,
+  DocumentationHelpLink,
+  SegmentedControl,
+  SelectionList,
+  SelectionListItem,
+  StatusBadge,
+  hasScope,
+  i18nMessage,
+  type ApiSettings,
+  type AuthInfo
+} from "@govoplan/core-webui";
 import { deliverPendingNotifications, listNotifications, updateNotification, type NotificationMessage } from "../../api/notifications";
 import { safeNotificationActionUrl } from "../../security/actionUrl";
+import {
+  NOTIFICATIONS_BLOCKER_LABELS,
+  NOTIFICATIONS_DELIVERY_DOCUMENTATION,
+  NOTIFICATIONS_DOCUMENTATION,
+  NOTIFICATIONS_I18N
+} from "./interfacePatterns";
 
 type StatusFilter =
   | "all"
@@ -29,6 +50,8 @@ const statusFilters: StatusFilter[] = [
   "cancelled"
 ];
 
+const cancellableStatuses = new Set(["pending", "queued", "paused", "failed"]);
+
 export default function NotificationCenterPage({ settings, auth }: { settings: ApiSettings; auth: AuthInfo }) {
   const [notifications, setNotifications] = useState<NotificationMessage[]>([]);
   const [selectedId, setSelectedId] = useState("");
@@ -36,12 +59,28 @@ export default function NotificationCenterPage({ settings, auth }: { settings: A
   const [loading, setLoading] = useState(true);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
+  const [confirmingAction, setConfirmingAction] = useState<"cancel" | "dispatch" | null>(null);
 
   const canRead = hasScope(auth, "notifications:notification:read");
   const canWrite = hasScope(auth, "notifications:notification:write");
   const canDispatch = hasScope(auth, "notifications:delivery:dispatch");
   const selected = useMemo(() => notifications.find((item) => item.id === selectedId) || notifications[0] || null, [notifications, selectedId]);
   const unreadCount = notifications.filter((item) => !item.read_at && !["cancelled", "skipped"].includes(item.status)).length;
+  const commonSelectionReason = busy
+    ? NOTIFICATIONS_I18N.actionActive
+    : !selected
+      ? NOTIFICATIONS_I18N.selectionRequired
+      : !canWrite
+        ? NOTIFICATIONS_I18N.writePermissionRequired
+        : undefined;
+  const markReadDisabledReason = commonSelectionReason ?? (selected?.read_at ? NOTIFICATIONS_I18N.alreadyRead : undefined);
+  const acknowledgeDisabledReason = commonSelectionReason ?? (selected?.acknowledged_at ? NOTIFICATIONS_I18N.alreadyAcknowledged : undefined);
+  const cancelDisabledReason = commonSelectionReason ?? (selected && !cancellableStatuses.has(selected.status) ? NOTIFICATIONS_I18N.notCancellable : undefined);
+  const dispatchDisabledReason = busy
+    ? NOTIFICATIONS_I18N.actionActive
+    : !canDispatch
+      ? NOTIFICATIONS_I18N.dispatchPermissionRequired
+      : undefined;
 
   useEffect(() => {
     if (!canRead) {
@@ -68,43 +107,65 @@ export default function NotificationCenterPage({ settings, auth }: { settings: A
     }
   }
 
-  async function markSelected(status: "read" | "acknowledged" | "cancelled") {
-    if (!selected || !canWrite) return;
+  async function markSelected(status: "read" | "acknowledged" | "cancelled"): Promise<boolean> {
+    if (!selected || !canWrite) return false;
     setBusy(true);
     setError("");
     try {
       const next = await updateNotification(settings, selected.id, { status });
       setNotifications((items) => items.map((item) => item.id === next.id ? next : item));
       notifyNotificationsChanged();
+      return true;
     } catch (err) {
       setError(errorMessage(err));
+      return false;
     } finally {
       setBusy(false);
     }
   }
 
-  async function runDelivery() {
-    if (!canDispatch) return;
+  async function runDelivery(): Promise<boolean> {
+    if (!canDispatch) return false;
     setBusy(true);
     setError("");
     try {
       await deliverPendingNotifications(settings, 50);
       await load();
       notifyNotificationsChanged();
+      return true;
     } catch (err) {
       setError(errorMessage(err));
+      return false;
     } finally {
       setBusy(false);
     }
   }
 
+  async function confirmAction() {
+    const succeeded = confirmingAction === "cancel"
+      ? await markSelected("cancelled")
+      : confirmingAction === "dispatch"
+        ? await runDelivery()
+        : false;
+    if (succeeded) setConfirmingAction(null);
+  }
+
   if (!canRead) {
     return (
       <main className="notifications-page">
-        <div className="notifications-empty-state">
-          <Bell size={22} />
-          <h1>Notifications</h1>
-          <p>You do not have permission to read notifications in this tenant.</p>
+        <div className="notifications-permission-state">
+          <ActionBlockerHint
+            tone="warning"
+            reason={{
+              summary: "i18n:govoplan-notifications.read_blocked_summary",
+              details: NOTIFICATIONS_I18N.readPermissionRequired,
+              requiredAction: "i18n:govoplan-notifications.permission_action",
+              actor: "i18n:govoplan-notifications.permission_actor",
+              target: "i18n:govoplan-notifications.permission_target"
+            }}
+            labels={NOTIFICATIONS_BLOCKER_LABELS}
+            documentation={NOTIFICATIONS_DOCUMENTATION}
+          />
         </div>
       </main>
     );
@@ -117,24 +178,30 @@ export default function NotificationCenterPage({ settings, auth }: { settings: A
           <div className="notifications-sidebar-bar">
             <div className="notifications-title">
               <Bell size={17} />
-              <strong>Notifications</strong>
+              <strong>i18n:govoplan-notifications.notifications</strong>
               {unreadCount > 0 ? <span className="notifications-count">{unreadCount}</span> : null}
             </div>
-            <AdminIconButton label="Refresh" icon={<RefreshCw size={16} aria-hidden="true" />} onClick={() => void load()} disabled={loading || busy} />
+            <AdminIconButton
+              label="i18n:govoplan-notifications.refresh"
+              icon={<RefreshCw size={16} aria-hidden="true" />}
+              onClick={() => void load()}
+              disabled={loading || busy}
+              disabledReason={loading ? NOTIFICATIONS_I18N.loading : busy ? NOTIFICATIONS_I18N.actionActive : undefined}
+            />
           </div>
           <SegmentedControl
             className="notifications-status-filter"
-            options={statusFilters.map((status) => ({ id: status, label: status }))}
+            options={statusFilters.map((status) => ({ id: status, label: statusLabel(status) }))}
             value={statusFilter}
             onChange={setStatusFilter}
-            ariaLabel="Notification status"
+            ariaLabel="i18n:govoplan-notifications.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}
+            {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="Notifications" className="notifications-selection-list">
+              <SelectionList label="i18n:govoplan-notifications.notifications" className="notifications-selection-list">
                 {notifications.map((notification) => (
                   <SelectionListItem
                     key={notification.id}
@@ -160,37 +227,70 @@ export default function NotificationCenterPage({ settings, auth }: { settings: A
           <div className="notifications-topbar">
             <div className="notifications-title-line">
               <Bell size={18} />
-              <strong>{selected?.subject || selected?.event_kind || "Notification center"}</strong>
+              <strong>{selected?.subject || selected?.event_kind || "i18n:govoplan-notifications.surface.center"}</strong>
             </div>
             <div className="notifications-actions">
-              <Button onClick={() => void markSelected("read")} disabled={!selected || busy || !canWrite}>
-                <Check size={16} /> Mark read
+              <DocumentationHelpLink reference={NOTIFICATIONS_DOCUMENTATION} />
+              <Button onClick={() => void markSelected("read")} disabled={Boolean(markReadDisabledReason)} disabledReason={markReadDisabledReason}>
+                <Check size={16} /> i18n:govoplan-notifications.mark_read
               </Button>
-              <Button onClick={() => void markSelected("acknowledged")} disabled={!selected || busy || !canWrite}>
-                <Check size={16} /> Acknowledge
+              <Button onClick={() => void markSelected("acknowledged")} disabled={Boolean(acknowledgeDisabledReason)} disabledReason={acknowledgeDisabledReason}>
+                <Check size={16} /> i18n:govoplan-notifications.acknowledge
               </Button>
-              <Button onClick={() => void markSelected("cancelled")} disabled={!selected || busy || !canWrite}>
-                <XCircle size={16} /> Cancel
+              <Button variant="danger" onClick={() => setConfirmingAction("cancel")} disabled={Boolean(cancelDisabledReason)} disabledReason={cancelDisabledReason}>
+                <XCircle size={16} /> i18n:govoplan-notifications.cancel_delivery
+              </Button>
+              <Button onClick={() => setConfirmingAction("dispatch")} disabled={Boolean(dispatchDisabledReason)} disabledReason={dispatchDisabledReason}>
+                <Send size={16} /> i18n:govoplan-notifications.dispatch_pending
               </Button>
-              {canDispatch ? (
-                <Button onClick={() => void runDelivery()} disabled={busy}>
-                  <Send size={16} /> Dispatch pending
-                </Button>
-              ) : null}
             </div>
           </div>
 
           {error ? <DismissibleAlert tone="danger" compact resetKey={error}>{error}</DismissibleAlert> : null}
 
+          {selected && !canWrite ? (
+            <ActionBlockerHint
+              tone="info"
+              reason={{
+                summary: "i18n:govoplan-notifications.actions_read_only_summary",
+                details: NOTIFICATIONS_I18N.writePermissionRequired,
+                requiredAction: "i18n:govoplan-notifications.permission_action",
+                actor: "i18n:govoplan-notifications.permission_actor",
+                target: "i18n:govoplan-notifications.permission_target"
+              }}
+              labels={NOTIFICATIONS_BLOCKER_LABELS}
+              documentation={NOTIFICATIONS_DOCUMENTATION}
+            />
+          ) : null}
+
           {selected ? <NotificationDetails notification={selected} /> : (
             <div className="notifications-empty-state">
               <Bell size={22} />
-              <h1>Notifications</h1>
-              <p>Select a notification to inspect delivery state, source context, and content.</p>
+              <h1>i18n:govoplan-notifications.notifications</h1>
+              <p>i18n:govoplan-notifications.select_notification_help</p>
             </div>
           )}
         </section>
       </div>
+      <ConfirmDialog
+        open={confirmingAction === "cancel"}
+        title="i18n:govoplan-notifications.cancel_delivery_title"
+        message={i18nMessage("i18n:govoplan-notifications.cancel_delivery_message", { value0: selected?.subject || selected?.event_kind || "i18n:govoplan-notifications.selected_notification" })}
+        confirmLabel="i18n:govoplan-notifications.cancel_delivery"
+        tone="danger"
+        busy={busy}
+        onCancel={() => setConfirmingAction(null)}
+        onConfirm={() => void confirmAction()}
+      />
+      <ConfirmDialog
+        open={confirmingAction === "dispatch"}
+        title="i18n:govoplan-notifications.dispatch_pending_title"
+        message="i18n:govoplan-notifications.dispatch_pending_message"
+        confirmLabel="i18n:govoplan-notifications.dispatch_pending"
+        busy={busy}
+        onCancel={() => setConfirmingAction(null)}
+        onConfirm={() => void confirmAction()}
+      />
     </main>
   );
 }
@@ -206,32 +306,35 @@ function NotificationDetails({ notification }: { notification: NotificationMessa
           <span>{formatDate(notification.created_at)}</span>
         </div>
         <h1>{notification.subject || notification.event_kind}</h1>
-        {notification.body_text ? <p>{notification.body_text}</p> : <p className="muted">No message body was provided.</p>}
+        {notification.body_text ? <p>{notification.body_text}</p> : <p className="muted">i18n:govoplan-notifications.no_message_body</p>}
         {actionUrl ? (
           <a className="notifications-action-link" href={actionUrl}>
-            <ExternalLink size={16} /> Open related item
+            <ExternalLink size={16} /> i18n:govoplan-notifications.open_related_item
           </a>
         ) : null}
       </section>
 
       <section className="notifications-properties">
-        <h2>Source and delivery</h2>
+        <h2>i18n:govoplan-notifications.source_and_delivery</h2>
         <dl>
-          <div><dt>Source</dt><dd>{notification.source_module} / {notification.source_resource_type}</dd></div>
-          <div><dt>Resource</dt><dd>{notification.source_resource_id || "None"}</dd></div>
-          <div><dt>Recipient</dt><dd>{notification.recipient_label || notification.recipient || notification.recipient_id || "None"}</dd></div>
-          <div><dt>Priority</dt><dd>{notification.priority}</dd></div>
-          <div><dt>Queued</dt><dd>{formatDate(notification.queued_at)}</dd></div>
-          <div><dt>Sent</dt><dd>{formatDate(notification.sent_at)}</dd></div>
-          <div><dt>Read</dt><dd>{formatDate(notification.read_at)}</dd></div>
-          <div><dt>Attempts</dt><dd>{notification.attempt_count}</dd></div>
+          <div><dt>i18n:govoplan-notifications.source</dt><dd>{notification.source_module} / {notification.source_resource_type}</dd></div>
+          <div><dt>i18n:govoplan-notifications.resource</dt><dd>{notification.source_resource_id || "i18n:govoplan-notifications.none"}</dd></div>
+          <div><dt>i18n:govoplan-notifications.recipient</dt><dd>{notification.recipient_label || notification.recipient || notification.recipient_id || "i18n:govoplan-notifications.none"}</dd></div>
+          <div><dt>i18n:govoplan-notifications.priority</dt><dd>{notification.priority}</dd></div>
+          <div><dt>i18n:govoplan-notifications.queued</dt><dd>{formatDate(notification.queued_at)}</dd></div>
+          <div><dt>i18n:govoplan-notifications.sent</dt><dd>{formatDate(notification.sent_at)}</dd></div>
+          <div><dt>i18n:govoplan-notifications.read</dt><dd>{formatDate(notification.read_at)}</dd></div>
+          <div><dt>i18n:govoplan-notifications.attempts</dt><dd>{notification.attempt_count}</dd></div>
         </dl>
         {notification.last_error ? <p className="notifications-error">{notification.last_error}</p> : null}
       </section>
 
       <section className="notifications-attempts">
-        <h2>Delivery attempts</h2>
-        {notification.attempts.length === 0 ? <p className="muted">No delivery attempt has been recorded yet.</p> : null}
+        <div className="notifications-section-heading">
+          <h2>i18n:govoplan-notifications.delivery_attempts</h2>
+          <DocumentationHelpLink reference={NOTIFICATIONS_DELIVERY_DOCUMENTATION} />
+        </div>
+        {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}>
             <strong>{attempt.provider || attempt.channel}</strong>
@@ -246,11 +349,15 @@ function NotificationDetails({ notification }: { notification: NotificationMessa
 }
 
 function formatStatus(value: string): string {
-  return value.replace(/_/g, " ");
+  return statusLabel(value);
+}
+
+function statusLabel(value: string): string {
+  return `i18n:govoplan-notifications.status.${value.replace(/[^a-z0-9]+/gi, "_").toLowerCase()}`;
 }
 
 function formatDate(value?: string | null): string {
-  if (!value) return "Not set";
+  if (!value) return "i18n:govoplan-notifications.not_set";
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) return value;
   return new Intl.DateTimeFormat(undefined, {
@@ -260,7 +367,7 @@ function formatDate(value?: string | null): string {
 }
 
 function errorMessage(error: unknown): string {
-  return error instanceof Error ? error.message : "Request failed";
+  return error instanceof Error ? error.message : "i18n:govoplan-notifications.request_failed";
 }
 
 function notifyNotificationsChanged(): void {