feat: replace iframe with secure canvas pdf viewer

Frontend/src/components/SecurePdfViewer.tsx

@@ -0,0 +1,162 @@
+import React, { useEffect, useState, useRef } from "react";
+import * as pdfjsLib from "pdfjs-dist";
+import { fetchNoteBlob } from "../api/notesService";
+import {
+  ChevronLeft,
+  ChevronRight,
+  ZoomIn,
+  ZoomOut,
+  Loader2,
+} from "lucide-react";
+
+// Configure PDF Worker (Required for pdfjs-dist)
+pdfjsLib.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjsLib.version}/build/pdf.worker.min.mjs`;
+
+interface Props {
+  noteId: number;
+}
+
+const SecurePdfViewer: React.FC<Props> = ({ noteId }) => {
+  const [pdfDoc, setPdfDoc] = useState<pdfjsLib.PDFDocumentProxy | null>(null);
+  const [pageNum, setPageNum] = useState(1);
+  const [scale, setScale] = useState(1.2);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  // 1. Fetch and Load PDF Data
+  useEffect(() => {
+    let isMounted = true;
+    const loadPdf = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        // Fetch securely using existing Axios setup (sends Auth header)
+        const blob = await fetchNoteBlob(noteId);
+        const arrayBuffer = await blob.arrayBuffer();
+
+        // Load into PDF.js
+        const loadedPdf = await pdfjsLib.getDocument({ data: arrayBuffer })
+          .promise;
+
+        if (isMounted) {
+          setPdfDoc(loadedPdf);
+          setPageNum(1);
+          setLoading(false);
+        }
+      } catch (err) {
+        console.error("PDF Load Error:", err);
+        if (isMounted) setError("Failed to load PDF. Please try again.");
+        setLoading(false);
+      }
+    };
+
+    if (noteId) loadPdf();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [noteId]);
+
+  // 2. Render Page on Canvas
+  useEffect(() => {
+    if (!pdfDoc || !canvasRef.current) return;
+
+    const renderPage = async () => {
+      try {
+        const page = await pdfDoc.getPage(pageNum);
+        const viewport = page.getViewport({ scale });
+        const canvas = canvasRef.current!;
+        const context = canvas.getContext("2d")!;
+
+        // Handle High DPI screens
+        const outputScale = window.devicePixelRatio || 1;
+        canvas.width = Math.floor(viewport.width * outputScale);
+        canvas.height = Math.floor(viewport.height * outputScale);
+        canvas.style.width = Math.floor(viewport.width) + "px";
+        canvas.style.height = Math.floor(viewport.height) + "px";
+
+        const transform =
+          outputScale !== 1
+            ? [outputScale, 0, 0, outputScale, 0, 0]
+            : undefined;
+
+        await page.render({
+          canvasContext: context,
+          viewport: viewport,
+          transform: transform,
+        }).promise;
+      } catch (err) {
+        console.error("Page Render Error:", err);
+      }
+    };
+
+    renderPage();
+  }, [pdfDoc, pageNum, scale]);
+
+  if (loading) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-white">
+        <Loader2 className="w-8 h-8 animate-spin text-[#F7E396] mb-2" />
+        <p>Securely loading document...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return <div className="text-red-400 p-4 text-center">{error}</div>;
+  }
+
+  return (
+    <div className="flex flex-col h-full bg-[#525f88] rounded-xl overflow-hidden relative">
+      {/* Toolbar */}
+      <div className="flex items-center justify-between p-2 bg-[#434E78] border-b border-white/10 text-white z-10 shadow-md">
+        <div className="flex items-center gap-2">
+          <button
+            disabled={pageNum <= 1}
+            onClick={() => setPageNum((p) => p - 1)}
+            className="p-1 hover:bg-white/10 rounded disabled:opacity-30 transition"
+          >
+            <ChevronLeft size={20} />
+          </button>
+          <span className="text-sm font-medium w-16 text-center">
+            {pageNum} / {pdfDoc?.numPages}
+          </span>
+          <button
+            disabled={!pdfDoc || pageNum >= pdfDoc.numPages}
+            onClick={() => setPageNum((p) => p + 1)}
+            className="p-1 hover:bg-white/10 rounded disabled:opacity-30 transition"
+          >
+            <ChevronRight size={20} />
+          </button>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setScale((s) => Math.max(0.5, s - 0.2))}
+            className="p-1 hover:bg-white/10 rounded transition"
+          >
+            <ZoomOut size={18} />
+          </button>
+          <span className="text-xs w-12 text-center">
+            {Math.round(scale * 100)}%
+          </span>
+          <button
+            onClick={() => setScale((s) => Math.min(3.0, s + 0.2))}
+            className="p-1 hover:bg-white/10 rounded transition"
+          >
+            <ZoomIn size={18} />
+          </button>
+        </div>
+      </div>
+
+      {/* Scrollable Canvas Area */}
+      <div className="flex-1 overflow-auto flex justify-center p-4 bg-[#525f88] custom-scrollbar">
+        <canvas ref={canvasRef} className="shadow-2xl" />
+      </div>
+    </div>
+  );
+};
+
+export default SecurePdfViewer;

Frontend/src/pages/note.tsx

@@ -2,6 +2,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import React, { useEffect, useState, useRef, useCallback } from "react";
 import { getNoteContentUrl } from "../api/notesService";
+import SecurePdfViewer from "../components/SecurePdfViewer"; // <--- Imported new component
 import {
   Upload,
   Menu,
@@ -19,7 +20,7 @@ import {
 import {
   fetchNotes,
   uploadNote,
-  fetchNoteBlob,
+  // fetchNoteBlob, // Not needed as the component handles the fetch
   createChatSession,
   streamChatRequest,
   fetchChatHistory,
@@ -44,7 +45,7 @@ const Notes: React.FC = () => {
   // --- Data State ---
   const [notes, setNotes] = useState<Note[]>([]);
   const [currentNote, setCurrentNote] = useState<Note | null>(null);
-  const [pdfUrl, setPdfUrl] = useState<string | null>(null);
+  // const [pdfUrl, setPdfUrl] = useState<string | null>(null); // <--- REMOVED
 
   // --- Edit/Rename State ---
   const [editingNoteId, setEditingNoteId] = useState<number | null>(null);
@@ -139,7 +140,7 @@ const Notes: React.FC = () => {
       setNotes((prev) => prev.filter((n) => n.id !== noteId));
       if (currentNote?.id === noteId) {
         setCurrentNote(null);
-        setPdfUrl(null);
+        // setPdfUrl(null); // <--- REMOVED
         setMessages([]);
         setSessionId(null);
       }
@@ -191,11 +192,10 @@ const Notes: React.FC = () => {
     setSessionId(null);
     setIsChatOpen(true);
 
-    const token = localStorage.getItem("token");
-
-    const secureUrl = `${getNoteContentUrl(note.id)}?token=${token}`;
-
-    setPdfUrl(secureUrl);
+    // --- PDF VIEWER LOGIC ---
+    // We no longer set pdfUrl state or append the token here.
+    // The SecurePdfViewer component handles the authenticated fetch internally
+    // using the currentNote.id prop.
 
     try {
       const existingSessions = await fetchSessions(note.id);
@@ -225,6 +225,7 @@ const Notes: React.FC = () => {
       console.error("Failed to init chat", error);
     }
   };
+
   const handleSendMessage = async () => {
     if (!inputMessage.trim() || !sessionId) return;
     const userMsg = inputMessage;
@@ -405,15 +406,10 @@ const Notes: React.FC = () => {
         </header>
 
         <div className="flex-1 w-full h-full relative p-4">
-          {pdfUrl ? (
+          {currentNote ? (
             <div className="w-full h-full rounded-xl overflow-hidden shadow-2xl border border-white/10 bg-white/5 backdrop-blur-sm">
-              <iframe
-                src={pdfUrl}
-                className={`w-full h-full border-none ${
-                  isResizing ? "pointer-events-none" : ""
-                }`}
-                title="PDF Viewer"
-              />
+              {/* FIX: Use the SecurePdfViewer component, passing the noteId */}
+              <SecurePdfViewer noteId={currentNote.id} />
             </div>
           ) : (
             <div className="flex flex-col items-center justify-center h-full text-gray-400/50">