From 6bdc2ffa79d72daf78981209c9c5292c697cbfe5 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sat, 9 May 2026 01:31:42 +0900
Subject: [PATCH] refac

---
 src/lib/components/chat/FileNav.svelte        | 38 ++++++++++++--
 .../chat/FileNav/FileEntryRow.svelte          | 16 ++++++
 .../chat/FileNav/FileNavToolbar.svelte        | 49 +++++++++++++++++++
 src/lib/i18n/locales/en-US/translation.json   |  3 ++
 4 files changed, 102 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/chat/FileNav.svelte b/src/lib/components/chat/FileNav.svelte
index 2e81a94294..1bd204398c 100644
--- a/src/lib/components/chat/FileNav.svelte
+++ b/src/lib/components/chat/FileNav.svelte
@@ -92,6 +92,35 @@
 	let loading = false;
 	let error: string | null = null;
 
+	// ── Sort state ──────────────────────────────────────────────────────
+	type SortMode = 'name' | 'date';
+	let sortBy: SortMode = 'name';
+	let sortAsc = true;
+
+	const sortEntries = (items: FileEntry[]): FileEntry[] => {
+		return [...items].sort((a, b) => {
+			// Directories always first
+			if (a.type !== b.type) return a.type === 'directory' ? -1 : 1;
+			if (sortBy === 'date') {
+				const aTime = a.modified ?? 0;
+				const bTime = b.modified ?? 0;
+				return sortAsc ? aTime - bTime : bTime - aTime;
+			}
+			const cmp = a.name.localeCompare(b.name);
+			return sortAsc ? cmp : -cmp;
+		});
+	};
+
+	const toggleSort = (mode: SortMode) => {
+		if (sortBy === mode) {
+			sortAsc = !sortAsc;
+		} else {
+			sortBy = mode;
+			sortAsc = mode === 'name'; // name defaults asc, date defaults asc (oldest first)
+		}
+		entries = sortEntries(entries);
+	};
+
 	// ── Navigation history ──────────────────────────────────────────────
 	type NavEntry = { path: string; file: string | null };
 	let navHistory: NavEntry[] = [];
@@ -341,10 +370,7 @@
 				'Failed to load directory. Check your Terminal connection in Settings → Integrations.';
 			entries = [];
 		} else {
-			entries = result.sort((a, b) => {
-				if (a.type !== b.type) return a.type === 'directory' ? -1 : 1;
-				return a.name.localeCompare(b.name);
-			});
+			entries = sortEntries(result);
 		}
 	};
 
@@ -918,6 +944,8 @@
 				{loading}
 				{canGoBack}
 				{canGoForward}
+				{sortBy}
+				{sortAsc}
 				onGoBack={goBack}
 				onGoForward={goForward}
 				onNavigate={loadDir}
@@ -934,6 +962,7 @@
 				onUploadFiles={handleUploadFiles}
 				onDownloadDir={() => downloadFile(currentPath)}
 				onMove={handleMove}
+				onSort={toggleSort}
 			>
 				{#if fileImageUrl !== null || (fileOfficeSlides !== null && fileOfficeSlides.length > 0)}
 					<Tooltip content={$i18n.t('Reset view')}>
@@ -1355,6 +1384,7 @@
 									onRename={handleRename}
 									onSelect={handleSelect}
 									onLongPress={enterSelectionMode}
+									showDate={sortBy === 'date'}
 								/>
 							{/each}
 						</ul>
diff --git a/src/lib/components/chat/FileNav/FileEntryRow.svelte b/src/lib/components/chat/FileNav/FileEntryRow.svelte
index ef56c2c6b5..cd4c90f8a1 100644
--- a/src/lib/components/chat/FileNav/FileEntryRow.svelte
+++ b/src/lib/components/chat/FileNav/FileEntryRow.svelte
@@ -30,6 +30,17 @@
 	export let selectedPaths: Set<string> = new Set();
 	export let onSelect: (entry: FileEntry, event: MouseEvent) => void = () => {};
 	export let onLongPress: () => void = () => {};
+	export let showDate: boolean = false;
+
+	const formatRelativeTime = (epoch: number): string => {
+		const diff = Math.floor(Date.now() / 1000) - epoch;
+		if (diff < 60) return 'just now';
+		if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+		if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+		if (diff < 2592000) return `${Math.floor(diff / 86400)}d ago`;
+		if (diff < 31536000) return `${Math.floor(diff / 2592000)}mo ago`;
+		return `${Math.floor(diff / 31536000)}y ago`;
+	};
 
 	let dragOverFolder = false;
 
@@ -271,7 +282,12 @@
 				</span>
 			{/if}
 			{#if entry.type === 'file' && entry.size !== undefined && !renaming}
+				{#if showDate && entry.modified}
+					<span class="text-[10px] text-gray-400 shrink-0">{formatRelativeTime(entry.modified)}</span>
+				{/if}
 				<span class="text-xs text-gray-400 shrink-0">{formatFileSize(entry.size)}</span>
+			{:else if entry.type === 'directory' && showDate && entry.modified && !renaming}
+				<span class="text-[10px] text-gray-400 shrink-0">{formatRelativeTime(entry.modified)}</span>
 			{/if}
 		</button>
 
diff --git a/src/lib/components/chat/FileNav/FileNavToolbar.svelte b/src/lib/components/chat/FileNav/FileNavToolbar.svelte
index 6b705a98d6..0983995676 100644
--- a/src/lib/components/chat/FileNav/FileNavToolbar.svelte
+++ b/src/lib/components/chat/FileNav/FileNavToolbar.svelte
@@ -6,6 +6,7 @@
 	import FilePlusAlt from '../../icons/FilePlusAlt.svelte';
 	import Spinner from '../../common/Spinner.svelte';
 	import Tooltip from '../../common/Tooltip.svelte';
+	import Dropdown from '$lib/components/common/Dropdown.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -21,6 +22,11 @@
 	export let onDownloadDir: () => void = () => {};
 	export let onMove: (source: string, destFolder: string) => void = () => {};
 
+	// Sort controls
+	export let sortBy: 'name' | 'date' = 'name';
+	export let sortAsc: boolean = true;
+	export let onSort: (mode: 'name' | 'date') => void = () => {};
+
 	// Back / forward navigation
 	export let canGoBack = false;
 	export let canGoForward = false;
@@ -161,6 +167,49 @@
 	</Tooltip>
 
 	{#if !selectedFile}
+		<Dropdown align="end" sideOffset={4}>
+			<Tooltip content={$i18n.t('Sort')}>
+				<button
+					class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
+					aria-label={$i18n.t('Sort')}
+				>
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-3.5">
+						<path d="M2 3.75A.75.75 0 0 1 2.75 3h11.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 3.75ZM2 7.5a.75.75 0 0 1 .75-.75h7.508a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 7.5ZM14 7a.75.75 0 0 1 .75.75v6.69l1.72-1.72a.75.75 0 1 1 1.06 1.06l-3 3a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 1 1 1.06-1.06l1.72 1.72V7.75A.75.75 0 0 1 14 7ZM2 11.25a.75.75 0 0 1 .75-.75h4.562a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z" />
+					</svg>
+				</button>
+			</Tooltip>
+
+			<div slot="content">
+				<div
+					class="min-w-[150px] rounded-2xl p-1 z-[9999999] bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800"
+				>
+					<button
+						type="button"
+						class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2 text-sm"
+						on:click={() => onSort('name')}
+					>
+						<span class="flex-1 text-left">{$i18n.t('Name')}</span>
+						{#if sortBy === 'name'}
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-3 text-gray-500 dark:text-gray-400 transition-transform {sortAsc ? '' : 'rotate-180'}">
+								<path fill-rule="evenodd" d="M11.78 9.78a.75.75 0 0 1-1.06 0L8 7.06 5.28 9.78a.75.75 0 0 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06Z" clip-rule="evenodd" />
+							</svg>
+						{/if}
+					</button>
+					<button
+						type="button"
+						class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2 text-sm"
+						on:click={() => onSort('date')}
+					>
+						<span class="flex-1 text-left">{$i18n.t('Date Modified')}</span>
+						{#if sortBy === 'date'}
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-3 text-gray-500 dark:text-gray-400 transition-transform {sortAsc ? '' : 'rotate-180'}">
+								<path fill-rule="evenodd" d="M11.78 9.78a.75.75 0 0 1-1.06 0L8 7.06 5.28 9.78a.75.75 0 0 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06Z" clip-rule="evenodd" />
+							</svg>
+						{/if}
+					</button>
+				</div>
+			</div>
+		</Dropdown>
 		<Tooltip content={$i18n.t('New Folder')}>
 			<button
 				class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
diff --git a/src/lib/i18n/locales/en-US/translation.json b/src/lib/i18n/locales/en-US/translation.json
index fa95605898..a84604c76a 100644
--- a/src/lib/i18n/locales/en-US/translation.json
+++ b/src/lib/i18n/locales/en-US/translation.json
@@ -497,6 +497,7 @@
 	"Danger Zone": "",
 	"Dark": "",
 	"Data Controls": "",
+	"Date Modified": "",
 	"Database": "",
 	"Datalab Marker API": "",
 	"Day": "",
@@ -1900,6 +1901,8 @@
 	"Sonar Reasoning Pro": "",
 	"Sort": "",
 	"Sort by": "",
+	"Sort by date": "",
+	"Sort by name": "",
 	"Sougou Search API sID": "",
 	"Sougou Search API SK": "",
 	"Source": "",