From 7ba98ad49853f3cbf8c3339b0a8ea303eb93dadd Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 14 Jun 2024 13:02:07 -0700
Subject: [PATCH] feat: chat item shift shorcut

---
 src/lib/components/chat/Chat.svelte           |   9 +-
 src/lib/components/layout/Sidebar.svelte      |  22 +++
 .../components/layout/Sidebar/ChatItem.svelte | 136 ++++++++++++------
 3 files changed, 119 insertions(+), 48 deletions(-)

diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte
index c9ee74aa2..73b480796 100644
--- a/src/lib/components/chat/Chat.svelte
+++ b/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) {
-			await initNewChat();
+			chatId.subscribe(async (value) => {
+				if (!value) {
+					await initNewChat();
+				}
+			});
 		} else {
 			if (!($settings.saveChatHistory ?? true)) {
 				await goto('/');
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 8d13c7efb..3b32e6016 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/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;
diff --git a/src/lib/components/layout/Sidebar/ChatItem.svelte b/src/lib/components/layout/Sidebar/ChatItem.svelte
index 6a5c5b3ba..1273def18 100644
--- a/src/lib/components/layout/Sidebar/ChatItem.svelte
+++ b/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 { onMount, getContext, createEventDispatcher } from 'svelte';
+	import { goto, invalidate, invalidateAll } from '$app/navigation';
+	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) => {
-				if (e.shiftKey) {
-					// Your code here
-					console.log('hi');
-				}
+			on:mouseenter={(e) => {
+				mouseOver = true;
+			}}
+			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,48 +160,85 @@
             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">
-				<button
-					class=" self-center dark:hover:text-white transition"
-					on:click={() => {
-						editChatTitle(chat.id, chatTitle);
-						confirmEdit = false;
-						chatTitle = '';
-					}}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 20 20"
-						fill="currentColor"
-						class="w-4 h-4"
+				<Tooltip content="Confirm">
+					<button
+						class=" self-center dark:hover:text-white transition"
+						on:click={() => {
+							editChatTitle(chat.id, chatTitle);
+							confirmEdit = false;
+							chatTitle = '';
+						}}
 					>
-						<path
-							fill-rule="evenodd"
-							d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
-							clip-rule="evenodd"
-						/>
-					</svg>
-				</button>
-				<button
-					class=" self-center dark:hover:text-white transition"
-					on:click={() => {
-						confirmEdit = false;
-						chatTitle = '';
-					}}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 20 20"
-						fill="currentColor"
-						class="w-4 h-4"
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="w-4 h-4"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</button>
+				</Tooltip>
+
+				<Tooltip content="Cancel">
+					<button
+						class=" self-center dark:hover:text-white transition"
+						on:click={() => {
+							confirmEdit = false;
+							chatTitle = '';
+						}}
 					>
-						<path
-							d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-						/>
-					</svg>
-				</button>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="w-4 h-4"
+						>
+							<path
+								d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+							/>
+						</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">