380 lines
12 KiB
TypeScript
380 lines
12 KiB
TypeScript
/**
|
|
* SettingsSheet — master notifications toggle (D-09).
|
|
*
|
|
* A bottom sheet opened by tapping the user avatar in AppNav.
|
|
* Contains a single master on/off toggle for all FamilySync push notifications.
|
|
*
|
|
* UI-SPEC §Surface 2:
|
|
* - Bottom sheet, role="dialog", aria-modal, zIndex 301 (backdrop 300)
|
|
* - Heading "Settings" + X close button
|
|
* - Section label "Notifications" (uppercase, muted)
|
|
* - Bell icon + toggle row
|
|
* - Permission-denied hint when Notification.permission === 'denied'
|
|
*
|
|
* Toggle behavior:
|
|
* on → off: DELETE subscription + localStorage.notificationsEnabled='0'
|
|
* off → on (permission granted): silently subscribe (no OS dialog)
|
|
* off → on (permission default): triggers tap-gated subscribe() (OS dialog)
|
|
* off → on (permission denied): no-op, shows permission-denied hint inline
|
|
*
|
|
* Accessibility: role="switch", aria-checked, 44px touch targets, Escape closes.
|
|
* Security: T-05-24 — all copy is plain-text JSX children, no dangerouslySetInnerHTML.
|
|
*/
|
|
|
|
import { useEffect, useRef, useState } from 'react'
|
|
import { X, Bell, AlertCircle, Loader2 } from 'lucide-react'
|
|
import { usePushSubscription } from '../hooks/usePushSubscription.js'
|
|
|
|
// CR-04: fetch VAPID key (from sessionStorage cache if available) for the
|
|
// tap-gated subscribe() path. Same logic as PushPermissionPrompt.
|
|
async function fetchVapidKeyForSettings(): Promise<string | null> {
|
|
try {
|
|
const cached = sessionStorage.getItem('vapidPublicKey')
|
|
if (cached) return cached
|
|
const res = await fetch('/api/push/vapid-public-key', { credentials: 'include' })
|
|
if (!res.ok) return null
|
|
const data = (await res.json()) as { publicKey: string }
|
|
if (data.publicKey) {
|
|
sessionStorage.setItem('vapidPublicKey', data.publicKey)
|
|
}
|
|
return data.publicKey ?? null
|
|
} catch {
|
|
return null
|
|
}
|
|
}
|
|
|
|
interface SettingsSheetProps {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
}
|
|
|
|
export function SettingsSheet({ isOpen, onClose }: SettingsSheetProps) {
|
|
const { subscribe, permission, isSubscribed, setEnabled } = usePushSubscription()
|
|
const [isTogglingOn, setIsTogglingOn] = useState(false)
|
|
// CR-04: pre-fetch the VAPID key into state so the toggle tap handler can call
|
|
// subscribe(registration, vapidKey) without any network await before pushManager.subscribe().
|
|
const [vapidKey, setVapidKey] = useState<string | null>(null)
|
|
const closeButtonRef = useRef<HTMLButtonElement>(null)
|
|
|
|
// Compute initial toggle on/off state per UI-SPEC toggle initial state rule:
|
|
// on when notificationsEnabled !== '0' AND permission === 'granted' AND isSubscribed
|
|
const isOn = permission === 'granted' && isSubscribed
|
|
|
|
// Escape key listener (CreateListSheet pattern)
|
|
useEffect(() => {
|
|
if (!isOpen) return
|
|
const onKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') onClose()
|
|
}
|
|
document.addEventListener('keydown', onKeyDown)
|
|
return () => document.removeEventListener('keydown', onKeyDown)
|
|
}, [isOpen, onClose])
|
|
|
|
// Focus close button on open (a11y)
|
|
useEffect(() => {
|
|
if (isOpen && closeButtonRef.current) {
|
|
closeButtonRef.current.focus()
|
|
}
|
|
}, [isOpen])
|
|
|
|
// CR-04: Pre-fetch the VAPID key while the sheet is open so the OS-dialog path
|
|
// (permission === 'default') has the key ready before the user taps.
|
|
useEffect(() => {
|
|
if (!isOpen) return
|
|
if (permission === 'denied') return
|
|
void fetchVapidKeyForSettings().then((key) => {
|
|
if (key) setVapidKey(key)
|
|
})
|
|
}, [isOpen, permission])
|
|
|
|
if (!isOpen) return null
|
|
|
|
const handleToggle = async () => {
|
|
if (permission === 'denied') return // no-op — show hint below
|
|
|
|
if (isOn) {
|
|
// on → off: unsubscribe
|
|
await setEnabled(false)
|
|
} else if (permission === 'granted') {
|
|
// off → on, permission already granted: silent subscribe
|
|
setIsTogglingOn(true)
|
|
try {
|
|
await setEnabled(true)
|
|
} finally {
|
|
setIsTogglingOn(false)
|
|
}
|
|
} else {
|
|
// off → on, permission 'default': needs tap-gated subscribe with OS dialog
|
|
// The toggle click IS the tap gesture — call subscribe() directly here.
|
|
// CR-04: vapidKey was pre-fetched into state (useEffect above); pass it directly
|
|
// so there is no await-fetch between the tap and pushManager.subscribe().
|
|
if (!vapidKey) return // key not ready — this should be rare; button should show spinner
|
|
const resolvedVapidKey = vapidKey
|
|
setIsTogglingOn(true)
|
|
try {
|
|
const registration = await navigator.serviceWorker?.ready
|
|
if (registration) {
|
|
await subscribe(registration, resolvedVapidKey)
|
|
}
|
|
} catch {
|
|
// Permission denied by OS or error — permission state will update reactively
|
|
} finally {
|
|
setIsTogglingOn(false)
|
|
}
|
|
}
|
|
}
|
|
|
|
const isDisabled = permission === 'denied'
|
|
|
|
return (
|
|
<>
|
|
{/* Backdrop */}
|
|
<div
|
|
onClick={onClose}
|
|
aria-hidden="true"
|
|
style={{
|
|
position: 'fixed',
|
|
inset: 0,
|
|
background: 'var(--color-overlay, rgba(0,0,0,0.32))',
|
|
zIndex: 300,
|
|
}}
|
|
/>
|
|
|
|
{/* Sheet */}
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="Settings"
|
|
style={{
|
|
position: 'fixed',
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
background: 'var(--color-surface-raised, #ffffff)',
|
|
borderRadius: '12px 12px 0 0',
|
|
boxShadow: '0 -4px 24px rgba(0,0,0,0.15)',
|
|
padding: 'var(--space-6, 24px)',
|
|
zIndex: 301,
|
|
fontFamily: 'var(--font-family-base, system-ui, sans-serif)',
|
|
maxWidth: '480px',
|
|
margin: '0 auto',
|
|
}}
|
|
>
|
|
{/* Heading row */}
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
marginBottom: 'var(--space-6, 24px)',
|
|
}}
|
|
>
|
|
<h2
|
|
style={{
|
|
margin: 0,
|
|
fontSize: 'var(--text-heading-size, 18px)',
|
|
fontWeight: 600,
|
|
lineHeight: 'var(--text-heading-line-height, 1.25)',
|
|
color: 'var(--color-text-primary, #111318)',
|
|
}}
|
|
>
|
|
Settings
|
|
</h2>
|
|
<button
|
|
ref={closeButtonRef}
|
|
onClick={onClose}
|
|
aria-label="Close settings"
|
|
style={{
|
|
background: 'none',
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
minWidth: '44px',
|
|
minHeight: '44px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: 'var(--color-text-secondary, #5c6472)',
|
|
borderRadius: 'var(--space-1, 4px)',
|
|
}}
|
|
>
|
|
<X size={20} aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Section label */}
|
|
<div
|
|
style={{
|
|
fontSize: 'var(--text-label-size, 13px)',
|
|
fontWeight: 600,
|
|
color: 'var(--color-text-muted, #9CA3AF)',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: '0.06em',
|
|
marginBottom: 'var(--space-2, 8px)',
|
|
}}
|
|
>
|
|
Notifications
|
|
</div>
|
|
|
|
{/* Toggle row */}
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 'var(--space-3, 12px)',
|
|
padding: 'var(--space-2, 8px) 0',
|
|
}}
|
|
>
|
|
<Bell
|
|
size={20}
|
|
aria-hidden="true"
|
|
style={{
|
|
color: 'var(--color-text-secondary, #5c6472)',
|
|
flexShrink: 0,
|
|
}}
|
|
/>
|
|
|
|
{/* Label column */}
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<div
|
|
style={{
|
|
fontSize: 'var(--text-body-size, 15px)',
|
|
fontWeight: 400,
|
|
color: 'var(--color-text-primary, #111318)',
|
|
lineHeight: 1.4,
|
|
}}
|
|
>
|
|
FamilySync Notifications
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: 'var(--text-label-size, 13px)',
|
|
color: 'var(--color-text-secondary, #5c6472)',
|
|
lineHeight: 1.4,
|
|
marginTop: '2px',
|
|
}}
|
|
>
|
|
Reminders, event changes, list updates
|
|
</div>
|
|
</div>
|
|
|
|
{/* Toggle switch or spinner */}
|
|
{isTogglingOn ? (
|
|
<Loader2
|
|
size={20}
|
|
aria-hidden="true"
|
|
style={{
|
|
color: 'var(--color-text-secondary, #5c6472)',
|
|
animation: 'spin 1s linear infinite',
|
|
flexShrink: 0,
|
|
}}
|
|
/>
|
|
) : (
|
|
<button
|
|
role="switch"
|
|
aria-checked={isOn}
|
|
aria-label={isOn ? 'FamilySync Notifications, on' : 'FamilySync Notifications, off'}
|
|
onClick={() => { void handleToggle() }}
|
|
disabled={isDisabled}
|
|
style={{
|
|
// 44px touch target
|
|
minWidth: '44px',
|
|
minHeight: '44px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
background: 'none',
|
|
border: 'none',
|
|
cursor: isDisabled ? 'default' : 'pointer',
|
|
padding: 0,
|
|
flexShrink: 0,
|
|
opacity: isDisabled ? 0.5 : 1,
|
|
}}
|
|
>
|
|
{/* Toggle track */}
|
|
<div
|
|
style={{
|
|
width: '44px',
|
|
height: '24px',
|
|
borderRadius: '12px',
|
|
background: isOn
|
|
? 'var(--color-member-0, #4A90D9)'
|
|
: 'var(--color-border, #E2E4E9)',
|
|
position: 'relative',
|
|
transition: 'background 0.15s ease',
|
|
pointerEvents: 'none',
|
|
}}
|
|
>
|
|
{/* Toggle thumb */}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
top: '2px',
|
|
left: isOn ? '22px' : '2px',
|
|
width: '20px',
|
|
height: '20px',
|
|
borderRadius: '50%',
|
|
background: '#ffffff',
|
|
boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
|
|
transition: 'left 0.15s ease',
|
|
}}
|
|
/>
|
|
</div>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Permission-denied hint — only when OS permission === 'denied' */}
|
|
{permission === 'denied' && (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'flex-start',
|
|
gap: 'var(--space-2, 8px)',
|
|
marginTop: 'var(--space-2, 8px)',
|
|
padding: 'var(--space-3, 12px)',
|
|
background: 'var(--color-surface-dim, #F7F7F8)',
|
|
borderRadius: 'var(--space-1, 4px)',
|
|
}}
|
|
>
|
|
<AlertCircle
|
|
size={16}
|
|
aria-hidden="true"
|
|
style={{
|
|
color: 'var(--color-destructive, #DC2626)',
|
|
flexShrink: 0,
|
|
marginTop: '1px',
|
|
}}
|
|
/>
|
|
<div>
|
|
<span
|
|
style={{
|
|
fontSize: 'var(--text-label-size, 13px)',
|
|
color: 'var(--color-text-secondary, #5c6472)',
|
|
lineHeight: 1.4,
|
|
}}
|
|
>
|
|
Notifications are blocked in your browser settings.{' '}
|
|
</span>
|
|
<button
|
|
onClick={onClose}
|
|
style={{
|
|
background: 'none',
|
|
border: 'none',
|
|
padding: 0,
|
|
cursor: 'pointer',
|
|
fontSize: 'var(--text-label-size, 13px)',
|
|
color: 'var(--color-focus-ring, #4A90D9)',
|
|
textDecoration: 'underline',
|
|
fontFamily: 'inherit',
|
|
}}
|
|
>
|
|
How to enable
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|