feat: Update checker

src/lib/components/Notifications/Notification.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	import { onMount } from 'svelte';
+
+	export let duration = 5000;
+	export let title: string;
+	export let body = '';
+	export let type: 'info' | 'warning' | 'error' = 'info';
+	export let persistent = false;
+
+	let visible = true;
+	let timeout: ReturnType<typeof setTimeout>;
+
+	onMount(() => {
+		timeout = setTimeout(() => {
+			visible = false;
+		}, duration);
+
+		return () => clearTimeout(timeout);
+	});
+</script>
+
+{#if visible && !persistent}
+	<div class={classNames('bg-primary-800 rounded-xl px-6 py-2 w-80', {})}>
+		{#if !body}
+			<h1>{title}</h1>
+		{:else}
+			<div>
+				<h1>{title}</h1>
+				<div>{body}</div>
+			</div>
+		{/if}
+	</div>
+{/if}

src/lib/components/Notifications/NotificationStack.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { flip } from 'svelte/animate';
+	import { fly, fade } from 'svelte/transition';
+	import { notificationStack } from './notification.store';
+
+	export let persistent = false;
+</script>
+
+<div class="fixed top-8 right-8 z-50 flex flex-col">
+	{#each $notificationStack
+		.slice(Math.max($notificationStack.length - 5, 0))
+		.reverse() as notification (notification.id)}
+		<div
+			animate:flip={{ duration: 500 }}
+			in:fly|global={{ duration: 150, x: 50 }}
+			out:fade|global={{ duration: 150 }}
+			class="mb-4"
+		>
+			<svelte:component
+				this={notification.component}
+				id={notification.id}
+				{...notification.props}
+				{persistent}
+			/>
+		</div>
+	{/each}
+</div>

src/lib/components/Notifications/notification.store.ts

@@ -0,0 +1,26 @@
+import type { ComponentType } from 'svelte';
+import { writable } from 'svelte/store';
+
+type NotificationItem = {
+	id: symbol;
+	component: ComponentType;
+	props: Record<string, any>;
+};
+
+function useNotificationStack() {
+	const notifications = writable<NotificationItem[]>([]);
+
+	function create(component: NotificationItem['component'], props: NotificationItem['props'] = {}) {
+		const id = Symbol();
+		const item = { id, component, props };
+		notifications.update((prev) => [...prev, item]);
+		return id;
+	}
+
+	return {
+		subscribe: notifications.subscribe,
+		create
+	};
+}
+
+export const notificationStack = useNotificationStack();