Restructure to avoid global variables

fix zoom

frontend/src/contexts/ViewerContext.tsx

@@ -59,6 +59,9 @@ interface ViewerContextType {
   getSearchActiveIndex: () => number;
   getThumbnailAPI: () => any;
   
+  // Immediate update callbacks
+  registerImmediateZoomUpdate: (callback: (percent: number) => void) => void;
+  
   // Action handlers - call EmbedPDF APIs directly
   scrollActions: {
     scrollToPage: (page: number) => void;
@@ -133,6 +136,9 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     thumbnail: null as BridgeRef | null,
   });
 
+  // Immediate zoom callback for responsive display updates
+  const immediateZoomUpdateCallback = useRef<((percent: number) => void) | null>(null);
+
   const registerBridge = (type: string, ref: BridgeRef) => {
     bridgeRefs.current[type as keyof typeof bridgeRefs.current] = ref;
   };
@@ -217,12 +223,24 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     zoomIn: () => {
       const api = bridgeRefs.current.zoom?.api;
       if (api?.zoomIn) {
+        // Update display immediately if callback is registered
+        if (immediateZoomUpdateCallback.current) {
+          const currentState = getZoomState();
+          const newPercent = Math.min(Math.round(currentState.zoomPercent * 1.2), 300);
+          immediateZoomUpdateCallback.current(newPercent);
+        }
         api.zoomIn();
       }
     },
     zoomOut: () => {
       const api = bridgeRefs.current.zoom?.api;
       if (api?.zoomOut) {
+        // Update display immediately if callback is registered
+        if (immediateZoomUpdateCallback.current) {
+          const currentState = getZoomState();
+          const newPercent = Math.max(Math.round(currentState.zoomPercent / 1.2), 20);
+          immediateZoomUpdateCallback.current(newPercent);
+        }
         api.zoomOut();
       }
     },
@@ -361,6 +379,10 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     }
   };
 
+  const registerImmediateZoomUpdate = (callback: (percent: number) => void) => {
+    immediateZoomUpdateCallback.current = callback;
+  };
+
   const value: ViewerContextType = {
     // UI state
     isThumbnailSidebarVisible,
@@ -377,6 +399,9 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     getSearchActiveIndex,
     getThumbnailAPI,
     
+    // Immediate updates
+    registerImmediateZoomUpdate,
+    
     // Actions
     scrollActions,
     zoomActions,