From 674760bfc1122e0a19fe299e05a86d1cbb528e6f Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 8 Sep 2026 16:54:15 -0400
Subject: [PATCH] refac

---
 src/lib/components/chat/FileNav.svelte        | 43 ++++++-------------
 .../chat/FileNav/FileEntryRow.svelte          | 28 ++++++------
 2 files changed, 29 insertions(+), 42 deletions(-)

diff --git a/src/lib/components/chat/FileNav.svelte b/src/lib/components/chat/FileNav.svelte
index fb136deb31..570582f995 100644
--- a/src/lib/components/chat/FileNav.svelte
+++ b/src/lib/components/chat/FileNav.svelte
@@ -1297,34 +1297,19 @@
 		const selectedPath = path ?? entryPath(currentPath, entry);
 		const idx = index ?? visibleEntries.findIndex((row) => row.fullPath === selectedPath);
 		if (idx < 0) return;
-		if (event.shiftKey && lastClickedIndex !== null) {
-			// Range select — replaces current selection with range
-			const start = Math.min(lastClickedIndex, idx);
-			const end = Math.max(lastClickedIndex, idx);
-			const newSet = new Set<string>();
-			for (let i = start; i <= end; i++) {
-				const row = visibleEntries[i];
-				if (row) newSet.add(row.fullPath);
-			}
-			selectedEntries = newSet;
-		} else if (event.metaKey || event.ctrlKey) {
-			// Toggle one
-			if (selectedEntries.has(selectedPath)) {
-				selectedEntries.delete(selectedPath);
-			} else {
-				selectedEntries.add(selectedPath);
-			}
-			selectedEntries = selectedEntries;
-		} else {
-			// In selection mode (touch), toggle
-			if (selectedEntries.has(selectedPath)) {
-				selectedEntries.delete(selectedPath);
-			} else {
-				selectedEntries.add(selectedPath);
-			}
-			selectedEntries = selectedEntries;
+		const next = new Set(selectedEntries);
+		const remove = next.has(selectedPath);
+		const range = event.shiftKey && !remove && lastClickedIndex !== null;
+		const from = range ? Math.min(lastClickedIndex!, idx) : idx;
+		const to = range ? Math.max(lastClickedIndex!, idx) : idx;
+		for (let i = from; i <= to; i++) {
+			const row = visibleEntries[i];
+			if (!row) continue;
+			if (remove) next.delete(row.fullPath);
+			else next.add(row.fullPath);
 		}
-		lastClickedIndex = idx;
+		selectedEntries = next;
+		if (!event.shiftKey || lastClickedIndex === null) lastClickedIndex = idx;
 	};
 
 	const enterSelectionMode = () => {
@@ -1582,10 +1567,10 @@
 	>
 		{#if isDragOver && !isSearching}
 			<div
-				class="absolute inset-1 z-10 flex flex-col items-center justify-center gap-2 rounded-lg border border-black/15 bg-white/80 dark:border-white/15 dark:bg-gray-900/80 pointer-events-none"
+				class="absolute inset-1 z-10 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-black/15 bg-white/80 dark:border-white/15 dark:bg-gray-900/80 pointer-events-none"
 			>
 				<Icon name="upload" size={20} strokeWidth={1.4} class="text-gray-400 dark:text-gray-500" />
-				<span class="text-xs font-medium text-gray-600 dark:text-gray-300">
+				<span class="text-xs font-normal text-gray-600 dark:text-gray-300">
 					{$i18n.t('Drop to upload')}
 				</span>
 			</div>
diff --git a/src/lib/components/chat/FileNav/FileEntryRow.svelte b/src/lib/components/chat/FileNav/FileEntryRow.svelte
index ee2ca82043..d1f7f8c6e6 100644
--- a/src/lib/components/chat/FileNav/FileEntryRow.svelte
+++ b/src/lib/components/chat/FileNav/FileEntryRow.svelte
@@ -226,6 +226,21 @@
 			<span class="mr-1.5 w-5 shrink-0 self-stretch" style="margin-left: {rowIndent};"></span>
 		{/if}
 
+		{#if selectionMode || selected}
+			<button
+				type="button"
+				role="checkbox"
+				aria-checked={selected}
+				aria-label={$i18n.t('Select {{name}}', { name: entry.name })}
+				class="mr-2 flex size-3.5 shrink-0 items-center justify-center rounded border transition-colors {selected
+					? 'bg-gray-900 border-gray-900 text-white dark:bg-gray-200 dark:border-gray-200 dark:text-gray-900'
+					: 'border-gray-300 dark:border-gray-600'}"
+				on:click|stopPropagation={(event) => onSelect(entry, event, entryPath, rowIndex)}
+			>
+				{#if selected}<Icon name="check" size={10} strokeWidth={2} />{/if}
+			</button>
+		{/if}
+
 		<button
 			type="button"
 			class="flex min-w-0 flex-1 items-center gap-2 py-1.5 pr-2 text-left"
@@ -279,19 +294,6 @@
 				startRename();
 			}}
 		>
-			{#if selectionMode || selected}
-				<!-- Checkbox indicator -->
-				<div
-					class="size-3.5 shrink-0 rounded border transition-colors flex items-center justify-center
-						{selected
-						? 'bg-gray-900 border-gray-900 text-white dark:bg-gray-200 dark:border-gray-200 dark:text-gray-900'
-						: 'border-gray-300 dark:border-gray-600'}"
-				>
-					{#if selected}
-						<Icon name="check" size={10} strokeWidth={2} />
-					{/if}
-				</div>
-			{/if}
 			<FileTypeIcon name={entry.name} type={entry.type} size={12} />
 			{#if renaming}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->