Add delete confirmation to nav menu (#188)

* Add delete confirmation to nav menu
- Refactored chat nav column item into a separate NavElement

* Fix linting?

* Update src/lib/components/NavElement.svelte

Co-authored-by: Victor Muštar <[email protected]>

* Renamed NavElement to NavConversationItem

* remove double spaces

* fixed linting

---------

Co-authored-by: Victor Muštar <[email protected]>

src/lib/components/NavConversationItem.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { base } from "$app/paths";
+	import { page } from "$app/stores";
+	import { createEventDispatcher } from "svelte";
+
+	import CarbonCheckmark from "~icons/carbon/checkmark";
+	import CarbonTrashCan from "~icons/carbon/trash-can";
+	import CarbonClose from "~icons/carbon/close";
+	import CarbonEdit from "~icons/carbon/edit";
+
+	export let conv: { id: string; title: string };
+
+	let confirmDelete = false;
+
+	const dispatch = createEventDispatcher<{
+		deleteConversation: string;
+		editConversationTitle: { id: string; title: string };
+	}>();
+</script>
+
+<a
+	data-sveltekit-noscroll
+	on:mouseleave={() => {
+		confirmDelete = false;
+	}}
+	href="{base}/conversation/{conv.id}"
+	class="group flex h-11 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 {conv.id ===
+	$page.params.id
+		? 'bg-gray-100 dark:bg-gray-700'
+		: ''}"
+>
+	<div class="flex-1 truncate">
+		{#if confirmDelete}
+			<span class="font-semibold"> Delete </span>
+		{/if}
+		{conv.title}
+	</div>
+
+	{#if confirmDelete}
+		<button
+			type="button"
+			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
+			title="Confirm delete action"
+			on:click|preventDefault={() => dispatch("deleteConversation", conv.id)}
+		>
+			<CarbonCheckmark class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
+		</button>
+		<button
+			type="button"
+			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
+			title="Cancel delete action"
+			on:click|preventDefault={() => {
+				confirmDelete = false;
+			}}
+		>
+			<CarbonClose class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
+		</button>
+	{:else}
+		<button
+			type="button"
+			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
+			title="Edit conversation title"
+			on:click|preventDefault={() => {
+				const newTitle = prompt("Edit this conversation title:", conv.title);
+				if (!newTitle) return;
+				dispatch("editConversationTitle", { id: conv.id, title: newTitle });
+			}}
+		>
+			<CarbonEdit class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
+		</button>
+
+		<button
+			type="button"
+			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
+			title="Delete conversation"
+			on:click|preventDefault={(event) => {
+				if (event.shiftKey) {
+					dispatch("deleteConversation", conv.id);
+				} else {
+					confirmDelete = true;
+				}
+			}}
+		>
+			<CarbonTrashCan class="text-xs text-gray-400  hover:text-gray-500 dark:hover:text-gray-300" />
+		</button>
+	{/if}
+</a>

src/lib/components/NavMenu.svelte

@@ -1,20 +1,15 @@
 <script lang="ts">
 	import { base } from "$app/paths";
-	import { page } from "$app/stores";
 	import { createEventDispatcher } from "svelte";
 
 	import Logo from "$lib/components/icons/Logo.svelte";
-	import CarbonTrashCan from "~icons/carbon/trash-can";
-	import CarbonEdit from "~icons/carbon/edit";
-
 	import { switchTheme } from "$lib/switchTheme";
 	import { PUBLIC_ORIGIN } from "$env/static/public";
+	import NavConversationItem from "./NavConversationItem.svelte";
 
 	const dispatch = createEventDispatcher<{
 		shareConversation: { id: string; title: string };
-		deleteConversation: string;
 		clickSettings: void;
-		editConversationTitle: { id: string; title: string };
 	}>();
 
 	export let conversations: Array<{
@@ -36,43 +31,10 @@
 	</a>
 </div>
 <div
-	class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl bg-gradient-to-l from-gray-50  px-3 pb-3 pt-2 dark:from-gray-800/30"
+	class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl bg-gradient-to-l from-gray-50 px-3 pb-3 pt-2 dark:from-gray-800/30"
 >
 	{#each conversations as conv (conv.id)}
-		<a
-			data-sveltekit-noscroll
-			href="{base}/conversation/{conv.id}"
-			class="group flex h-11 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 {conv.id ===
-			$page.params.id
-				? 'bg-gray-100 dark:bg-gray-700'
-				: ''}"
-		>
-			<div class="flex-1 truncate">{conv.title}</div>
-
-			<button
-				type="button"
-				class="flex h-5 w-5 items-center justify-center rounded md:hidden  md:group-hover:flex"
-				title="Edit conversation title"
-				on:click|preventDefault={() => {
-					const newTitle = prompt("Edit this conversation title:", conv.title);
-					if (!newTitle) return;
-					dispatch("editConversationTitle", { id: conv.id, title: newTitle });
-				}}
-			>
-				<CarbonEdit class="text-xs text-gray-400  hover:text-gray-500 dark:hover:text-gray-300" />
-			</button>
-
-			<button
-				type="button"
-				class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
-				title="Delete conversation"
-				on:click|preventDefault={() => dispatch("deleteConversation", conv.id)}
-			>
-				<CarbonTrashCan
-					class="text-xs text-gray-400  hover:text-gray-500 dark:hover:text-gray-300"
-				/>
-			</button>
-		</a>
+		<NavConversationItem on:editConversationTitle on:deleteConversation {conv} />
 	{/each}
 </div>
 <div