From b3a5fd3875dc3c29a11eb5435438e55685cad639 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Thu, 13 Aug 2026 15:57:42 -0600
Subject: [PATCH] refac

---
 src/lib/components/common/PptxPreview.svelte | 54 ++++++++++++++++----
 1 file changed, 44 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/common/PptxPreview.svelte b/src/lib/components/common/PptxPreview.svelte
index 7f80ca1517..097a6a7716 100644
--- a/src/lib/components/common/PptxPreview.svelte
+++ b/src/lib/components/common/PptxPreview.svelte
@@ -196,33 +196,32 @@
 	bind:this={rootEl}
 	class="relative grid {hideThumbs
 		? 'grid-cols-[minmax(0,1fr)]'
-		: 'grid-cols-[160px_minmax(0,1fr)]'} h-full min-h-0 bg-transparent text-gray-900 dark:text-gray-100 {className}"
+		: 'grid-cols-[144px_minmax(0,1fr)]'} h-full min-h-0 bg-transparent text-gray-900 dark:text-gray-100 {className}"
 >
 	<aside
 		class={hideThumbs
 			? 'hidden'
-			: 'scrollbar-hidden overflow-y-auto px-2.5 pt-3.5 pb-16 border-r border-gray-200/60 dark:border-white/10 bg-transparent'}
+			: '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"
 	>
 		{#each slides as slide, index}
 			<button
 				use:trackThumbnail={index}
 				type="button"
-				class="grid grid-cols-[24px_minmax(0,1fr)] items-start gap-2 w-full mb-3.5 p-0 text-left text-gray-900 dark:text-gray-100"
+				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-current={safeSlide === index ? 'true' : undefined}
 			>
 				<span
-					class="pt-[0.4375rem] text-xs font-medium text-right {safeSlide === index
-						? 'text-gray-900 dark:text-gray-100'
-						: 'text-gray-400 dark:text-gray-600'}">{index + 1}</span
+					class="pt-1.5 text-[0.6875rem] font-medium text-right {safeSlide === index
+						? 'text-gray-400 dark:text-gray-500'
+						: 'text-gray-300/70 dark:text-gray-700'}">{index + 1}</span
 				>
 				<span
-					class="block aspect-video overflow-hidden rounded-lg bg-white border-2 {safeSlide ===
-					index
-						? 'border-gray-400 shadow-sm dark:border-gray-500'
-						: 'border-transparent opacity-45'}"
+					class="block aspect-video overflow-hidden rounded-md bg-white border {safeSlide === index
+						? 'border-gray-100 opacity-95 dark:border-gray-850/30'
+						: 'border-transparent opacity-55 hover:opacity-80'}"
 				>
 					<img
 						src={slide}
@@ -355,3 +354,38 @@
 		</div>
 	{/if}
 </div>
+
+<style>
+	.pptx-slide-rail {
+		scrollbar-color: transparent transparent;
+	}
+
+	.pptx-slide-rail:hover,
+	.pptx-slide-rail:focus,
+	.pptx-slide-rail:focus-within,
+	.pptx-slide-rail: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 {
+		scrollbar-color: rgba(67, 67, 67, 0.6) transparent;
+	}
+
+	.pptx-slide-rail::-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 {
+		visibility: visible;
+	}
+
+	.pptx-slide-rail::-webkit-scrollbar-corner {
+		display: none;
+	}
+</style>