feat: sidebar ui update

src/lib/components/layout/Sidebar.svelte

@@ -82,7 +82,10 @@
 		});
 
 		if (res) {
+			if ($chatId === id) {
 				goto('/');
+			}
+
 			await chats.set(await getChatList(localStorage.token));
 		}
 	};
@@ -370,22 +373,22 @@
 						return title.includes(query) || contentMatches;
 					}
 				}) as chat, i}
-					<div class=" w-full pr-2 relative">
+					<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 hover:bg-gray-900 {chat.id ===
+								class=" w-full flex justify-between rounded-xl px-3 py-2 group-hover:bg-gray-900 {chat.id ===
 								$chatId
 									? 'bg-gray-900'
-									: ''} transition whitespace-nowrap text-ellipsis"
+									: ''}  whitespace-nowrap text-ellipsis"
 							>
 								<input bind:value={chatTitle} class=" bg-transparent w-full outline-none mr-10" />
 							</div>
 						{:else}
 							<a
-								class=" w-full flex justify-between rounded-xl px-3 py-2 hover:bg-gray-900 {chat.id ===
+								class=" w-full flex justify-between rounded-xl px-3 py-2 group-hover:bg-gray-900 {chat.id ===
 								$chatId
 									? 'bg-gray-900'
-									: ''} transition whitespace-nowrap text-ellipsis"
+									: ''}  whitespace-nowrap text-ellipsis"
 								href="/c/{chat.id}"
 								on:click={() => {
 									if (window.innerWidth < 1024) {
@@ -395,21 +398,18 @@
 								draggable="false"
 							>
 								<div class=" flex self-center flex-1 w-full">
-									<div
-										class=" text-left self-center overflow-hidden {chat.id === $chatId
-											? 'w-[160px]'
-											: 'w-full'}  h-[20px]"
-									>
+									<div class=" text-left self-center overflow-hidden w-full h-[20px]">
 										{chat.title}
 									</div>
 								</div>
 							</a>
 						{/if}
 
-						{#if chat.id === $chatId}
-							<div class=" absolute right-[22px] top-[10px]">
+						<div
+							class=" invisible group-hover:visible absolute right-[14px] top-[10px] px-2 bg-gradient-to-l from-80% from-gray-900 to-transparent"
+						>
 							{#if chatTitleEditId === chat.id}
-									<div class="flex self-center space-x-1.5">
+								<div class="flex self-center space-x-1.5 z-10">
 									<button
 										class=" self-center hover:text-white transition"
 										on:click={() => {
@@ -451,7 +451,7 @@
 									</button>
 								</div>
 							{:else if chatDeleteId === chat.id}
-									<div class="flex self-center space-x-1.5">
+								<div class="flex self-center space-x-1.5 z-10">
 									<button
 										class=" self-center hover:text-white transition"
 										on:click={() => {
@@ -490,7 +490,7 @@
 									</button>
 								</div>
 							{:else}
-									<div class="flex self-center space-x-1.5">
+								<div class="flex self-center space-x-1.5 z-10">
 									<button
 										id="delete-chat-button"
 										class=" hidden"
@@ -544,7 +544,6 @@
 								</div>
 							{/if}
 						</div>
-						{/if}
 					</div>
 				{/each}
 			</div>