From 7083a61ddb4d53e5a10d876dd265266efd75f226 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sat, 21 Dec 2024 18:25:16 -0700
Subject: [PATCH] refac

---
 src/lib/components/common/Folder.svelte  | 18 ++++++++++++++----
 src/lib/components/layout/Sidebar.svelte | 18 +++++++++++++++++-
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/common/Folder.svelte b/src/lib/components/common/Folder.svelte
index 70d646136..a394127e1 100644
--- a/src/lib/components/common/Folder.svelte
+++ b/src/lib/components/common/Folder.svelte
@@ -15,7 +15,11 @@
 	export let id = '';
 	export let name = '';
 	export let collapsible = true;
-	export let onCreateFolder: null | Function = null;
+
+	export let onAddLabel: string = '';
+	export let onAdd: null | Function = null;
+
+	export let dragAndDrop = true;
 
 	export let className = '';
 
@@ -87,12 +91,18 @@
 	};
 
 	onMount(() => {
+		if (!dragAndDrop) {
+			return;
+		}
 		folderElement.addEventListener('dragover', onDragOver);
 		folderElement.addEventListener('drop', onDrop);
 		folderElement.addEventListener('dragleave', onDragLeave);
 	});
 
 	onDestroy(() => {
+		if (!dragAndDrop) {
+			return;
+		}
 		folderElement.addEventListener('dragover', onDragOver);
 		folderElement.removeEventListener('drop', onDrop);
 		folderElement.removeEventListener('dragleave', onDragLeave);
@@ -133,15 +143,15 @@
 					</div>
 				</button>
 
-				{#if onCreateFolder}
+				{#if onAdd}
 					<button
 						class="absolute z-10 right-2 self-center flex items-center"
 						on:pointerup={(e) => {
 							e.stopPropagation();
-							onCreateFolder();
+							onAdd();
 						}}
 					>
-						<Tooltip content={$i18n.t('New folder')}>
+						<Tooltip content={onAddLabel}>
 							<button
 								class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto"
 								on:click={(e) => {}}
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index e60ec5d0e..bef066268 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -67,6 +67,8 @@
 
 	let folders = {};
 
+	const createChannel = async () => {};
+
 	const initFolders = async () => {
 		const folderList = await getFolders(localStorage.token).catch((error) => {
 			toast.error(error);
@@ -521,6 +523,19 @@
 			/>
 		</div>
 
+		<div class="relative flex flex-col overflow-y-auto">
+			<Folder
+				collapsible={!search}
+				className="px-2 mt-0.5"
+				name={$i18n.t('Channels')}
+				dragAndDrop={false}
+				onAdd={createChannel}
+				onAddLabel={$i18n.t('New Channel')}
+			>
+				channels
+			</Folder>
+		</div>
+
 		<div
 			class="relative flex flex-col flex-1 overflow-y-auto {$temporaryChatEnabled
 				? 'opacity-20'
@@ -530,7 +545,8 @@
 				collapsible={!search}
 				className="px-2 mt-0.5"
 				name={$i18n.t('Chats')}
-				onCreateFolder={createFolder}
+				onAdd={createFolder}
+				onAddLabel={$i18n.t('New Folder')}
 				on:import={(e) => {
 					importChatHandler(e.detail);
 				}}