From 9b0e60109f2d6e43956c908e1c094b3eef98987b Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Sun, 31 May 2026 21:31:26 -0700
Subject: [PATCH] Fix PdfViewer memory crash on large PDFs by implementing
 pagination

---
 frontend/src/components/PdfViewer.tsx | 29 +++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/PdfViewer.tsx b/frontend/src/components/PdfViewer.tsx
index 839a0aa..56735ff 100644
--- a/frontend/src/components/PdfViewer.tsx
+++ b/frontend/src/components/PdfViewer.tsx
@@ -12,6 +12,7 @@ if (typeof window !== 'undefined') {
 
 export default function PdfViewer({ url }: { url: string }) {
   const [numPages, setNumPages] = useState<number>();
+  const [pageNumber, setPageNumber] = useState<number>(1);
   const [scale, setScale] = useState<number>(1.2);
 
   function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
@@ -23,9 +24,25 @@ export default function PdfViewer({ url }: { url: string }) {
       {/* PDF Toolbar */}
       <div className="flex items-center justify-between p-2 border-b" style={{ borderColor: 'var(--color-border-subtle)', backgroundColor: 'var(--color-bg-elevated)' }}>
         <div className="flex items-center gap-2">
-          <span className="text-sm font-medium w-32 px-2" style={{ color: 'var(--color-text-secondary)' }}>
-            {numPages ? `${numPages} Pages` : 'Loading...'}
+          <button
+            onClick={() => setPageNumber(p => Math.max(1, p - 1))}
+            disabled={pageNumber <= 1}
+            className="p-1 rounded hover:bg-white/10 disabled:opacity-50"
+            style={{ color: 'var(--color-text-primary)' }}
+          >
+            <ChevronLeft className="w-5 h-5" />
+          </button>
+          <span className="text-sm font-medium min-w-[80px] text-center" style={{ color: 'var(--color-text-secondary)' }}>
+            {numPages ? `${pageNumber} / ${numPages}` : 'Loading...'}
           </span>
+          <button
+            onClick={() => setPageNumber(p => (numPages ? Math.min(numPages, p + 1) : p))}
+            disabled={pageNumber >= (numPages || 1)}
+            className="p-1 rounded hover:bg-white/10 disabled:opacity-50"
+            style={{ color: 'var(--color-text-primary)' }}
+          >
+            <ChevronRight className="w-5 h-5" />
+          </button>
         </div>
         <div className="flex items-center gap-2">
           <button
@@ -61,16 +78,16 @@ export default function PdfViewer({ url }: { url: string }) {
           }
           className="flex flex-col items-center gap-6"
         >
-          {numPages && Array.from(new Array(numPages), (el, index) => (
+          {numPages && (
             <Page
-              key={`page_${index + 1}`}
-              pageNumber={index + 1}
+              key={`page_${pageNumber}`}
+              pageNumber={pageNumber}
               scale={scale}
               renderTextLayer={true}
               renderAnnotationLayer={true}
               className="bg-white shadow-xl"
             />
-          ))}
+          )}
         </Document>
       </div>
     </div>