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

---
 src/lib/components/chat/FileNav.svelte        | 22 ------------------
 .../chat/FileNav/FileEntryRow.svelte          | 19 +++++++++++----
 .../chat/FileNav/FileNavToolbar.svelte        |  6 ++---
 .../chat/FileNav/FilePreview.svelte           | 23 +++++++++++++++++++
 4 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/src/lib/components/chat/FileNav.svelte b/src/lib/components/chat/FileNav.svelte
index 3548140179..2f193357e2 100644
--- a/src/lib/components/chat/FileNav.svelte
+++ b/src/lib/components/chat/FileNav.svelte
@@ -1270,28 +1270,6 @@
 				onSort={toggleSort}
 				onToggleHidden={toggleHidden}
 			>
-				{#if fileImageUrl !== null || (fileOfficeSlides !== null && fileOfficeSlides.length > 0)}
-					<Tooltip content={$i18n.t('Reset view')}>
-						<button
-							class="shrink-0 flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
-							on:click={() => filePreviewRef?.resetImageView()}
-							aria-label={$i18n.t('Reset view')}
-						>
-							<Icon name="refresh" size={11} strokeWidth={1.4} />
-						</button>
-					</Tooltip>
-				{/if}
-				{#if filePdfData !== null}
-					<Tooltip content={$i18n.t('Reset view')}>
-						<button
-							class="shrink-0 flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
-							on:click={() => filePreviewRef?.resetPdfView()}
-							aria-label={$i18n.t('Reset view')}
-						>
-							<Icon name="refresh" size={11} strokeWidth={1.4} />
-						</button>
-					</Tooltip>
-				{/if}
 				{#if (isMarkdown || isCsv || isHtml || isJson || isSvg || isNotebook) && fileContent !== null && !editing}
 					<Tooltip content={showRaw ? $i18n.t('Preview') : $i18n.t('Source')}>
 						<button
diff --git a/src/lib/components/chat/FileNav/FileEntryRow.svelte b/src/lib/components/chat/FileNav/FileEntryRow.svelte
index d172d53397..f11c8b1f65 100644
--- a/src/lib/components/chat/FileNav/FileEntryRow.svelte
+++ b/src/lib/components/chat/FileNav/FileEntryRow.svelte
@@ -43,7 +43,8 @@
 	export let parentWritable = true;
 
 	$: entryPath =
-		fullPath ?? (entry.type === 'directory' ? `${currentPath}${entry.name}/` : `${currentPath}${entry.name}`);
+		fullPath ??
+		(entry.type === 'directory' ? `${currentPath}${entry.name}/` : `${currentPath}${entry.name}`);
 	$: directoryPath = entryPath.endsWith('/') ? entryPath : `${entryPath}/`;
 	$: writable = entry.writable !== false;
 	$: canMutate = parentWritable && writable;
@@ -164,6 +165,7 @@
 			{dragOverFolder
 			? 'bg-blue-50 dark:bg-blue-500/10 ring-1 ring-blue-400 dark:ring-blue-500 ring-inset'
 			: ''}"
+		role="presentation"
 		on:dragover={(e) => {
 			if (entry.type !== 'directory') return;
 			if (!writable) return;
@@ -207,7 +209,7 @@
 		{#if entry.type === 'directory'}
 			<button
 				type="button"
-				class="mr-1 flex w-4 shrink-0 items-center self-stretch justify-center text-gray-400 dark:text-gray-600 hover:text-gray-600 dark:hover:text-gray-400"
+				class="mr-1 flex w-3 shrink-0 items-center self-stretch justify-center text-gray-400 dark:text-gray-600 hover:text-gray-600 dark:hover:text-gray-400"
 				style="margin-left: {rowIndent};"
 				on:click|stopPropagation={() => onToggleExpand(directoryPath)}
 				aria-label={expanded ? $i18n.t('Collapse') : $i18n.t('Expand')}
@@ -250,7 +252,10 @@
 				} else {
 					e.dataTransfer?.setData(
 						'application/x-terminal-file-move',
-						JSON.stringify({ path: entry.type === 'directory' ? directoryPath : filePath, name: entry.name })
+						JSON.stringify({
+							path: entry.type === 'directory' ? directoryPath : filePath,
+							name: entry.name
+						})
 					);
 				}
 				if (entry.type === 'file') {
@@ -276,7 +281,7 @@
 			{#if selectionMode || selected}
 				<!-- Checkbox indicator -->
 				<div
-				class="size-3.5 shrink-0 rounded border transition-colors flex items-center justify-center
+					class="size-3.5 shrink-0 rounded border transition-colors flex items-center justify-center
 						{selected
 						? 'bg-blue-500 dark:bg-blue-600 border-blue-500 dark:border-blue-600 text-white'
 						: 'border-gray-300 dark:border-gray-600'}"
@@ -348,7 +353,11 @@
 							onOpen(entry);
 						}}
 					>
-						<Icon name={entry.type === 'directory' ? 'folder' : 'eye'} size={12} strokeWidth={1.4} />
+						<Icon
+							name={entry.type === 'directory' ? 'folder' : 'eye'}
+							size={12}
+							strokeWidth={1.4}
+						/>
 						<div class="flex items-center">
 							{entry.type === 'directory' ? $i18n.t('Open Folder') : $i18n.t('Open')}
 						</div>
diff --git a/src/lib/components/chat/FileNav/FileNavToolbar.svelte b/src/lib/components/chat/FileNav/FileNavToolbar.svelte
index 4399f7dbf7..e6c87047cf 100644
--- a/src/lib/components/chat/FileNav/FileNavToolbar.svelte
+++ b/src/lib/components/chat/FileNav/FileNavToolbar.svelte
@@ -52,7 +52,7 @@
 	<!-- Back -->
 	<Tooltip content={$i18n.t('Back')}>
 		<button
-			class="shrink-0 flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 {canGoBack
+			class="shrink-0 flex h-5 min-w-5 items-center justify-center rounded px-1 transition-colors duration-100 {canGoBack
 				? 'text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300'
 				: 'text-gray-200 dark:text-gray-700 cursor-default'}"
 			on:click={onGoBack}
@@ -66,7 +66,7 @@
 	<!-- Forward -->
 	<Tooltip content={$i18n.t('Forward')}>
 		<button
-			class="shrink-0 flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 {canGoForward
+			class="shrink-0 flex h-5 min-w-5 items-center justify-center rounded px-1 transition-colors duration-100 {canGoForward
 				? 'text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300'
 				: 'text-gray-200 dark:text-gray-700 cursor-default'}"
 			on:click={onGoForward}
@@ -79,7 +79,7 @@
 
 	<div
 		bind:this={breadcrumbEl}
-		class="flex items-center gap-1 flex-1 min-w-0 overflow-x-auto scrollbar-none"
+		class="flex items-center gap-1.5 flex-1 min-w-0 overflow-x-auto scrollbar-none"
 	>
 		{#each breadcrumbs as crumb, i}
 			{#if showSeparator(i)}
diff --git a/src/lib/components/chat/FileNav/FilePreview.svelte b/src/lib/components/chat/FileNav/FilePreview.svelte
index 8ef72ac6e3..66c38068d5 100644
--- a/src/lib/components/chat/FileNav/FilePreview.svelte
+++ b/src/lib/components/chat/FileNav/FilePreview.svelte
@@ -9,12 +9,14 @@
 	import Spinner from '../../common/Spinner.svelte';
 	import PDFViewer from '../../common/PDFViewer.svelte';
 	import PanzoomContainer from '../../common/PanzoomContainer.svelte';
+	import Tooltip from '../../common/Tooltip.svelte';
 	import DocxPreview from '../../common/DocxPreview.svelte';
 	import PptxPreview from '../../common/PptxPreview.svelte';
 	import JsonTreeView from './JsonTreeView.svelte';
 	import NotebookView from './NotebookView.svelte';
 	import SqliteView from './SqliteView.svelte';
 	import FileCodeEditor from './FileCodeEditor.svelte';
+	import Icon from './Icon.svelte';
 
 	let pdfViewerRef: PDFViewer;
 	let fileCodeEditorRef: FileCodeEditor;
@@ -273,6 +275,10 @@
 	export const resetPdfView = () => {
 		pdfViewerRef?.resetView();
 	};
+
+	const resetFloatingView = () => {
+		if (fileImageUrl !== null) panzoomRef?.reset();
+	};
 </script>
 
 <div
@@ -471,6 +477,23 @@
 			{$i18n.t('Could not read file.')}
 		</div>
 	{/if}
+
+	{#if !fileLoading && fileImageUrl !== null}
+		<div
+			class="absolute bottom-3 left-1/2 z-10 flex -translate-x-1/2 items-center rounded-lg border border-gray-200/60 bg-white/90 px-1 py-0.5 shadow-lg backdrop-blur-sm dark:border-gray-700/60 dark:bg-gray-850/90"
+		>
+			<Tooltip content={$i18n.t('Reset view')}>
+				<button
+					type="button"
+					class="inline-flex h-7 min-w-7 shrink-0 items-center justify-center rounded-md p-1.5 text-gray-500 transition hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
+					on:click={resetFloatingView}
+					aria-label={$i18n.t('Reset view')}
+				>
+					<Icon name="refresh" size={13} strokeWidth={1.4} />
+				</button>
+			</Tooltip>
+		</div>
+	{/if}
 </div>
 
 <style>