fix: collapsible space toggle issue

backend/open_webui/apps/webui/models/folders.py

@@ -101,6 +101,10 @@ class FolderTable:
         try:
             with get_db() as db:
                 folder = db.query(Folder).filter_by(id=id, user_id=user_id).first()
+
+                if not folder:
+                    return None
+
                 return FolderModel.model_validate(folder)
         except Exception:
             return None
@@ -119,12 +123,16 @@ class FolderTable:
             with get_db() as db:
                 folder = (
                     db.query(Folder)
-                    .filter_by(parent_id=parent_id, user_id=user_id, name=name)
+                    .filter_by(parent_id=parent_id, user_id=user_id, name=name.lower())
                     .first()
                 )
+
+                if not folder:
+                    return None
+
                 return FolderModel.model_validate(folder)
         except Exception as e:
-            log.error(f"get_folder_by_name_and_user_id: {e}")
+            log.error(f"get_folder_by_parent_id_and_user_id_and_name: {e}")
             return None
 
     def get_folders_by_parent_id_and_user_id(
@@ -147,6 +155,10 @@ class FolderTable:
         try:
             with get_db() as db:
                 folder = db.query(Folder).filter_by(id=id, user_id=user_id).first()
+
+                if not folder:
+                    return None
+
                 folder.parent_id = parent_id
                 folder.updated_at = int(time.time())
 
@@ -164,6 +176,9 @@ class FolderTable:
             with get_db() as db:
                 folder = db.query(Folder).filter_by(id=id, user_id=user_id).first()
 
+                if not folder:
+                    return None
+
                 existing_folder = (
                     db.query(Folder)
                     .filter_by(name=name, parent_id=folder.parent_id, user_id=user_id)
@@ -190,6 +205,9 @@ class FolderTable:
             with get_db() as db:
                 folder = db.query(Folder).filter_by(id=id, user_id=user_id).first()
 
+                if not folder:
+                    return None
+
                 folder.items = items.model_dump()
                 folder.updated_at = int(time.time())
 

backend/open_webui/apps/webui/routers/folders.py

@@ -215,7 +215,18 @@ async def delete_folder_by_id(id: str, user=Depends(get_verified_user)):
     if folder:
         try:
             result = Folders.delete_folder_by_id_and_user_id(id, user.id)
-            return result
+            if result:
+                # Delete all chats in the folder
+                chats = Chats.get_chats_by_folder_id_and_user_id(id, user.id)
+                for chat in chats:
+                    Chats.delete_chat_by_id(chat.id, user.id)
+
+                return result
+            else:
+                raise HTTPException(
+                    status_code=status.HTTP_400_BAD_REQUEST,
+                    detail=ERROR_MESSAGES.DEFAULT("Error deleting folder"),
+                )
         except Exception as e:
             log.exception(e)
             log.error(f"Error deleting folder: {id}")

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}
+							bind:value={name}
-							on:input={(e) => {
-								folders[folderId].name = e.target.value;
-							}}
 							on:blur={() => {
 								edit = false;
+								nameUpdateHandler();
 							}}
-							on:keydown={(e) => {
+							on:click={(e) => {
-								if (e.key === 'Enter') {
+								// Prevent accidental collapse toggling when clicking inside input
-									edit = false;
+								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>