feat disable in-app search when in reading modal, hide panels too

Author: avidrucker

src/App.jsx

@@ -230,11 +230,15 @@ function App() {
     calibration: bgCalibration
   } = useBgImageState();
 
+  // Reading modal state (declared early because it's used in useGlobalSearchHotkeys)
+  const [readingModalOpen, setReadingModalOpen] = useState(false);
+
   // Get search UI context for opening the search bar
   const { open: openSearchBar, isOpen } = useSearchUI();
 
   // Set up global hotkeys for search (Ctrl+F to open, Escape is handled by the search bar itself)
-  useGlobalSearchHotkeys(openSearchBar);
+  // Disable search hotkey when reading modal is open to allow normal browser search
+  useGlobalSearchHotkeys(openSearchBar, readingModalOpen);
 
   // ---------- graph (nodes/edges/notes/mode) ----------
   const [graphData, setGraphData] = useState(() => {
@@ -324,9 +328,14 @@ function App() {
     setShowNoteCountOverlay(v => !v);
   }, []);
 
-  // Reading modal state
-  const [readingModalOpen, setReadingModalOpen] = useState(false);
-  const openReadingModal = useCallback(() => setReadingModalOpen(true), []);
+  // Reading modal callbacks (state declared earlier before useGlobalSearchHotkeys)
+  const openReadingModal = useCallback(() => {
+    setReadingModalOpen(true);
+    // Auto-collapse universal menu when reading modal opens
+    if (!universalMenuCollapsed) {
+      dispatchAppState({ type: ACTION_TYPES.SET_UNIVERSAL_MENU_COLLAPSED, payload: { collapsed: true } });
+    }
+  }, [universalMenuCollapsed]);
   const closeReadingModal = useCallback(() => setReadingModalOpen(false), []);
 
   // Share modal state
@@ -1306,7 +1315,8 @@ useEffect(() => {
         />
 
         {/* Mobile Search Button - only visible on mobile, top center */}
-        <div className={`fixed top-0 left-0 right-0 z-999 pa2 dn-m dn-l tc w-100 ${isOpen ? 'dn' : ''}`}>
+        {/* Hide when reading modal is open to avoid interference */}
+        <div className={`fixed top-0 left-0 right-0 z-999 pa2 dn-m dn-l tc w-100 ${isOpen || readingModalOpen ? 'dn' : ''}`}>
             <div className="dib">
               <MobileSearchButton />
             </div>

src/search/useGlobalSearchHotkeys.js

@@ -1,8 +1,13 @@
 import { useEffect } from 'react';
 import { printDebug } from '../utils/debug';
 
-export function useGlobalSearchHotkeys(openFn) {
+export function useGlobalSearchHotkeys(openFn, disabled = false) {
   useEffect(() => {
+    // Don't set up the listener if disabled (e.g., when reading modal is open)
+    if (disabled) {
+      return;
+    }
+
     function onKey(e) {
       const key = e.key?.toLowerCase();
       const mod = e.ctrlKey || e.metaKey; // Ctrl on Win/Linux, Cmd on macOS
@@ -25,5 +30,5 @@ export function useGlobalSearchHotkeys(openFn) {
     }
     window.addEventListener('keydown', onKey, { passive: false });
     return () => window.removeEventListener('keydown', onKey);
-  }, [openFn]);
+  }, [openFn, disabled]);
 }