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

Migrate Notifications interface patterns

Browse Source
This commit is contained in:
zemion
2026-08-03 15:33:49 +02:00
parent 3b1a87b3e2
commit ad6a31f68b
13 changed files with 825 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/features/notifications/NotificationSettingsPanel.tsx
+102 -25
View File
@@ -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>