enh: create subfolder

Co-Authored-By: Colin Chen <1207878+silenceroom@users.noreply.github.com>

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

@@ -18,7 +18,8 @@
 		updateFolderIsExpandedById,
 		updateFolderById,
 		updateFolderParentIdById,
-		getFolderById
+		getFolderById,
+		createNewFolder
 	} from '$lib/apis/folders';
 	import {
 		getChatById,
@@ -64,6 +65,9 @@
 	let showFolderModal = false;
 	let edit = false;
 
+	let showCreateSubFolderModal = false;
+	let createSubFolderParentId = null;
+
 	let draggedOver = false;
 	let dragged = false;
 
@@ -414,6 +418,30 @@
 
 		saveAs(blob, `folder-${folders[folderId].name}-export-${Date.now()}.json`);
 	};
+
+	const createSubFolderHandler = async ({ name, meta, data, parent_id }) => {
+		if (name === '') {
+			toast.error($i18n.t('Folder name cannot be empty.'));
+			return;
+		}
+
+		name = name.trim();
+
+		const res = await createNewFolder(localStorage.token, {
+			name,
+			data,
+			meta,
+			parent_id
+		}).catch((error) => {
+			toast.error(`${error}`);
+			return null;
+		});
+
+		if (res) {
+			toast.success($i18n.t('Folder created successfully'));
+			dispatch('update');
+		}
+	};
 </script>
 
 <DeleteConfirmDialog
@@ -444,6 +472,12 @@
 
 <FolderModal bind:show={showFolderModal} edit={true} {folderId} onSubmit={updateHandler} />
 
+<FolderModal
+	bind:show={showCreateSubFolderModal}
+	parentId={createSubFolderParentId}
+	onSubmit={createSubFolderHandler}
+/>
+
 {#if dragged && x && y}
 	<DragGhost {x} {y}>
 		<div class=" bg-black/80 backdrop-blur-2xl px-2 py-1 rounded-lg w-fit max-w-40">
@@ -593,6 +627,10 @@
 						onExport={() => {
 							exportHandler();
 						}}
+						onCreateSub={() => {
+							createSubFolderParentId = folderId;
+							showCreateSubFolderModal = true;
+						}}
 					>
 						<div class="p-1 dark:hover:bg-gray-850 rounded-lg touch-auto">
 							<EllipsisHorizontal className="size-4" strokeWidth="2.5" />