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 {

webui/src/features/notifications/NotificationSettingsPanel.tsx

@@ -1,24 +1,35 @@
 import { useEffect, useMemo, useState } from "react";
 import { Mail, Save } from "lucide-react";
 import {
+  ActionBlockerHint,
   Button,
   Card,
   DismissibleAlert,
+  DocumentationHelpLink,
   FormField,
   ReferenceMultiSelect,
   ToggleSwitch,
+  hasScope,
+  i18nMessage,
   isViewSurfaceVisible,
   moduleViewSurfaceId,
   platformModuleReferenceProvider,
   useEffectiveView,
   usePlatformLanguage,
   usePlatformModules,
+  useUnsavedDraftGuard,
   useViewSurfaces,
   type ApiSettings,
   type AuthInfo,
   type ReferenceOption
 } from "@govoplan/core-webui";
 import { getNotificationPreferences, updateNotificationPreferences, type NotificationPreferences } from "../../api/notifications";
+import {
+  NOTIFICATIONS_BLOCKER_LABELS,
+  NOTIFICATIONS_DELIVERY_DOCUMENTATION,
+  NOTIFICATIONS_DOCUMENTATION,
+  NOTIFICATIONS_I18N
+} from "./interfacePatterns";
 
 type Draft = Pick<NotificationPreferences, "show_unread_badge" | "email_enabled" | "email_digest_enabled"> & {
   muted_source_modules: string[];
@@ -42,6 +53,8 @@ export default function NotificationSettingsPanel({ settings, auth }: { settings
   const [saving, setSaving] = useState(false);
   const [message, setMessage] = useState("");
   const [messageTone, setMessageTone] = useState<"success" | "warning">("success");
+  const canWrite = hasScope(auth, "notifications:notification:write");
+  const mailAvailable = modules.some((module) => module.id === "mail");
 
   const dirty = useMemo(() => {
     if (!loaded) return false;
@@ -64,8 +77,8 @@ export default function NotificationSettingsPanel({ settings, auth }: { settings
         label: translateText(module.label),
         description: [
           module.id,
-          `version ${module.version}`,
-          visible ? null : "Hidden by the active view"
+          i18nMessage("i18n:govoplan-notifications.version_value", { value0: module.version }),
+          visible ? null : translateText("i18n:govoplan-notifications.hidden_by_view")
         ].filter(Boolean).join(" · "),
         kind: "module",
         availability: visible ? "available" : "unavailable",
@@ -84,6 +97,22 @@ export default function NotificationSettingsPanel({ settings, auth }: { settings
     [moduleOptions, settings]
   );
 
+  function resetDraft() {
+    if (!loaded) return;
+    setDraft({
+      show_unread_badge: loaded.show_unread_badge,
+      email_enabled: loaded.email_enabled,
+      email_digest_enabled: loaded.email_digest_enabled,
+      muted_source_modules: loaded.muted_source_modules
+    });
+  }
+
+  useUnsavedDraftGuard({
+    dirty,
+    onSave: savePreferences,
+    onDiscard: resetDraft
+  });
+
   useEffect(() => {
     void loadPreferences();
   }, [auth.user.id, settings.accessToken, settings.apiBaseUrl, settings.apiKey]);
@@ -102,13 +131,14 @@ export default function NotificationSettingsPanel({ settings, auth }: { settings
       });
     } catch (error) {
       setMessageTone("warning");
-      setMessage(error instanceof Error ? error.message : "Loading notification preferences failed");
+      setMessage(error instanceof Error ? error.message : translateText("i18n:govoplan-notifications.preferences_load_failed"));
     } finally {
       setLoading(false);
     }
   }
 
-  async function savePreferences() {
+  async function savePreferences(): Promise<boolean> {
+    if (!canWrite) return false;
     setSaving(true);
     setMessage("");
     try {
@@ -127,65 +157,112 @@ export default function NotificationSettingsPanel({ settings, auth }: { settings
       });
       window.dispatchEvent(new CustomEvent("govoplan:notifications-changed"));
       setMessageTone("success");
-      setMessage("Notification preferences saved.");
+      setMessage("i18n:govoplan-notifications.preferences_saved");
+      return true;
     } catch (error) {
       setMessageTone("warning");
-      setMessage(error instanceof Error ? error.message : "Saving notification preferences failed");
+      setMessage(error instanceof Error ? error.message : translateText("i18n:govoplan-notifications.preferences_save_failed"));
+      return false;
     } finally {
       setSaving(false);
     }
   }
 
+  const saveDisabledReason = loading
+    ? NOTIFICATIONS_I18N.loading
+    : saving
+      ? NOTIFICATIONS_I18N.saving
+      : !canWrite
+        ? NOTIFICATIONS_I18N.writePermissionRequired
+        : !dirty
+          ? NOTIFICATIONS_I18N.noChanges
+          : undefined;
+  const preferenceControlsDisabled = loading || saving || !canWrite;
+  const emailToggleDisabled = preferenceControlsDisabled || (!mailAvailable && !draft.email_enabled);
+  const digestToggleDisabled = preferenceControlsDisabled || !mailAvailable || !draft.email_enabled;
+
   return (
     <div className="dashboard-grid settings-dashboard-grid notifications-settings-panel">
-      <Card title="Notifications">
+      <div className="notifications-settings-documentation">
+        <DocumentationHelpLink reference={NOTIFICATIONS_DOCUMENTATION} />
+      </div>
+      {!canWrite ? (
+        <ActionBlockerHint
+          tone="info"
+          reason={{
+            summary: "i18n:govoplan-notifications.preferences_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}
+      <Card title="i18n:govoplan-notifications.notifications">
         <div className="form-grid">
           <ToggleSwitch
-            label="Unread badge"
-            help="Show unread notification counts in the top bar."
+            label="i18n:govoplan-notifications.unread_badge"
+            help="i18n:govoplan-notifications.unread_badge_help"
             checked={draft.show_unread_badge}
-            disabled={loading}
+            disabled={preferenceControlsDisabled}
             onChange={(value) => setDraft((current) => ({ ...current, show_unread_badge: value }))}
           />
-          <FormField label="Muted source modules" help="Choose active modules. Saved modules hidden by the current view remain visible here and are not discarded.">
+          <FormField label="i18n:govoplan-notifications.muted_sources" help="i18n:govoplan-notifications.muted_sources_help">
             <ReferenceMultiSelect
               values={draft.muted_source_modules}
               onChange={(muted_source_modules) =>
                 setDraft((current) => ({ ...current, muted_source_modules }))
               }
               provider={moduleProvider}
-              aria-label="Muted source modules"
-              placeholder="Add a source module"
-              emptyText="No visible modules match."
-              disabled={loading}
+              aria-label="i18n:govoplan-notifications.muted_sources"
+              placeholder="i18n:govoplan-notifications.add_source_module"
+              emptyText="i18n:govoplan-notifications.no_visible_modules"
+              disabled={preferenceControlsDisabled}
             />
           </FormField>
           <div className="button-row compact-actions">
-            <Button variant="primary" onClick={() => void savePreferences()} disabled={loading || saving || !dirty}>
-              <Save size={16} /> {saving ? "Saving" : "Save preferences"}
+            <Button variant="primary" onClick={() => void savePreferences()} disabled={Boolean(saveDisabledReason)} disabledReason={saveDisabledReason}>
+              <Save size={16} /> {saving ? "i18n:govoplan-notifications.saving" : "i18n:govoplan-notifications.save_preferences"}
             </Button>
           </div>
           {message ? <DismissibleAlert tone={messageTone} resetKey={message} floating>{message}</DismissibleAlert> : null}
         </div>
       </Card>
-      <Card title="Delivery">
+      <Card title="i18n:govoplan-notifications.delivery">
         <div className="form-grid">
+          <DocumentationHelpLink reference={NOTIFICATIONS_DELIVERY_DOCUMENTATION} />
           <div className="notifications-settings-inline-title">
             <Mail size={16} />
-            <strong>Email notifications</strong>
+            <strong>i18n:govoplan-notifications.email_notifications</strong>
           </div>
+          {!mailAvailable ? (
+            <ActionBlockerHint
+              tone="info"
+              reason={{
+                summary: "i18n:govoplan-notifications.mail_unavailable_summary",
+                details: NOTIFICATIONS_I18N.mailUnavailable,
+                requiredAction: "i18n:govoplan-notifications.mail_unavailable_action",
+                actor: "i18n:govoplan-notifications.mail_unavailable_actor",
+                target: "i18n:govoplan-notifications.mail_unavailable_target"
+              }}
+              labels={NOTIFICATIONS_BLOCKER_LABELS}
+              documentation={NOTIFICATIONS_DELIVERY_DOCUMENTATION}
+            />
+          ) : null}
           <ToggleSwitch
-            label="Email notifications"
-            help="Deliver production email through the optional Mail module. In-app notifications continue to work when Mail is unavailable."
+            label="i18n:govoplan-notifications.email_notifications"
+            help="i18n:govoplan-notifications.email_notifications_help"
             checked={draft.email_enabled}
-            disabled={loading}
+            disabled={emailToggleDisabled}
             onChange={(value) => setDraft((current) => ({ ...current, email_enabled: value, email_digest_enabled: value ? current.email_digest_enabled : false }))}
           />
           <ToggleSwitch
-            label="Email digest"
-            help="Batch eligible notifications into summary messages when delivery rules support it."
+            label="i18n:govoplan-notifications.email_digest"
+            help="i18n:govoplan-notifications.email_digest_help"
             checked={draft.email_digest_enabled}
-            disabled={loading || !draft.email_enabled}
+            disabled={digestToggleDisabled}
             onChange={(value) => setDraft((current) => ({ ...current, email_digest_enabled: value }))}
           />
         </div>

webui/src/features/notifications/NotificationSummaryWidget.tsx

@@ -1,13 +1,16 @@
 import { Link } from "react-router";
 import {
   DismissibleAlert,
+  DocumentationHelpLink,
   LoadingFrame,
   MetricCard,
   adminErrorMessage,
+  i18nMessage,
   type ApiSettings,
   type DashboardWidgetConfiguration,
   useSharedNotificationSummary
 } from "@govoplan/core-webui";
+import { NOTIFICATIONS_DOCUMENTATION } from "./interfacePatterns";
 
 export default function NotificationSummaryWidget({
   settings,
@@ -31,7 +34,7 @@ export default function NotificationSummaryWidget({
   const error = state.error ? adminErrorMessage(state.error) : "";
 
   return (
-    <LoadingFrame loading={state.loading} label="Loading notification summary">
+    <LoadingFrame loading={state.loading} label="i18n:govoplan-notifications.loading_summary">
       {error && (
         <DismissibleAlert tone="warning" resetKey={error}>
           {error}
@@ -39,35 +42,36 @@ export default function NotificationSummaryWidget({
       )}
       <div className="metric-grid inside dashboard-widget-metrics">
         <MetricCard
-          label="Unread"
+          label="i18n:govoplan-notifications.unread"
           value={summary?.unread ?? 0}
           tone={summary?.unread ? "info" : "good"}
-          detail={`${summary?.total ?? 0} total`}
+          detail={i18nMessage("i18n:govoplan-notifications.value_total", { value0: summary?.total ?? 0 })}
         />
         {showDeliveryState && (
           <MetricCard
-            label="Pending"
+            label="i18n:govoplan-notifications.pending"
             value={summary?.pending ?? 0}
             tone={summary?.pending ? "warning" : "good"}
-            detail="Awaiting delivery"
+            detail="i18n:govoplan-notifications.awaiting_delivery"
           />
         )}
         {showDeliveryState && (
           <MetricCard
-            label="Failed"
+            label="i18n:govoplan-notifications.failed"
             value={summary?.failed ?? 0}
             tone={summary?.failed ? "danger" : "good"}
-            detail="Delivery failures"
+            detail="i18n:govoplan-notifications.delivery_failures"
           />
         )}
       </div>
-      {showCenterLink && (
-        <div className="notifications-widget-actions">
+      <div className="notifications-widget-actions">
+        <DocumentationHelpLink reference={NOTIFICATIONS_DOCUMENTATION} />
+        {showCenterLink && (
           <Link className="btn btn-secondary" to="/notifications">
-            Open notification center
+            i18n:govoplan-notifications.open_center
           </Link>
-        </div>
-      )}
+        )}
+      </div>
     </LoadingFrame>
   );
 }

webui/src/features/notifications/interfacePatterns.ts

@@ -0,0 +1,32 @@
+import type { DocumentationHelpReference } from "@govoplan/core-webui";
+
+export const NOTIFICATIONS_DOCUMENTATION = {
+  topicId: "notifications.center-and-preferences",
+  documentationType: "user"
+} satisfies DocumentationHelpReference;
+
+export const NOTIFICATIONS_DELIVERY_DOCUMENTATION = {
+  topicId: "notifications.delivery-operations",
+  documentationType: "admin"
+} satisfies DocumentationHelpReference;
+
+export const NOTIFICATIONS_I18N = {
+  loading: "i18n:govoplan-notifications.reason.loading",
+  saving: "i18n:govoplan-notifications.reason.saving",
+  actionActive: "i18n:govoplan-notifications.reason.action_active",
+  selectionRequired: "i18n:govoplan-notifications.reason.selection_required",
+  readPermissionRequired: "i18n:govoplan-notifications.reason.read_permission_required",
+  writePermissionRequired: "i18n:govoplan-notifications.reason.write_permission_required",
+  dispatchPermissionRequired: "i18n:govoplan-notifications.reason.dispatch_permission_required",
+  alreadyRead: "i18n:govoplan-notifications.reason.already_read",
+  alreadyAcknowledged: "i18n:govoplan-notifications.reason.already_acknowledged",
+  notCancellable: "i18n:govoplan-notifications.reason.not_cancellable",
+  noChanges: "i18n:govoplan-notifications.reason.no_changes",
+  mailUnavailable: "i18n:govoplan-notifications.reason.mail_unavailable"
+} as const;
+
+export const NOTIFICATIONS_BLOCKER_LABELS = {
+  requiredAction: "i18n:govoplan-notifications.blocker.required_action",
+  actor: "i18n:govoplan-notifications.blocker.actor",
+  target: "i18n:govoplan-notifications.blocker.target"
+} as const;