feat: toast (#20)

src/lib/components/ui/Toast.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import { isNullish } from '@dfinity/utils';
+	import { onDestroy, untrack } from 'svelte';
+	import { fade, fly } from 'svelte/transition';
+	import IconClose from '$lib/components/icons/IconClose.svelte';
+	import { toasts } from '$lib/stores/toasts.store';
+	import type { ToastLevel, ToastMsg } from '$lib/types/toast';
+
+	interface Props {
+		msg: ToastMsg;
+	}
+
+	let { msg }: Props = $props();
+
+	const close = () => toasts.hide();
+
+	let text: string = $derived(msg.text);
+	let level: ToastLevel = $derived(msg.level);
+	let detail: string | undefined = $derived(msg.detail);
+
+	let timer = $state<number | undefined>(undefined);
+
+	$effect(() => {
+		const { duration } = msg;
+
+		untrack(() => {
+			if (isNullish(duration) || duration <= 0) {
+				return;
+			}
+
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-ignore NodeJS.timeout vs number
+			timer = setTimeout(close, duration);
+		});
+	});
+
+	onDestroy(() => clearTimeout(timer));
+
+	let reorgDetail: string | undefined = $state(undefined);
+	$effect(() => {
+		if (isNullish(detail)) {
+			reorgDetail = undefined;
+			return;
+		}
+
+		// Present the message we throw in the backend first
+		const trapKeywords = 'trapped explicitly:' as const;
+
+		if (!detail.includes(trapKeywords)) {
+			reorgDetail = detail;
+			return;
+		}
+
+		const splits = detail.split(trapKeywords);
+		const last = splits.splice(-1);
+		reorgDetail = `${last[0]?.trim() ?? ''}${
+			splits.length > 0 ? ` | Stacktrace: ${splits.join('').trim()}` : ''
+		}`;
+	});
+</script>
+
+<div
+	role="dialog"
+	class="toast"
+	class:error={level === 'error'}
+	class:warn={level === 'warn'}
+	in:fly={{ y: 100, duration: 200 }}
+	out:fade={{ delay: 100 }}
+>
+	<div class="toast-scroll">
+		<p title={text}>
+			{text}{reorgDetail ? ` | ${reorgDetail}` : ''}
+		</p>
+	</div>
+
+	<button class="text" onclick={close} aria-label="Close"><IconClose /></button>
+</div>
+
+<style lang="scss">
+	@use '../../themes/mixins/text';
+
+	.toast {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		position: fixed;
+		bottom: calc(6 * var(--padding));
+		left: 50%;
+		transform: translate(-50%, 0);
+
+		width: calc(100% - (8 * var(--padding)));
+
+		padding: var(--padding) calc(var(--padding) * 2);
+		box-sizing: border-box;
+
+		z-index: calc(var(--z-index) + 999);
+
+		background: var(--color-secondary);
+		color: var(--color-secondary-contrast);
+
+		border-radius: var(--padding);
+
+		border: 4px solid black;
+
+		@media (min-width: 768px) {
+			max-width: 576px;
+		}
+
+		&.error {
+			background: var(--color-error);
+			color: var(--color-error-contrast);
+		}
+
+		&.warn {
+			background: var(--color-warning);
+			color: var(--color-warning-contrast);
+		}
+	}
+
+	.toast-scroll {
+		overflow-y: auto;
+		max-height: calc(16px * 3 * 1.3);
+
+		// Workaround to get rid of the redundant scrollbar (even when there is enough space).
+		line-height: normal;
+
+		direction: rtl;
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--color-secondary-contrast);
+		}
+
+		p {
+			direction: ltr;
+
+			margin: 0;
+			padding: 0 var(--padding);
+		}
+	}
+</style>

src/lib/components/ui/Toasts.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import Toast from './Toast.svelte';
+	import { toasts } from '$lib/stores/toasts.store';
+</script>
+
+{#if $toasts.length > 0}
+	<Toast msg={$toasts[0]} />
+{/if}

src/lib/stores/toasts.store.ts

@@ -0,0 +1,45 @@
+import type { ToastMsg } from '$lib/types/toast';
+import { errorDetailToString } from '$lib/utils/error.utils';
+import { writable } from 'svelte/store';
+
+const initToastsStore = () => {
+	const { subscribe, update } = writable<ToastMsg[]>([]);
+
+	return {
+		subscribe,
+
+		error({ text, detail }: { text: string; detail?: unknown }) {
+			console.error(text, detail);
+			update((messages: ToastMsg[]) => [
+				...messages,
+				{ text, level: 'error', detail: errorDetailToString(detail) }
+			]);
+		},
+
+		show(msg: ToastMsg) {
+			update((messages: ToastMsg[]) => [...messages, msg]);
+		},
+
+		warn(text: string) {
+			this.show({
+				text,
+				level: 'warn',
+				duration: 2000
+			});
+		},
+
+		success(text: string) {
+			this.show({
+				text,
+				level: 'info',
+				duration: 2000
+			});
+		},
+
+		hide() {
+			update((messages: ToastMsg[]) => messages.slice(1));
+		}
+	};
+};
+
+export const toasts = initToastsStore();

src/lib/types/toast.ts

@@ -0,0 +1,8 @@
+export type ToastLevel = 'info' | 'warn' | 'error';
+
+export interface ToastMsg {
+	text: string;
+	level: ToastLevel;
+	detail?: string;
+	duration?: number;
+}

src/lib/utils/error.utils.ts

@@ -0,0 +1,2 @@
+export const errorDetailToString = (err: unknown): string | undefined =>
+	typeof err === 'string' ? err : err instanceof Error ? err.message : undefined;

src/routes/+layout.svelte

@@ -14,6 +14,7 @@
 	import Busy from '$lib/components/ui/Busy.svelte';
 	import { initSatellite } from '@junobuild/core';
 	import { CONTAINER, SATELLITE_ID } from '$lib/constants/constants';
+	import Toasts from "$lib/components/ui/Toasts.svelte";
 
 	onMount(async () => {
 		await initSatellite({
@@ -29,3 +30,4 @@
 
 <Add />
 <Busy />
+<Toasts />