Tune joystick feel and isolate keypad from tab swipes

app/projects/[id]/index.tsx

@@ -63,6 +63,7 @@ export default function WorkspaceScreen() {
   const pagerRef = useRef<PagerView>(null);
   const stripRef = useRef<WorkspaceTabStripHandle>(null);
   const lastSyncedIndexRef = useRef(activeIndex);
+  const [pagerScrollEnabled, setPagerScrollEnabled] = useState(true);
 
   useEffect(() => {
     if (activeIndex < 0) return;
@@ -143,6 +144,7 @@ export default function WorkspaceScreen() {
             style={styles.body}
             initialPage={initialPage}
             offscreenPageLimit={1}
+            scrollEnabled={pagerScrollEnabled}
             onPageScroll={(e) => {
               const { position, offset } = e.nativeEvent;
               stripRef.current?.scrollToIndex(position + offset, false);
@@ -154,7 +156,7 @@ export default function WorkspaceScreen() {
                 <View key={entry.tab.id} style={styles.page}>
                   {entry.tab.kind === 'terminal' && entry.tab.paneID ? (
                     isActive ? (
-                      <TerminalView paneId={entry.tab.paneID} />
+                      <TerminalView paneId={entry.tab.paneID} onPagerScrollEnabled={setPagerScrollEnabled} />
                     ) : (
                       <TerminalPagePlaceholder tab={entry.tab} background={terminalBg} />
                     )

src/components/terminal/Joystick.tsx

@@ -1,3 +1,4 @@
+import * as Haptics from 'expo-haptics';
 import { useEffect, useRef, useState } from 'react';
 import { PanResponder, StyleSheet, View } from 'react-native';
 
@@ -11,8 +12,8 @@ type Props = {
 };
 
 const KNOB_RATIO = 0.4;
-const DEAD_ZONE_RATIO = 0.2;
-const REPEAT_MS = 80;
+const DEAD_ZONE_RATIO = 0.45;
+const REPEAT_MS = 160;
 
 export function Joystick({ size = 56, onDirection }: Props) {
   const tokens = useTokens();
@@ -39,8 +40,12 @@ export function Joystick({ size = 56, onDirection }: Props) {
 
   const startRepeat = (dir: JoystickDirection) => {
     if (intervalRef.current) clearInterval(intervalRef.current);
+    Haptics.selectionAsync();
     onDirection(dir);
-    intervalRef.current = setInterval(() => onDirection(dir), REPEAT_MS);
+    intervalRef.current = setInterval(() => {
+      Haptics.selectionAsync();
+      onDirection(dir);
+    }, REPEAT_MS);
     directionRef.current = dir;
   };
 

src/components/terminal/KeyBar.tsx

@@ -46,7 +46,13 @@ const ARROW_DOWN = new Uint8Array([0x1b, 0x5b, 0x42]);
 const ARROW_RIGHT = new Uint8Array([0x1b, 0x5b, 0x43]);
 const ARROW_LEFT = new Uint8Array([0x1b, 0x5b, 0x44]);
 
-export function KeyBar({ onBytes }: { onBytes: (base64: string) => void }) {
+export function KeyBar({
+  onBytes,
+  onPagerScrollEnabled,
+}: {
+  onBytes: (base64: string) => void;
+  onPagerScrollEnabled?: (enabled: boolean) => void;
+}) {
   const tokens = useTokens();
   const insets = useSafeAreaInsets();
   const { progress } = useReanimatedKeyboardAnimation();
@@ -85,7 +91,11 @@ export function KeyBar({ onBytes }: { onBytes: (base64: string) => void }) {
   };
 
   return (
-    <Animated.View style={[styles.row, padStyle]}>
+    <Animated.View
+      style={[styles.row, padStyle]}
+      onTouchStart={() => onPagerScrollEnabled?.(false)}
+      onTouchEnd={() => onPagerScrollEnabled?.(true)}
+      onTouchCancel={() => onPagerScrollEnabled?.(true)}>
       <View
         style={[
           styles.capsule,

src/components/terminal/TerminalView.tsx

@@ -26,9 +26,10 @@ import {
 
 type Props = {
   paneId: string;
+  onPagerScrollEnabled?: (enabled: boolean) => void;
 };
 
-export function TerminalView({ paneId }: Props) {
+export function TerminalView({ paneId, onPagerScrollEnabled }: Props) {
   const tokens = useTokens();
   const webRef = useRef<TerminalWebViewHandle>(null);
   const inputRef = useRef<TextInput>(null);
@@ -254,7 +255,9 @@ export function TerminalView({ paneId }: Props) {
         ) : null}
       </View>
 
-        {sessionForUs?.kind === 'streaming' ? <KeyBar onBytes={handleKeyBarBytes} /> : null}
+        {sessionForUs?.kind === 'streaming' ? (
+          <KeyBar onBytes={handleKeyBarBytes} onPagerScrollEnabled={onPagerScrollEnabled} />
+        ) : null}
       </Animated.View>
     </View>
   );