From a05dab62982291a8a0941329bf070ea00d6906dc Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 26 Sep 2025 21:16:34 -0500
Subject: [PATCH] refac

---
 .../chat/Placeholder/FolderPlaceholder.svelte | 35 +++++++++++++++-
 .../chat/Placeholder/FolderTitle.svelte       |  7 +++-
 src/lib/components/layout/Sidebar.svelte      |  6 +++
 .../components/layout/Sidebar/Folders.svelte  |  9 ++---
 .../layout/Sidebar/Folders/FolderModal.svelte | 36 ++++++++++-------
 .../layout/Sidebar/RecursiveFolder.svelte     | 40 ++++++++++++++-----
 6 files changed, 100 insertions(+), 33 deletions(-)

diff --git a/src/lib/components/chat/Placeholder/FolderPlaceholder.svelte b/src/lib/components/chat/Placeholder/FolderPlaceholder.svelte
index 057dd7018..5b5af5970 100644
--- a/src/lib/components/chat/Placeholder/FolderPlaceholder.svelte
+++ b/src/lib/components/chat/Placeholder/FolderPlaceholder.svelte
@@ -1,15 +1,40 @@
 <script>
-	import { getContext } from 'svelte';
+	import { getContext, onMount } from 'svelte';
 	const i18n = getContext('i18n');
 
 	import { fade } from 'svelte/transition';
 
 	import ChatList from './ChatList.svelte';
 	import FolderKnowledge from './FolderKnowledge.svelte';
+	import Spinner from '$lib/components/common/Spinner.svelte';
+	import { getChatListByFolderId } from '$lib/apis/chats';
 
 	export let folder = null;
 
 	let selectedTab = 'chats';
+
+	let chats = null;
+	let page = 1;
+
+	const setChatList = async () => {
+		chats = null;
+
+		if (folder && folder.id) {
+			const res = await getChatListByFolderId(localStorage.token, folder.id, page);
+
+			if (res) {
+				chats = res;
+			} else {
+				chats = [];
+			}
+		} else {
+			chats = [];
+		}
+	};
+
+	$: if (folder) {
+		setChatList();
+	}
 </script>
 
 <div>
@@ -45,7 +70,13 @@
 		{#if selectedTab === 'knowledge'}
 			<FolderKnowledge />
 		{:else if selectedTab === 'chats'}
-			<ChatList chats={folder?.items?.chats ?? []} />
+			{#if chats !== null}
+				<ChatList {chats} />
+			{:else}
+				<div class="py-10">
+					<Spinner />
+				</div>
+			{/if}
 		{/if}
 	</div>
 </div>
diff --git a/src/lib/components/chat/Placeholder/FolderTitle.svelte b/src/lib/components/chat/Placeholder/FolderTitle.svelte
index bfd72681d..16a1c4283 100644
--- a/src/lib/components/chat/Placeholder/FolderTitle.svelte
+++ b/src/lib/components/chat/Placeholder/FolderTitle.svelte
@@ -115,7 +115,12 @@
 </script>
 
 {#if folder}
-	<FolderModal bind:show={showFolderModal} edit={true} {folder} onSubmit={updateHandler} />
+	<FolderModal
+		bind:show={showFolderModal}
+		edit={true}
+		folderId={folder.id}
+		onSubmit={updateHandler}
+	/>
 
 	<DeleteConfirmDialog
 		bind:show={showDeleteConfirm}
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 73aba565e..545ee4b47 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -80,7 +80,10 @@
 	let allChatsLoaded = false;
 
 	let showCreateFolderModal = false;
+
 	let folders = {};
+	let folderRegistry = {};
+
 	let newFolderId = null;
 
 	const initFolders = async () => {
@@ -922,6 +925,7 @@
 						}}
 					>
 						<Folders
+							bind:folderRegistry
 							{folders}
 							{shiftKey}
 							onDelete={(folderId) => {
@@ -981,6 +985,8 @@
 											return null;
 										}
 									);
+
+									folderRegistry[chat.folder_id]?.setFolderItems();
 								}
 
 								if (chat.pinned) {
diff --git a/src/lib/components/layout/Sidebar/Folders.svelte b/src/lib/components/layout/Sidebar/Folders.svelte
index e9ef68fc3..6c99dc540 100644
--- a/src/lib/components/layout/Sidebar/Folders.svelte
+++ b/src/lib/components/layout/Sidebar/Folders.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
-
 	const dispatch = createEventDispatcher();
+
 	import RecursiveFolder from './RecursiveFolder.svelte';
+
+	export let folderRegistry = {};
+
 	export let folders = {};
 	export let shiftKey = false;
 
@@ -19,11 +22,7 @@
 			})
 		);
 
-	let folderRegistry = {};
-
 	const onItemMove = (e) => {
-		console.log(`onItemMove`, e, folderRegistry);
-
 		if (e.originFolderId) {
 			folderRegistry[e.originFolderId]?.setFolderItems();
 		}
diff --git a/src/lib/components/layout/Sidebar/Folders/FolderModal.svelte b/src/lib/components/layout/Sidebar/Folders/FolderModal.svelte
index a6ec351ca..2c0ebaade 100644
--- a/src/lib/components/layout/Sidebar/Folders/FolderModal.svelte
+++ b/src/lib/components/layout/Sidebar/Folders/FolderModal.svelte
@@ -12,15 +12,16 @@
 
 	import Textarea from '$lib/components/common/Textarea.svelte';
 	import Knowledge from '$lib/components/workspace/Models/Knowledge.svelte';
+	import { getFolderById } from '$lib/apis/folders';
 	const i18n = getContext('i18n');
 
 	export let show = false;
 	export let onSubmit: Function = (e) => {};
 
+	export let folderId = null;
 	export let edit = false;
 
-	export let folder = null;
-
+	let folder = null;
 	let name = '';
 	let meta = {
 		background_image_url: null
@@ -50,15 +51,24 @@
 		loading = false;
 	};
 
-	const init = () => {
-		name = folder.name;
-		meta = folder.meta || {
-			background_image_url: null
-		};
-		data = folder.data || {
-			system_prompt: '',
-			files: []
-		};
+	const init = async () => {
+		if (folderId) {
+			folder = await getFolderById(localStorage.token, folderId).catch((error) => {
+				toast.error(`${error}`);
+				return null;
+			});
+
+			name = folder.name;
+			meta = folder.meta || {
+				background_image_url: null
+			};
+			data = folder.data || {
+				system_prompt: '',
+				files: []
+			};
+		}
+
+		focusInput();
 	};
 
 	const focusInput = async () => {
@@ -71,10 +81,6 @@
 	};
 
 	$: if (show) {
-		focusInput();
-	}
-
-	$: if (folder) {
 		init();
 	}
 
diff --git a/src/lib/components/layout/Sidebar/RecursiveFolder.svelte b/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
index 497eedd7a..67fbf9e45 100644
--- a/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
+++ b/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
@@ -17,7 +17,8 @@
 		deleteFolderById,
 		updateFolderIsExpandedById,
 		updateFolderById,
-		updateFolderParentIdById
+		updateFolderParentIdById,
+		getFolderById
 	} from '$lib/apis/folders';
 	import {
 		getChatById,
@@ -328,9 +329,15 @@
 			toast.success($i18n.t('Folder updated successfully'));
 
 			if ($selectedFolder?.id === folderId) {
-				selectedFolder.set(folders[folderId]);
-			}
+				const folder = await getFolderById(localStorage.token, folderId).catch((error) => {
+					toast.error(`${error}`);
+					return null;
+				});
 
+				if (folder) {
+					selectedFolder.set(folder);
+				}
+			}
 			dispatch('update');
 		}
 	};
@@ -361,6 +368,17 @@
 				toast.error(`${error}`);
 				return [];
 			});
+
+			if ($selectedFolder?.id === folderId) {
+				const folder = await getFolderById(localStorage.token, folderId).catch((error) => {
+					toast.error(`${error}`);
+					return null;
+				});
+
+				if (folder) {
+					selectedFolder.set(folder);
+				}
+			}
 		} else {
 			chats = null;
 		}
@@ -417,12 +435,7 @@
 	</div>
 </DeleteConfirmDialog>
 
-<FolderModal
-	bind:show={showFolderModal}
-	edit={true}
-	folder={folders[folderId]}
-	onSubmit={updateHandler}
-/>
+<FolderModal bind:show={showFolderModal} edit={true} {folderId} onSubmit={updateHandler} />
 
 {#if dragged && x && y}
 	<DragGhost {x} {y}>
@@ -477,7 +490,14 @@
 					clickTimer = setTimeout(async () => {
 						await goto('/');
 
-						selectedFolder.set(folders[folderId]);
+						const folder = await getFolderById(localStorage.token, folderId).catch((error) => {
+							toast.error(`${error}`);
+							return null;
+						});
+
+						if (folder) {
+							selectedFolder.set(folder);
+						}
 
 						if ($mobile) {
 							showSidebar.set(!$showSidebar);