fa5a1fa367
and a reduced‑motion guard. Haptics now honor the toggle and still fall back gracefully on iOS (switch disabled when
navigator.vibrate isn’t available).
What changed
- Haptics preference storage + gating: resources/js/guest/lib/haptics.ts
- Preference hook: resources/js/guest/hooks/useHapticsPreference.ts
- Settings UI toggle in sheet + page: resources/js/guest/components/settings-sheet.tsx, resources/js/guest/pages/
SettingsPage.tsx
- i18n labels: resources/js/guest/i18n/messages.ts
- Tests: resources/js/guest/lib/__tests__/haptics.test.ts
45 lines
1.8 KiB
TypeScript
45 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { Page } from './_util';
|
|
import { useTranslation } from '../i18n/useTranslation';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Switch } from '@/components/ui/switch';
|
|
import { useHapticsPreference } from '../hooks/useHapticsPreference';
|
|
import { triggerHaptic } from '../lib/haptics';
|
|
|
|
export default function SettingsPage() {
|
|
const { t } = useTranslation();
|
|
const { enabled: hapticsEnabled, setEnabled: setHapticsEnabled, supported: hapticsSupported } = useHapticsPreference();
|
|
return (
|
|
<Page title={t('settings.title')}>
|
|
<p className="text-sm text-muted-foreground">{t('settings.subtitle')}</p>
|
|
<div className="mt-4 space-y-4">
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle>{t('settings.haptics.title')}</CardTitle>
|
|
<CardDescription>{t('settings.haptics.description')}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<span className="text-sm font-medium">{t('settings.haptics.label')}</span>
|
|
<Switch
|
|
checked={hapticsEnabled}
|
|
onCheckedChange={(checked) => {
|
|
setHapticsEnabled(checked);
|
|
if (checked) {
|
|
triggerHaptic('selection');
|
|
}
|
|
}}
|
|
disabled={!hapticsSupported}
|
|
aria-label={t('settings.haptics.label')}
|
|
/>
|
|
</div>
|
|
{!hapticsSupported && (
|
|
<div className="text-xs text-muted-foreground">{t('settings.haptics.unsupported')}</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</Page>
|
|
);
|
|
}
|