From 8648a330f22e42017400b2927dc33b59970cbdd7 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 18 Oct 2024 14:11:13 -0700
Subject: [PATCH] refac

---
 src/lib/components/common/Folder.svelte          |  9 +++++----
 src/lib/components/layout/Sidebar.svelte         |  2 +-
 .../components/layout/Sidebar/ChatItem.svelte    |  6 +++---
 .../layout/Sidebar/RecursiveFolder.svelte        |  3 ++-
 .../components/layout/Sidebar/UserMenu.svelte    | 16 ++++++++--------
 5 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/common/Folder.svelte b/src/lib/components/common/Folder.svelte
index e8a04db91..ab1507545 100644
--- a/src/lib/components/common/Folder.svelte
+++ b/src/lib/components/common/Folder.svelte
@@ -48,6 +48,7 @@
 								try {
 									const fileContent = JSON.parse(event.target.result);
 									console.log('Parsed JSON Content: ', fileContent);
+									open = true;
 									dispatch('import', fileContent);
 								} catch (error) {
 									console.error('Error parsing JSON file:', error);
@@ -59,12 +60,12 @@
 						} else {
 							console.error('Only JSON file types are supported.');
 						}
-
-						console.log(file);
 					} else {
-						// Handle the drag-and-drop data for folders or chats (same as before)
+						open = true;
+
 						const dataTransfer = e.dataTransfer.getData('text/plain');
 						const data = JSON.parse(dataTransfer);
+
 						console.log(data);
 						dispatch('drop', data);
 					}
@@ -98,7 +99,7 @@
 <div bind:this={folderElement} class="relative {className}">
 	{#if draggedOver}
 		<div
-			class="absolute top-0 left-0 w-full h-full rounded-sm bg-[hsla(258,88%,66%,0.1)] bg-opacity-50 dark:bg-opacity-10 z-50 pointer-events-none touch-none"
+			class="absolute top-0 left-0 w-full h-full rounded-sm bg-[hsla(260,85%,65%,0.1)] bg-opacity-50 dark:bg-opacity-10 z-50 pointer-events-none touch-none"
 		></div>
 	{/if}
 
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 3c9babfc3..ad3a08398 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -656,7 +656,7 @@
 
 				<Folder
 					collapsible={!search}
-					className="px-2"
+					className="px-2 mt-0.5"
 					name={$i18n.t('All chats')}
 					on:import={(e) => {
 						importChatHandler(e.detail);
diff --git a/src/lib/components/layout/Sidebar/ChatItem.svelte b/src/lib/components/layout/Sidebar/ChatItem.svelte
index 7a189ecf9..bc5bb80e0 100644
--- a/src/lib/components/layout/Sidebar/ChatItem.svelte
+++ b/src/lib/components/layout/Sidebar/ChatItem.svelte
@@ -207,7 +207,7 @@
 <div bind:this={itemElement} class=" w-full {className} relative group" draggable="true">
 	{#if confirmEdit}
 		<div
-			class=" w-full flex justify-between rounded-lg px-[11px] py-[7px] {id === $chatId ||
+			class=" w-full flex justify-between rounded-lg px-[11px] py-[6px] {id === $chatId ||
 			confirmEdit
 				? 'bg-gray-200 dark:bg-gray-900'
 				: selected
@@ -222,7 +222,7 @@
 		</div>
 	{:else}
 		<a
-			class=" w-full flex justify-between rounded-lg px-[11px] py-[7px] {id === $chatId ||
+			class=" w-full flex justify-between rounded-lg px-[11px] py-[6px] {id === $chatId ||
 			confirmEdit
 				? 'bg-gray-200 dark:bg-gray-900'
 				: selected
@@ -267,7 +267,7 @@
 				: 'invisible group-hover:visible from-gray-100 dark:from-gray-950'}
             absolute {className === 'pr-2'
 			? 'right-[8px]'
-			: 'right-0'}  top-[5px] py-1 pr-0.5 mr-2 pl-5 bg-gradient-to-l from-80%
+			: 'right-0'}  top-[4px] py-1 pr-0.5 mr-1.5 pl-5 bg-gradient-to-l from-80%
 
               to-transparent"
 		on:mouseenter={(e) => {
diff --git a/src/lib/components/layout/Sidebar/RecursiveFolder.svelte b/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
index ecb0684e2..1185ac17d 100644
--- a/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
+++ b/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
@@ -75,6 +75,7 @@
 							reader.onload = async function (event) {
 								try {
 									const fileContent = JSON.parse(event.target.result);
+									open = true;
 									dispatch('import', {
 										folderId: folderId,
 										items: fileContent
@@ -325,7 +326,7 @@
 <div bind:this={folderElement} class="relative {className}" draggable="true">
 	{#if draggedOver}
 		<div
-			class="absolute top-0 left-0 w-full h-full rounded-sm bg-[hsla(258,88%,66%,0.1)] bg-opacity-50 dark:bg-opacity-10 z-50 pointer-events-none touch-none"
+			class="absolute top-0 left-0 w-full h-full rounded-sm bg-[hsla(260,85%,65%,0.1)] bg-opacity-50 dark:bg-opacity-10 z-50 pointer-events-none touch-none"
 		></div>
 	{/if}
 
diff --git a/src/lib/components/layout/Sidebar/UserMenu.svelte b/src/lib/components/layout/Sidebar/UserMenu.svelte
index 93f13048b..d1df667c5 100644
--- a/src/lib/components/layout/Sidebar/UserMenu.svelte
+++ b/src/lib/components/layout/Sidebar/UserMenu.svelte
@@ -30,7 +30,7 @@
 
 	<slot name="content">
 		<DropdownMenu.Content
-			class="w-full {className} text-sm rounded-xl px-1 py-1.5 border border-gray-300/30 dark:border-gray-700/50 z-50 bg-white dark:bg-gray-850 dark:text-white shadow font-primary"
+			class="w-full {className} text-sm rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-xl font-primary"
 			sideOffset={8}
 			side="bottom"
 			align="start"
@@ -68,7 +68,7 @@
 						/>
 					</svg>
 				</div>
-				<div class=" self-center font-medium">{$i18n.t('Settings')}</div>
+				<div class=" self-center">{$i18n.t('Settings')}</div>
 			</button>
 
 			<button
@@ -85,7 +85,7 @@
 				<div class=" self-center mr-3">
 					<ArchiveBox className="size-5" strokeWidth="1.5" />
 				</div>
-				<div class=" self-center font-medium">{$i18n.t('Archived Chats')}</div>
+				<div class=" self-center">{$i18n.t('Archived Chats')}</div>
 			</button>
 
 			{#if role === 'admin'}
@@ -116,7 +116,7 @@
 							/>
 						</svg>
 					</div>
-					<div class=" self-center font-medium">{$i18n.t('Playground')}</div>
+					<div class=" self-center">{$i18n.t('Playground')}</div>
 				</button>
 
 				<button
@@ -146,7 +146,7 @@
 							/>
 						</svg>
 					</div>
-					<div class=" self-center font-medium">{$i18n.t('Admin Panel')}</div>
+					<div class=" self-center">{$i18n.t('Admin Panel')}</div>
 				</button>
 			{/if}
 
@@ -179,7 +179,7 @@
 						/>
 					</svg>
 				</div>
-				<div class=" self-center font-medium">{$i18n.t('Sign Out')}</div>
+				<div class=" self-center">{$i18n.t('Sign Out')}</div>
 			</button>
 
 			{#if $activeUserCount}
@@ -201,7 +201,7 @@
 						</div>
 
 						<div class=" ">
-							<span class=" font-medium">
+							<span class="">
 								{$i18n.t('Active Users')}:
 							</span>
 							<span class=" font-semibold">
@@ -212,7 +212,7 @@
 				</Tooltip>
 			{/if}
 
-			<!-- <DropdownMenu.Item class="flex items-center px-3 py-2 text-sm  font-medium">
+			<!-- <DropdownMenu.Item class="flex items-center px-3 py-2 text-sm ">
 				<div class="flex items-center">Profile</div>
 			</DropdownMenu.Item> -->
 		</DropdownMenu.Content>