From 691a04f0dd5f3b3cfecfca193d6f81ad773b3b4c Mon Sep 17 00:00:00 2001
From: Tim Baek <tim@openwebui.com>
Date: Sun, 8 Feb 2026 03:39:29 +0400
Subject: [PATCH] refac

---
 src/lib/components/layout/Sidebar.svelte      |  2 ++
 .../components/layout/Sidebar/ChatItem.svelte | 29 +++++++++++++++++--
 .../layout/Sidebar/RecursiveFolder.svelte     |  1 +
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 2b0a448d6..5a92d991b 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -1244,6 +1244,7 @@
 												className=""
 												id={chat.id}
 												title={chat.title}
+												updatedAt={chat.updated_at}
 												{shiftKey}
 												selected={selectedChatId === chat.id}
 												on:select={() => {
@@ -1304,6 +1305,7 @@
 										className=""
 										id={chat.id}
 										title={chat.title}
+										updatedAt={chat.updated_at}
 										{shiftKey}
 										selected={selectedChatId === chat.id}
 										on:select={() => {
diff --git a/src/lib/components/layout/Sidebar/ChatItem.svelte b/src/lib/components/layout/Sidebar/ChatItem.svelte
index 46aedd204..f9d1f5d17 100644
--- a/src/lib/components/layout/Sidebar/ChatItem.svelte
+++ b/src/lib/components/layout/Sidebar/ChatItem.svelte
@@ -47,12 +47,30 @@
 
 	export let id;
 	export let title;
+	export let updatedAt: number | null = null;
 
 	export let selected = false;
 	export let shiftKey = false;
 
 	export let onDragEnd = () => {};
 
+	function formatTimeAgo(timestamp: number): string {
+		const now = Date.now();
+		const diff = now - timestamp * 1000; // timestamp is in seconds
+
+		const seconds = Math.floor(diff / 1000);
+		const minutes = Math.floor(seconds / 60);
+		const hours = Math.floor(minutes / 60);
+		const days = Math.floor(hours / 24);
+		const weeks = Math.floor(days / 7);
+
+		if (weeks > 0) return `${weeks}w`;
+		if (days > 0) return `${days}d`;
+		if (hours > 0) return `${hours}h`;
+		if (minutes > 0) return `${minutes}m`;
+		return 'now';
+	}
+
 	let chat = null;
 
 	let mouseOver = false;
@@ -423,11 +441,18 @@
 			on:focus={(e) => {}}
 			draggable="false"
 		>
-			<div class=" flex self-center flex-1 w-full">
-				<div dir="auto" class=" text-left self-center overflow-hidden w-full h-[20px] truncate">
+			<div class="flex self-center flex-1 w-full min-w-0">
+				<div dir="auto" class="text-left self-center overflow-hidden w-full h-[20px] truncate">
 					{title}
 				</div>
 			</div>
+
+			<!-- Time ago indicator -->
+			{#if updatedAt && !mouseOver}
+				<div class="shrink-0 self-center text-[10px] text-gray-400 dark:text-gray-500 pl-2">
+					{formatTimeAgo(updatedAt)}
+				</div>
+			{/if}
 		</a>
 	{/if}
 
diff --git a/src/lib/components/layout/Sidebar/RecursiveFolder.svelte b/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
index ed210cf7c..fc5a3f061 100644
--- a/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
+++ b/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
@@ -643,6 +643,7 @@
 						<ChatItem
 							id={chat.id}
 							title={chat.title}
+							updatedAt={chat.updated_at}
 							{shiftKey}
 							on:change={(e) => {
 								dispatch('change', e.detail);