GovOPlaN/govoplan-notifications
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

perf: add indexed notification summaries and widget

Browse Source
This commit is contained in:
zemion
2026-07-29 14:16:29 +02:00
parent 992d2ca533
commit e32ba3663b
9 changed files with 312 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/features/notifications/NotificationSettingsPanel.tsx
+69 -24
View File
@@ -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;
});
}
webui/src/features/notifications/NotificationSummaryWidget.tsx
+73
View File
@@ -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>
);
}