From c94d72bca826419bc024303c8ccef49db8677b76 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Mon, 18 Mar 2024 10:49:39 -0700
Subject: [PATCH] fix: sidebar menu

---
 src/lib/components/layout/Sidebar.svelte      | 41 ++++++++++---------
 .../components/layout/Sidebar/ChatMenu.svelte |  2 +-
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index c8d8171511..8c151b783c 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -122,6 +122,8 @@
 				class="flex-grow flex justify-between rounded-xl px-3.5 py-2 hover:bg-gray-900 transition"
 				href="/"
 				on:click={async () => {
+					selectedChatId = null;
+
 					await goto('/');
 					const newChatButton = document.getElementById('new-chat-button');
 					setTimeout(() => {
@@ -164,6 +166,10 @@
 				<a
 					class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-900 transition"
 					href="/modelfiles"
+					on:click={() => {
+						selectedChatId = null;
+						chatId.set('');
+					}}
 				>
 					<div class="self-center">
 						<svg
@@ -192,6 +198,10 @@
 				<a
 					class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-900 transition"
 					href="/prompts"
+					on:click={() => {
+						selectedChatId = null;
+						chatId.set('');
+					}}
 				>
 					<div class="self-center">
 						<svg
@@ -220,6 +230,10 @@
 				<a
 					class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-900 transition"
 					href="/documents"
+					on:click={() => {
+						selectedChatId = null;
+						chatId.set('');
+					}}
 				>
 					<div class="self-center">
 						<svg
@@ -314,23 +328,6 @@
 							enrichChatsWithContent($chats);
 						}}
 					/>
-
-					<!-- <div class="self-center pr-3 py-2  bg-gray-900">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke-width="1.5"
-							stroke="currentColor"
-							class="w-4 h-4"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"
-							/>
-						</svg>
-					</div> -->
 				</div>
 			</div>
 
@@ -385,7 +382,9 @@
 					<div class=" w-full pr-2 relative group">
 						{#if chatTitleEditId === chat.id}
 							<div
-								class=" w-full flex justify-between rounded-xl px-3 py-2 {chat.id === $chatId
+								class=" w-full flex justify-between rounded-xl px-3 py-2 {chat.id === $chatId ||
+								chat.id === chatTitleEditId ||
+								chat.id === chatDeleteId
 									? 'bg-gray-900'
 									: chat.id === selectedChatId
 									? 'bg-gray-950'
@@ -395,7 +394,9 @@
 							</div>
 						{:else}
 							<a
-								class=" w-full flex justify-between rounded-xl px-3 py-2 {chat.id === $chatId
+								class=" w-full flex justify-between rounded-xl px-3 py-2 {chat.id === $chatId ||
+								chat.id === chatTitleEditId ||
+								chat.id === chatDeleteId
 									? 'bg-gray-900'
 									: chat.id === selectedChatId
 									? 'bg-gray-950'
@@ -420,7 +421,7 @@
 						<div
 							class="
 							
-							{chat.id === $chatId
+							{chat.id === $chatId || chat.id === chatTitleEditId || chat.id === chatDeleteId
 								? ' from-gray-900'
 								: chat.id === selectedChatId
 								? 'from-gray-950'
diff --git a/src/lib/components/layout/Sidebar/ChatMenu.svelte b/src/lib/components/layout/Sidebar/ChatMenu.svelte
index 4a023aab66..a72d4a8f08 100644
--- a/src/lib/components/layout/Sidebar/ChatMenu.svelte
+++ b/src/lib/components/layout/Sidebar/ChatMenu.svelte
@@ -26,7 +26,7 @@
 	<div slot="content">
 		<DropdownMenu.Content
 			class="w-full max-w-[130px] rounded-lg px-1 py-1.5 border border-gray-700/50 z-50 bg-gray-850 text-white"
-			sideOffset={8}
+			sideOffset={-2}
 			side="bottom"
 			align="start"
 		>