feat: folders as projects

Co-Authored-By: Classic298 <27028174+Classic298@users.noreply.github.com>

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

@@ -8,6 +8,23 @@
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
+	import { toast } from 'svelte-sonner';
+
+	import { selectedFolder } from '$lib/stores';
+
+	import {
+		deleteFolderById,
+		updateFolderIsExpandedById,
+		updateFolderById,
+		updateFolderParentIdById
+	} from '$lib/apis/folders';
+	import {
+		getChatById,
+		getChatsByFolderId,
+		importChat,
+		updateChatFolderIdById
+	} from '$lib/apis/chats';
+
 	import ChevronDown from '../../icons/ChevronDown.svelte';
 	import ChevronRight from '../../icons/ChevronRight.svelte';
 	import Collapsible from '../../common/Collapsible.svelte';
@@ -15,23 +32,11 @@
 
 	import FolderOpen from '$lib/components/icons/FolderOpen.svelte';
 	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
-	import {
-		deleteFolderById,
-		updateFolderIsExpandedById,
-		updateFolderById,
-		updateFolderParentIdById
-	} from '$lib/apis/folders';
-	import { toast } from 'svelte-sonner';
-	import {
-		getChatById,
-		getChatsByFolderId,
-		importChat,
-		updateChatFolderIdById
-	} from '$lib/apis/chats';
+
 	import ChatItem from './ChatItem.svelte';
 	import FolderMenu from './Folders/FolderMenu.svelte';
 	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
-	import { selectedFolder } from '$lib/stores';
+	import EditFolderModal from './Folders/EditFolderModal.svelte';
 
 	export let open = false;
 
@@ -39,14 +44,13 @@
 	export let folderId;
 	export let shiftKey = false;
 
-	export let onCreateChat = (e) => {};
-
 	export let className = '';
 
 	export let parentDragged = false;
 
 	let folderElement;
 
+	let showEditFolderModal = false;
 	let edit = false;
 
 	let draggedOver = false;
@@ -235,7 +239,7 @@
 			delete folders[folderId].new;
 
 			await tick();
-			editHandler();
+			renameHandler();
 		}
 	});
 
@@ -265,23 +269,21 @@
 		}
 	};
 
-	const nameUpdateHandler = async () => {
+	const updateHandler = async ({ name, data }) => {
 		if (name === '') {
 			toast.error($i18n.t('Folder name cannot be empty.'));
 			return;
 		}
 
-		if (name === folders[folderId].name) {
-			edit = false;
-			return;
-		}
-
 		const currentName = folders[folderId].name;
 
 		name = name.trim();
 		folders[folderId].name = name;
 
-		const res = await updateFolderById(localStorage.token, folderId, { name }).catch((error) => {
+		const res = await updateFolderById(localStorage.token, folderId, {
+			name,
+			...(data ? { data } : {})
+		}).catch((error) => {
 			toast.error(`${error}`);
 
 			folders[folderId].name = currentName;
@@ -290,7 +292,12 @@
 
 		if (res) {
 			folders[folderId].name = name;
-			toast.success($i18n.t('Folder name updated successfully'));
+			if (data) {
+				folders[folderId].data = data;
+			}
+
+			// toast.success($i18n.t('Folder name updated successfully'));
+			toast.success($i18n.t('Folder updated successfully'));
 
 			if ($selectedFolder?.id === folderId) {
 				selectedFolder.set(folders[folderId]);
@@ -320,7 +327,7 @@
 
 	$: isExpandedUpdateDebounceHandler(open);
 
-	const editHandler = async () => {
+	const renameHandler = async () => {
 		console.log('Edit');
 		await tick();
 		name = folders[folderId].name;
@@ -368,6 +375,12 @@
 	</div>
 </DeleteConfirmDialog>
 
+<EditFolderModal
+	bind:show={showEditFolderModal}
+	folder={folders[folderId]}
+	onSubmit={updateHandler}
+/>
+
 {#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">
@@ -407,7 +420,7 @@
 					? 'bg-gray-100 dark:bg-gray-900'
 					: ''}"
 				on:dblclick={() => {
-					editHandler();
+					renameHandler();
 				}}
 				on:click={(e) => {
 					selectedFolder.set(folders[folderId]);
@@ -431,7 +444,7 @@
 								e.target.select();
 							}}
 							on:blur={() => {
-								nameUpdateHandler();
+								updateHandler({ name });
 								edit = false;
 							}}
 							on:click={(e) => {
@@ -444,7 +457,7 @@
 							}}
 							on:keydown={(e) => {
 								if (e.key === 'Enter') {
-									nameUpdateHandler();
+									updateHandler({ name });
 									edit = false;
 								}
 							}}
@@ -464,10 +477,7 @@
 				>
 					<FolderMenu
 						onEdit={() => {
-							// Requires a timeout to prevent the click event from closing the dropdown
-							setTimeout(() => {
-								editHandler();
-							}, 200);
+							showEditFolderModal = true;
 						}}
 						onDelete={() => {
 							showDeleteConfirm = true;