feat: chat item shift shorcut

src/lib/components/chat/Chat.svelte

@@ -111,7 +111,8 @@
 
 	$: if (chatIdProp) {
 		(async () => {
-			if (await loadChat()) {
+			console.log(chatIdProp);
+			if (chatIdProp && (await loadChat())) {
 				await tick();
 				loaded = true;
 
@@ -126,7 +127,11 @@
 
 	onMount(async () => {
 		if (!$chatId) {
+			chatId.subscribe(async (value) => {
+				if (!value) {
 					await initNewChat();
+				}
+			});
 		} else {
 			if (!($settings.saveChatHistory ?? true)) {
 				await goto('/');

src/lib/components/layout/Sidebar.svelte

@@ -38,7 +38,10 @@
 	let navElement;
 	let search = '';
 
+	let shiftKey = false;
+
 	let selectedChatId = null;
+
 	let showDropdown = false;
 	let filteredChatList = [];
 
@@ -102,10 +105,28 @@
 			checkDirection();
 		};
 
+		const onKeyDown = (e) => {
+			if (e.key === 'Shift') {
+				shiftKey = true;
+			}
+		};
+
+		const onKeyUp = (e) => {
+			if (e.key === 'Shift') {
+				shiftKey = false;
+			}
+		};
+
+		document.addEventListener('keydown', onKeyDown);
+		document.addEventListener('keyup', onKeyUp);
+
 		window.addEventListener('touchstart', onTouchStart);
 		window.addEventListener('touchend', onTouchEnd);
 
 		return () => {
+			window.removeEventListener('keydown', onKeyDown);
+			window.removeEventListener('keyup', onKeyUp);
+
 			window.removeEventListener('touchstart', onTouchStart);
 			window.removeEventListener('touchend', onTouchEnd);
 		};
@@ -407,6 +428,7 @@
 
 					<ChatItem
 						{chat}
+						{shiftKey}
 						selected={selectedChatId === chat.id}
 						on:select={() => {
 							selectedChatId = chat.id;

src/lib/components/layout/Sidebar/ChatItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
-	import { goto } from '$app/navigation';
+	import { goto, invalidate, invalidateAll } from '$app/navigation';
-	import { onMount, getContext, createEventDispatcher } from 'svelte';
+	import { onMount, getContext, createEventDispatcher, tick } from 'svelte';
 	const i18n = getContext('i18n');
 
 	const dispatch = createEventDispatcher();
@@ -18,9 +18,15 @@
 	import ChatMenu from './ChatMenu.svelte';
 	import ShareChatModal from '$lib/components/chat/ShareChatModal.svelte';
 	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
 
 	export let chat;
 	export let selected = false;
+	export let shiftKey = false;
+
+	let mouseOver = false;
 
 	let showDeleteConfirmDialog = false;
 	let showShareChatModal = false;
@@ -43,12 +49,13 @@
 	const deleteChat = async (id) => {
 		const res = await deleteChatById(localStorage.token, id).catch((error) => {
 			toast.error(error);
-
 			return null;
 		});
 
 		if (res) {
 			if ($chatId === id) {
+				await chatId.set('');
+				await tick();
 				goto('/');
 			}
 			await chats.set(await getChatList(localStorage.token));
@@ -125,11 +132,11 @@
 				chatTitle = chat.title;
 				confirmEdit = true;
 			}}
-			on:mouseover={(e) => {
+			on:mouseenter={(e) => {
-				if (e.shiftKey) {
+				mouseOver = true;
-					// Your code here
+			}}
-					console.log('hi');
+			on:mouseleave={(e) => {
-				}
+				mouseOver = false;
 			}}
 			on:focus={(e) => {}}
 			draggable="false"
@@ -142,9 +149,9 @@
 		</a>
 	{/if}
 
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
 		class="
-
         {chat.id === $chatId || confirmEdit
 			? 'from-gray-200 dark:from-gray-900'
 			: selected
@@ -153,9 +160,16 @@
             absolute right-[10px] top-[10px] pr-2 pl-5 bg-gradient-to-l from-80%
 
               to-transparent"
+		on:mouseenter={(e) => {
+			mouseOver = true;
+		}}
+		on:mouseleave={(e) => {
+			mouseOver = false;
+		}}
 	>
 		{#if confirmEdit}
 			<div class="flex self-center space-x-1.5 z-10">
+				<Tooltip content="Confirm">
 					<button
 						class=" self-center dark:hover:text-white transition"
 						on:click={() => {
@@ -177,6 +191,9 @@
 							/>
 						</svg>
 					</button>
+				</Tooltip>
+
+				<Tooltip content="Cancel">
 					<button
 						class=" self-center dark:hover:text-white transition"
 						on:click={() => {
@@ -195,6 +212,33 @@
 							/>
 						</svg>
 					</button>
+				</Tooltip>
+			</div>
+		{:else if shiftKey && mouseOver}
+			<div class=" flex items-center self-center space-x-1.5">
+				<Tooltip content="Archive" className="flex items-center">
+					<button
+						class=" self-center dark:hover:text-white transition"
+						on:click={() => {
+							archiveChatHandler(chat.id);
+						}}
+						type="button"
+					>
+						<ArchiveBox className="size-4  translate-y-[0.5px]" strokeWidth="2" />
+					</button>
+				</Tooltip>
+
+				<Tooltip content="Delete">
+					<button
+						class=" self-center dark:hover:text-white transition"
+						on:click={() => {
+							deleteChat(chat.id);
+						}}
+						type="button"
+					>
+						<GarbageBin strokeWidth="2" />
+					</button>
+				</Tooltip>
 			</div>
 		{:else}
 			<div class="flex self-center space-x-1 z-10">