fix(mobile): recurring 3-dots menu no-op — structural fix + regression guards (#12)

apps/mobile/__tests__/components/habits/habit-list.test.tsx

@@ -173,6 +173,15 @@ vi.mock('@/lib/theme', async (importOriginal) => {
 
 vi.mock('@/components/ui/anchored-menu', () => ({
   AnchoredMenu: ({ visible, children }: any) => (visible ? children : null),
+  MenuAnchorHost: ({ children }: any) => children,
+  useAnchoredMenu: () => ({
+    anchorRef: { current: null },
+    visible: false,
+    anchorRect: null,
+    open: () => {},
+    close: () => {},
+    toggle: () => {},
+  }),
 }))
 
 vi.mock('react-native-svg', () => ({

apps/mobile/__tests__/components/habits/habit-row.test.tsx

@@ -1,6 +1,11 @@
-import { describe, it, expect, vi } from 'vitest'
+import { afterEach, describe, it, expect, vi } from 'vitest'
 import { createMockHabit } from '@orbit/shared/__tests__/factories'
 import { HabitRow } from '@/components/habits/habit-row'
+import {
+  __resetTestHostConfig,
+  __setHostRefsNull,
+  __setMeasureInWindowImpl,
+} from '@/test-mocks/react-native'
 
 const TestRenderer = require('react-test-renderer')
 
@@ -18,6 +23,14 @@ vi.mock('@/lib/use-app-theme', () => ({
 
 vi.mock('@/lib/motion', () => ({
   usePrefersReducedMotion: () => true,
+  useResolvedMotionPreset: () => ({
+    enterDuration: 0,
+    exitDuration: 0,
+    scaleFrom: 0.96,
+    scaleTo: 1,
+    shift: 8,
+  }),
+  toAnimatedEasing: (value: unknown) => value,
 }))
 
 function collectStrings(node: unknown): string[] {
@@ -69,3 +82,50 @@ describe('HabitRow tags (mobile)', () => {
     expect(texts.join('')).toContain('+7')
   })
 })
+
+function renderRowWithMenu() {
+  let renderer: ReturnType<typeof TestRenderer.create>
+  TestRenderer.act(() => {
+    renderer = TestRenderer.create(
+      <HabitRow
+        habit={createMockHabit({ title: 'Read' })}
+        actions={{ onEdit: vi.fn() }}
+      />,
+    )
+  })
+  return renderer!
+}
+
+function pressMoreButton(renderer: ReturnType<typeof TestRenderer.create>) {
+  const moreButton = renderer.root.findAll(
+    (node: { props: Record<string, unknown> }) =>
+      node.props.accessibilityLabel === 'habits.actions.more',
+  )[0]
+  TestRenderer.act(() => {
+    ;(moreButton.props.onPress as () => void)()
+  })
+}
+
+describe('HabitRow menu (mobile)', () => {
+  afterEach(() => {
+    __resetTestHostConfig()
+  })
+
+  it('opens the menu even when measureInWindow never invokes its callback', () => {
+    __setMeasureInWindowImpl(() => {})
+    const renderer = renderRowWithMenu()
+
+    pressMoreButton(renderer)
+
+    expect(collectStrings(renderer.toJSON())).toContain('common.edit')
+  })
+
+  it('opens the menu even when the anchor ref is null', () => {
+    __setHostRefsNull(true)
+    const renderer = renderRowWithMenu()
+
+    pressMoreButton(renderer)
+
+    expect(collectStrings(renderer.toJSON())).toContain('common.edit')
+  })
+})

apps/mobile/__tests__/lib/anchored-menu.test.ts

@@ -1,7 +1,9 @@
 import { describe, expect, it } from 'vitest'
 import {
   DEFAULT_ANCHORED_MENU_MARGIN,
+  FALLBACK_ANCHOR_TOP_INSET,
   getAnchoredMenuPosition,
+  getFallbackAnchorRect,
 } from '@/lib/anchored-menu'
 
 describe('anchored menu positioning', () => {
@@ -49,3 +51,31 @@ describe('anchored menu positioning', () => {
     expect(position.opensUp).toBe(true)
   })
 })
+
+describe('anchored menu fallback anchor', () => {
+  it('places a zero-size anchor at the top-right inset', () => {
+    expect(getFallbackAnchorRect(412)).toEqual({
+      x: 412 - DEFAULT_ANCHORED_MENU_MARGIN,
+      y: FALLBACK_ANCHOR_TOP_INSET,
+      width: 0,
+      height: 0,
+    })
+  })
+
+  it('positions a menu against the top-right corner when no rect was measured', () => {
+    const window = { width: 412, height: 892 }
+    const position = getAnchoredMenuPosition({
+      anchorRect: getFallbackAnchorRect(window.width),
+      viewportWidth: window.width,
+      viewportHeight: window.height,
+      menuWidth: 208,
+      menuHeight: 296,
+    })
+
+    expect(position.left).toBe(
+      window.width - 208 - DEFAULT_ANCHORED_MENU_MARGIN,
+    )
+    expect(position.top).toBe(FALLBACK_ANCHOR_TOP_INSET + DEFAULT_ANCHORED_MENU_MARGIN)
+    expect(position.opensUp).toBe(false)
+  })
+})

apps/mobile/__tests__/screens/today-screen.test.tsx

@@ -299,6 +299,15 @@ vi.mock("@/components/navigation/notification-bell", () => ({
 
 vi.mock("@/components/ui/anchored-menu", () => ({
   AnchoredMenu: () => null,
+  MenuAnchorHost: ({ children }: { children?: unknown }) => children,
+  useAnchoredMenu: () => ({
+    anchorRef: { current: null },
+    visible: false,
+    anchorRect: null,
+    open: () => {},
+    close: () => {},
+    toggle: () => {},
+  }),
 }));
 
 vi.mock("../../app/(tabs)/today-shell", () => todayShellMock);

apps/mobile/app/(tabs)/index.tsx

@@ -59,7 +59,7 @@ import { ReferralCard } from "@/components/referral/referral-card";
 import { ReferralDrawer } from "@/components/referral/referral-drawer";
 import { SetupChecklistCard } from "@/components/today/setup-checklist-card";
 import { useHorizontalSwipe } from "@/hooks/use-horizontal-swipe";
-import type { MenuAnchorRect } from "@/lib/anchored-menu";
+import { useAnchoredMenu } from "@/components/ui/anchored-menu";
 import { useBulkActions } from "@/hooks/use-bulk-actions";
 import { shouldResetSelectionForViewChange } from "@/lib/habit-selection-state";
 import {
@@ -155,12 +155,20 @@ export default function TodayScreen() {
   const currentActiveView = resolveTodayView(activeView, hasProAccess);
 
   const [showGeneralOnToday, setShowGeneralOnToday] = useState(false);
-  const [showControlsMenu, setShowControlsMenu] = useState(false);
-  const [controlsMenuAnchorRect, setControlsMenuAnchorRect] =
-    useState<MenuAnchorRect | null>(null);
-  const [showFreqMenu, setShowFreqMenu] = useState(false);
-  const [freqMenuAnchorRect, setFreqMenuAnchorRect] =
-    useState<MenuAnchorRect | null>(null);
+  const {
+    anchorRef: controlsButtonRef,
+    visible: showControlsMenu,
+    anchorRect: controlsMenuAnchorRect,
+    close: closeControlsMenu,
+    toggle: toggleControlsMenu,
+  } = useAnchoredMenu();
+  const {
+    anchorRef: freqMenuButtonRef,
+    visible: showFreqMenu,
+    anchorRect: freqMenuAnchorRect,
+    close: closeFreqMenu,
+    toggle: toggleFreqMenu,
+  } = useAnchoredMenu();
   const [showHabitDeleteConfirm, setShowHabitDeleteConfirm] = useState(false);
   const [slideDirection, setSlideDirection] = useState<"left" | "right">(
     "right",
@@ -182,8 +190,6 @@ export default function TodayScreen() {
     "/",
     goalsScrollTo,
   );
-  const controlsButtonRef = useRef<View>(null);
-  const freqMenuButtonRef = useRef<View>(null);
   const previousActiveViewRef = useRef(activeView);
   const dateLabelAnim = useMemo(() => new Animated.Value(0), []);
   const filtersTransitionAnim = useMemo(() => new Animated.Value(1), []);
@@ -693,76 +699,44 @@ export default function TodayScreen() {
     }
 
     previousActiveViewRef.current = activeView;
-    setShowControlsMenu(false);
+    closeControlsMenu();
     if (isSelectMode) clearSelection();
-  }, [activeView, clearSelection, isSelectMode]);
+  }, [activeView, clearSelection, closeControlsMenu, isSelectMode]);
 
   const handleToggleSelectMode = useCallback(() => {
     if (isSelectMode) {
       clearSelection();
     } else {
       toggleSelectMode();
     }
-    setShowControlsMenu(false);
-  }, [clearSelection, isSelectMode, toggleSelectMode]);
+    closeControlsMenu();
+  }, [clearSelection, closeControlsMenu, isSelectMode, toggleSelectMode]);
 
   const handleToggleCollapse = useCallback(() => {
     if (habitListRef.current?.allCollapsed) {
       habitListRef.current.expandAll();
     } else {
       habitListRef.current?.collapseAll();
     }
-    setShowControlsMenu(false);
-  }, []);
+    closeControlsMenu();
+  }, [closeControlsMenu]);
 
   const handleRefresh = useCallback(() => {
     habitListRef.current?.refetch();
-    setShowControlsMenu(false);
-  }, []);
+    closeControlsMenu();
+  }, [closeControlsMenu]);
 
   const handleToggleCompleted = useCallback(() => {
     setShowCompleted(!showCompleted);
-    setShowControlsMenu(false);
-  }, [setShowCompleted, showCompleted]);
-
-  const measureControlsButton = useCallback(() => {
-    controlsButtonRef.current?.measureInWindow((x, y, width, height) => {
-      setControlsMenuAnchorRect({ x, y, width, height });
-      setShowControlsMenu(true);
-    });
-  }, []);
-
-  const handleToggleControlsMenu = useCallback(() => {
-    if (showControlsMenu) {
-      setShowControlsMenu(false);
-      return;
-    }
-
-    measureControlsButton();
-  }, [measureControlsButton, showControlsMenu]);
-
-  const measureFreqMenuButton = useCallback(() => {
-    freqMenuButtonRef.current?.measureInWindow((x, y, width, height) => {
-      setFreqMenuAnchorRect({ x, y, width, height });
-      setShowFreqMenu(true);
-    });
-  }, []);
-
-  const handleToggleFreqMenu = useCallback(() => {
-    if (showFreqMenu) {
-      setShowFreqMenu(false);
-      return;
-    }
-
-    measureFreqMenuButton();
-  }, [measureFreqMenuButton, showFreqMenu]);
+    closeControlsMenu();
+  }, [closeControlsMenu, setShowCompleted, showCompleted]);
 
   const handleSelectFrequency = useCallback(
     (key: FreqKey | null) => {
       setSelectedFrequency(key);
-      setShowFreqMenu(false);
+      closeFreqMenu();
     },
-    [setSelectedFrequency],
+    [closeFreqMenu, setSelectedFrequency],
   );
 
   const handleSelectAll = useCallback(() => {
@@ -824,8 +798,8 @@ export default function TodayScreen() {
   }, []);
 
   const handleListScrollBeginDrag = useCallback(() => {
-    setShowControlsMenu(false);
-  }, []);
+    closeControlsMenu();
+  }, [closeControlsMenu]);
 
   const handleToggleSearch = useCallback(() => {
     setIsSearchOpen((open) => {
@@ -935,10 +909,10 @@ export default function TodayScreen() {
         onSearchChange={setSearchQueryStore}
         onSearchFocusChange={setIsSearchFocused}
         onTagToggle={toggleTagFilter}
-        onToggleFreqMenu={handleToggleFreqMenu}
-        onToggleControlsMenu={handleToggleControlsMenu}
-        onCloseControlsMenu={() => setShowControlsMenu(false)}
-        onCloseFreqMenu={() => setShowFreqMenu(false)}
+        onToggleFreqMenu={toggleFreqMenu}
+        onToggleControlsMenu={toggleControlsMenu}
+        onCloseControlsMenu={closeControlsMenu}
+        onCloseFreqMenu={closeFreqMenu}
         onToggleSelect={handleToggleSelectMode}
         onToggleCollapse={handleToggleCollapse}
         onRefresh={handleRefresh}
@@ -966,8 +940,8 @@ export default function TodayScreen() {
       handleSelectFrequency,
       handleToggleCollapse,
       handleToggleCompleted,
-      handleToggleControlsMenu,
-      handleToggleFreqMenu,
+      toggleControlsMenu,
+      toggleFreqMenu,
       handleToggleSearch,
       handleToggleSelectMode,
       isSearchFocused,
@@ -979,8 +953,8 @@ export default function TodayScreen() {
       selectedTagIds,
       setIsSearchFocused,
       setSearchQueryStore,
-      setShowControlsMenu,
-      setShowFreqMenu,
+      closeControlsMenu,
+      closeFreqMenu,
       sharedHeader,
       showCompleted,
       showControlsMenu,