From 3595d1791849c2db50fb6aa18cb4f7b012c2d440 Mon Sep 17 00:00:00 2001
From: Classic298 <27028174+Classic298@users.noreply.github.com>
Date: Sat, 21 Jun 2025 13:58:25 +0200
Subject: [PATCH] Update RecursiveFolder.svelte

---
 .../layout/Sidebar/RecursiveFolder.svelte     | 166 +++++-------------
 1 file changed, 48 insertions(+), 118 deletions(-)

diff --git a/src/lib/components/layout/Sidebar/RecursiveFolder.svelte b/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
index f6958a772..422416e1b 100644
--- a/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
+++ b/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
@@ -1,6 +1,5 @@
 <script>
-	import { getContext, createEventDispatcher, onMount, onDestroy, tick } from 'svelte';
-
+	import { getContext, createEventDispatcher, onMount, onDestroy } from 'svelte';
 	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
 
@@ -12,13 +11,18 @@
 	import ChevronRight from '../../icons/ChevronRight.svelte';
 	import Collapsible from '../../common/Collapsible.svelte';
 	import DragGhost from '$lib/components/common/DragGhost.svelte';
-
+	import Plus from '../../icons/Plus.svelte';
+	
 	import FolderOpen from '$lib/components/icons/FolderOpen.svelte';
 	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
+	
+	import { goto } from '$app/navigation';
+	import { get } from 'svelte/store';
+	import { pendingFolderId, pendingFolderName, mobile, showSidebar } from '$lib/stores';
+
 	import {
 		deleteFolderById,
 		updateFolderIsExpandedById,
-		updateFolderNameById,
 		updateFolderParentIdById
 	} from '$lib/apis/folders';
 	import { toast } from 'svelte-sonner';
@@ -28,6 +32,7 @@
 		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';
@@ -43,13 +48,9 @@
 
 	let folderElement;
 
-	let edit = false;
-
 	let draggedOver = false;
 	let dragged = false;
 
-	let name = '';
-
 	const onDragOver = (e) => {
 		e.preventDefault();
 		e.stopPropagation();
@@ -172,6 +173,7 @@
 
 	const onDragStart = (event) => {
 		event.stopPropagation();
+
 		event.dataTransfer.setDragImage(dragImage, 0, 0);
 
 		// Set the data to be transferred
@@ -196,7 +198,6 @@
 
 	const onDragEnd = (event) => {
 		event.stopPropagation();
-
 		folderElement.style.opacity = '1'; // Reset visual cue after drag
 		dragged = false;
 	};
@@ -216,17 +217,11 @@
 			folderElement.addEventListener('dragend', onDragEnd);
 		}
 
-		if (folders[folderId]?.new) {
-			delete folders[folderId].new;
-
-			await tick();
-			editHandler();
-		}
 	});
 
 	onDestroy(() => {
 		if (folderElement) {
-			folderElement.addEventListener('dragover', onDragOver);
+			folderElement.removeEventListener('dragover', onDragOver);
 			folderElement.removeEventListener('drop', onDrop);
 			folderElement.removeEventListener('dragleave', onDragLeave);
 
@@ -250,36 +245,6 @@
 		}
 	};
 
-	const nameUpdateHandler = async () => {
-		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 updateFolderNameById(localStorage.token, folderId, name).catch((error) => {
-			toast.error(`${error}`);
-
-			folders[folderId].name = currentName;
-			return null;
-		});
-
-		if (res) {
-			folders[folderId].name = name;
-			toast.success($i18n.t('Folder name updated successfully'));
-			dispatch('update');
-		}
-	};
-
 	const isExpandedUpdateHandler = async () => {
 		const res = await updateFolderIsExpandedById(localStorage.token, folderId, open).catch(
 			(error) => {
@@ -300,21 +265,6 @@
 
 	$: isExpandedUpdateDebounceHandler(open);
 
-	const editHandler = async () => {
-		console.log('Edit');
-		await tick();
-		name = folders[folderId].name;
-
-		edit = true;
-		await tick();
-
-		const input = document.getElementById(`folder-${folderId}-input`);
-
-		if (input) {
-			input.focus();
-		}
-	};
-
 	const exportHandler = async () => {
 		const chats = await getChatsByFolderId(localStorage.token, folderId).catch((error) => {
 			toast.error(`${error}`);
@@ -383,9 +333,6 @@
 			<button
 				id="folder-{folderId}-button"
 				class="relative w-full py-1.5 px-2 rounded-md flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-500 font-medium hover:bg-gray-100 dark:hover:bg-gray-900 transition"
-				on:dblclick={() => {
-					editHandler();
-				}}
 			>
 				<div class="text-gray-300 dark:text-gray-600">
 					{#if open}
@@ -396,64 +343,41 @@
 				</div>
 
 				<div class="translate-y-[0.5px] flex-1 justify-start text-start line-clamp-1">
-					{#if edit}
-						<input
-							id="folder-{folderId}-input"
-							type="text"
-							bind:value={name}
-							on:focus={(e) => {
-								e.target.select();
-							}}
-							on:blur={() => {
-								nameUpdateHandler();
-								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();
-							}}
-							on:keydown={(e) => {
-								if (e.key === 'Enter') {
-									nameUpdateHandler();
-									edit = false;
-								}
-							}}
-							class="w-full h-full bg-transparent text-gray-500 dark:text-gray-500 outline-hidden"
-						/>
-					{:else}
-						{folders[folderId].name}
-					{/if}
+					{folders[folderId].name}
 				</div>
 
-				<button
-					class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
-					on:pointerup={(e) => {
+				<div class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center gap-1 dark:text-gray-300">
+				    <!-- Plus Button -->
+				    <button
+					class="p-0.5 dark:hover:bg-gray-850 hover:bg-gray-200 rounded-lg touch-auto" on:click={(e) => {
 						e.stopPropagation();
+						dispatch('createChatInFolder', { folderId });
 					}}
-				>
-					<FolderMenu
-						on:rename={() => {
-							// Requires a timeout to prevent the click event from closing the dropdown
-							setTimeout(() => {
-								editHandler();
-							}, 200);
-						}}
-						on:delete={() => {
-							showDeleteConfirm = true;
-						}}
-						on:export={() => {
-							exportHandler();
-						}}
-					>
-						<button class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto" on:click={(e) => {}}>
-							<EllipsisHorizontal className="size-4" strokeWidth="2.5" />
-						</button>
-					</FolderMenu>
-				</button>
+					on:pointerup={(e) => {
+					    e.stopPropagation();
+					}}
+					title={$i18n.t('Create new chat in folder')}
+				    >
+					<Plus className="size-3.5" strokeWidth="2.5" />
+				    </button>
+				
+				    <!-- Three-dot Menu -->
+				    <FolderMenu
+					on:editFolder={() => {
+					    dispatch('editFolder', folders[folderId]);
+					}}
+					on:delete={() => {
+					    showDeleteConfirm = true;
+					}}
+					on:export={() => {
+					    exportHandler();
+					}}
+				    >
+					<button class="p-0.5 dark:hover:bg-gray-850 hover:bg-gray-200 rounded-lg touch-auto" on:click={(e) => {}}>
+					    <EllipsisHorizontal className="size-4" strokeWidth="2.5" />
+					</button>
+				    </FolderMenu>
+				</div>
 			</button>
 		</div>
 
@@ -486,6 +410,12 @@
 								on:change={(e) => {
 									dispatch('change', e.detail);
 								}}
+								on:editFolder={(e) => {
+									dispatch('editFolder', e.detail);
+								}}
+								on:createChatInFolder={(e) => {
+								    dispatch('createChatInFolder', e.detail);
+								}}
 							/>
 						{/each}
 					{/if}