refac: folder click behaviour

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

@@ -401,11 +401,8 @@
 			on:click={() => {
 				dispatch('select');
 
-				if (
+				if ($selectedFolder) {
-					$selectedFolder &&
+					selectedFolder.set(null);
-					!($selectedFolder?.items?.chats.map((chat) => chat.id) ?? []).includes(id)
-				) {
-					selectedFolder.set(null); // Reset selected folder if the chat is not in it
 				}
 
 				if ($mobile) {

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

@@ -60,6 +60,8 @@
 	let draggedOver = false;
 	let dragged = false;
 
+	let clickTimer = null;
+
 	let name = '';
 
 	const onDragOver = (e) => {
@@ -342,14 +344,15 @@
 		console.log('Edit');
 		await tick();
 		name = folders[folderId].name;
-
 		edit = true;
+
+		await tick();
 		await tick();
 
 		const input = document.getElementById(`folder-${folderId}-input`);
-
 		if (input) {
 			input.focus();
+			input.select();
 		}
 	};
 
@@ -427,14 +430,25 @@
 		<div class="w-full group">
 			<button
 				id="folder-{folderId}-button"
-				class="relative w-full py-1.5 px-2 rounded-lg 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 {$selectedFolder?.id ===
+				class="relative w-full py-1 px-1.5 rounded-lg 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 {$selectedFolder?.id ===
 				folderId
 					? 'bg-gray-100 dark:bg-gray-900'
 					: ''}"
-				on:dblclick={() => {
+				on:dblclick={(e) => {
+					if (clickTimer) {
+						clearTimeout(clickTimer); // cancel the single-click action
+						clickTimer = null;
+					}
 					renameHandler();
 				}}
 				on:click={async (e) => {
+					(e) => e.stopPropagation();
+					if (clickTimer) {
+						clearTimeout(clickTimer);
+						clickTimer = null;
+					}
+
+					clickTimer = setTimeout(async () => {
 						await goto('/');
 
 						selectedFolder.set(folders[folderId]);
@@ -442,12 +456,18 @@
 						if ($mobile) {
 							showSidebar.set(!$showSidebar);
 						}
+						clickTimer = null;
+					}, 100); // 100ms delay (typical double-click threshold)
+				}}
+				on:pointerup={(e) => {
+					e.stopPropagation();
 				}}
 			>
 				<button
-					class="text-gray-300 dark:text-gray-600 transition-all"
+					class="text-gray-300 dark:text-gray-600 transition-all p-[3px] dark:hover:bg-gray-850 rounded-lg"
 					on:click={(e) => {
 						e.stopPropagation();
+						open = !open;
 					}}
 				>
 					{#if folders[folderId]?.meta?.icon}
@@ -479,10 +499,8 @@
 							id="folder-{folderId}-input"
 							type="text"
 							bind:value={name}
-							on:focus={(e) => {
-								e.target.select();
-							}}
 							on:blur={() => {
+								console.log('Blur');
 								updateHandler({ name });
 								edit = false;
 							}}
@@ -509,10 +527,6 @@
 
 				<button
 					class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
-					on:pointerup={(e) => {
-						e.stopPropagation();
-					}}
-					on:click={(e) => e.stopPropagation()}
 				>
 					<FolderMenu
 						onEdit={() => {
@@ -525,7 +539,7 @@
 							exportHandler();
 						}}
 					>
-						<button class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto" on:click={(e) => {}}>
+						<button class="p-1 dark:hover:bg-gray-850 rounded-lg touch-auto" on:click={(e) => {}}>
 							<EllipsisHorizontal className="size-4" strokeWidth="2.5" />
 						</button>
 					</FolderMenu>