From d0102b4f76dd9dd33f2496c51ac917eddbef7506 Mon Sep 17 00:00:00 2001
From: Yogesh <yogeshkumar.n1234@gmail.com>
Date: Sat, 18 Apr 2026 01:17:54 +0530
Subject: [PATCH 1/3] refactor: use inbuilt pdf engine as preview

---
 src/components/Card.tsx         | 36 +++++++++++++++++++--------------
 src/components/newPdfViewer.tsx | 27 ++++++++++++++++++-------
 2 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index d73d2d1..920604d 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -16,6 +16,8 @@ import {
 } from "@/lib/utils/download";
 import { Capsule } from "@/components/ui/capsule";
 import { cn } from "@/lib/utils";
+import PDFViewer from "@/components/newPdfViewer";
+import { PaperProvider } from "@/context/PaperContext";
 
 interface CardProps {
   paper: IPaper;
@@ -26,7 +28,6 @@ interface CardProps {
 
 const Card = ({ paper, onSelect, isSelected, isShow=true }: CardProps) => {
   const [previewOpen, setPreviewOpen] = React.useState(false);
-  const [iframeLoading, setIframeLoading] = React.useState(true);
   const handleDownload = async (paper: IPaper) => {
     await downloadFile(getSecureUrl(paper.file_url), generateFileName(paper));
   };
@@ -86,7 +87,6 @@ const Card = ({ paper, onSelect, isSelected, isShow=true }: CardProps) => {
            className="cursor-pointer transition-all duration-200 ease-out hover:scale-110"
               onClick={(e) => {
                 e.stopPropagation();
-                setIframeLoading(true); 
                 setPreviewOpen(true);
               }}
             />
@@ -131,27 +131,33 @@ const Card = ({ paper, onSelect, isSelected, isShow=true }: CardProps) => {
           onClick={() => setPreviewOpen(false)}
         >
           <div
-            className="relative w-[95%] max-w-5xl h-[90vh] rounded-lg bg-white p-2 dark:bg-[#171720]"
+            className="relative h-[90vh] w-[95%] max-w-5xl"
             onClick={(e) => e.stopPropagation()}
           >
-            <div
-              className={`absolute inset-0 z-50 flex items-center justify-center bg-[#070114] transition-opacity duration-300 ${
-                iframeLoading ? "opacity-100" : "opacity-0 pointer-events-none"
-              }`}
-            >
-      <div className="w-7 h-7 rounded-full border-2 border-white/20 border-t-white animate-spin" />
-    </div>
           <button
-            className="absolute top-3 left-6 z-50 p-2 rounded-full bg-black/60 text-white hover:bg-black transition"
+            className="absolute left-4 top-4 z-[60] rounded-full bg-black/60 p-2 text-white transition hover:bg-black"
             onClick={() => setPreviewOpen(false)}
           >
             <X size={18} />
           </button>
-            <iframe
-              src={`${getSecureUrl(paper.file_url)}#toolbar=0`}
-              className="w-full h-full rounded-md"
-              onLoad={() => setIframeLoading(false)}
+          <PaperProvider
+            value={{
+              paperId: paper._id,
+              subject: paper.subject,
+              exam: paper.exam,
+              slot: paper.slot,
+              year: paper.year,
+            }}
+          >
+            <PDFViewer
+              url={getSecureUrl(paper.file_url)}
+              name={generateFileName(paper).replace(/\.[^.]+$/, "")}
+              className="h-full overflow-hidden"
+              height="100%"
+              hideControls={true}
+              backgroundColor="transparent"
             />
+          </PaperProvider>
           </div>
         </div>
       )}
diff --git a/src/components/newPdfViewer.tsx b/src/components/newPdfViewer.tsx
index d516449..cb201ec 100644
--- a/src/components/newPdfViewer.tsx
+++ b/src/components/newPdfViewer.tsx
@@ -29,6 +29,10 @@ interface ControlProps {
 interface PdfViewerProps {
   url: string;
   name: string;
+  className?: string;
+  height?: string;
+  hideControls?: boolean;
+  backgroundColor?: string;
 }
 
 interface WheelZoomProps {
@@ -342,7 +346,14 @@ export function Loader() {
     </div>
   );
 }
-export default function PDFViewer({ url, name }: PdfViewerProps) {
+export default function PDFViewer({
+  url,
+  name,
+  className,
+  height = "100dvh",
+  hideControls = false,
+  backgroundColor = "#070114",
+}: PdfViewerProps) {
   const { engine, isLoading } = usePdfiumEngine();
   const {isMobile, isSmall} = useBreakpoint();
   const [isFullscreen, setIsFullscreen] = useState(false);
@@ -396,14 +407,15 @@ if (isLoading || !engine) {
   return (
     <div
       ref={viewerRef}
-      style={{ height: "100dvh", width: "100%", position: "relative", backgroundColor: "#070114", display: "flex", flexDirection: "column" }}
+      className={className}
+      style={{ height, width: "100%", position: "relative", backgroundColor, display: "flex", flexDirection: "column" }}
     >
       <EmbedPDF engine={engine} plugins={plugins}>
         {({ activeDocumentId }) =>
           activeDocumentId && (
             <>
               <WheelZoom documentId={activeDocumentId} viewerRef={viewerRef} />
-              {(isMobile && !isFullscreen) && 
+              {!hideControls && (isMobile && !isFullscreen) && 
               <Controls
                 documentId={activeDocumentId}
                 toggleFullscreen={toggleFullscreen}
@@ -421,14 +433,15 @@ if (isLoading || !engine) {
             style={{
             opacity: isLoaded ? 0 : 1,
             pointerEvents: isLoaded ? "none" : "auto",
-            transition: "opacity 0.3s"
+            transition: "opacity 0.3s",
+            backgroundColor,
           }}
           >
             <Loader />
           </div>
       <Viewport
         documentId={activeDocumentId}
-        style={{ backgroundColor: "#070114", visibility: isLoaded ? "visible" : "hidden" }}
+        style={{ backgroundColor, visibility: isLoaded ? "visible" : "hidden" }}
       >
         <Scroller
           documentId={activeDocumentId}
@@ -443,7 +456,7 @@ if (isLoading || !engine) {
   )}
 </DocumentContent>
               
-              {(!isMobile || isFullscreen) && (
+              {!hideControls && (!isMobile || isFullscreen) && (
                 <Controls
                   documentId={activeDocumentId}
                   toggleFullscreen={toggleFullscreen}
@@ -460,4 +473,4 @@ if (isLoading || !engine) {
       </EmbedPDF>
     </div>
   );
-}
\ No newline at end of file
+}

From 6e179e7562ab3b847c374a8ca7fc8f422589636f Mon Sep 17 00:00:00 2001
From: Yogesh <yogeshkumar.n1234@gmail.com>
Date: Sat, 18 Apr 2026 02:30:15 +0530
Subject: [PATCH 2/3] fix: X icon placement

---
 src/components/Card.tsx         | 74 ++++++++++++++++++++-------------
 src/components/newPdfViewer.tsx | 41 ++++++++++++++----
 2 files changed, 77 insertions(+), 38 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 920604d..ff0646d 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -3,8 +3,7 @@
 import React from "react";
 import { type IPaper } from "@/interface";
 import Image from "next/image";
-import { X } from "lucide-react";
-import { Eye, Download, Check } from "lucide-react";
+import { X, Eye, Download, Check } from "lucide-react";
 import {
   extractBracketContent,
   extractWithoutBracketContent,
@@ -28,6 +27,18 @@ interface CardProps {
 
 const Card = ({ paper, onSelect, isSelected, isShow=true }: CardProps) => {
   const [previewOpen, setPreviewOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!previewOpen) return;
+
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [previewOpen]);
+
   const handleDownload = async (paper: IPaper) => {
     await downloadFile(getSecureUrl(paper.file_url), generateFileName(paper));
   };
@@ -127,37 +138,42 @@ const Card = ({ paper, onSelect, isSelected, isShow=true }: CardProps) => {
 
       {previewOpen && (
         <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80"
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 px-6 py-8"
           onClick={() => setPreviewOpen(false)}
         >
           <div
-            className="relative h-[90vh] w-[95%] max-w-5xl"
-            onClick={(e) => e.stopPropagation()}
-          >
-          <button
-            className="absolute left-4 top-4 z-[60] rounded-full bg-black/60 p-2 text-white transition hover:bg-black"
-            onClick={() => setPreviewOpen(false)}
+            className="relative h-full w-full max-w-5xl"
           >
-            <X size={18} />
-          </button>
-          <PaperProvider
-            value={{
-              paperId: paper._id,
-              subject: paper.subject,
-              exam: paper.exam,
-              slot: paper.slot,
-              year: paper.year,
-            }}
-          >
-            <PDFViewer
-              url={getSecureUrl(paper.file_url)}
-              name={generateFileName(paper).replace(/\.[^.]+$/, "")}
-              className="h-full overflow-hidden"
-              height="100%"
-              hideControls={true}
-              backgroundColor="transparent"
-            />
-          </PaperProvider>
+            <div
+              className="relative mx-auto h-full max-w-[760px]"
+            >
+              <PaperProvider
+                value={{
+                  paperId: paper._id,
+                  subject: paper.subject,
+                  exam: paper.exam,
+                  slot: paper.slot,
+                  year: paper.year,
+                }}
+              >
+              <button
+                className="fixed right-4 top-4 z-[60] rounded-full border border-black/10 bg-white/95 p-2 text-black shadow-md transition hover:bg-white"
+                onClick={() => setPreviewOpen(false)}
+                aria-label="Close preview"
+              >
+                <X size={18} />
+              </button>
+                <PDFViewer
+                  url={getSecureUrl(paper.file_url)}
+                  name={generateFileName(paper).replace(/\.[^.]+$/, "")}
+                  className="h-full overflow-hidden"
+                  height="100%"
+                  hideControls={true}
+                  backgroundColor="transparent"
+                  hideScrollbar={true}
+                />
+              </PaperProvider>
+            </div>
           </div>
         </div>
       )}
diff --git a/src/components/newPdfViewer.tsx b/src/components/newPdfViewer.tsx
index cb201ec..ceb6dc5 100644
--- a/src/components/newPdfViewer.tsx
+++ b/src/components/newPdfViewer.tsx
@@ -33,6 +33,7 @@ interface PdfViewerProps {
   height?: string;
   hideControls?: boolean;
   backgroundColor?: string;
+  hideScrollbar?: boolean;
 }
 
 interface WheelZoomProps {
@@ -353,6 +354,7 @@ export default function PDFViewer({
   height = "100dvh",
   hideControls = false,
   backgroundColor = "#070114",
+  hideScrollbar = false,
 }: PdfViewerProps) {
   const { engine, isLoading } = usePdfiumEngine();
   const {isMobile, isSmall} = useBreakpoint();
@@ -405,12 +407,29 @@ if (isLoading || !engine) {
 }
 
   return (
-    <div
-      ref={viewerRef}
-      className={className}
-      style={{ height, width: "100%", position: "relative", backgroundColor, display: "flex", flexDirection: "column" }}
-    >
-      <EmbedPDF engine={engine} plugins={plugins}>
+    <>
+      {hideScrollbar && (
+        <style jsx global>{`
+          [data-pdf-viewer-scrollbars="hidden"] *,
+          [data-pdf-viewer-scrollbars="hidden"] {
+            scrollbar-width: none;
+            -ms-overflow-style: none;
+          }
+
+          [data-pdf-viewer-scrollbars="hidden"] ::-webkit-scrollbar {
+            display: none;
+            width: 0;
+            height: 0;
+          }
+        `}</style>
+      )}
+      <div
+        ref={viewerRef}
+        data-pdf-viewer-scrollbars={hideScrollbar ? "hidden" : "visible"}
+        className={className}
+        style={{ height, width: "100%", position: "relative", backgroundColor, display: "flex", flexDirection: "column" }}
+      >
+        <EmbedPDF engine={engine} plugins={plugins}>
         {({ activeDocumentId }) =>
           activeDocumentId && (
             <>
@@ -446,7 +465,10 @@ if (isLoading || !engine) {
         <Scroller
           documentId={activeDocumentId}
           renderPage={({ width, height, pageIndex }) => (
-            <div style={{ width, height }}>
+            <div
+              style={{ width, height }}
+              onClick={(e) => e.stopPropagation()}
+            >
               <RenderLayer documentId={activeDocumentId} pageIndex={pageIndex} />
             </div>
           )}
@@ -470,7 +492,8 @@ if (isLoading || !engine) {
             </>
           )
         }
-      </EmbedPDF>
-    </div>
+        </EmbedPDF>
+      </div>
+    </>
   );
 }

From 83106c315a2a504707aaa2ce14e4ac21e344313b Mon Sep 17 00:00:00 2001
From: Yogesh <yogeshkumar.n1234@gmail.com>
Date: Sat, 18 Apr 2026 02:39:34 +0530
Subject: [PATCH 3/3] fix: pdf viewer dark mode compatibility

---
 src/components/newPdfViewer.tsx | 73 ++++++++++++++++++++++++++++-----
 1 file changed, 62 insertions(+), 11 deletions(-)

diff --git a/src/components/newPdfViewer.tsx b/src/components/newPdfViewer.tsx
index ceb6dc5..5948f91 100644
--- a/src/components/newPdfViewer.tsx
+++ b/src/components/newPdfViewer.tsx
@@ -15,6 +15,7 @@ import { downloadFile } from "../lib/utils/download";
 import { Button } from "./ui/button";
 import ShareButton from "./ShareButton";
 import ReportButton from "./ReportButton";
+import { useTheme } from "next-themes";
 
 interface ControlProps {
   documentId: string;
@@ -34,6 +35,7 @@ interface PdfViewerProps {
   hideControls?: boolean;
   backgroundColor?: string;
   hideScrollbar?: boolean;
+  isolateFromTheme?: boolean;
 }
 
 interface WheelZoomProps {
@@ -333,14 +335,23 @@ const LOADING_MESSAGES = [
   "Almost there",
 ];
 
-export function Loader() {
+export function Loader({
+  backgroundColor = "#070114",
+  textColor = "rgba(255,255,255,0.5)",
+}: {
+  backgroundColor?: string;
+  textColor?: string;
+}) {
   const { message, visible } = useLoadingMessage(LOADING_MESSAGES);
   return (
-    <div className="flex flex-col items-center justify-center gap-3 h-dvh w-full bg-[#070114]">
+    <div
+      className="flex h-dvh w-full flex-col items-center justify-center gap-3"
+      style={{ backgroundColor }}
+    >
       <div className="w-7 h-7 rounded-full border-2 border-white/10 border-t-white animate-spin" />
       <span
-        className="text-white/50 text-sm tracking-wide transition-opacity duration-400"
-        style={{ opacity: visible ? 1 : 0 }}
+        className="text-sm tracking-wide transition-opacity duration-400"
+        style={{ opacity: visible ? 1 : 0, color: textColor }}
       >
         {message}
       </span>
@@ -353,13 +364,19 @@ export default function PDFViewer({
   className,
   height = "100dvh",
   hideControls = false,
-  backgroundColor = "#070114",
+  backgroundColor,
   hideScrollbar = false,
+  isolateFromTheme = true,
 }: PdfViewerProps) {
   const { engine, isLoading } = usePdfiumEngine();
-  const {isMobile, isSmall} = useBreakpoint();
+  const { isMobile, isSmall } = useBreakpoint();
+  const { resolvedTheme } = useTheme();
   const [isFullscreen, setIsFullscreen] = useState(false);
   const viewerRef = useRef<HTMLDivElement>(null);
+  const effectiveBackgroundColor =
+    backgroundColor ?? (resolvedTheme === "light" ? "#F3F5FF" : "#070114");
+  const loaderTextColor =
+    resolvedTheme === "light" ? "rgba(17,24,39,0.6)" : "rgba(255,255,255,0.5)";
 
   const handleDownload = useCallback(async () => {
     window.dataLayer?.push({
@@ -402,7 +419,10 @@ export default function PDFViewer({
 
 if (isLoading || !engine) {
   return (
-<Loader />
+<Loader
+  backgroundColor={effectiveBackgroundColor}
+  textColor={loaderTextColor}
+/>
   );
 }
 
@@ -423,11 +443,36 @@ if (isLoading || !engine) {
           }
         `}</style>
       )}
+      {isolateFromTheme && (
+        <style jsx global>{`
+          [data-pdf-viewer-theme="light"] {
+            color-scheme: light;
+            forced-color-adjust: none;
+          }
+
+          [data-pdf-viewer-theme="light"] canvas,
+          [data-pdf-viewer-theme="light"] img,
+          [data-pdf-viewer-theme="light"] svg {
+            filter: none !important;
+            forced-color-adjust: none;
+          }
+        `}</style>
+      )}
       <div
         ref={viewerRef}
+        data-pdf-viewer-theme={isolateFromTheme ? "light" : "inherited"}
         data-pdf-viewer-scrollbars={hideScrollbar ? "hidden" : "visible"}
         className={className}
-        style={{ height, width: "100%", position: "relative", backgroundColor, display: "flex", flexDirection: "column" }}
+        style={{
+          height,
+          width: "100%",
+          position: "relative",
+          backgroundColor: effectiveBackgroundColor,
+          display: "flex",
+          flexDirection: "column",
+          colorScheme: isolateFromTheme ? "light" : undefined,
+          forcedColorAdjust: isolateFromTheme ? "none" : undefined,
+        }}
       >
         <EmbedPDF engine={engine} plugins={plugins}>
         {({ activeDocumentId }) =>
@@ -453,14 +498,20 @@ if (isLoading || !engine) {
             opacity: isLoaded ? 0 : 1,
             pointerEvents: isLoaded ? "none" : "auto",
             transition: "opacity 0.3s",
-            backgroundColor,
+            backgroundColor: effectiveBackgroundColor,
           }}
           >
-            <Loader />
+            <Loader
+              backgroundColor={effectiveBackgroundColor}
+              textColor={loaderTextColor}
+            />
           </div>
       <Viewport
         documentId={activeDocumentId}
-        style={{ backgroundColor, visibility: isLoaded ? "visible" : "hidden" }}
+        style={{
+          backgroundColor: effectiveBackgroundColor,
+          visibility: isLoaded ? "visible" : "hidden",
+        }}
       >
         <Scroller
           documentId={activeDocumentId}