added confirmation dialog when deleting a shortener

frontend/src/routes/(app)/links/+page.svelte

@@ -8,6 +8,7 @@
 	import * as Select from '$lib/components/ui/select'
 	import * as Command from '$lib/components/ui/command'
 	import * as Popover from '$lib/components/ui/popover'
+	import * as AlertDialog from '$lib/components/ui/alert-dialog'
 	import { Input } from '$lib/components/ui/input'
 	import { Label } from '$lib/components/ui/label'
 	import { Badge } from '$lib/components/ui/badge'
@@ -24,6 +25,7 @@
 	import { cn } from '$lib/utils'
 	import Qr from '$lib/components/QR.svelte'
 	import AddShortenerDialog from './(component)/AddShortenerDialog.svelte'
+	import { toast } from 'svelte-sonner'
 
 	export let data: PageData
 
@@ -63,10 +65,22 @@
 		editDialogOpen = false
 	}
 
-	const deleteShortener = async (code: string) => {
-		await fetch(`/api/shortener/${code}`, {
+	let deleteDialogOpen = false
+	let deleteShortenerCode = ''
+	let isDeleteLoading = false
+	const openDeleteDialog = (code: string) => {
+		deleteShortenerCode = code
+		deleteDialogOpen = true
+	}
+
+	const deleteShortener = async () => {
+		isDeleteLoading = true
+		await fetch(`/api/shortener/${deleteShortenerCode}`, {
 			method: 'delete',
 		})
+		isDeleteLoading = false
+		toast.success('Shortener deleted successfully')
+		deleteDialogOpen = false
 		await invalidateAll()
 	}
 
@@ -191,7 +205,7 @@
 										Edit
 									</DropdownMenu.Item>
 									<DropdownMenu.Item
-										on:click={() => deleteShortener(shortener.code)}
+										on:click={() => openDeleteDialog(shortener.code)}
 										class="text-destructive data-[highlighted]:bg-destructive">
 										Delete
 									</DropdownMenu.Item>
@@ -273,3 +287,28 @@
 		</div>
 	</Dialog.Content>
 </Dialog.Root>
+
+<AlertDialog.Root bind:open={deleteDialogOpen}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
+			<AlertDialog.Description>
+				You are about to delete a shortener.
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel disabled={isDeleteLoading}
+				>Cancel</AlertDialog.Cancel>
+			<Button
+				variant="destructive"
+				on:click={deleteShortener}
+				class="flex gap-2"
+				disabled={isDeleteLoading}>
+				{#if isDeleteLoading}
+					<Loader2 class="animate-spin" />
+				{/if}
+				Delete
+			</Button>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>