From 4d577a20a9469c687fb56e816b55faed62e9effd Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 15 Apr 2026 21:56:18 +0530
Subject: [PATCH] refactor: update PDF viewer and report card components for
 improved accessibility and UI consistency

---
 .../components/report-panel/pdf-viewer.tsx    | 28 +++++++++----------
 .../components/tool-ui/generate-report.tsx    | 20 ++++---------
 .../components/tool-ui/generate-resume.tsx    | 25 +++++------------
 3 files changed, 27 insertions(+), 46 deletions(-)

diff --git a/surfsense_web/components/report-panel/pdf-viewer.tsx b/surfsense_web/components/report-panel/pdf-viewer.tsx
index eb79431be..d161ed27c 100644
--- a/surfsense_web/components/report-panel/pdf-viewer.tsx
+++ b/surfsense_web/components/report-panel/pdf-viewer.tsx
@@ -1,11 +1,12 @@
 "use client";
 
 import { ChevronLeftIcon, ChevronRightIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { Document, Page, pdfjs } from "react-pdf";
 import "react-pdf/dist/Page/AnnotationLayer.css";
 import "react-pdf/dist/Page/TextLayer.css";
 import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
 import { getAuthHeaders } from "@/lib/auth-utils";
 
 pdfjs.GlobalWorkerOptions.workerSrc = new URL(
@@ -27,8 +28,7 @@ export function PdfViewer({ pdfUrl }: PdfViewerProps) {
 	const [scale, setScale] = useState(1);
 	const [loadError, setLoadError] = useState<string | null>(null);
 	const containerRef = useRef<HTMLDivElement>(null);
-
-	const documentOptions = useMemo(() => ({ httpHeaders: getAuthHeaders() }), []);
+	const documentOptionsRef = useRef({ httpHeaders: getAuthHeaders() });
 
 	const onDocumentLoadSuccess = useCallback(({ numPages }: { numPages: number }) => {
 		setNumPages(numPages);
@@ -109,17 +109,17 @@ export function PdfViewer({ pdfUrl }: PdfViewerProps) {
 			)}
 
 			{/* PDF content */}
-			<div ref={containerRef} className="flex-1 overflow-auto flex justify-center bg-muted/30 p-4">
-				<Document
-					file={pdfUrl}
-					onLoadSuccess={onDocumentLoadSuccess}
-					onLoadError={onDocumentLoadError}
-					options={documentOptions}
-					loading={
-						<div className="flex items-center justify-center h-64">
-							<div className="size-6 border-2 border-primary border-t-transparent rounded-full animate-spin" />
-						</div>
-					}
+		<div ref={containerRef} className="flex-1 overflow-auto flex justify-center bg-sidebar p-0">
+			<Document
+				file={pdfUrl}
+				onLoadSuccess={onDocumentLoadSuccess}
+				onLoadError={onDocumentLoadError}
+				options={documentOptionsRef.current}
+			loading={
+				<div className="flex items-center justify-center h-64 text-sidebar-foreground">
+					<Spinner size="md" />
+				</div>
+			}
 				>
 					<Page
 						pageNumber={pageNumber}
diff --git a/surfsense_web/components/tool-ui/generate-report.tsx b/surfsense_web/components/tool-ui/generate-report.tsx
index 7606a8723..8f1b1a7e4 100644
--- a/surfsense_web/components/tool-ui/generate-report.tsx
+++ b/surfsense_web/components/tool-ui/generate-report.tsx
@@ -215,19 +215,11 @@ function ReportCard({
 		<div
 			className={`my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300 ${isActive ? "ring-1 ring-primary/50" : ""}`}
 		>
-			{/* biome-ignore lint/a11y/useSemanticElements: can't use <button> here because PlateEditor renders nested <button> elements (e.g. CopyButton) */}
-			<div
-				role="button"
-				tabIndex={0}
-				onClick={handleOpen}
-				onKeyDown={(e) => {
-					if (e.key === "Enter" || e.key === " ") {
-						e.preventDefault();
-						handleOpen();
-					}
-				}}
-				className="w-full text-left transition-colors hover:bg-muted/50 focus:outline-none focus-visible:outline-none cursor-pointer"
-			>
+		<button
+			type="button"
+			onClick={handleOpen}
+			className="w-full text-left transition-colors hover:bg-muted/50 focus:outline-none focus-visible:outline-none cursor-pointer"
+		>
 				<div className="px-5 pt-5 pb-4 select-none">
 					<p className="text-sm font-semibold text-foreground line-clamp-2">
 						{isLoading ? title : metadata.title}
@@ -272,7 +264,7 @@ function ReportCard({
 						<p className="text-sm text-muted-foreground italic">No content available</p>
 					)}
 				</div>
-			</div>
+			</button>
 		</div>
 	);
 }
diff --git a/surfsense_web/components/tool-ui/generate-resume.tsx b/surfsense_web/components/tool-ui/generate-resume.tsx
index ffd21b07b..a2c1aa5c4 100644
--- a/surfsense_web/components/tool-ui/generate-resume.tsx
+++ b/surfsense_web/components/tool-ui/generate-resume.tsx
@@ -56,7 +56,6 @@ function ResumeErrorState({ title, error }: { title: string; error: string }) {
 		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
 			<div className="px-5 pt-5 pb-4">
 				<div className="flex items-center gap-2">
-					<FileTextIcon className="size-4 text-destructive" />
 					<p className="text-sm font-semibold text-destructive">Resume Generation Failed</p>
 				</div>
 			</div>
@@ -74,7 +73,6 @@ function ResumeCancelledState() {
 		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
 			<div className="px-5 pt-5 pb-4">
 				<div className="flex items-center gap-2">
-					<FileTextIcon className="size-4 text-muted-foreground" />
 					<p className="text-sm font-semibold text-muted-foreground">Resume Cancelled</p>
 				</div>
 				<p className="text-xs text-muted-foreground mt-0.5">Resume generation was cancelled</p>
@@ -131,22 +129,13 @@ function ResumeCard({
 		<div
 			className={`my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300 ${isActive ? "ring-1 ring-primary/50" : ""}`}
 		>
-			{/* biome-ignore lint/a11y/useSemanticElements: nested interactive content */}
-			<div
-				role="button"
-				tabIndex={0}
-				onClick={handleOpen}
-				onKeyDown={(e) => {
-					if (e.key === "Enter" || e.key === " ") {
-						e.preventDefault();
-						handleOpen();
-					}
-				}}
-				className="w-full text-left transition-colors hover:bg-muted/50 focus:outline-none focus-visible:outline-none cursor-pointer"
-			>
+		<button
+			type="button"
+			onClick={handleOpen}
+			className="w-full text-left transition-colors hover:bg-muted/50 focus:outline-none focus-visible:outline-none cursor-pointer"
+		>
 				<div className="px-5 pt-5 pb-4 select-none">
 					<div className="flex items-center gap-2">
-						<FileTextIcon className="size-4 text-primary" />
 						<p className="text-sm font-semibold text-foreground line-clamp-2">{title}</p>
 					</div>
 					<p className="text-xs text-muted-foreground mt-0.5">Resume • Click to preview</p>
@@ -157,7 +146,7 @@ function ResumeCard({
 				<div className="px-5 pt-3 pb-4 flex items-center justify-center">
 					{pdfThumbnailUrl ? (
 						<div className="flex items-center gap-3 text-muted-foreground">
-							<FileTextIcon className="size-8 text-primary/40" />
+							<FileTextIcon className="size-8 text-primary" />
 							<span className="text-sm">PDF Resume ready — click to view</span>
 						</div>
 					) : (
@@ -168,7 +157,7 @@ function ResumeCard({
 						</div>
 					)}
 				</div>
-			</div>
+			</button>
 		</div>
 	);
 }