refac/enh: folder optimization

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

@@ -8,6 +8,7 @@
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
+	import { goto } from '$app/navigation';
 	import { toast } from 'svelte-sonner';
 
 	import { chatId, mobile, selectedFolder, showSidebar } from '$lib/stores';
@@ -21,6 +22,7 @@
 	import {
 		getChatById,
 		getChatsByFolderId,
+		getChatListByFolderId,
 		importChat,
 		updateChatFolderIdById
 	} from '$lib/apis/chats';
@@ -37,9 +39,10 @@
 	import FolderMenu from './Folders/FolderMenu.svelte';
 	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import FolderModal from './Folders/FolderModal.svelte';
-	import { goto } from '$app/navigation';
 	import Emoji from '$lib/components/common/Emoji.svelte';
+	import Spinner from '$lib/components/common/Spinner.svelte';
 
+	export let folderRegistry = {};
 	export let open = false;
 
 	export let folders;
@@ -51,6 +54,7 @@
 	export let parentDragged = false;
 
 	export let onDelete = (e) => {};
+	export let onItemMove = (e) => {};
 
 	let folderElement;
 
@@ -171,6 +175,12 @@
 									return null;
 								});
 
+								onItemMove({
+									originFolderId: chat.folder_id,
+									targetFolderId: folderId,
+									e
+								});
+
 								if (res) {
 									dispatch('update');
 								}
@@ -182,6 +192,7 @@
 				}
 			}
 
+			setFolderItems();
 			draggedOver = false;
 		}
 	};
@@ -234,6 +245,10 @@
 	};
 
 	onMount(async () => {
+		folderRegistry[folderId] = {
+			setFolderItems: () => setFolderItems()
+		};
+
 		open = folders[folderId].is_expanded;
 		if (folderElement) {
 			folderElement.addEventListener('dragover', onDragOver);
@@ -250,7 +265,6 @@
 
 		if (folders[folderId]?.new) {
 			delete folders[folderId].new;
-
 			await tick();
 			renameHandler();
 		}
@@ -339,6 +353,21 @@
 		}, 500);
 	};
 
+	let chats = null;
+	export const setFolderItems = async () => {
+		await tick();
+		if (open) {
+			chats = await getChatListByFolderId(localStorage.token, folderId).catch((error) => {
+				toast.error(`${error}`);
+				return [];
+			});
+		} else {
+			chats = null;
+		}
+	};
+
+	$: setFolderItems(open);
+
 	const renameHandler = async () => {
 		console.log('Edit');
 		await tick();
@@ -419,8 +448,6 @@
 		bind:open
 		className="w-full"
 		buttonClassName="w-full"
-		hide={(folders[folderId]?.childrenIds ?? []).length === 0 &&
-			(folders[folderId].items?.chats ?? []).length === 0}
 		onChange={(state) => {
 			dispatch('open', state);
 		}}
@@ -466,6 +493,7 @@
 					class="text-gray-500 dark:text-gray-500 transition-all p-1 hover:bg-gray-200 dark:hover:bg-gray-850 rounded-lg"
 					on:click={(e) => {
 						e.stopPropagation();
+						e.stopImmediatePropagation();
 						open = !open;
 						isExpandedUpdateDebounceHandler();
 					}}
@@ -548,7 +576,7 @@
 		</div>
 
 		<div slot="content" class="w-full">
-			{#if (folders[folderId]?.childrenIds ?? []).length > 0 || (folders[folderId].items?.chats ?? []).length > 0}
+			{#if (folders[folderId]?.childrenIds ?? []).length > 0 || (chats ?? []).length > 0}
 				<div
 					class="ml-3 pl-1 mt-[1px] flex flex-col overflow-y-auto scrollbar-hidden border-s border-gray-100 dark:border-gray-900"
 				>
@@ -564,10 +592,12 @@
 
 						{#each children as childFolder (`${folderId}-${childFolder.id}`)}
 							<svelte:self
+								bind:folderRegistry
 								{folders}
 								folderId={childFolder.id}
 								{shiftKey}
 								parentDragged={dragged}
+								{onItemMove}
 								{onDelete}
 								on:import={(e) => {
 									dispatch('import', e.detail);
@@ -582,18 +612,22 @@
 						{/each}
 					{/if}
 
-					{#if folders[folderId].items?.chats}
-						{#each folders[folderId].items.chats as chat (chat.id)}
-							<ChatItem
-								id={chat.id}
-								title={chat.title}
-								{shiftKey}
-								on:change={(e) => {
-									dispatch('change', e.detail);
-								}}
-							/>
-						{/each}
-					{/if}
+					{#each chats ?? [] as chat (chat.id)}
+						<ChatItem
+							id={chat.id}
+							title={chat.title}
+							{shiftKey}
+							on:change={(e) => {
+								dispatch('change', e.detail);
+							}}
+						/>
+					{/each}
+				</div>
+			{/if}
+
+			{#if chats === null}
+				<div class="flex justify-center items-center p-2">
+					<Spinner className="size-4 text-gray-500" />
 				</div>
 			{/if}
 		</div>