feat(mobile): haptic tick on PTT press/release and on reactions (#125)

utils/haptics.ts: tick('ptt-on' | 'ptt-off' | 'reaction') → 10/10/8 ms
navigator.vibrate, a no-op without the API (iOS), when the system prefers
reduced motion, or when the new Settings → Calls "Haptic Feedback" switch
(default on, only rendered where the API exists) is off. PTT is observed
once through pttActiveAtom so the keyboard, global-hotkey and on-screen
paths all tick; reactions tick where the reaction event is sent in the
room and thread timelines (quick bar, hover bar, sheet and emoji board
all funnel there).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA

src/app/features/room/RoomTimeline.tsx

@@ -91,6 +91,7 @@ import {
   reactionOrEditEvent,
 } from '../../utils/room';
 import { getLastEditDiff } from '../../utils/editDiff';
+import { tick } from '../../utils/haptics';
 import { GroupCandidate, GroupPlan, planMediaGroups } from '../../utils/mediaGroups';
 import { MediaGroupGrid, RegroupChip } from './message/MediaGroupGrid';
 import { Lightbox, toLightboxItems } from './MediaGallery';
@@ -478,6 +479,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   // Read positions are computed once in Room.tsx and provided via ReadPositionsContext
   // so both RoomTimeline and ThreadTimeline consume the same value (Gitea #38).
   const [hideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
+  const [hapticFeedback] = useSetting(settingsAtom, 'hapticFeedback');
   // [Gitea #137] Re-render after "Show separately" (the Set itself is module-level).
   const [, setSeparatedTick] = useState(0);
   const [hideNickAvatarEvents] = useSetting(settingsAtom, 'hideNickAvatarEvents');
@@ -1157,13 +1159,14 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       const rShortcode =
         shortcode ||
         (reactions.find(eventWithShortcode)?.getContent().shortcode as string | undefined);
+      tick('reaction', hapticFeedback);
       mx.sendEvent(
         room.roomId,
         MessageEvent.Reaction as any,
         getReactionContent(targetEventId, key, rShortcode),
       );
     },
-    [mx, room],
+    [mx, room, hapticFeedback],
   );
   const handleEdit = useCallback(
     (editEvtId?: string) => {

src/app/features/room/thread/ThreadTimeline.tsx

@@ -78,6 +78,7 @@ import { ImageViewer } from '../../../components/image-viewer';
 import * as css from './ThreadTimeline.css';
 import { inSameDay, minuteDifference } from '../../../utils/time';
 import { formatDayDivider } from '../../../utils/formatTimestamp';
+import { tick } from '../../../utils/haptics';
 import { createMentionElement, isEmptyEditor, moveCursor } from '../../../components/editor';
 import { useKeyDown } from '../../../hooks/useKeyDown';
 import { roomIdToReplyDraftAtomFamily } from '../../../state/room/roomInputDrafts';
@@ -266,6 +267,7 @@ export function ThreadTimeline({ room, thread, editor }: ThreadTimelineProps) {
   const [encUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
   const showUrlPreview = room.hasEncryptionStateEvent() ? encUrlPreview : urlPreview;
   const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [hapticFeedback] = useSetting(settingsAtom, 'hapticFeedback');
   const { navigateRoom } = useRoomNavigate();
   const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
 
@@ -573,6 +575,7 @@ export function ThreadTimeline({ room, thread, editor }: ThreadTimelineProps) {
       const rShortcode =
         shortcode ||
         (reactions.find(eventWithShortcode)?.getContent().shortcode as string | undefined);
+      tick('reaction', hapticFeedback);
       mx.sendEvent(
         room.roomId,
         // A reaction on the root is a main-timeline event, not a thread reply.
@@ -582,7 +585,7 @@ export function ThreadTimeline({ room, thread, editor }: ThreadTimelineProps) {
         getReactionContent(targetEventId, key, rShortcode),
       );
     },
-    [mx, room, thread, getRelationTimelineSet],
+    [mx, room, thread, getRelationTimelineSet, hapticFeedback],
   );
 
   const handleEdit = useCallback(

src/app/features/settings/general/General.tsx

@@ -122,6 +122,7 @@ import { DenoiseTester } from './DenoiseTester';
 import { SettingsSelect } from '../../../components/settings-select/SettingsSelect';
 import { isBindableCallKey } from '../../../utils/callKeybind';
 import { StorageUsage } from './StorageUsage';
+import { hapticsSupported } from '../../../utils/haptics';
 
 /**
  * P5-47 — opt-in TDS window chrome toggle (desktop only). Renders nothing in the
@@ -1653,6 +1654,7 @@ function Calls() {
 
   const [pttMode, setPttMode] = useSetting(settingsAtom, 'pttMode');
   const [callRejoin, setCallRejoin] = useSetting(settingsAtom, 'callRejoinAfterRestart');
+  const [haptics, setHaptics] = useSetting(settingsAtom, 'hapticFeedback');
   const [pttKey, setPttKey] = useSetting(settingsAtom, 'pttKey');
   const [deafenKey, setDeafenKey] = useSetting(settingsAtom, 'deafenKey');
   const [deafenHotkey, setDeafenHotkey] = useSetting(settingsAtom, 'deafenHotkey');
@@ -1963,6 +1965,13 @@ function Calls() {
             />
           }
         />
+        {hapticsSupported() && (
+          <SettingTile
+            title="Haptic Feedback"
+            description="A short vibration when push-to-talk engages or releases and when you send a reaction. Off automatically when your system prefers reduced motion."
+            after={<Switch variant="Primary" value={haptics} onChange={setHaptics} />}
+          />
+        )}
         <SettingTile
           title="Push to Talk"
           description="Mute your microphone by default. Hold the PTT key to speak."