From 5f3c50f86d63dcba53cf32f7f5124c3c3cd67bb9 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Wed, 27 Nov 2024 14:41:43 +0000
Subject: [PATCH] wip: use a sidebar_item_action

---
 app/src/lib/components/SidebarItem.svelte     | 10 ++--
 .../lib/components/SidebarItemActions.svelte  | 51 +++++++++++++++++++
 2 files changed, 56 insertions(+), 5 deletions(-)
 create mode 100644 app/src/lib/components/SidebarItemActions.svelte

diff --git a/app/src/lib/components/SidebarItem.svelte b/app/src/lib/components/SidebarItem.svelte
index aef35b3..10ce671 100644
--- a/app/src/lib/components/SidebarItem.svelte
+++ b/app/src/lib/components/SidebarItem.svelte
@@ -15,13 +15,11 @@
 	import { page } from '$app/stores';
 	import { Button } from './ui/button';
 	import { cn } from '@/utils/ui.utils';
+	import SidebarItemActions from './SidebarItemActions.svelte';
 
 	export let item: SidebarItemModel;
 
-	const [send, receive] = crossfade({
-		duration: 250,
-		easing: cubicInOut
-	});
+	const [send, receive] = crossfade({ duration: 250, easing: cubicInOut });
 
 	$: href = item.completed
 		? `/audiocast/${item.sessionId}`
@@ -52,7 +50,9 @@
 		{item.title}
 	</div>
 
-	<div class="text-[10px] px-2 hidden group-hover:block absolute bottom-0 right-0 text-sky-200">
+	<div class="text-[10px] px-2 hidden group-hover:block absolute bottom-0 left-0 text-sky-200">
 		{item.category}
 	</div>
+
+	<SidebarItemActions sessionId={item.sessionId} />
 </Button>
diff --git a/app/src/lib/components/SidebarItemActions.svelte b/app/src/lib/components/SidebarItemActions.svelte
new file mode 100644
index 0000000..9eed8ef
--- /dev/null
+++ b/app/src/lib/components/SidebarItemActions.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import * as AlertDialog from './ui/alert-dialog';
+	import { Trash } from 'lucide-svelte';
+	import { goto } from '$app/navigation';
+	import { SESSION_KEY } from '@/stores/sessionContext.svelte';
+	import { env } from '@env';
+
+	export let sessionId: string;
+
+	let openDialog = false;
+
+	async function deleteSession() {
+		localStorage.removeItem(`${SESSION_KEY}_${sessionId}`);
+
+		void fetch(`${env.API_BASE_URL}/delete-session/${sessionId}`, {
+			method: 'DELETE'
+		}).catch(() => {});
+
+		openDialog = false;
+		return goto('/', { invalidateAll: true, replaceState: true });
+	}
+</script>
+
+<div
+	class="absolute rounded-r-md hidden group/action bg-gray-800/80 hover:bg-gray-800 h-full group-hover:flex items-center right-0 p-2"
+>
+	<button
+		class="text-gray-400 group-hover/action:text-gray-100"
+		on:click={() => (openDialog = true)}
+	>
+		<Trash class="w-4 h-4 inline" />
+	</button>
+</div>
+
+<AlertDialog.Root bind:open={openDialog}>
+	<AlertDialog.Trigger>Open</AlertDialog.Trigger>
+	<AlertDialog.Content class="border-neutral-800">
+		<AlertDialog.Header>
+			<AlertDialog.Title>Delete audiocast?</AlertDialog.Title>
+			<AlertDialog.Description>
+				This action cannot be undone. This will permanently delete your audiocast data.
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel on:click={() => (openDialog = false)}>Cancel</AlertDialog.Cancel>
+			<AlertDialog.Action class="bg-red-500 text-red-100 hover:bg-red-600" on:click={deleteSession}
+				>Continue</AlertDialog.Action
+			>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>