refac

src/lib/components/chat/FileNav.svelte

@@ -2,8 +2,10 @@
 	// Persists across mount/unmount cycles (module-level, not per-instance)
 	let savedPath = '/';
 	let savedFileRoot = null;
-	const treeExpandedCache = new Map<string, string[]>();
-	const treeContentsCache = new Map<string, [string, any[]][]>();
+	/** @type {Map<string, string[]>} */
+	const treeExpandedCache = new Map();
+	/** @type {Map<string, [string, any[]][]>} */
+	const treeContentsCache = new Map();
 </script>
 
 <script lang="ts">

src/lib/components/chat/FileNav/FilePreview.svelte

@@ -7,8 +7,7 @@
 	import { isCodeFile } from '$lib/utils/codeHighlight';
 	import { initMermaid, renderMermaidDiagram } from '$lib/utils';
 	import Spinner from '../../common/Spinner.svelte';
-	import PDFViewer from '../../common/PDFViewer.svelte';
-	import PptxPdfPreview from '../../common/PptxPdfPreview.svelte';
+	import PdfPagesPreview from '../../common/PdfPagesPreview.svelte';
 	import PanzoomContainer from '../../common/PanzoomContainer.svelte';
 	import DocxPreview from '../../common/DocxPreview.svelte';
 	import PptxPreview from '../../common/PptxPreview.svelte';
@@ -17,8 +16,7 @@
 	import SqliteView from './SqliteView.svelte';
 	import FileCodeEditor from './FileCodeEditor.svelte';
 
-	let pdfViewerRef: PDFViewer;
-	let pptxPdfPreviewRef: PptxPdfPreview;
+	let pdfPagesPreviewRef: PdfPagesPreview;
 	let fileCodeEditorRef: FileCodeEditor;
 
 	const i18n = getContext('i18n');
@@ -282,15 +280,14 @@
 	};
 
 	export const resetPdfView = () => {
-		pptxPdfPreviewRef?.resetView();
-		pdfViewerRef?.resetView();
+		pdfPagesPreviewRef?.resetView();
 	};
 </script>
 
 <div
 	class="flex-1 {fileImageUrl !== null ||
 	fileDocxData !== null ||
-	(filePdfData !== null && isPptx) ||
+	filePdfData !== null ||
 	(fileOfficeSlides !== null && fileOfficeSlides.length > 0)
 		? 'overflow-hidden'
 		: 'overflow-y-auto'} min-h-0 min-w-0 relative h-full"
@@ -326,22 +323,13 @@
 			</audio>
 		</div>
 	{:else if filePdfData !== null}
-		{#if isPptx}
-			<PptxPdfPreview
-				bind:this={pptxPdfPreviewRef}
-				data={filePdfData}
-				bind:currentSlide
-				{targetPage}
-				className="w-full h-full"
-			/>
-		{:else}
-			<PDFViewer
-				bind:this={pdfViewerRef}
-				data={filePdfData}
-				{targetPage}
-				className="w-full h-full"
-			/>
-		{/if}
+		<PdfPagesPreview
+			bind:this={pdfPagesPreviewRef}
+			data={filePdfData}
+			bind:currentSlide
+			{targetPage}
+			className="w-full h-full"
+		/>
 	{:else if fileSqliteData !== null}
 		<SqliteView data={fileSqliteData} />
 	{:else if fileDocxData !== null}

src/lib/components/common/PdfPagesPreview.svelte

@@ -14,7 +14,7 @@
 	let loading = false;
 	let error = '';
 	let slides: string[] = [];
-	let pptxPreviewRef: PptxPreview;
+	let pagesPreviewRef: PptxPreview;
 	let pdfDoc: PdfDocument | null = null;
 	let loadToken = 0;
 
@@ -62,7 +62,7 @@
 	}
 
 	export const resetView = () => {
-		pptxPreviewRef?.resetView();
+		pagesPreviewRef?.resetView();
 	};
 
 	onDestroy(() => {
@@ -80,5 +80,13 @@
 		{error}
 	</div>
 {:else}
-	<PptxPreview bind:this={pptxPreviewRef} {slides} bind:currentSlide {targetPage} {className} />
+	<PptxPreview
+		bind:this={pagesPreviewRef}
+		{slides}
+		bind:currentSlide
+		{targetPage}
+		{className}
+		itemLabel="Page"
+		listLabel="Pages"
+	/>
 {/if}

src/lib/components/common/PptxPreview.svelte

@@ -7,6 +7,8 @@
 	export let currentSlide = 0;
 	export let className = '';
 	export let targetPage: number | null = null;
+	export let itemLabel = 'Slide';
+	export let listLabel = 'Slides';
 
 	let rootEl: HTMLDivElement;
 	let stageEl: HTMLElement;
@@ -236,8 +238,8 @@
 	<aside
 		class={hideThumbs
 			? 'hidden'
-			: 'pptx-slide-rail overflow-y-auto px-2 pt-3 pb-16 border-r border-gray-50 dark:border-gray-850/30 bg-transparent'}
-		aria-label="Slides"
+			: 'thumbnail-sidebar overflow-y-auto px-2 pt-3 pb-16 border-r border-gray-50 dark:border-gray-850/30 bg-transparent'}
+		aria-label={listLabel}
 	>
 		{#each slides as slide, index}
 			<button
@@ -245,7 +247,7 @@
 				type="button"
 				class="grid grid-cols-[20px_minmax(0,1fr)] items-start gap-2 w-full mb-3 p-0 text-left text-gray-900 dark:text-gray-100"
 				on:click={() => selectSlide(index)}
-				aria-label="Slide {index + 1}"
+				aria-label="{itemLabel} {index + 1}"
 				aria-current={safeSlide === index ? 'true' : undefined}
 			>
 				<span
@@ -260,7 +262,7 @@
 				>
 					<img
 						src={slide}
-						alt="Slide {index + 1} thumbnail"
+						alt="{itemLabel} {index + 1} thumbnail"
 						class="block w-full h-full object-contain"
 						draggable="false"
 					/>
@@ -283,7 +285,7 @@
 				<img
 					bind:this={slideImgEl}
 					src={selectedSlide}
-					alt="Slide {safeSlide + 1}"
+					alt="{itemLabel} {safeSlide + 1}"
 					class="block w-full h-full object-contain rounded"
 					draggable="false"
 					on:load={onSlideLoad}
@@ -303,7 +305,7 @@
 				class="shrink-0 min-w-7 h-7 inline-flex items-center justify-center p-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-500 dark:text-gray-400 disabled:opacity-30"
 				disabled={safeSlide === 0}
 				on:click={() => selectSlide(safeSlide - 1)}
-				aria-label="Previous slide"
+				aria-label={`Previous ${itemLabel.toLowerCase()}`}
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -327,7 +329,7 @@
 				class="shrink-0 min-w-7 h-7 inline-flex items-center justify-center p-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-500 dark:text-gray-400 disabled:opacity-30"
 				disabled={safeSlide === slides.length - 1}
 				on:click={() => selectSlide(safeSlide + 1)}
-				aria-label="Next slide"
+				aria-label={`Next ${itemLabel.toLowerCase()}`}
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -391,36 +393,36 @@
 </div>
 
 <style>
-	.pptx-slide-rail {
+	.thumbnail-sidebar {
 		scrollbar-color: transparent transparent;
 	}
 
-	.pptx-slide-rail:hover,
-	.pptx-slide-rail:focus,
-	.pptx-slide-rail:focus-within,
-	.pptx-slide-rail:active {
+	.thumbnail-sidebar:hover,
+	.thumbnail-sidebar:focus,
+	.thumbnail-sidebar:focus-within,
+	.thumbnail-sidebar:active {
 		scrollbar-color: rgba(215, 215, 215, 0.6) transparent;
 	}
 
-	:global(.dark) .pptx-slide-rail:hover,
-	:global(.dark) .pptx-slide-rail:focus,
-	:global(.dark) .pptx-slide-rail:focus-within,
-	:global(.dark) .pptx-slide-rail:active {
+	:global(.dark) .thumbnail-sidebar:hover,
+	:global(.dark) .thumbnail-sidebar:focus,
+	:global(.dark) .thumbnail-sidebar:focus-within,
+	:global(.dark) .thumbnail-sidebar:active {
 		scrollbar-color: rgba(67, 67, 67, 0.6) transparent;
 	}
 
-	.pptx-slide-rail::-webkit-scrollbar-thumb {
+	.thumbnail-sidebar::-webkit-scrollbar-thumb {
 		visibility: hidden;
 	}
 
-	.pptx-slide-rail:hover::-webkit-scrollbar-thumb,
-	.pptx-slide-rail:focus::-webkit-scrollbar-thumb,
-	.pptx-slide-rail:focus-within::-webkit-scrollbar-thumb,
-	.pptx-slide-rail:active::-webkit-scrollbar-thumb {
+	.thumbnail-sidebar:hover::-webkit-scrollbar-thumb,
+	.thumbnail-sidebar:focus::-webkit-scrollbar-thumb,
+	.thumbnail-sidebar:focus-within::-webkit-scrollbar-thumb,
+	.thumbnail-sidebar:active::-webkit-scrollbar-thumb {
 		visibility: visible;
 	}
 
-	.pptx-slide-rail::-webkit-scrollbar-corner {
+	.thumbnail-sidebar::-webkit-scrollbar-corner {
 		display: none;
 	}
 </style>