From 613eac51c5c9cc67065998282af16e8016d5a2cb Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Thu, 15 Oct 2026 15:53:18 +0400
Subject: [PATCH] refac

---
 src/lib/components/chat/FileNav.svelte        | 20 ++++++++-----
 .../chat/FileNav/FileEntryRow.svelte          | 12 ++++----
 .../chat/FileNav/FileNavToolbar.svelte        | 30 ++++++++++---------
 3 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/src/lib/components/chat/FileNav.svelte b/src/lib/components/chat/FileNav.svelte
index 1e821dc173..511451d991 100644
--- a/src/lib/components/chat/FileNav.svelte
+++ b/src/lib/components/chat/FileNav.svelte
@@ -13,6 +13,8 @@
 
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
+	import Plus from '$lib/components/icons/Plus.svelte';
+	import Folder from '$lib/components/icons/Folder.svelte';
 	import { getContext, onMount, onDestroy, tick } from 'svelte';
 	import type { Readable } from 'svelte/store';
 	import type { i18n as I18n } from 'i18next';
@@ -2126,13 +2128,14 @@
 
 				{#if !isSearching && !loading && !error && !uploading && !($selectedTerminalId && $terminalServers === null)}
 					{#if creatingFolder}
-						<div class="flex h-7 items-center gap-2 px-2">
+						<div class="flex h-7 items-center gap-1.5 pl-[26px] pr-2">
 							<FileTypeIcon name={newFolderName} type="directory" />
 							<input
 								bind:this={newFolderInput}
 								bind:value={newFolderName}
-								class="flex-1 text-xs bg-transparent border border-gray-100 dark:border-white/[0.06] rounded px-1.5 py-0.5 outline-none focus:border-blue-400 dark:focus:border-blue-500"
+								class="min-w-0 flex-1 bg-transparent py-0.5 text-xs outline-hidden"
 								placeholder={$i18n.t('Folder name')}
+								aria-label={$i18n.t('Folder name')}
 								on:keydown={(e) => {
 									if (e.key === 'Enter') submitNewFolder();
 									if (e.key === 'Escape') {
@@ -2145,13 +2148,14 @@
 						</div>
 					{/if}
 					{#if creatingFile}
-						<div class="flex h-7 items-center gap-2 px-2">
+						<div class="flex h-7 items-center gap-1.5 pl-[26px] pr-2">
 							<FileTypeIcon name={newFileName} type="file" />
 							<input
 								bind:this={newFileInput}
 								bind:value={newFileName}
-								class="flex-1 text-xs bg-transparent border border-gray-100 dark:border-white/[0.06] rounded px-1.5 py-0.5 outline-none focus:border-blue-400 dark:focus:border-blue-500"
+								class="min-w-0 flex-1 bg-transparent py-0.5 text-xs outline-hidden"
 								placeholder={$i18n.t('File name')}
+								aria-label={$i18n.t('File name')}
 								on:keydown={(e) => {
 									if (e.key === 'Enter') submitNewFile();
 									if (e.key === 'Escape') {
@@ -2289,26 +2293,26 @@
 					</button>
 					<button
 						type="button"
-						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition disabled:opacity-40 disabled:hover:bg-transparent"
+						class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-xs hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-40"
 						disabled={!currentWritable}
 						on:click={() => {
 							closeDirectoryMenu();
 							startNewFile();
 						}}
 					>
-						<Icon name="empty-page" size={12} strokeWidth={1.4} />
+						<Plus className="size-3.5" />
 						<span>{$i18n.t('New File')}</span>
 					</button>
 					<button
 						type="button"
-						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition disabled:opacity-40 disabled:hover:bg-transparent"
+						class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-xs hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-40"
 						disabled={!currentWritable}
 						on:click={() => {
 							closeDirectoryMenu();
 							startNewFolder();
 						}}
 					>
-						<Icon name="folder" size={12} strokeWidth={1.4} />
+						<Folder className="size-3.5" />
 						<span>{$i18n.t('New Folder')}</span>
 					</button>
 					<button
diff --git a/src/lib/components/chat/FileNav/FileEntryRow.svelte b/src/lib/components/chat/FileNav/FileEntryRow.svelte
index cf2706a96b..6804709355 100644
--- a/src/lib/components/chat/FileNav/FileEntryRow.svelte
+++ b/src/lib/components/chat/FileNav/FileEntryRow.svelte
@@ -225,20 +225,20 @@
 		{:else if entry.type === 'directory'}
 			<button
 				type="button"
-				class="mr-1.5 flex w-5 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.5 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')}
 			>
 				<Icon
 					name={expanded ? 'chevron-down' : 'chevron-right'}
-					size={9}
+					size={12}
 					strokeWidth={1.5}
 					class={loadingChildren ? 'animate-pulse' : ''}
 				/>
 			</button>
 		{:else}
-			<span class="mr-1.5 w-5 shrink-0 self-stretch" style="margin-left: {rowIndent};"></span>
+			<span class="mr-1.5 w-3 shrink-0 self-stretch" style="margin-left: {rowIndent};"></span>
 		{/if}
 
 		{#if selectionMode || selected}
@@ -258,9 +258,7 @@
 
 		<button
 			type="button"
-			class="flex min-w-0 flex-1 items-center py-1.5 pr-2 text-left {variant === 'workspace'
-				? 'gap-1.5'
-				: 'gap-2'}"
+			class="flex min-w-0 flex-1 items-center gap-1.5 py-1.5 pr-2 text-left"
 			draggable={canMutate}
 			on:dragstart={(e) => {
 				if (!canMutate) {
@@ -314,7 +312,7 @@
 					<Icon name={expanded ? 'chevron-down' : 'chevron-right'} size={12} strokeWidth={1.5} />
 				{:else}<span class="w-3 shrink-0"></span>{/if}
 			{/if}
-			<FileTypeIcon name={entry.name} type={entry.type} size={variant === 'workspace' ? 14 : 12} />
+			<FileTypeIcon name={entry.name} type={entry.type} size={14} />
 			{#if renaming}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<input
diff --git a/src/lib/components/chat/FileNav/FileNavToolbar.svelte b/src/lib/components/chat/FileNav/FileNavToolbar.svelte
index 5b65d4e976..f9110490d3 100644
--- a/src/lib/components/chat/FileNav/FileNavToolbar.svelte
+++ b/src/lib/components/chat/FileNav/FileNavToolbar.svelte
@@ -5,6 +5,8 @@
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
 	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import Icon from './Icon.svelte';
+	import Plus from '$lib/components/icons/Plus.svelte';
+	import Folder from '$lib/components/icons/Folder.svelte';
 
 	export let dragType = 'application/x-terminal-file-move';
 	const i18n: any = getContext('i18n');
@@ -245,28 +247,28 @@
 				<DropdownMenu className="min-w-[9.375rem] z-[9999999]">
 					<button
 						type="button"
-						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition disabled:opacity-40 disabled:hover:bg-transparent"
-						on:click={() => {
-							onNewFolder();
-							actionsMenuOpen = false;
-						}}
-						disabled={!writable}
-					>
-						<Icon name="folder" size={12} strokeWidth={1.4} />
-						<span>{$i18n.t('New Folder')}</span>
-					</button>
-					<button
-						type="button"
-						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition disabled:opacity-40 disabled:hover:bg-transparent"
+						class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-xs hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-40"
 						on:click={() => {
 							onNewFile();
 							actionsMenuOpen = false;
 						}}
 						disabled={!writable}
 					>
-						<Icon name="empty-page" size={12} strokeWidth={1.4} />
+						<Plus className="size-3.5" />
 						<span>{$i18n.t('New File')}</span>
 					</button>
+					<button
+						type="button"
+						class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-xs hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-40"
+						on:click={() => {
+							onNewFolder();
+							actionsMenuOpen = false;
+						}}
+						disabled={!writable}
+					>
+						<Folder className="size-3.5" />
+						<span>{$i18n.t('New Folder')}</span>
+					</button>
 					<button
 						type="button"
 						class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition disabled:opacity-40 disabled:hover:bg-transparent"