Add zoom button

frontend/src/components/DocumentViewer.jsx

@@ -71,18 +71,57 @@ const DocumentViewer = ({ selectedFile, documentData, onPageChange, preloadedHig
         scrollToChunk(0);
     };
 
+    const zoomWithCenter = (zoomDelta) => {
+        const container = document.querySelector('.PdfHighlighter');
+        if (!container) {
+            setZoom(prev => prev + zoomDelta);
+            return;
+        }
+
+        const scrollLeft = container.scrollLeft;
+        const scrollTop = container.scrollTop;
+        const containerWidth = container.clientWidth;
+        const containerHeight = container.clientHeight;
+        
+        // Calculate center point before zoom
+        const centerX = scrollLeft + containerWidth / 2;
+        const centerY = scrollTop + containerHeight / 2;
+        
+        setZoom(prev => {
+            const newZoom = prev + zoomDelta;
+            const zoomRatio = newZoom / prev;
+            
+            // Use requestAnimationFrame for smoother transition
+            requestAnimationFrame(() => {
+                const newScrollLeft = centerX * zoomRatio - containerWidth / 2;
+                const newScrollTop = centerY * zoomRatio - containerHeight / 2;
+                container.scrollTo({
+                    left: newScrollLeft,
+                    top: newScrollTop,
+                    behavior: 'auto'
+                });
+            });
+            
+            return newZoom;
+        });
+    };
+
     const zoomIn = () => {
         if (zoom < 4) {
-            setZoom(prev => prev + 0.1);
+            zoomWithCenter(0.1);
         }
     };
 
     const zoomOut = () => {
         if (zoom > 0.2) {
-            setZoom(prev => prev - 0.1);
+            zoomWithCenter(-0.1);
         }
     };
 
+    const resetZoom = () => {
+        setZoom(1);
+    };
+
     // Call onDocumentReady only once when utils become available
     const callOnDocumentReady = () => {
         if (onDocumentReady && !documentReadyCalledRef.current && highlighterUtilsRef.current) {
@@ -208,9 +247,14 @@ const DocumentViewer = ({ selectedFile, documentData, onPageChange, preloadedHig
                     >
                         -
                     </button>
-                    <span className="text-sm text-gray-600 min-w-12 text-center">
+                    <button 
+                        title="Reset zoom" 
+                        onClick={resetZoom}
+                        className="px-2 py-1 border rounded hover:bg-gray-100 text-sm"
+                        disabled={zoom === 1}
+                    >
                         {(zoom * 100).toFixed(0)}%
-                    </span>
+                    </button>
                     <button 
                         title="Zoom in" 
                         onClick={zoomIn}