refac: folder id -> uuid

src/lib/components/layout/Sidebar.svelte

@@ -75,6 +75,8 @@
 			return [];
 		});
 
+		folders = {};
+
 		for (const folder of folderList) {
 			folders[folder.id] = { ...(folders[folder.id] ? folders[folder.id] : {}), ...folder };
 
@@ -636,15 +638,15 @@
 				</div>
 			{/if}
 
-			{#if folders}
-				<div class=" flex flex-col">
+			<div class=" flex-1 flex flex-col overflow-y-auto scrollbar-hidden">
+				{#if !search && folders}
 					<Folders {folders} />
-				</div>
-			{/if}
+				{/if}
 
-			<div class="flex-1 flex flex-col space-y-1 overflow-y-auto scrollbar-hidden">
 				<Folder
-					collapsible={false}
+					collapsible={!search}
+					className="px-2"
+					name={$i18n.t('All chats')}
 					on:drop={async (e) => {
 						const { type, id } = e.detail;
 
@@ -662,7 +664,7 @@
 						}
 					}}
 				>
-					<div class="pt-2 pl-2">
+					<div class="pt-1.5">
 						{#if $chats}
 							{#each $chats as chat, idx}
 								{#if idx === 0 || (idx > 0 && chat.time_range !== $chats[idx - 1].time_range)}
@@ -695,6 +697,7 @@
 								{/if}
 
 								<ChatItem
+									className=""
 									id={chat.id}
 									title={chat.title}
 									{shiftKey}

src/lib/components/layout/Sidebar/ChatItem.svelte

@@ -158,9 +158,9 @@
 
 {#if dragged && x && y}
 	<DragGhost {x} {y}>
-		<div class=" bg-black/80 backdrop-blur-2xl px-2 py-1 rounded-lg w-40">
+		<div class=" bg-black/80 backdrop-blur-2xl px-2 py-1 rounded-lg w-fit max-w-40">
 			<div class="flex items-center gap-1">
-				<Document className="size-4" strokeWidth="2" />
+				<Document className=" size-[18px]" strokeWidth="2" />
 				<div class=" text-xs text-white line-clamp-1">
 					{title}
 				</div>

src/lib/components/layout/Sidebar/Folders.svelte

@@ -6,7 +6,12 @@
 	// Get the list of folders that have no parent, sorted by name alphabetically
 	$: folderList = Object.keys(folders)
 		.filter((key) => folders[key].parent_id === null)
-		.sort((a, b) => folders[a].name.localeCompare(folders[b].name));
+		.sort((a, b) =>
+			folders[a].name.localeCompare(folders[b].name, undefined, {
+				numeric: true,
+				sensitivity: 'base'
+			})
+		);
 </script>
 
 {#each folderList as folderId (folderId)}

src/lib/components/layout/Sidebar/RecursiveFolder.svelte

@@ -10,13 +10,14 @@
 	import DragGhost from '$lib/components/common/DragGhost.svelte';
 
 	import FolderOpen from '$lib/components/icons/FolderOpen.svelte';
+	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
 
 	export let open = true;
 
 	export let folders;
 	export let folderId;
 
-	export let className;
+	export let className = '';
 
 	let folderElement;
 
@@ -67,6 +68,7 @@
 	let y;
 
 	const onDragStart = (event) => {
+		event.stopPropagation();
 		event.dataTransfer.setDragImage(dragImage, 0, 0);
 
 		// Set the data to be transferred
@@ -83,11 +85,15 @@
 	};
 
 	const onDrag = (event) => {
+		event.stopPropagation();
+
 		x = event.clientX;
 		y = event.clientY;
 	};
 
 	const onDragEnd = (event) => {
+		event.stopPropagation();
+
 		folderElement.style.opacity = '1'; // Reset visual cue after drag
 		dragged = false;
 	};
@@ -122,7 +128,7 @@
 
 {#if dragged && x && y}
 	<DragGhost {x} {y}>
-		<div class=" bg-black/80 backdrop-blur-2xl px-2 py-1 rounded-lg w-40">
+		<div class=" bg-black/80 backdrop-blur-2xl px-2 py-1 rounded-lg w-fit max-w-40">
 			<div class="flex items-center gap-1">
 				<FolderOpen className="size-3.5" strokeWidth="2" />
 				<div class=" text-xs text-white line-clamp-1">
@@ -149,7 +155,7 @@
 		}}
 	>
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div class="w-full">
+		<div class="w-full group">
 			<button
 				class="w-full py-1.5 px-2 rounded-md flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-500 font-medium hover:bg-gray-100 dark:hover:bg-gray-900 transition"
 				on:dblclick={() => {
@@ -194,6 +200,17 @@
 						{folders[folderId].name}
 					{/if}
 				</div>
+
+				<div class=" hidden group-hover:flex">
+					<button
+						on:click={(e) => {
+							e.stopPropagation();
+							console.log('clicked');
+						}}
+					>
+						<EllipsisHorizontal className="size-3.5" strokeWidth="2.5" />
+					</button>
+				</div>
 			</button>
 		</div>
 
@@ -203,8 +220,8 @@
 					class="ml-3 pl-1 mt-[1px] flex flex-col overflow-y-auto scrollbar-hidden border-s dark:border-gray-850"
 				>
 					{#if folders[folderId]?.childrenIds}
-						{#each folders[folderId]?.childrenIds as folderId (folderId)}
-							<svelte:self {folders} {folderId} />
+						{#each folders[folderId]?.childrenIds as childId (`${folderId}-${childId}`)}
+							<svelte:self {folders} folderId={childId} />
 						{/each}
 					{/if}