Add snackbar util

src/lib/components/Snackbar.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { colorAlpha, colors } from '$lib/theme';
+	import { snackbarStore } from '$lib/util/snackbar';
+	import { fade, fly } from 'svelte/transition';
+</script>
+
+{#if $snackbarStore?.message && $snackbarStore?.visible}
+	<div
+		in:fly={{ y: 200, duration: 500 }}
+		out:fade={{ duration: 500 }}
+		style:--background={colorAlpha(colors.primaryAccentColor, 0.9)}
+		style:--border={colors.secondaryColor}
+		class="toast"
+	>
+		{$snackbarStore?.message}
+	</div>
+{/if}
+
+<style>
+	.toast {
+		background-color: var(--background);
+		position: fixed;
+		right: 10px;
+		bottom: 10px;
+		padding: 20px;
+		border-radius: 6px;
+		border: 1px solid var(--border);
+		min-width: 250px;
+		display: flex;
+	}
+</style>

src/lib/theme.ts

@@ -11,3 +11,16 @@ export const colors = {
 	dangerAccentColor: '#ddaeb2',
 	dangerActivecolor: '#b69092'
 };
+
+export function colorAlpha(hex: string, alpha: number) {
+	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+	if (result) {
+		const { r, g, b } = {
+			r: parseInt(result[1], 16),
+			g: parseInt(result[2], 16),
+			b: parseInt(result[3], 16)
+		}
+		return `rgba(${r},${g},${b},${alpha})`
+	}
+}

src/lib/util/snackbar.ts

@@ -0,0 +1,18 @@
+import { writable } from "svelte/store";
+
+type Snackbar = {
+  visible: boolean;
+  message: string;
+};
+export const snackbarStore = writable<Snackbar | undefined>(undefined);
+
+export function showSnackbar(message: string, duration = 3000) {
+  snackbarStore.set({
+    visible: true,
+    message
+  });
+
+  setTimeout(() => {
+    snackbarStore.set(undefined);
+  }, duration);
+}

src/routes/+layout.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import NavBar from '$lib/components/NavBar.svelte';
+	import Snackbar from '$lib/components/Snackbar.svelte';
 	import '../app.css';
 </script>
 
 <NavBar />
+<Snackbar />
 
 <div>
 	<slot />