fix: collapsible space toggle issue

src/lib/components/common/Collapsible.svelte

@@ -18,7 +18,9 @@
 
 <div class={className}>
 	{#if title !== null}
-		<button class={buttonClassName} on:click={() => (open = !open)}>
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<div class={buttonClassName} on:pointerup={() => (open = !open)}>
 			<div class=" w-fit font-medium transition flex items-center justify-between gap-2">
 				<div>
 					{title}
@@ -32,15 +34,17 @@
 					{/if}
 				</div>
 			</div>
-		</button>
+		</div>
 	{:else}
-		<button class={buttonClassName} on:click={() => (open = !open)}>
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<div class={buttonClassName} on:pointerup={() => (open = !open)}>
 			<div
 				class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
 			>
 				<slot />
 			</div>
-		</button>
+		</div>
 	{/if}
 
 	{#if open}

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

@@ -11,6 +11,8 @@
 
 	import FolderOpen from '$lib/components/icons/FolderOpen.svelte';
 	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
+	import { updateFolderNameById } from '$lib/apis/folders';
+	import { toast } from 'svelte-sonner';
 
 	export let open = true;
 
@@ -136,6 +138,29 @@
 			folderElement.removeEventListener('dragend', onDragEnd);
 		}
 	});
+
+	const nameUpdateHandler = async () => {
+		name = name.trim();
+
+		if (name === '') {
+			toast.error("Folder name can't be empty");
+			return;
+		}
+
+		if (name === folders[folderId].name) {
+			edit = false;
+			return;
+		}
+
+		const res = await updateFolderNameById(localStorage.token, folderId, name).catch((error) => {
+			toast.error(error);
+			return null;
+		});
+
+		if (res) {
+			folders[folderId].name = name;
+		}
+	};
 </script>
 
 {#if dragged && x && y}
@@ -194,17 +219,18 @@
 						<input
 							id="folder-{folderId}-input"
 							type="text"
-							bind:value={folders[folderId].name}
-							on:input={(e) => {
-								folders[folderId].name = e.target.value;
-							}}
+							bind:value={name}
 							on:blur={() => {
 								edit = false;
+								nameUpdateHandler();
 							}}
-							on:keydown={(e) => {
-								if (e.key === 'Enter') {
-									edit = false;
-								}
+							on:click={(e) => {
+								// Prevent accidental collapse toggling when clicking inside input
+								e.stopPropagation();
+							}}
+							on:mousedown={(e) => {
+								// Prevent accidental collapse toggling when clicking inside input
+								e.stopPropagation();
 							}}
 							class="w-full h-full bg-transparent text-gray-500 dark:text-gray-500 outline-none"
 						/>
@@ -213,14 +239,14 @@
 					{/if}
 				</div>
 
-				<div class=" hidden group-hover:flex">
+				<div class=" hidden group-hover:flex dark:text-gray-300">
 					<button
 						on:click={(e) => {
 							e.stopPropagation();
 							console.log('clicked');
 						}}
 					>
-						<EllipsisHorizontal className="size-3.5" strokeWidth="2.5" />
+						<EllipsisHorizontal className="size-4" strokeWidth="2.5" />
 					</button>
 				</div>
 			</button>