feat: add dialogs

src/lib/components/functional/Dialog.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { duration, fade, fly } from "$lib/animation";
+	import { removeDialog } from "$lib/store/DialogProvider";
+	import { BanIcon, CheckIcon, InfoIcon, TriangleAlert } from "lucide-svelte";
+	import { quintOut } from "svelte/easing";
+
+	type Props = {
+		id: number;
+		title: string;
+		message: string;
+		buttons: {
+			text: string;
+			action: () => void;
+		}[];
+		type: "success" | "error" | "info" | "warning";
+	};
+
+	let { id, title, message, buttons, type }: Props = $props();
+
+	const colors = {
+		success: "purple",
+		error: "red",
+		info: "blue",
+		warning: "pink",
+	};
+
+	const Icons = {
+		success: CheckIcon,
+		error: BanIcon,
+		info: InfoIcon,
+		warning: TriangleAlert,
+	};
+
+	let color = $derived(colors[type]);
+	let Icon = $derived(Icons[type]);
+
+	console.log(`ID: ${id}, type: ${type}`);
+</script>
+
+<div
+	class="flex flex-col items-center justify-between w-full max-w-sm p-4 gap-6 bg-panel border-accent-{color}-alt border-l-4 rounded-lg shadow-md"
+	in:fly={{
+		duration,
+		easing: quintOut,
+		x: 0,
+		y: 100,
+	}}
+	out:fade={{
+		duration,
+		easing: quintOut,
+	}}
+>
+	<div class="flex justify-between w-full items-center">
+		<div class="flex items-center gap-3">
+			<div
+				class="rounded-full bg-accent-{color} p-2 inline-block w-8 h-8"
+			>
+				<Icon size="16" color="black" />
+			</div>
+			<p class="text-lg font-semibold">{title}</p>
+		</div>
+	</div>
+	<div class="flex flex-col gap-1 w-full">
+		<p class="text-sm font-normal text-muted">{message}</p>
+	</div>
+	<div class="flex flex-row items-center gap-4 w-full">
+		{#each buttons as { text, action }, i}
+			<button
+				class="hover:scale-105 active:scale-100 duration-200 flex items-center gap-2 p-2 rounded-md {i ===
+				1
+					? `bg-accent-${color} text-black`
+					: 'bg-button text-black dynadark:text-white'} px-6"
+				onclick={() => {
+					action();
+					removeDialog(id);
+				}}
+			>
+				{text}
+			</button>
+		{/each}
+	</div>
+</div>

src/lib/components/layout/Dialogs.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { duration, fade } from "$lib/animation";
+	import { quintOut } from "svelte/easing";
+	import Dialog from "../functional/Dialog.svelte";
+	import {
+		type Dialog as DialogType,
+		dialogs,
+	} from "$lib/store/DialogProvider";
+
+	let dialogList = $state<DialogType[]>([]);
+
+	dialogs.subscribe((value) => {
+		dialogList = value as DialogType[];
+	});
+</script>
+
+{#if dialogList.length > 0}
+    <div
+        class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm z-40"
+        in:fade={{
+            duration,
+            easing: quintOut,
+        }}
+        out:fade={{
+            duration,
+            easing: quintOut,
+        }}
+    >
+        {#each dialogList as { id, title, message, buttons, type }, i}
+            {#if i === 0}
+                <Dialog {id} {title} {message} {buttons} {type} />
+            {/if}
+        {/each}
+    </div>
+{/if}

src/lib/components/layout/index.ts

@@ -1,5 +1,6 @@
 export { default as UploadRegion } from './UploadRegion.svelte';
 export { default as Gradients } from './Gradients.svelte';
+export { default as Dialogs } from './Dialogs.svelte';
 export { default as PageContent } from './PageContent.svelte';
 export { default as MobileLogo } from './MobileLogo.svelte';
 export { default as Footer } from './Footer.svelte';

src/lib/store/DialogProvider.ts

@@ -0,0 +1,46 @@
+import { writable } from "svelte/store";
+
+type DialogType = "success" | "error" | "info" | "warning";
+
+export interface Dialog {
+	id: number;
+	title: string;
+	message: string;
+	buttons: {
+		text: string;
+		action: () => void;
+	}[];
+	type: DialogType;
+}
+
+const dialogs = writable<Dialog[]>([]);
+
+let dialogId = 0;
+
+function addDialog(
+	title: string,
+	message: string,
+	buttons: Dialog["buttons"],
+	type: DialogType,
+) {
+	const id = dialogId++;
+
+	const newDialog: Dialog = {
+		id,
+		title,
+		message,
+		buttons,
+		type,
+	};
+	dialogs.update((currentDialogs) => [...currentDialogs, newDialog]);
+
+    return id;
+}
+
+function removeDialog(id: number) {
+	dialogs.update((currentDialogs) =>
+		currentDialogs.filter((dialog) => dialog.id !== id),
+	);
+}
+
+export { dialogs, addDialog, removeDialog };

src/routes/+layout.svelte

@@ -122,6 +122,8 @@
 		{/each}
 	</div>
 
+	<Layout.Dialogs />
+
 	<div>
 		<Layout.Footer />
 		<Navbar.Mobile />

src/routes/settings/+page.svelte

@@ -2,6 +2,7 @@
 	import { browser } from "$app/environment";
 	import { log } from "$lib/logger";
 	import * as Settings from "$lib/sections/settings/index.svelte";
+	import { addDialog, removeDialog } from "$lib/store/DialogProvider";
 	import { addToast } from "$lib/store/ToastProvider";
 	import { SettingsIcon } from "lucide-svelte";
 	import { onMount } from "svelte";
@@ -61,6 +62,38 @@
 
 		<div class="flex flex-col gap-4 flex-1">
 			<Settings.Appearance />
+			<button class="hidden md:block btn btn-primary" onclick={() => {
+				const id = addDialog(
+					"Test dialog",
+					"This is a test dialog",
+					[
+						{
+							text: "Close",
+							action: () => {
+								addToast("info", "Dialog closed");
+							},
+						},
+					],
+					"info"
+				);
+
+				const id2 = addDialog(
+					"Test 2 dialog",
+					"This is a test dialog 2",
+					[
+						{
+							text: "meow",
+							action: () => {
+								addToast("info", "Dialog 2 closed");
+							},
+						},
+					],
+					"success"
+				);
+		
+				console.log(`Dialog ID: ${id}`);
+				console.log(`Dialog ID2: ${id2}`);
+			}}>Test dialogs</button>
 		</div>
 	</div>
 </div>