feat(web): notification settings, and sign-out stops this browser's push
Users had no way to turn on push for a browser, set quiet hours or opt out of nudges. Settings gains a compact Notifications section: a switch for push on this device (only where web push works: a secure context outside the desktop app), quiet hours with from/to times (22:00-07:00 when first turned on) and a switch for nudges. Changes save in order as they are made. A browser that blocked notifications says so instead of offering a dead switch. Logging out unregisters the browser first, so a shared computer stops receiving the account's pushes. The E2E stubs the Push API (headless Chromium has no push service), walks all three controls, checks they survive a reload and captures the notification-settings screenshot. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MRtGG9ARfqqhma3t85Ro2u
This commit is contained in:
Claude
parent
d63f7b3bf1
commit
7185dcdd3c
@ -242,6 +242,7 @@ export async function openUserSettings(
|
||||
| "memory"
|
||||
| "profile"
|
||||
| "voice"
|
||||
| "notifications"
|
||||
| "usage"
|
||||
| "computer"
|
||||
| "updates",
|
||||
|
||||
112
apps/web/e2e/notification-settings.spec.ts
Normal file
112
apps/web/e2e/notification-settings.spec.ts
Normal file
@ -0,0 +1,112 @@
|
||||
/**
|
||||
* E2E: Settings → Notifications turns push on for this browser (the Push API is stubbed: headless
|
||||
* Chromium has no push service), sets quiet hours and switches nudges off; all of it survives a
|
||||
* reload.
|
||||
*/
|
||||
import { expect, type Page, test } from "@playwright/test";
|
||||
import { captureScreenshot, completeOnboarding, openUserSettings, rpc, signup } from "./helpers";
|
||||
|
||||
const ENDPOINT = "https://push.example.test/e2e-device";
|
||||
|
||||
/** A fake service worker registration whose push subscription lives in sessionStorage. */
|
||||
async function stubPushApi(page: Page, endpoint: string) {
|
||||
await page.addInitScript((pushEndpoint) => {
|
||||
const storageKey = "e2e:push-subscription";
|
||||
const current = () => {
|
||||
const stored = sessionStorage.getItem(storageKey);
|
||||
if (!stored) return null;
|
||||
const saved = JSON.parse(stored) as { serverKey: number[] };
|
||||
return {
|
||||
endpoint: pushEndpoint,
|
||||
options: { applicationServerKey: new Uint8Array(saved.serverKey).buffer },
|
||||
toJSON: () => ({
|
||||
endpoint: pushEndpoint,
|
||||
keys: { p256dh: `B${"A".repeat(86)}`, auth: "A".repeat(22) },
|
||||
}),
|
||||
unsubscribe: async () => {
|
||||
sessionStorage.removeItem(storageKey);
|
||||
return true;
|
||||
},
|
||||
};
|
||||
};
|
||||
const registration = {
|
||||
scope: `${location.origin}/`,
|
||||
pushManager: {
|
||||
getSubscription: async () => current(),
|
||||
subscribe: async (options: { applicationServerKey: Uint8Array }) => {
|
||||
sessionStorage.setItem(
|
||||
storageKey,
|
||||
JSON.stringify({ serverKey: [...new Uint8Array(options.applicationServerKey)] }),
|
||||
);
|
||||
return current();
|
||||
},
|
||||
},
|
||||
};
|
||||
Object.defineProperty(navigator, "serviceWorker", {
|
||||
configurable: true,
|
||||
value: {
|
||||
register: async () => registration,
|
||||
getRegistration: async () => registration,
|
||||
ready: Promise.resolve(registration),
|
||||
},
|
||||
});
|
||||
if (!("PushManager" in window)) {
|
||||
Object.defineProperty(window, "PushManager", { configurable: true, value: class {} });
|
||||
}
|
||||
}, endpoint);
|
||||
}
|
||||
|
||||
test("notification settings: push on this device, quiet hours and nudges", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
await page.context().grantPermissions(["notifications"]);
|
||||
await stubPushApi(page, ENDPOINT);
|
||||
await signup(page, `notifications-${Date.now()}@rakazo.test`, "password12", "Push Tester");
|
||||
await completeOnboarding(page);
|
||||
|
||||
let settings = await openUserSettings(page, "notifications");
|
||||
const panel = settings.getByTestId("notification-settings");
|
||||
const push = panel.getByTestId("notification-push-switch");
|
||||
await expect(push).not.toBeChecked();
|
||||
|
||||
const subscribed = page.waitForRequest("**/rpc/notifications/webPush/subscribe");
|
||||
await push.click();
|
||||
expect((await subscribed).postDataJSON()).toMatchObject({ json: { endpoint: ENDPOINT } });
|
||||
await expect(push).toBeChecked();
|
||||
|
||||
const quiet = panel.getByTestId("notification-quiet-hours-switch");
|
||||
await expect(quiet).not.toBeChecked();
|
||||
await quiet.click();
|
||||
await expect(quiet).toBeChecked();
|
||||
const start = panel.getByTestId("notification-quiet-hours-start");
|
||||
await expect(start).toHaveValue("22:00");
|
||||
await expect(panel.getByTestId("notification-quiet-hours-end")).toHaveValue("07:00");
|
||||
const saved = page.waitForResponse(
|
||||
(response) =>
|
||||
response.url().includes("/rpc/notifications/settings/update") &&
|
||||
response.request().postData()?.includes("23:30") === true,
|
||||
);
|
||||
await start.fill("23:30");
|
||||
await saved;
|
||||
|
||||
const nudges = panel.getByTestId("notification-nudges-switch");
|
||||
await expect(nudges).toBeChecked();
|
||||
await nudges.click();
|
||||
await expect(nudges).not.toBeChecked();
|
||||
await expect
|
||||
.poll(() => rpc<{ nudges: boolean }>(page, "notifications/settings/get", null))
|
||||
.toMatchObject({ nudges: false, quietHours: { start: "23:30", end: "07:00" } });
|
||||
|
||||
await captureScreenshot(page, testInfo, "notification-settings");
|
||||
|
||||
await page.reload();
|
||||
settings = await openUserSettings(page, "notifications");
|
||||
await expect(settings.getByTestId("notification-push-switch")).toBeChecked();
|
||||
await expect(settings.getByTestId("notification-quiet-hours-start")).toHaveValue("23:30");
|
||||
await expect(settings.getByTestId("notification-nudges-switch")).not.toBeChecked();
|
||||
|
||||
const unsubscribed = page.waitForRequest("**/rpc/notifications/webPush/unsubscribe");
|
||||
await settings.getByTestId("notification-push-switch").click();
|
||||
expect((await unsubscribed).postDataJSON()).toMatchObject({ json: { endpoint: ENDPOINT } });
|
||||
await expect(settings.getByTestId("notification-push-switch")).not.toBeChecked();
|
||||
});
|
||||
197
apps/web/src/components/NotificationSettingsPanel.tsx
Normal file
197
apps/web/src/components/NotificationSettingsPanel.tsx
Normal file
@ -0,0 +1,197 @@
|
||||
import { Trans, useLingui } from "@lingui/react/macro";
|
||||
import type { NotificationSettings, NotificationSettingsPatch } from "@rakazo/contracts";
|
||||
import { Input, Switch } from "@rakazo/ui-web";
|
||||
import type { ReactNode } from "react";
|
||||
import { useEffect, useId, useRef, useState } from "react";
|
||||
import { rpc } from "../lib/rpc";
|
||||
import { disableWebPush, enableWebPush, webPushEnabled, webPushSupported } from "../lib/web-push";
|
||||
|
||||
const DEFAULT_QUIET_HOURS = { start: "22:00", end: "07:00" };
|
||||
const CLOCK_TIME = /^([01]\d|2[0-3]):[0-5]\d$/;
|
||||
|
||||
type PushState = "loading" | "on" | "off" | "blocked";
|
||||
|
||||
function SettingRow({
|
||||
label,
|
||||
testId,
|
||||
checked,
|
||||
disabled,
|
||||
onCheckedChange,
|
||||
children,
|
||||
}: {
|
||||
label: ReactNode;
|
||||
testId: string;
|
||||
checked: boolean;
|
||||
disabled?: boolean;
|
||||
onCheckedChange: (checked: boolean) => void;
|
||||
children?: ReactNode;
|
||||
}) {
|
||||
const labelId = useId();
|
||||
return (
|
||||
<li className="py-3 first:pt-0 last:pb-0">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span id={labelId} className="text-ui-body text-foreground">
|
||||
{label}
|
||||
</span>
|
||||
<Switch
|
||||
data-testid={testId}
|
||||
aria-labelledby={labelId}
|
||||
checked={checked}
|
||||
disabled={disabled}
|
||||
onCheckedChange={onCheckedChange}
|
||||
/>
|
||||
</div>
|
||||
{children}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
/** Push on this browser, quiet hours and nudges. Quiet hours and nudges apply to every device. */
|
||||
export function NotificationSettingsPanel() {
|
||||
const { t } = useLingui();
|
||||
const pushSupported = webPushSupported();
|
||||
const [settings, setSettings] = useState<NotificationSettings | null>(null);
|
||||
const [push, setPush] = useState<PushState>("loading");
|
||||
const [pushBusy, setPushBusy] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [quietDraft, setQuietDraft] = useState(DEFAULT_QUIET_HOURS);
|
||||
const saves = useRef(Promise.resolve());
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
rpc.notifications.settings
|
||||
.get()
|
||||
.then((next) => {
|
||||
if (cancelled) return;
|
||||
setSettings(next);
|
||||
if (next.quietHours) setQuietDraft(next.quietHours);
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) setError(t`Couldn't load`);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [t]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!pushSupported) return;
|
||||
let cancelled = false;
|
||||
void webPushEnabled().then((enabled) => {
|
||||
if (cancelled) return;
|
||||
setPush(enabled ? "on" : Notification.permission === "denied" ? "blocked" : "off");
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [pushSupported]);
|
||||
|
||||
/** Saves in order, so the last change the user made is the one that sticks. */
|
||||
function save(patch: NotificationSettingsPatch) {
|
||||
setError(null);
|
||||
setSettings((current) => (current ? { ...current, ...patch } : current));
|
||||
saves.current = saves.current.then(async () => {
|
||||
try {
|
||||
setSettings(await rpc.notifications.settings.update(patch));
|
||||
} catch {
|
||||
setError(t`Couldn't save`);
|
||||
setSettings(await rpc.notifications.settings.get().catch(() => null));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function changePush(next: boolean) {
|
||||
setPushBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
if (!next) {
|
||||
await disableWebPush();
|
||||
setPush("off");
|
||||
return;
|
||||
}
|
||||
const result = await enableWebPush();
|
||||
if (result === "enabled") setPush("on");
|
||||
else if (result === "denied") setPush("blocked");
|
||||
else setError(t`Couldn't save`);
|
||||
} catch {
|
||||
setError(t`Couldn't save`);
|
||||
} finally {
|
||||
setPushBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
function changeQuietTime(field: "start" | "end", value: string) {
|
||||
const next = { ...quietDraft, [field]: value };
|
||||
setQuietDraft(next);
|
||||
if (CLOCK_TIME.test(next.start) && CLOCK_TIME.test(next.end) && next.start !== next.end) {
|
||||
save({ quietHours: next });
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div data-testid="notification-settings" className="space-y-5">
|
||||
{error ? (
|
||||
<p role="alert" className="text-ui-body-sm text-destructive">
|
||||
{error}
|
||||
</p>
|
||||
) : null}
|
||||
{settings ? (
|
||||
<section className="rounded-xl border border-border px-4 py-4">
|
||||
<ul className="divide-y divide-border">
|
||||
{pushSupported ? (
|
||||
<SettingRow
|
||||
label={<Trans>Push on this device</Trans>}
|
||||
testId="notification-push-switch"
|
||||
checked={push === "on"}
|
||||
disabled={push === "loading" || push === "blocked" || pushBusy}
|
||||
onCheckedChange={(next) => void changePush(next)}
|
||||
>
|
||||
{push === "blocked" ? (
|
||||
<p className="mt-1 text-ui-body-sm text-muted-foreground">
|
||||
<Trans>Blocked in your browser settings</Trans>
|
||||
</p>
|
||||
) : null}
|
||||
</SettingRow>
|
||||
) : null}
|
||||
<SettingRow
|
||||
label={<Trans>Quiet hours</Trans>}
|
||||
testId="notification-quiet-hours-switch"
|
||||
checked={settings.quietHours !== null}
|
||||
onCheckedChange={(next) => save({ quietHours: next ? quietDraft : null })}
|
||||
>
|
||||
{settings.quietHours ? (
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
<Input
|
||||
type="time"
|
||||
data-testid="notification-quiet-hours-start"
|
||||
aria-label={t`Quiet hours start`}
|
||||
value={quietDraft.start}
|
||||
onChange={(event) => changeQuietTime("start", event.target.value)}
|
||||
className="w-32"
|
||||
/>
|
||||
<span aria-hidden="true" className="text-muted-foreground">
|
||||
–
|
||||
</span>
|
||||
<Input
|
||||
type="time"
|
||||
data-testid="notification-quiet-hours-end"
|
||||
aria-label={t`Quiet hours end`}
|
||||
value={quietDraft.end}
|
||||
onChange={(event) => changeQuietTime("end", event.target.value)}
|
||||
className="w-32"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</SettingRow>
|
||||
<SettingRow
|
||||
label={<Trans>Nudges from your Oo</Trans>}
|
||||
testId="notification-nudges-switch"
|
||||
checked={settings.nudges}
|
||||
onCheckedChange={(next) => save({ nudges: next })}
|
||||
/>
|
||||
</ul>
|
||||
</section>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -2,6 +2,7 @@ import { useLingui } from "@lingui/react/macro";
|
||||
import type { AvatarStyle, SpaceMemoryConfig } from "@rakazo/contracts";
|
||||
import { Button, Dialog, DialogClose, DialogContent, DialogTitle } from "@rakazo/ui-web";
|
||||
import {
|
||||
Bell,
|
||||
Brain,
|
||||
CloudDownload,
|
||||
Cpu,
|
||||
@ -16,6 +17,7 @@ import {
|
||||
} from "lucide-react";
|
||||
import { type ComponentType, useEffect, useRef, useState } from "react";
|
||||
import { computersAreUnavailable } from "../components/ComputersUnavailableHint";
|
||||
import { NotificationSettingsPanel } from "../components/NotificationSettingsPanel";
|
||||
import { UserProfileSettings } from "../components/UserProfileSettings";
|
||||
import type { TradingBotUiState } from "../lib/trading-bot-status";
|
||||
import {
|
||||
@ -37,6 +39,7 @@ export type SettingsSection =
|
||||
| "memory"
|
||||
| "profile"
|
||||
| "voice"
|
||||
| "notifications"
|
||||
| "usage"
|
||||
| "computer"
|
||||
| "updates"
|
||||
@ -111,6 +114,7 @@ export function SettingsOverlay({
|
||||
{ id: "memory", label: t`Memory`, icon: Brain },
|
||||
{ id: "profile", label: t`About you`, icon: UserRound },
|
||||
{ id: "voice", label: t`Voice`, icon: Volume2 },
|
||||
{ id: "notifications", label: t`Notifications`, icon: Bell },
|
||||
{ id: "usage", label: t`Usage`, icon: Gauge },
|
||||
...(showComputer ? [{ id: "computer" as const, label: t`Computer`, icon: Monitor }] : []),
|
||||
{ id: "updates", label: t`Updates`, icon: CloudDownload },
|
||||
@ -250,6 +254,7 @@ export function SettingsOverlay({
|
||||
/>
|
||||
) : null}
|
||||
{section === "profile" ? <UserProfileSettings /> : null}
|
||||
{section === "notifications" ? <NotificationSettingsPanel /> : null}
|
||||
{section === "usage" ? (
|
||||
<UsageSettingsPanel usage={usage} panelRef={usageRef} />
|
||||
) : null}
|
||||
|
||||
@ -247,6 +247,7 @@ import {
|
||||
transcriptMovedDown,
|
||||
} from "../lib/transcript-scroll";
|
||||
import { speaker } from "../lib/tts";
|
||||
import { disableWebPush } from "../lib/web-push";
|
||||
import { ActivityList } from "./ActivityList";
|
||||
import type { ContextMenuPosition } from "./BotContextMenu";
|
||||
import { CreateGroupForm, GroupSettings, memberName } from "./GroupPanel";
|
||||
@ -4296,10 +4297,14 @@ export function ShellPage() {
|
||||
variant="ghost"
|
||||
className="w-full justify-start font-normal"
|
||||
onClick={() =>
|
||||
void authClient.signOut().then(() => {
|
||||
clearSpaceSelection();
|
||||
navigate("/");
|
||||
})
|
||||
// This browser stops receiving the account's pushes once it signs out.
|
||||
void disableWebPush()
|
||||
.catch(() => undefined)
|
||||
.then(() => authClient.signOut())
|
||||
.then(() => {
|
||||
clearSpaceSelection();
|
||||
navigate("/");
|
||||
})
|
||||
}
|
||||
>
|
||||
<LogOut className="text-muted-foreground" strokeWidth={1.75} />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user