From 1ae7e52f354bef4ea28782cf71a64bb598f29084 Mon Sep 17 00:00:00 2001
From: Rithish <bajjuririthish521@gmail.com>
Date: Sat, 11 Apr 2026 18:25:49 +0000
Subject: [PATCH 01/10] feat: add paper preview modal with PDF viewer (handles
 CORS using Google viewer)

---
 src/components/Card.tsx | 159 ++++++++++++++++++++++++----------------
 1 file changed, 97 insertions(+), 62 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index e476147..740f860 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import React from "react";
 import { type IPaper } from "@/interface";
 import Image from "next/image";
 import { Eye, Download, Check } from "lucide-react";
@@ -23,6 +24,8 @@ interface CardProps {
 }
 
 const Card = ({ paper, onSelect, isSelected }: CardProps) => {
+  const [previewOpen, setPreviewOpen] = React.useState(false);
+
   const handleDownload = async (paper: IPaper) => {
     await downloadFile(getSecureUrl(paper.file_url), generateFileName(paper));
   };
@@ -34,77 +37,109 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
   const paperLink = `/paper/${paper._id}`;
 
   return (
-    <div
-      className={cn(
-        "overflow-hidden rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] font-play transition-all duration-150 hover:bg-[#EFEAFF] dark:border-[#36266D] dark:bg-[#171720] hover:dark:bg-[#262635]",
-        isSelected && "bg-white",
-      )}
-    >
-      <Link href={paperLink} target="_blank" rel="noopener noreferrer">
-        <Image
-          src={paper.thumbnail_url}
-          alt={paper.subject}
-          width={320}
-          height={180}
-          className="w-full object-cover p-4 pb-3 md:h-[250px]"
-        />
-
-        <div className="justify-center">
-          <div className="flex flex-row items-center justify-between px-4 pb-2">
-            <div className="text-md font-play font-medium">
-              {extractBracketContent(paper.subject)}
-            </div>
-            <div className="flex gap-2">
-              <Link href={paperLink} target="_blank" rel="noopener noreferrer">
-                <Eye size={22} />
-              </Link>
-              <Download
-                size={20}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  void handleDownload(paper);
-                }}
-                className="cursor-pointer"
-              />
+    <>
+      <div
+        className={cn(
+          "overflow-hidden rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] font-play transition-all duration-150 hover:bg-[#EFEAFF] dark:border-[#36266D] dark:bg-[#171720] hover:dark:bg-[#262635]",
+          isSelected && "bg-white",
+        )}
+      >
+        <Link href={paperLink} target="_blank" rel="noopener noreferrer">
+          <Image
+            src={paper.thumbnail_url}
+            alt={paper.subject}
+            width={320}
+            height={180}
+            className="w-full object-cover p-4 pb-3 md:h-[250px]"
+          />
+
+          <div className="justify-center">
+            <div className="flex flex-row items-center justify-between px-4 pb-2">
+              <div className="text-md font-play font-medium">
+                {extractBracketContent(paper.subject)}
+              </div>
             </div>
-          </div>
 
-          <div className="h-[1px] w-full bg-[#734DFF] dark:bg-[#36266D]" />
+            <div className="h-[1px] w-full bg-[#734DFF] dark:bg-[#36266D]" />
 
-          <div className="space-y-2 p-4">
-            <div className="font-play text-lg font-semibold">
-              {extractWithoutBracketContent(paper.subject)}
-            </div>
-            <div className="flex flex-wrap gap-2">
-              <Capsule>{paper.exam}</Capsule>
-              <Capsule>{paper.slot}</Capsule>
-              <Capsule>{paper.year}</Capsule>
-              <Capsule>{paper.semester}</Capsule>
+            <div className="space-y-2 p-4">
+              <div className="font-play text-lg font-semibold">
+                {extractWithoutBracketContent(paper.subject)}
+              </div>
+              <div className="flex flex-wrap gap-2">
+                <Capsule>{paper.exam}</Capsule>
+                <Capsule>{paper.slot}</Capsule>
+                <Capsule>{paper.year}</Capsule>
+                <Capsule>{paper.semester}</Capsule>
+              </div>
             </div>
           </div>
-        </div>
-      </Link>
-
-      <div className="flex items-center justify-between gap-2 px-4 pb-4 font-play">
-        <div className="flex items-center gap-2">
-          <input
-            checked={isSelected}
-            onChange={handleCheckboxChange}
-            className="h-5 w-5 accent-[#7480FF]"
-            type="checkbox"
+        </Link>
+
+        <div className="flex justify-end gap-2 px-4 pb-2">
+          <Eye
+            size={22}
+            className="cursor-pointer"
+            onClick={(e) => {
+              e.stopPropagation();
+              setPreviewOpen(true);
+            }}
+          />
+
+          <Download
+            size={20}
+            onClick={(e) => {
+              e.stopPropagation();
+              void handleDownload(paper);
+            }}
+            className="cursor-pointer"
           />
-          <p>Select</p>
         </div>
-        {paper.answer_key_included && (
-          <div className="flex items-center gap-2 font-normal text-[#7480FF]">
-            <Check color="#7480FF" />
-            Answer Key
+
+        <div className="flex items-center justify-between gap-2 px-4 pb-4 font-play">
+          <div className="flex items-center gap-2">
+            <input
+              checked={isSelected}
+              onChange={handleCheckboxChange}
+              className="h-5 w-5 accent-[#7480FF]"
+              type="checkbox"
+            />
+            <p>Select</p>
           </div>
-        )}
+
+          {paper.answer_key_included && (
+            <div className="flex items-center gap-2 font-normal text-[#7480FF]">
+              <Check color="#7480FF" />
+              Answer Key
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+
+      {previewOpen && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80"
+          onClick={() => setPreviewOpen(false)}
+        >
+          <div
+            className="relative w-[95%] max-w-5xl h-[90vh] rounded-lg bg-white p-2 dark:bg-[#171720]"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <button
+              className="absolute right-3 top-3 z-10 text-xl"
+              onClick={() => setPreviewOpen(false)}
+            >
+              ✕
+            </button>
+            <iframe
+              src={paper.file_url}
+              className="w-full h-full rounded-md"
+            />
+          </div>
+        </div>
+      )}
+    </>
   );
 };
 
-export default Card;
+export default Card;
\ No newline at end of file

From 4c1ff08b94f2a1c28117d88dff29d7aa32b6bbb7 Mon Sep 17 00:00:00 2001
From: Rithish <bajjuririthish521@gmail.com>
Date: Mon, 13 Apr 2026 16:06:19 +0000
Subject: [PATCH 02/10] feat: add paper preview modal on eye icon click

---
 src/components/Card.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 740f860..3fa55d1 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -81,6 +81,7 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
             size={22}
             className="cursor-pointer"
             onClick={(e) => {
+              e.preventDefault();
               e.stopPropagation();
               setPreviewOpen(true);
             }}
@@ -132,7 +133,7 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
               ✕
             </button>
             <iframe
-              src={paper.file_url}
+              src={getSecureUrl(paper.file_url)}
               className="w-full h-full rounded-md"
             />
           </div>

From 82fdbec289c444bdac4fd0744a78bf14902a490a Mon Sep 17 00:00:00 2001
From: Rithish <bajjuririthish521@gmail.com>
Date: Mon, 13 Apr 2026 17:42:28 +0000
Subject: [PATCH 03/10] Fix accordion + preview modal + share button behavior

---
 src/components/Card.tsx           | 3 ++-
 src/components/ShareButton.tsx    | 2 +-
 src/components/SidebarSection.tsx | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 3fa55d1..df5c1c3 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -52,6 +52,7 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
             height={180}
             className="w-full object-cover p-4 pb-3 md:h-[250px]"
           />
+          </Link>
 
           <div className="justify-center">
             <div className="flex flex-row items-center justify-between px-4 pb-2">
@@ -74,7 +75,7 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
               </div>
             </div>
           </div>
-        </Link>
+        
 
         <div className="flex justify-end gap-2 px-4 pb-2">
           <Eye
diff --git a/src/components/ShareButton.tsx b/src/components/ShareButton.tsx
index 475d5bb..abd8f64 100644
--- a/src/components/ShareButton.tsx
+++ b/src/components/ShareButton.tsx
@@ -29,7 +29,7 @@ export default function ShareButton() {
   const paperPath = origin + pathname;
   return (
     <Dialog>
-      <DialogTrigger asChild>
+      <DialogTrigger>
         <Button className="aspect-square h-10 w-10 p-0">
           <FaShare />
         </Button>
diff --git a/src/components/SidebarSection.tsx b/src/components/SidebarSection.tsx
index 1247edc..10a79d9 100644
--- a/src/components/SidebarSection.tsx
+++ b/src/components/SidebarSection.tsx
@@ -24,7 +24,7 @@ const SidebarSection: React.FC<SidebarSectionProps> = ({
 }) => (
   <div className="flex w-full flex-col items-baseline justify-between border-b-2 border-[#36266d] px-[10px]">
     <Accordion className="w-full" type="single" collapsible>
-      <AccordionItem className="border-none no-underline" value={label}>
+      <AccordionItem className="border-none no-underline" value={`section-${label}`}>
         <AccordionTrigger className="w-full no-underline">
           <div className="font-play text-sm no-underline">{label}</div>
         </AccordionTrigger>

From db5c42d98b8257b4aad1dd989d7a7884f9787fc3 Mon Sep 17 00:00:00 2001
From: Rithish <bajjuririthish521@gmail.com>
Date: Tue, 14 Apr 2026 06:07:05 +0000
Subject: [PATCH 04/10] fixed accordion + pdf preview toolbar + eye click

---
 src/components/Card.tsx           |  5 +-
 src/components/SideBar.tsx        |  4 +-
 src/components/SidebarSection.tsx | 79 +++++++++++++++++++------------
 3 files changed, 53 insertions(+), 35 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index df5c1c3..f6ee83f 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -44,7 +44,7 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
           isSelected && "bg-white",
         )}
       >
-        <Link href={paperLink} target="_blank" rel="noopener noreferrer">
+         
           <Image
             src={paper.thumbnail_url}
             alt={paper.subject}
@@ -52,7 +52,6 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
             height={180}
             className="w-full object-cover p-4 pb-3 md:h-[250px]"
           />
-          </Link>
 
           <div className="justify-center">
             <div className="flex flex-row items-center justify-between px-4 pb-2">
@@ -134,7 +133,7 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
               ✕
             </button>
             <iframe
-              src={getSecureUrl(paper.file_url)}
+              src={`${getSecureUrl(paper.file_url)}#toolbar=0`}
               className="w-full h-full rounded-md"
             />
           </div>
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 7ff5a06..149bdae 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -7,7 +7,7 @@ import SidebarSection from "./SidebarSection";
 import { useFilters } from "@/context/filterContext";
 
 function SideBar() {
-  // Get everything from context - no more prop drilling!
+  const [openItem, setOpenItem] = React.useState<string | undefined>(undefined);
   const {
     selectedExams,
     selectedSlots,
@@ -138,6 +138,8 @@ function SideBar() {
           data={section.data}
           selected={section.selected}
           updater={section.updater}
+          openItem={openItem}
+          setOpenItem={setOpenItem}
         />
       ))}
     </div>
diff --git a/src/components/SidebarSection.tsx b/src/components/SidebarSection.tsx
index 10a79d9..d6b24b9 100644
--- a/src/components/SidebarSection.tsx
+++ b/src/components/SidebarSection.tsx
@@ -14,6 +14,9 @@ interface SidebarSectionProps {
   data: { label: string; value: string }[];
   selected: string[];
   updater: (newVal: string[]) => void;
+
+  openItem: string | undefined;
+  setOpenItem: (val: string | undefined) => void;
 }
 
 const SidebarSection: React.FC<SidebarSectionProps> = ({
@@ -21,35 +24,49 @@ const SidebarSection: React.FC<SidebarSectionProps> = ({
   data,
   selected,
   updater,
-}) => (
-  <div className="flex w-full flex-col items-baseline justify-between border-b-2 border-[#36266d] px-[10px]">
-    <Accordion className="w-full" type="single" collapsible>
-      <AccordionItem className="border-none no-underline" value={`section-${label}`}>
-        <AccordionTrigger className="w-full no-underline">
-          <div className="font-play text-sm no-underline">{label}</div>
-        </AccordionTrigger>
-        <AccordionContent>
-          <div className="my-2 flex w-full flex-wrap items-center">
-            {data.map((item) => (
-              <SidebarButton
-                key={item.value}
-                selected={selected.includes(item.value)}
-                onClick={() => {
-                  const newValues = selected.includes(item.value)
-                    ? selected.filter((v) => v !== item.value)
-                    : [...selected, item.value];
-                  updater(newValues);
-                }}
-                className="mb-2 mr-2"
-              >
-                {item.label}
-              </SidebarButton>
-            ))}
-          </div>
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  </div>
-);
+  openItem,
+  setOpenItem,
+}) => {
+  return (
+    <div className="flex w-full flex-col items-baseline justify-between border-b-2 border-[#36266d] px-[10px]">
+      <Accordion
+        className="w-full"
+        type="single"
+        collapsible
+        value={openItem}
+        onValueChange={setOpenItem}
+      >
+        <AccordionItem
+          className="border-none"
+          value={label} // ✅ IMPORTANT: stable value
+        >
+          <AccordionTrigger className="w-full">
+            <div className="font-play text-sm">{label}</div>
+          </AccordionTrigger>
+
+          <AccordionContent>
+            <div className="my-2 flex w-full flex-wrap items-center">
+              {data.map((item) => (
+                <SidebarButton
+                  key={item.value}
+                  selected={selected.includes(item.value)}
+                  onClick={() => {
+                    const newValues = selected.includes(item.value)
+                      ? selected.filter((v) => v !== item.value)
+                      : [...selected, item.value];
+                    updater(newValues);
+                  }}
+                  className="mb-2 mr-2"
+                >
+                  {item.label}
+                </SidebarButton>
+              ))}
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+};
 
-export default SidebarSection;
+export default SidebarSection;
\ No newline at end of file

From ea52d9d381bb78e40cc59b06cb3d899b9c75137d Mon Sep 17 00:00:00 2001
From: Yogesh <yogeshkumar.n1234@gmail.com>
Date: Fri, 17 Apr 2026 22:59:31 +0530
Subject: [PATCH 05/10] fix: revert

---
 src/components/ShareButton.tsx    | 2 +-
 src/components/SideBar.tsx        | 5 +----
 src/components/SidebarSection.tsx | 7 -------
 3 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/components/ShareButton.tsx b/src/components/ShareButton.tsx
index abd8f64..475d5bb 100644
--- a/src/components/ShareButton.tsx
+++ b/src/components/ShareButton.tsx
@@ -29,7 +29,7 @@ export default function ShareButton() {
   const paperPath = origin + pathname;
   return (
     <Dialog>
-      <DialogTrigger>
+      <DialogTrigger asChild>
         <Button className="aspect-square h-10 w-10 p-0">
           <FaShare />
         </Button>
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 149bdae..f5dc1cf 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -7,7 +7,7 @@ import SidebarSection from "./SidebarSection";
 import { useFilters } from "@/context/filterContext";
 
 function SideBar() {
-  const [openItem, setOpenItem] = React.useState<string | undefined>(undefined);
+  // Get everything from context - no more prop drilling!
   const {
     selectedExams,
     selectedSlots,
@@ -17,7 +17,6 @@ function SideBar() {
     selectedAnswerKeyIncluded,
     filterOptions,
     handleApplyFilters,
-    setCurrentPage,
   } = useFilters();
   const exams =
     filterOptions?.unique_exams.map((exam) => ({ label: exam, value: exam })) ??
@@ -138,8 +137,6 @@ function SideBar() {
           data={section.data}
           selected={section.selected}
           updater={section.updater}
-          openItem={openItem}
-          setOpenItem={setOpenItem}
         />
       ))}
     </div>
diff --git a/src/components/SidebarSection.tsx b/src/components/SidebarSection.tsx
index d6b24b9..80d19b7 100644
--- a/src/components/SidebarSection.tsx
+++ b/src/components/SidebarSection.tsx
@@ -14,9 +14,6 @@ interface SidebarSectionProps {
   data: { label: string; value: string }[];
   selected: string[];
   updater: (newVal: string[]) => void;
-
-  openItem: string | undefined;
-  setOpenItem: (val: string | undefined) => void;
 }
 
 const SidebarSection: React.FC<SidebarSectionProps> = ({
@@ -24,8 +21,6 @@ const SidebarSection: React.FC<SidebarSectionProps> = ({
   data,
   selected,
   updater,
-  openItem,
-  setOpenItem,
 }) => {
   return (
     <div className="flex w-full flex-col items-baseline justify-between border-b-2 border-[#36266d] px-[10px]">
@@ -33,8 +28,6 @@ const SidebarSection: React.FC<SidebarSectionProps> = ({
         className="w-full"
         type="single"
         collapsible
-        value={openItem}
-        onValueChange={setOpenItem}
       >
         <AccordionItem
           className="border-none"

From 47b07e4400e5fde08e3312ea701ff15634d42cc8 Mon Sep 17 00:00:00 2001
From: Yogesh <yogeshkumar.n1234@gmail.com>
Date: Fri, 17 Apr 2026 23:23:13 +0530
Subject: [PATCH 06/10] fix: nested link, eye icon working, remove unwanted
 select from card

---
 src/components/Card.tsx         | 33 +++++++++++++++++++++------------
 src/components/RelatedPaper.tsx |  3 ++-
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index f6ee83f..88d7d84 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -21,9 +21,10 @@ interface CardProps {
   paper: IPaper;
   onSelect: (paper: IPaper, isSelected: boolean) => void;
   isSelected: boolean;
+  isShow: boolean;
 }
 
-const Card = ({ paper, onSelect, isSelected }: CardProps) => {
+const Card = ({ paper, onSelect, isSelected, isShow=true }: CardProps) => {
   const [previewOpen, setPreviewOpen] = React.useState(false);
 
   const handleDownload = async (paper: IPaper) => {
@@ -39,12 +40,19 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
   return (
     <>
       <div
+        onClick={(e) => {
+  const target = e.target as HTMLElement;
+
+  // ignore clicks on interactive elements
+  if (target.closest("button, input, svg")) return;
+
+  window.open(paperLink, "_blank");
+}}
         className={cn(
-          "overflow-hidden rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] font-play transition-all duration-150 hover:bg-[#EFEAFF] dark:border-[#36266D] dark:bg-[#171720] hover:dark:bg-[#262635]",
-          isSelected && "bg-white",
+          "cursor-pointer overflow-hidden rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] font-play transition-all duration-150 hover:bg-[#EFEAFF] dark:border-[#36266D] dark:bg-[#171720] hover:dark:bg-[#262635]",
+          isSelected && "ring-2 ring-[#7480FF] bg-[#EFEAFF]"
         )}
       >
-         
           <Image
             src={paper.thumbnail_url}
             alt={paper.subject}
@@ -52,7 +60,6 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
             height={180}
             className="w-full object-cover p-4 pb-3 md:h-[250px]"
           />
-
           <div className="justify-center">
             <div className="flex flex-row items-center justify-between px-4 pb-2">
               <div className="text-md font-play font-medium">
@@ -74,14 +81,12 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
               </div>
             </div>
           </div>
-        
 
         <div className="flex justify-end gap-2 px-4 pb-2">
           <Eye
             size={22}
-            className="cursor-pointer"
+            className="cursor-pointer hover:scale-105 transition"
             onClick={(e) => {
-              e.preventDefault();
               e.stopPropagation();
               setPreviewOpen(true);
             }}
@@ -96,17 +101,21 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
             className="cursor-pointer"
           />
         </div>
-
+         
         <div className="flex items-center justify-between gap-2 px-4 pb-4 font-play">
-          <div className="flex items-center gap-2">
+          {isShow && <div className="flex items-center gap-2">
             <input
               checked={isSelected}
-              onChange={handleCheckboxChange}
+              onChange={(e) => {
+                e.stopPropagation();
+                handleCheckboxChange();
+              }}
+              onClick={(e) => e.stopPropagation()}
               className="h-5 w-5 accent-[#7480FF]"
               type="checkbox"
             />
             <p>Select</p>
-          </div>
+          </div>}
 
           {paper.answer_key_included && (
             <div className="flex items-center gap-2 font-normal text-[#7480FF]">
diff --git a/src/components/RelatedPaper.tsx b/src/components/RelatedPaper.tsx
index 18f040d..447be7c 100644
--- a/src/components/RelatedPaper.tsx
+++ b/src/components/RelatedPaper.tsx
@@ -90,7 +90,7 @@ const RelatedPapers = () => {
       {relatedPapers.length === 0 ? (
         <p className="font-play">No related papers found.</p>
       ) : (
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <div className=" cursor-pointer grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
           {relatedPapers.map((paper) => (
             <Card
               key={paper._id}
@@ -99,6 +99,7 @@ const RelatedPapers = () => {
                 ("");
               }}
               isSelected={false}
+              isShow={false}
             />
           ))}
         </div>

From 867d2010a7c872ed7947c1a702a5963e12443c06 Mon Sep 17 00:00:00 2001
From: Yogesh <yogeshkumar.n1234@gmail.com>
Date: Fri, 17 Apr 2026 23:31:38 +0530
Subject: [PATCH 07/10] refactor: use react icon X

---
 src/components/Card.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 88d7d84..1068171 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -3,6 +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 {
   extractBracketContent,
@@ -135,12 +136,12 @@ const Card = ({ paper, onSelect, isSelected, isShow=true }: CardProps) => {
             className="relative w-[95%] max-w-5xl h-[90vh] rounded-lg bg-white p-2 dark:bg-[#171720]"
             onClick={(e) => e.stopPropagation()}
           >
-            <button
-              className="absolute right-3 top-3 z-10 text-xl"
-              onClick={() => setPreviewOpen(false)}
-            >
-              ✕
-            </button>
+          <button
+            className="absolute top-3 left-6 z-50 p-2 rounded-full bg-black/60 text-white hover:bg-black transition"
+            onClick={() => setPreviewOpen(false)}
+          >
+            <X size={18} />
+          </button>
             <iframe
               src={`${getSecureUrl(paper.file_url)}#toolbar=0`}
               className="w-full h-full rounded-md"

From feb75dc4098412379d84c9955fa432134ad349ae Mon Sep 17 00:00:00 2001
From: Yogesh <yogeshkumar.n1234@gmail.com>
Date: Fri, 17 Apr 2026 23:41:42 +0530
Subject: [PATCH 08/10] feat: preview loader

---
 src/components/Card.tsx | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 1068171..6fa94c7 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -15,7 +15,6 @@ import {
   downloadFile,
 } from "@/lib/utils/download";
 import { Capsule } from "@/components/ui/capsule";
-import Link from "next/link";
 import { cn } from "@/lib/utils";
 
 interface CardProps {
@@ -27,7 +26,7 @@ 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));
   };
@@ -85,13 +84,12 @@ const Card = ({ paper, onSelect, isSelected, isShow=true }: CardProps) => {
 
         <div className="flex justify-end gap-2 px-4 pb-2">
           <Eye
-            size={22}
-            className="cursor-pointer hover:scale-105 transition"
-            onClick={(e) => {
-              e.stopPropagation();
-              setPreviewOpen(true);
-            }}
-          />
+              onClick={(e) => {
+                e.stopPropagation();
+                setIframeLoading(true); 
+                setPreviewOpen(true);
+              }}
+            />
 
           <Download
             size={20}
@@ -135,7 +133,13 @@ const Card = ({ paper, onSelect, isSelected, isShow=true }: CardProps) => {
           <div
             className="relative w-[95%] max-w-5xl h-[90vh] rounded-lg bg-white p-2 dark:bg-[#171720]"
             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"
             onClick={() => setPreviewOpen(false)}
@@ -145,6 +149,7 @@ const Card = ({ paper, onSelect, isSelected, isShow=true }: CardProps) => {
             <iframe
               src={`${getSecureUrl(paper.file_url)}#toolbar=0`}
               className="w-full h-full rounded-md"
+              onLoad={() => setIframeLoading(false)}
             />
           </div>
         </div>

From 9d388af7ba17e3156d62c85523ca611ab5e6b930 Mon Sep 17 00:00:00 2001
From: Yogesh <yogeshkumar.n1234@gmail.com>
Date: Fri, 17 Apr 2026 23:47:43 +0530
Subject: [PATCH 09/10] fix: build

---
 src/components/Card.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 6fa94c7..4765ba9 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -21,7 +21,7 @@ interface CardProps {
   paper: IPaper;
   onSelect: (paper: IPaper, isSelected: boolean) => void;
   isSelected: boolean;
-  isShow: boolean;
+  isShow?: boolean;
 }
 
 const Card = ({ paper, onSelect, isSelected, isShow=true }: CardProps) => {
@@ -84,6 +84,7 @@ const Card = ({ paper, onSelect, isSelected, isShow=true }: CardProps) => {
 
         <div className="flex justify-end gap-2 px-4 pb-2">
           <Eye
+           className="cursor-pointer transition-all duration-200 ease-out hover:scale-110"
               onClick={(e) => {
                 e.stopPropagation();
                 setIframeLoading(true); 

From 5dd2b5c881232a31cc53cc924ef25ac72298ed69 Mon Sep 17 00:00:00 2001
From: Yogesh Kumar N <yogeshkumar.n1234@gmail.com>
Date: Sat, 18 Apr 2026 00:09:15 +0530
Subject: [PATCH 10/10] Update Card.tsx

---
 src/components/Card.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 4765ba9..d73d2d1 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -43,7 +43,6 @@ const Card = ({ paper, onSelect, isSelected, isShow=true }: CardProps) => {
         onClick={(e) => {
   const target = e.target as HTMLElement;
 
-  // ignore clicks on interactive elements
   if (target.closest("button, input, svg")) return;
 
   window.open(paperLink, "_blank");
@@ -134,13 +133,14 @@ const Card = ({ paper, onSelect, isSelected, isShow=true }: CardProps) => {
           <div
             className="relative w-[95%] max-w-5xl h-[90vh] rounded-lg bg-white p-2 dark:bg-[#171720]"
             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>
+          >
+            <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"
             onClick={() => setPreviewOpen(false)}
@@ -159,4 +159,4 @@ const Card = ({ paper, onSelect, isSelected, isShow=true }: CardProps) => {
   );
 };
 
-export default Card;
\ No newline at end of file
+export default Card;