Migrate Notifications interface patterns

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>
   );
 }