Added a guest haptics preference and surfaced it in both the settings sheet and /settings, with safe device detection

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

resources/js/guest/pages/GalleryPage.tsx

@@ -18,6 +18,7 @@ import { useEventBranding } from '../context/EventBrandingContext';
 import ShareSheet from '../components/ShareSheet';
 import { FADE_SCALE, FADE_UP, STAGGER_FAST, getMotionContainerProps, getMotionItemProps, prefersReducedMotion } from '../lib/motion';
 import PullToRefresh from '../components/PullToRefresh';
+import { triggerHaptic } from '../lib/haptics';
 
 const allGalleryFilters: GalleryFilter[] = ['latest', 'popular', 'mine', 'photobooth'];
 type GalleryPhoto = {
@@ -182,6 +183,7 @@ export default function GalleryPage() {
     try {
       const c = await likePhoto(id);
       setCounts((m) => ({ ...m, [id]: c }));
+      triggerHaptic('selection');
       // keep a simple record of liked items
       try {
         const raw = localStorage.getItem('liked-photo-ids');

resources/js/guest/pages/PhotoLightbox.tsx

@@ -11,6 +11,7 @@ import { useToast } from '../components/ToastHost';
 import ShareSheet from '../components/ShareSheet';
 import { useEventBranding } from '../context/EventBrandingContext';
 import { getDeviceId } from '../lib/device';
+import { triggerHaptic } from '../lib/haptics';
 
 type Photo = {
   id: number;
@@ -215,6 +216,7 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
     try {
       const count = await likePhoto(photo.id);
       setLikes(count);
+      triggerHaptic('selection');
       // Update localStorage
       try {
         const raw = localStorage.getItem('liked-photo-ids');

resources/js/guest/pages/SettingsPage.tsx

@@ -1,12 +1,44 @@
 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 style={{ fontSize: 14 }}>{t('settings.subtitle')}</p>
+      <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>
   );
 }

resources/js/guest/pages/TaskPickerPage.tsx

@@ -20,6 +20,7 @@ import {
 import { getDeviceId } from '../lib/device';
 import { FADE_SCALE, FADE_UP, STAGGER_FAST, getMotionContainerProps, getMotionItemProps, prefersReducedMotion } from '../lib/motion';
 import PullToRefresh from '../components/PullToRefresh';
+import { triggerHaptic } from '../lib/haptics';
 
 interface Task {
   id: number;
@@ -226,10 +227,12 @@ export default function TaskPickerPage() {
 
   const handleNewTask = React.useCallback(() => {
     selectRandomTask(filteredTasks);
+    triggerHaptic('selection');
   }, [filteredTasks, selectRandomTask]);
 
   const handleStartUpload = () => {
     if (!currentTask || !eventKey) return;
+    triggerHaptic('light');
     navigate(`/e/${encodeURIComponent(eventKey)}/upload?task=${currentTask.id}&emotion=${currentTask.emotion?.slug || ''}`);
   };
 
@@ -240,6 +243,7 @@ export default function TaskPickerPage() {
 
   const handleSelectTask = React.useCallback((task: Task) => {
     setCurrentTask(task);
+    triggerHaptic('selection');
   }, []);
 
   const handleRetryFetch = () => {