perf: add indexed notification summaries and widget

2026-07-29 14:16:29 +02:00
parent 992d2ca533
commit e32ba3663b
9 changed files with 312 additions and 36 deletions
--- a/webui/package.json
+++ b/webui/package.json
@@ -22,7 +22,7 @@
    "lucide-react": "^1.23.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
-    "react-router-dom": "^7.1.1",
+    "react-router-dom": ">=7.18.2 <8",
    "@vitejs/plugin-react": "^4.3.4",
    "typescript": "^5.7.2",
    "vite": "^6.0.6"
--- a/webui/src/features/notifications/NotificationSettingsPanel.tsx
+++ b/webui/src/features/notifications/NotificationSettingsPanel.tsx
@@ -1,20 +1,41 @@
 import { useEffect, useMemo, useState } from "react";
 import { Mail, Save } from "lucide-react";
-import { Button, Card, DismissibleAlert, FormField, ToggleSwitch, type ApiSettings, type AuthInfo } from "@govoplan/core-webui";
+import {
+  Button,
+  Card,
+  DismissibleAlert,
+  FormField,
+  ReferenceMultiSelect,
+  ToggleSwitch,
+  isViewSurfaceVisible,
+  moduleViewSurfaceId,
+  platformModuleReferenceProvider,
+  useEffectiveView,
+  usePlatformLanguage,
+  usePlatformModules,
+  useViewSurfaces,
+  type ApiSettings,
+  type AuthInfo,
+  type ReferenceOption
+} from "@govoplan/core-webui";
 import { getNotificationPreferences, updateNotificationPreferences, type NotificationPreferences } from "../../api/notifications";

 type Draft = Pick<NotificationPreferences, "show_unread_badge" | "email_enabled" | "email_digest_enabled"> & {
-  muted_source_modules_text: string;
+  muted_source_modules: string[];
 };

 const DEFAULT_DRAFT: Draft = {
  show_unread_badge: true,
  email_enabled: false,
  email_digest_enabled: false,
-  muted_source_modules_text: ""
+  muted_source_modules: []
 };

 export default function NotificationSettingsPanel({ settings, auth }: { settings: ApiSettings; auth: AuthInfo }) {
+  const modules = usePlatformModules();
+  const effectiveView = useEffectiveView();
+  const viewSurfaces = useViewSurfaces();
+  const { translateText } = usePlatformLanguage();
  const [loaded, setLoaded] = useState<NotificationPreferences | null>(null);
  const [draft, setDraft] = useState<Draft>(DEFAULT_DRAFT);
  const [loading, setLoading] = useState(true);
@@ -28,9 +49,40 @@ export default function NotificationSettingsPanel({ settings, auth }: { settings
      draft.show_unread_badge !== loaded.show_unread_badge ||
      draft.email_enabled !== loaded.email_enabled ||
      draft.email_digest_enabled !== loaded.email_digest_enabled ||
-      normalizeMutedModules(draft.muted_source_modules_text).join(",") !== loaded.muted_source_modules.join(",")
+      draft.muted_source_modules.join(",") !== loaded.muted_source_modules.join(",")
    );
  }, [draft, loaded]);
+  const moduleOptions = useMemo<ReferenceOption[]>(
+    () => modules.map((module) => {
+      const visible = isViewSurfaceVisible(
+        effectiveView,
+        moduleViewSurfaceId(module.id),
+        viewSurfaces
+      );
+      return {
+        value: module.id,
+        label: translateText(module.label),
+        description: [
+          module.id,
+          `version ${module.version}`,
+          visible ? null : "Hidden by the active view"
+        ].filter(Boolean).join(" · "),
+        kind: "module",
+        availability: visible ? "available" : "unavailable",
+        disabled: !visible,
+        sourceModule: "core",
+        provenance: {
+          version: module.version,
+          visibleInActiveView: visible
+        }
+      };
+    }),
+    [effectiveView, modules, translateText, viewSurfaces]
+  );
+  const moduleProvider = useMemo(
+    () => platformModuleReferenceProvider(settings, moduleOptions),
+    [moduleOptions, settings]
+  );

  useEffect(() => {
    void loadPreferences();
@@ -46,7 +98,7 @@ export default function NotificationSettingsPanel({ settings, auth }: { settings
        show_unread_badge: preferences.show_unread_badge,
        email_enabled: preferences.email_enabled,
        email_digest_enabled: preferences.email_digest_enabled,
-        muted_source_modules_text: preferences.muted_source_modules.join(", ")
+        muted_source_modules: preferences.muted_source_modules
      });
    } catch (error) {
      setMessageTone("warning");
@@ -64,14 +116,14 @@ export default function NotificationSettingsPanel({ settings, auth }: { settings
        show_unread_badge: draft.show_unread_badge,
        email_enabled: draft.email_enabled,
        email_digest_enabled: draft.email_digest_enabled,
-        muted_source_modules: normalizeMutedModules(draft.muted_source_modules_text)
+        muted_source_modules: draft.muted_source_modules
      });
      setLoaded(next);
      setDraft({
        show_unread_badge: next.show_unread_badge,
        email_enabled: next.email_enabled,
        email_digest_enabled: next.email_digest_enabled,
-        muted_source_modules_text: next.muted_source_modules.join(", ")
+        muted_source_modules: next.muted_source_modules
      });
      window.dispatchEvent(new CustomEvent("govoplan:notifications-changed"));
      setMessageTone("success");
@@ -95,11 +147,16 @@ export default function NotificationSettingsPanel({ settings, auth }: { settings
            disabled={loading}
            onChange={(value) => setDraft((current) => ({ ...current, show_unread_badge: value }))}
          />
-          <FormField label="Muted source modules" help="Comma-separated module IDs. Filtering will be applied by later delivery rules.">
-            <input
-              value={draft.muted_source_modules_text}
-              onChange={(event) => setDraft((current) => ({ ...current, muted_source_modules_text: event.target.value }))}
-              placeholder="calendar, campaign"
+          <FormField label="Muted source modules" help="Choose active modules. Saved modules hidden by the current view remain visible here and are not discarded.">
+            <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}
            />
          </FormField>
@@ -136,15 +193,3 @@ export default function NotificationSettingsPanel({ settings, auth }: { settings
    </div>
  );
 }
-
-function normalizeMutedModules(value: string): string[] {
-  const seen = new Set<string>();
-  return value
-    .split(",")
-    .map((item) => item.trim().toLowerCase())
-    .filter((item) => {
-      if (!item || seen.has(item)) return false;
-      seen.add(item);
-      return true;
-    });
-}
--- a/webui/src/features/notifications/NotificationSummaryWidget.tsx
+++ b/webui/src/features/notifications/NotificationSummaryWidget.tsx
@@ -0,0 +1,73 @@
+import { Link } from "react-router-dom";
+import {
+  DismissibleAlert,
+  LoadingFrame,
+  MetricCard,
+  adminErrorMessage,
+  type ApiSettings,
+  type DashboardWidgetConfiguration,
+  useSharedNotificationSummary
+} from "@govoplan/core-webui";
+
+export default function NotificationSummaryWidget({
+  settings,
+  refreshKey,
+  configuration,
+  showCenterLink
+}: {
+  settings: ApiSettings;
+  refreshKey: number;
+  configuration: DashboardWidgetConfiguration;
+  showCenterLink: boolean;
+}) {
+  const showDeliveryState = configuration.showDeliveryState !== false;
+  const state = useSharedNotificationSummary(settings, {
+    enabled: true,
+    scopeKey: "current-session",
+    intervalMs: 30_000,
+    refreshKey
+  });
+  const summary = state.summary;
+  const error = state.error ? adminErrorMessage(state.error) : "";
+
+  return (
+    <LoadingFrame loading={state.loading} label="Loading notification summary">
+      {error && (
+        <DismissibleAlert tone="warning" resetKey={error}>
+          {error}
+        </DismissibleAlert>
+      )}
+      <div className="metric-grid inside dashboard-widget-metrics">
+        <MetricCard
+          label="Unread"
+          value={summary?.unread ?? 0}
+          tone={summary?.unread ? "info" : "good"}
+          detail={`${summary?.total ?? 0} total`}
+        />
+        {showDeliveryState && (
+          <MetricCard
+            label="Pending"
+            value={summary?.pending ?? 0}
+            tone={summary?.pending ? "warning" : "good"}
+            detail="Awaiting delivery"
+          />
+        )}
+        {showDeliveryState && (
+          <MetricCard
+            label="Failed"
+            value={summary?.failed ?? 0}
+            tone={summary?.failed ? "danger" : "good"}
+            detail="Delivery failures"
+          />
+        )}
+      </div>
+      {showCenterLink && (
+        <div className="notifications-widget-actions">
+          <Link className="btn btn-secondary" to="/notifications">
+            Open notification center
+          </Link>
+        </div>
+      )}
+    </LoadingFrame>
+  );
+}
--- a/webui/src/module.ts
+++ b/webui/src/module.ts
@@ -1,5 +1,10 @@
 import { createElement, lazy } from "react";
-import type { PlatformWebModule, SettingsSectionsUiCapability } from "@govoplan/core-webui";
+import type {
+  DashboardWidgetsUiCapability,
+  PlatformWebModule,
+  SettingsSectionsUiCapability
+} from "@govoplan/core-webui";
+import NotificationSummaryWidget from "./features/notifications/NotificationSummaryWidget";
 import { generatedTranslations } from "./i18n/generatedTranslations";
 import "./styles/notifications.css";

@@ -8,6 +13,47 @@ const NotificationSettingsPanel = lazy(() => import("./features/notifications/No

 const notificationRead = ["notifications:notification:read"];

+const notificationDashboardWidgets: DashboardWidgetsUiCapability = {
+  widgets: [
+    {
+      id: "notifications.summary",
+      surfaceId: "notifications.widget.summary",
+      title: "Notifications",
+      description: "Unread notifications and delivery state.",
+      moduleId: "notifications",
+      category: "Communication",
+      order: 60,
+      defaultSize: "medium",
+      supportedSizes: ["medium", "wide"],
+      anyOf: notificationRead,
+      refreshIntervalMs: 30_000,
+      defaultConfiguration: {
+        showDeliveryState: true
+      },
+      configurationFields: [
+        {
+          id: "showDeliveryState",
+          label: "Show delivery state",
+          description: "Include pending and failed delivery counts.",
+          kind: "boolean"
+        }
+      ],
+      render: ({ settings, effectiveView, refreshKey, configuration }) =>
+        createElement(NotificationSummaryWidget, {
+          settings,
+          refreshKey,
+          configuration,
+          showCenterLink: (
+            !effectiveView?.activeViewId
+            || effectiveView.visibleSurfaceIds.includes(
+              "notifications.route.notifications"
+            )
+          )
+        })
+    }
+  ]
+};
+
 const notificationSettingsSections: SettingsSectionsUiCapability = {
  sections: [
    {
@@ -30,6 +76,13 @@ export const notificationsModule: PlatformWebModule = {
  optionalDependencies: ["mail", "tasks", "portal", "workflow", "calendar", "scheduling"],
  translations: generatedTranslations,
  viewSurfaces: [
+    {
+      id: "notifications.widget.summary",
+      moduleId: "notifications",
+      kind: "section",
+      label: "Notification summary widget",
+      order: 30
+    },
    {
      id: "notifications.settings.preferences",
      moduleId: "notifications",
@@ -42,7 +95,8 @@ export const notificationsModule: PlatformWebModule = {
    { path: "/notifications", anyOf: notificationRead, order: 59, render: ({ settings, auth }) => createElement(NotificationCenterPage, { settings, auth }) }
  ],
  uiCapabilities: {
-    "settings.sections": notificationSettingsSections
+    "settings.sections": notificationSettingsSections,
+    "dashboard.widgets": notificationDashboardWidgets
  }
 };

--- a/webui/src/styles/notifications.css
+++ b/webui/src/styles/notifications.css
@@ -13,6 +13,12 @@
  box-sizing: border-box;
 }

+.notifications-widget-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 14px;
+}
+
 .notifications-shell {
  height: 100%;
  min-height: 0;