pan state improvements

frontend/src/components/shared/RightRail.tsx

@@ -7,7 +7,6 @@ import { useRightRail } from '../../contexts/RightRailContext';
 import { useFileState, useFileSelection, useFileManagement } from '../../contexts/FileContext';
 import { useNavigationState } from '../../contexts/NavigationContext';
 import { useTranslation } from 'react-i18next';
-import { usePanState } from '../../hooks/usePanState';
 
 import LanguageSelector from '../shared/LanguageSelector';
 import { useRainbowThemeContext } from '../shared/RainbowThemeProvider';
@@ -16,7 +15,7 @@ import BulkSelectionPanel from '../pageEditor/BulkSelectionPanel';
 
 export default function RightRail() {
   const { t } = useTranslation();
-  const isPanning = usePanState();
+  const [isPanning, setIsPanning] = useState(false);
   const { toggleTheme } = useRainbowThemeContext();
   const { buttons, actions } = useRightRail();
   const topButtons = useMemo(() => buttons.filter(b => (b.section || 'top') === 'top' && (b.visible ?? true)), [buttons]);
@@ -234,7 +233,10 @@ export default function RightRail() {
                 color={isPanning ? "blue" : undefined}
                 radius="md"
                 className="right-rail-icon"
-                onClick={() => (window as any).embedPdfPan?.togglePan()}
+                onClick={() => {
+                  (window as any).embedPdfPan?.togglePan();
+                  setIsPanning(!isPanning);
+                }}
                 disabled={currentView !== 'viewer'}
               >
                 <LocalIcon icon="pan-tool-rounded" width="1.5rem" height="1.5rem" />

frontend/src/components/viewer/PanControlsExporter.tsx

@@ -21,11 +21,10 @@ export function PanControlsExporter() {
           pan.disablePan();
         },
         togglePan: () => {
-          console.log('EmbedPDF: Toggling pan mode, current isPanning:', isPanning);
           pan.togglePan();
         },
         makePanDefault: () => pan.makePanDefault(),
-        isPanning: isPanning,
+        get isPanning() { return isPanning; }, // Use getter to always return current value
         // Subscribe to pan state changes for reactive UI
         onPanStateChange: (callback: (isPanning: boolean) => void) => {
           setPanStateListeners(prev => [...prev, callback]);
@@ -36,11 +35,6 @@ export function PanControlsExporter() {
         },
       };
       
-      console.log('EmbedPDF pan controls exported to window.embedPdfPan', {
-        isPanning,
-        panAPI: pan,
-        availableMethods: Object.keys(pan)
-      });
     } else {
       console.warn('EmbedPDF pan API not available yet');
     }

frontend/src/components/viewer/PdfViewerToolbar.tsx

@@ -35,6 +35,7 @@ export function PdfViewerToolbar({
   const [dynamicZoom, setDynamicZoom] = useState(currentZoom);
   const [dynamicPage, setDynamicPage] = useState(currentPage);
   const [dynamicTotalPages, setDynamicTotalPages] = useState(totalPages);
+  const [isPanning, setIsPanning] = useState(false);
 
   // Update zoom and scroll state from EmbedPDF APIs
   useEffect(() => {
@@ -53,6 +54,12 @@ export function PdfViewerToolbar({
         setDynamicTotalPages(totalPagesNum);
         setPageInput(currentPageNum);
       }
+      
+      // Update pan mode state
+      if ((window as any).embedPdfPan) {
+        const panState = (window as any).embedPdfPan.isPanning || false;
+        setIsPanning(panState);
+      }
     };
 
     // Update state immediately

frontend/src/hooks/usePanState.ts

@@ -1,24 +0,0 @@
-import { useState, useEffect } from 'react';
-
-/**
- * Hook to track EmbedPDF pan state for reactive UI components
- */
-export function usePanState() {
-  const [isPanning, setIsPanning] = useState(false);
-
-  useEffect(() => {
-    // Subscribe to pan state changes
-    const unsubscribe = (window as any).embedPdfPan?.onPanStateChange?.((newIsPanning: boolean) => {
-      setIsPanning(newIsPanning);
-    });
-
-    // Get initial state
-    if ((window as any).embedPdfPan?.isPanning !== undefined) {
-      setIsPanning((window as any).embedPdfPan.isPanning);
-    }
-
-    return unsubscribe || (() => {});
-  }, []);
-
-  return isPanning;
-}