From 3a4b862e818c69fff6f3a3c67b50c51aa00c03e9 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 23 Mar 2026 22:35:26 -0500
Subject: [PATCH] refac

---
 src/lib/components/chat/FileNav.svelte        | 57 ++++++++++++++++++-
 .../chat/FileNav/FileNavToolbar.svelte        | 38 +++++++++++++
 2 files changed, 94 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/chat/FileNav.svelte b/src/lib/components/chat/FileNav.svelte
index 6c4fb1544..3ae9bd812 100644
--- a/src/lib/components/chat/FileNav.svelte
+++ b/src/lib/components/chat/FileNav.svelte
@@ -89,6 +89,54 @@
 	let loading = false;
 	let error: string | null = null;
 
+	// ── Navigation history ──────────────────────────────────────────────
+	type NavEntry = { path: string; file: string | null };
+	let navHistory: NavEntry[] = [];
+	let navIndex = -1;
+	let navigatingHistory = false;
+
+	$: canGoBack = navIndex > 0;
+	$: canGoForward = navIndex < navHistory.length - 1;
+
+	const pushNavHistory = (path: string, file: string | null = null) => {
+		if (navigatingHistory) return;
+		// Skip if this is the same as the current entry
+		const current = navHistory[navIndex];
+		if (current && current.path === path && current.file === file) return;
+		// Truncate forward history when navigating to a new location
+		if (navIndex < navHistory.length - 1) {
+			navHistory = navHistory.slice(0, navIndex + 1);
+		}
+		navHistory = [...navHistory, { path, file }];
+		navIndex = navHistory.length - 1;
+	};
+
+	const goBack = async () => {
+		if (!canGoBack) return;
+		navigatingHistory = true;
+		navIndex -= 1;
+		const entry = navHistory[navIndex];
+		await loadDir(entry.path);
+		if (entry.file) {
+			const fileName = entry.file.split('/').pop() ?? '';
+			await openEntry({ name: fileName, type: 'file', size: 0 });
+		}
+		navigatingHistory = false;
+	};
+
+	const goForward = async () => {
+		if (!canGoForward) return;
+		navigatingHistory = true;
+		navIndex += 1;
+		const entry = navHistory[navIndex];
+		await loadDir(entry.path);
+		if (entry.file) {
+			const fileName = entry.file.split('/').pop() ?? '';
+			await openEntry({ name: fileName, type: 'file', size: 0 });
+		}
+		navigatingHistory = false;
+	};
+
 	// ── File preview state ───────────────────────────────────────────────
 	let selectedFile: string | null = null;
 	let previewPort: number | null = null;
@@ -259,6 +307,7 @@
 		clearFilePreview();
 		currentPath = path;
 		savedPath = path;
+		pushNavHistory(path);
 
 		const result = await listFiles(terminal.url, terminal.key, path);
 		loading = false;
@@ -284,10 +333,12 @@
 			return;
 		}
 
+		const filePath = `${currentPath}${entry.name}`;
+		pushNavHistory(currentPath, filePath);
+
 		const terminal = selectedTerminal;
 		if (!terminal) return;
 
-		const filePath = `${currentPath}${entry.name}`;
 		selectedFile = filePath;
 		fileLoading = true;
 		clearFilePreview();
@@ -659,6 +710,10 @@
 			breadcrumbs={buildBreadcrumbs(currentPath)}
 			{selectedFile}
 			{loading}
+			{canGoBack}
+			{canGoForward}
+			onGoBack={goBack}
+			onGoForward={goForward}
 			onNavigate={loadDir}
 			onRefresh={() => {
 				if (selectedFile) {
diff --git a/src/lib/components/chat/FileNav/FileNavToolbar.svelte b/src/lib/components/chat/FileNav/FileNavToolbar.svelte
index fcf61c0ef..3a8906f19 100644
--- a/src/lib/components/chat/FileNav/FileNavToolbar.svelte
+++ b/src/lib/components/chat/FileNav/FileNavToolbar.svelte
@@ -20,6 +20,12 @@
 	export let onUploadFiles: (files: File[]) => void = () => {};
 	export let onMove: (source: string, destFolder: string) => void = () => {};
 
+	// Back / forward navigation
+	export let canGoBack = false;
+	export let canGoForward = false;
+	export let onGoBack: () => void = () => {};
+	export let onGoForward: () => void = () => {};
+
 	let dragOverCrumb: number | null = null;
 
 	let uploadInput: HTMLInputElement;
@@ -32,6 +38,38 @@
 </script>
 
 <div class="flex items-center px-2 pb-1.5 shrink-0 gap-1">
+	<!-- Back -->
+	<Tooltip content={$i18n.t('Back')}>
+		<button
+			class="shrink-0 p-1 rounded transition {canGoBack
+				? 'text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-600 dark:hover:text-gray-400'
+				: 'text-gray-200 dark:text-gray-700 cursor-default'}"
+			on:click={onGoBack}
+			disabled={!canGoBack}
+			aria-label={$i18n.t('Back')}
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-3.5">
+				<path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
+			</svg>
+		</button>
+	</Tooltip>
+
+	<!-- Forward -->
+	<Tooltip content={$i18n.t('Forward')}>
+		<button
+			class="shrink-0 p-1 rounded transition {canGoForward
+				? 'text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-600 dark:hover:text-gray-400'
+				: 'text-gray-200 dark:text-gray-700 cursor-default'}"
+			on:click={onGoForward}
+			disabled={!canGoForward}
+			aria-label={$i18n.t('Forward')}
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-3.5">
+				<path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 1 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+			</svg>
+		</button>
+	</Tooltip>
+
 	<div
 		bind:this={breadcrumbEl}
 		class="flex items-center flex-1 min-w-0 overflow-x-auto scrollbar-none"