c89c1fd973
Adds a Notifications toggle in the draft sidebar (below Autodraft)
that uses the Browser Notification API to alert users when a pick is
made or when it's their turn, while the tab is not focused.
- New useDraftNotifications hook for state, permission, and localStorage
- New NotificationSettings component with Switch toggle
- Fires "It's your turn to pick!" when the next pick is the user's
- Fires "{Team} picked {Player}" for all other picks
- Gracefully hides toggle when Notification API is unavailable
https://claude.ai/code/session_0149MvVUYDY6pFUAV1fL4K69
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import { Switch } from "~/components/ui/switch";
|
|
import { Label } from "~/components/ui/label";
|
|
|
|
interface NotificationSettingsProps {
|
|
enabled: boolean;
|
|
onEnabledChange: (enabled: boolean) => void;
|
|
isSupported: boolean;
|
|
permissionState: NotificationPermission | "unsupported";
|
|
}
|
|
|
|
export function NotificationSettings({
|
|
enabled,
|
|
onEnabledChange,
|
|
isSupported,
|
|
permissionState,
|
|
}: NotificationSettingsProps) {
|
|
if (!isSupported) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="border-t pt-4 mt-4">
|
|
<div className="flex items-center justify-between">
|
|
<Label htmlFor="notifications-switch" className="text-sm font-semibold">
|
|
Notifications
|
|
</Label>
|
|
<Switch
|
|
id="notifications-switch"
|
|
checked={enabled}
|
|
onCheckedChange={onEnabledChange}
|
|
disabled={permissionState === "denied"}
|
|
/>
|
|
</div>
|
|
|
|
{permissionState === "denied" && (
|
|
<p className="text-xs text-muted-foreground mt-2">
|
|
Notifications blocked by browser. Update in browser settings to
|
|
enable.
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|