Skip to content

make the notifications setting a choice between on and off, as the theme is #289

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hkonsti merged 1 commit into from
Nov 11, 2026
Merged

make the notifications setting a choice between on and off, as the theme is #289

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 13 additions & 8 deletions packages/web/src/components/notification-setting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {useState} from 'react';
import {BellIcon, BellOffIcon} from 'lucide-react';
import {PillButton} from '@proxy/ui/components/pill-button';
import {
notificationsBlocked,
Expand All @@ -7,9 +8,9 @@ import {
turnNotificationsOn,
} from '@/lib/notifications';

// Notifications of what the agents say while the person is elsewhere, on this device: on or off,
// with the button that turns them the other way; where the browser has refused the page its
// leave, the way to change that is the browser's own.
// Notifications of what the agents say while the person is elsewhere, on this device: one button
// for on and one for off, the one in use pressed, as the theme picker looks; where the browser has
// refused the page its leave, the way to change that is the browser's own.
export function NotificationSetting() {
const [on, setOn] = useState(notificationsOn);
const [blocked, setBlocked] = useState(notificationsBlocked);
Expand All @@ -30,11 +31,15 @@ export function NotificationSetting() {
}

return (
<span className="flex items-center gap-3">
<span>{on ? 'On' : 'Off'}</span>
<PillButton variant="ghost" onClick={on ? turnOff : () => void turnOn()}>
{on ? 'Turn off' : 'Turn on'}
<div role="group" aria-label="Notifications" className="flex items-center gap-2">
<PillButton variant="ghost" aria-pressed={on} onClick={() => void turnOn()}>
<BellIcon data-icon="inline-start" />
On
</PillButton>
</span>
<PillButton variant="ghost" aria-pressed={!on} onClick={turnOff}>
<BellOffIcon data-icon="inline-start" />
Off
</PillButton>
</div>
);
}
Loading