Fix scroll page identification

frontend/src/components/viewer/PdfViewerToolbar.tsx

@@ -33,17 +33,20 @@ export function PdfViewerToolbar({
   currentZoom: _currentZoom = 100,
 }: PdfViewerToolbarProps) {
   const { t } = useTranslation();
-  const { getScrollState, getZoomState, scrollActions, zoomActions, registerImmediateZoomUpdate } = useViewer();
+  const { getScrollState, getZoomState, scrollActions, zoomActions, registerImmediateZoomUpdate, registerImmediateScrollUpdate } = useViewer();
   
   const scrollState = getScrollState();
   const zoomState = getZoomState();
   const [pageInput, setPageInput] = useState(scrollState.currentPage || currentPage);
   const [displayZoomPercent, setDisplayZoomPercent] = useState(zoomState.zoomPercent || 140);
 
-  // Update page input when scroll state changes
+  // Register for immediate scroll updates and sync with actual scroll state
   useEffect(() => {
+    registerImmediateScrollUpdate((currentPage, totalPages) => {
+      setPageInput(currentPage);
+    });
     setPageInput(scrollState.currentPage);
-  }, [scrollState.currentPage]);
+  }, [registerImmediateScrollUpdate]);
 
   // Register for immediate zoom updates and sync with actual zoom state
   useEffect(() => {

frontend/src/components/viewer/ScrollAPIBridge.tsx

@@ -8,7 +8,7 @@ import { useViewer } from '../../contexts/ViewerContext';
  */
 export function ScrollAPIBridge() {
   const { provides: scroll, state: scrollState } = useScroll();
-  const { registerBridge } = useViewer();
+  const { registerBridge, triggerImmediateScrollUpdate } = useViewer();
   
   const [_localState, setLocalState] = useState({
     currentPage: 1,
@@ -25,6 +25,8 @@ export function ScrollAPIBridge() {
       setLocalState(prevState => {
         // Only update if state actually changed
         if (prevState.currentPage !== newState.currentPage || prevState.totalPages !== newState.totalPages) {
+          // Trigger immediate update for responsive UI
+          triggerImmediateScrollUpdate(newState.currentPage, newState.totalPages);
           return newState;
         }
         return prevState;

frontend/src/contexts/ViewerContext.tsx

@@ -61,6 +61,10 @@ interface ViewerContextType {
   
   // Immediate update callbacks
   registerImmediateZoomUpdate: (callback: (percent: number) => void) => void;
+  registerImmediateScrollUpdate: (callback: (currentPage: number, totalPages: number) => void) => void;
+  
+  // Internal - for bridges to trigger immediate updates
+  triggerImmediateScrollUpdate: (currentPage: number, totalPages: number) => void;
   
   // Action handlers - call EmbedPDF APIs directly
   scrollActions: {
@@ -138,6 +142,9 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
 
   // Immediate zoom callback for responsive display updates
   const immediateZoomUpdateCallback = useRef<((percent: number) => void) | null>(null);
+  
+  // Immediate scroll callback for responsive display updates
+  const immediateScrollUpdateCallback = useRef<((currentPage: number, totalPages: number) => void) | null>(null);
 
   const registerBridge = (type: string, ref: BridgeRef) => {
     bridgeRefs.current[type as keyof typeof bridgeRefs.current] = ref;
@@ -383,6 +390,16 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     immediateZoomUpdateCallback.current = callback;
   };
 
+  const registerImmediateScrollUpdate = (callback: (currentPage: number, totalPages: number) => void) => {
+    immediateScrollUpdateCallback.current = callback;
+  };
+
+  const triggerImmediateScrollUpdate = (currentPage: number, totalPages: number) => {
+    if (immediateScrollUpdateCallback.current) {
+      immediateScrollUpdateCallback.current(currentPage, totalPages);
+    }
+  };
+
   const value: ViewerContextType = {
     // UI state
     isThumbnailSidebarVisible,
@@ -401,6 +418,8 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     
     // Immediate updates
     registerImmediateZoomUpdate,
+    registerImmediateScrollUpdate,
+    triggerImmediateScrollUpdate,
     
     // Actions
     scrollActions,