feat: implement multiple image deletion with confirmation dialog

Author: theetherGit

package.json

@@ -75,7 +75,7 @@
         "svelte-check": "^4.3.2",
         "svelte-sonner": "^1.0.5",
         "tailwind-merge": "^3.3.1",
-        "tailwind-variants": "^1.0.0",
+        "tailwind-variants": "^3.2.2",
         "tailwindcss": "^4.1.12",
         "tsx": "^4.20.3",
         "tw-animate-css": "^1.3.4",

pnpm-lock.yaml

@@ -1,16 +1,18 @@
 <script lang="ts">
     import * as Dialog from '$lib/components/ui/dialog/index.js';
     import { Button, buttonVariants } from '$lib/components/ui/button';
+    import type { Snippet } from 'svelte';
 
     type Props = {
         title: string;
         description: string;
         open: boolean;
         deleteAction: () => void;
         onClose: () => void;
+        children?: Snippet
     };
 
-    let { title, description, open = $bindable(false), deleteAction, onClose }: Props = $props();
+    let { title, description, open = $bindable(false), deleteAction, onClose, children }: Props = $props();
 </script>
 
 <Dialog.Root bind:open onOpenChangeComplete={!open ? onClose : () => {}}>
@@ -21,6 +23,7 @@
                 {description}
             </Dialog.Description>
         </Dialog.Header>
+        {@render children?.()}
         <Dialog.Footer class="flex flex-row gap-x-4">
             <Dialog.Close class={buttonVariants({ variant: 'secondary' })}>Cancel</Dialog.Close>
             <Button variant="destructive" onclick={deleteAction}>Delete</Button>

src/lib/components/molecules/delete-confirmation-dialog.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-description"
+	class={cn(
+		"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

src/lib/components/ui/alert/alert-description.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-title"
+	class={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

src/lib/components/ui/alert/alert-title.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const alertVariants = tv({
+		base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+		variants: {
+			variant: {
+				default: "bg-card text-card-foreground",
+				destructive:
+					"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert"
+	class={cn(alertVariants({ variant }), className)}
+	{...restProps}
+	role="alert"
+>
+	{@render children?.()}
+</div>

src/lib/components/ui/alert/alert.svelte

@@ -0,0 +1,14 @@
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+export { alertVariants, type AlertVariant } from "./alert.svelte";
+
+export {
+	Root,
+	Description,
+	Title,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle,
+};

src/lib/components/ui/alert/index.ts

@@ -0,0 +1,21 @@
+type Success<T> = { data: T; error: null };
+type Failure<E> = { data: null; error: E };
+type Result<T, E = Error> = Success<T> | Failure<E>;
+
+export const tryCatch = async <T, E = Error>(promise: Promise<T>): Promise<Result<T, E>> => {
+    try {
+        const data = await promise;
+        return { data, error: null };
+    } catch (error) {
+        return { data: null, error: error as E };
+    }
+};
+
+export const tryCatchSync = <T, E = Error>(func: () => T): Result<T, E> => {
+    try {
+        const data = func();
+        return { data, error: null };
+    } catch (error) {
+        return { data: null, error: error as E };
+    }
+};