improve toast logic

package.json

@@ -36,7 +36,7 @@
 		"globals": "^16.0.0",
 		"highlight.js": "^11.10.0",
 		"jiti": "^2.4.2",
-		"melt": "^0.17.8",
+		"melt": "^0.18.4",
 		"postcss": "^8.4.38",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.2.6",

pnpm-lock.yaml

@@ -82,8 +82,8 @@ importers:
         specifier: ^2.4.2
         version: 2.4.2
       melt:
-        specifier: ^0.17.8
-        version: 0.17.8(@floating-ui/[email protected])([email protected])
+        specifier: ^0.18.4
+        version: 0.18.4(@floating-ui/[email protected])([email protected])
       postcss:
         specifier: ^8.4.38
         version: 8.5.3
@@ -1545,8 +1545,8 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
-  melt@0.17.8:
-    resolution: {integrity: sha512-k2yRx3B4CTHylSOkXelYh6ds/0/NEhy/Q5pfpF4ETlZH6JZMlzhuO7bWKEuLTxqZ4X2tmAnrQTqWLtSzUB5uGA==}
+  melt@0.18.4:
+    resolution: {integrity: sha512-AH7im4MEmHS/8MFhGDnfiuF4ibdm0guFWiBvBaF93YIzA0hhuWMcGxD8HdEsQ8q1Q6xIIRm9FdGd0WICc7Nk2A==}
     peerDependencies:
       '@floating-ui/dom': ^1.6.0
       svelte: ^5.0.0
@@ -3471,7 +3471,7 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  melt@0.17.8(@floating-ui/[email protected])([email protected]):
+  melt@0.18.4(@floating-ui/[email protected])([email protected]):
     dependencies:
       '@floating-ui/dom': 1.6.13
       jest-axe: 9.0.0

src/lib/components/debug-menu.svelte

@@ -68,6 +68,13 @@
 						description: "Something did not work!",
 						variant: "error",
 					},
+
+					{
+						title: "Big one",
+						description:
+							"This one has a lot of text. like seriously. its a lot. so this toast should be really big! and we see how that affects the other ones. ",
+						variant: "success",
+					},
 				];
 
 				addToast(toastData[Math.floor(Math.random() * toastData.length)]!);

src/lib/components/inference-playground/playground.svelte

@@ -23,6 +23,7 @@
 	import ModelSelector from "./model-selector.svelte";
 	import ProjectSelect from "./project-select.svelte";
 	import { showQuotaModal } from "../quota-modal.svelte";
+	import Toaster from "../toaster.svelte";
 
 	const startMessageUser: ConversationMessage = { role: "user", content: "" };
 
@@ -207,6 +208,7 @@
 		? 'md:grid-cols-[clamp(220px,20%,350px)_minmax(0,1fr)]'
 		: 'md:grid-cols-[clamp(220px,20%,350px)_minmax(0,1fr)_clamp(270px,25%,300px)]'}"
 >
+	<!-- First column -->
 	<div class="flex flex-col gap-2 overflow-y-auto py-3 pr-3 max-md:pl-3">
 		<div class="pl-2">
 			<ProjectSelect />
@@ -234,7 +236,10 @@
 			></textarea>
 		</div>
 	</div>
+
+	<!-- Center column -->
 	<div class="relative divide-y divide-gray-200 dark:divide-gray-800" onkeydown={onKeydown}>
+		<Toaster />
 		<div
 			class="flex h-[calc(100dvh-5rem-120px)] divide-x divide-gray-200 overflow-x-auto overflow-y-hidden *:w-full max-sm:w-dvw md:h-[calc(100dvh-5rem)] md:pt-3 dark:divide-gray-800"
 		>
@@ -309,18 +314,12 @@
 									Cancel
 								{/if}
 							</span>
-							<div
-								class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-100"
-								style="animation-delay: 0.25s;"
-							></div>
-							<div
-								class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-100"
-								style="animation-delay: 0.5s;"
-							></div>
-							<div
-								class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-100"
-								style="animation-delay: 0.75s;"
-							></div>
+							{#each { length: 3 } as _, i}
+								<div
+									class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-100"
+									style="animation-delay: {(i + 1) * 0.25}s;"
+								></div>
+							{/each}
 						</div>
 					{:else}
 						Run <span
@@ -332,6 +331,8 @@
 			</div>
 		</div>
 	</div>
+
+	<!-- Last column -->
 	{#if !compareActive}
 		<div class="flex flex-col p-3 {viewSettings ? 'max-md:fixed' : 'max-md:hidden'} max-md:inset-x-0 max-md:bottom-20">
 			<div

src/lib/components/quota-modal.svelte

@@ -44,7 +44,7 @@
 				use:clickOutside={() => (open = false)}
 				transition:scale={{ start: 0.975, duration: 250 }}
 			>
-				<h2 class="mt-8 text-center text-2xl font-semibold text-balance text-white sm:text-3xl">
+				<h2 class="mt-8 text-center text-2xl font-semibold text-balance sm:text-3xl dark:text-white">
 					Upgrade Your AI Experience with a <LabelPro
 						class="mx-0.5 -translate-y-px align-middle leading-6 max-sm:py-0! sm:text-xl"
 					/> Account

src/lib/components/toaster.svelte

@@ -3,25 +3,71 @@
 	import { toaster } from "./toaster.svelte.js";
 	import { Progress } from "melt/components";
 	import Close from "~icons/carbon/close";
+	import { omit } from "$lib/utils/object.js";
+	import { session } from "$lib/state/session.svelte.js";
+	import { AnimationFrames } from "runed";
+
+	let toastHeights = $state<number[]>([]);
+	new AnimationFrames(() => {
+		const rootEl = document.getElementById(toaster.root.id);
+		if (!rootEl) return;
+
+		const toastEls = Array.from(rootEl.querySelectorAll("[data-melt-toaster-toast-content]"));
+		toastHeights = toastEls.map(el => el.clientHeight);
+		// console.log(toastHeights);
+	});
+
+	const isComparing = $derived(session.project.conversations.length > 1);
+
+	const GAP = 8;
+
+	function getToastStyle(i: number) {
+		// Remember, the order is reversed! Meaning i=0 was the first toast, so its the last
+		// we want to show.
+		const n = toaster.toasts.length - i - 1;
+		if (n === 0) return "";
+		const reversedHeights = toastHeights.toReversed();
+		const yHover = -1 * reversedHeights.slice(0, n).reduce((a, b) => a + b + GAP, 0);
+
+		const y = -n * 10;
+
+		return `
+			--y-hover: ${yHover}px;
+			--y: ${y}px;
+		`;
+	}
+
+	function getRootStyle() {
+		const heightHover = toastHeights.reduce((a, b) => a + b + GAP, 0);
+		return `
+			--h-hover: ${heightHover}px;
+		`;
+	}
 </script>
 
-<div {...toaster.root} class="fixed !right-4 !bottom-4 flex w-[300px] flex-col" style:--toasts={toaster.toasts.length}>
+<div
+	{...omit(toaster.root, "popover")}
+	class={["absolute right-2 bottom-23 flex w-[300px] flex-col ", !isComparing && "md:right-0"]}
+	style:--toasts={toaster.toasts.length}
+	style={getRootStyle()}
+>
 	{#each toaster.toasts as toast, i (toast.id)}
 		<div
-			class="relative flex h-(--toast-height) w-full flex-col justify-center rounded-xl bg-white px-4 text-left transition dark:bg-gray-800"
+			class="flex w-full flex-col justify-center rounded-xl bg-white px-4 py-4 text-left transition dark:bg-gray-800"
 			{...toast.content}
 			style:--n={toaster.toasts.length - i}
-			in:fly={{ y: 60, opacity: 0.9 }}
+			in:fly={{ y: 20, opacity: 0 }}
 			out:fly={{ y: 20 }}
+			style={getToastStyle(i)}
 		>
 			<h3 {...toast.title} class="text-sm font-medium whitespace-nowrap text-gray-700 dark:text-gray-300">
 				{toast.data.title}
 			</h3>
 
 			{#if toast.data.description}
-				<div {...toast.description} class="max-w-[200px] text-xs text-gray-700 dark:text-gray-300">
+				<p {...toast.description} class="max-w-[200px] text-xs text-gray-700 dark:text-gray-300">
 					{toast.data.description}
-				</div>
+				</p>
 			{/if}
 
 			<button
@@ -61,25 +107,22 @@
 	[data-melt-toaster-root] {
 		--gap: 0.75rem;
 		--hover-offset: 0rem;
-		--toast-height: 4.5rem;
+		/* --toast-height: 4.5rem; */
 		--hidden-offset: 0.75rem;
 
 		--hidden-toasts: calc(var(--toasts) - 1);
 
 		overflow: visible;
-		display: grid;
-		grid-template-rows: var(--toast-height) repeat(var(--hidden-toasts), var(--hidden-offset));
-		grid-template-columns: 1fr;
 		gap: 0;
 		background: unset;
 		padding: 0;
+
+		border: 1px solid var(--color-emerald-500);
+		height: var(--h);
 	}
 
 	[data-melt-toaster-root]:hover {
-		grid-template-rows: var(--hidden-offset) var(--toast-height) repeat(
-				var(--hidden-toasts),
-				calc(var(--toast-height) + var(--gap))
-			);
+		height: var(--h-hover);
 	}
 
 	[data-melt-toaster-toast-content] {
@@ -91,6 +134,8 @@
 
 		transform-origin: 50% 0%;
 		transition: all 350ms ease;
+
+		translate: 0 var(--y);
 	}
 
 	:global(.dark [data-melt-toaster-toast-content]) {
@@ -101,32 +146,26 @@
 		z-index: 1;
 		scale: 0.925;
 		opacity: 0;
-		translate: 0 calc(-3 * var(--hidden-offset));
 	}
 
 	[data-melt-toaster-toast-content]:nth-last-child(-n + 3) {
 		z-index: 2;
 		scale: 0.95;
-		translate: 0 calc(-2 * var(--hidden-offset));
 	}
 
 	[data-melt-toaster-toast-content]:nth-last-child(-n + 2) {
 		z-index: 3;
 		scale: 0.975;
-		translate: 0 calc(-1 * var(--hidden-offset));
 	}
 
 	[data-melt-toaster-toast-content]:nth-last-child(-n + 1) {
 		z-index: 4;
 		scale: 1;
-		translate: 0;
 	}
 
 	[data-melt-toaster-root]:hover [data-melt-toaster-toast-content] {
 		scale: 1;
 		opacity: 1;
-		--toast-gap: calc(calc(var(--gap) * var(--n)) + var(--hover-offset));
-		--percentage: calc(-100% * calc(var(--n) - 1));
-		translate: 0 calc(var(--percentage) - var(--toast-gap));
+		translate: 0 var(--y-hover);
 	}
 </style>

src/lib/components/toaster.svelte.ts

@@ -8,6 +8,7 @@ export type ToastData = {
 
 export const toaster = new Toaster<ToastData>({
 	hover: "pause-all",
+	closeDelay: 0,
 });
 
 export function addToast(data: ToastData) {
@@ -17,3 +18,21 @@ export function addToast(data: ToastData) {
 export function removeToast(id: string) {
 	toaster.removeToast(id);
 }
+
+addToast({
+	title: "Hello World 1",
+	description: "hey",
+	variant: "success",
+});
+
+addToast({
+	title: "Hello World 2",
+	description: "hey",
+	variant: "success",
+});
+
+addToast({
+	title: "Hello World 3",
+	description: "hi",
+	variant: "success",
+});

src/lib/types.ts

@@ -172,3 +172,5 @@ export enum PipelineTag {
 }
 
 export type MaybeGetter<T> = T | (() => T);
+
+export type ValueOf<T> = T[keyof T];

src/lib/utils/object.ts

@@ -1,3 +1,5 @@
+import type { ValueOf } from "$lib/types.js";
+
 // typed Object.keys
 export function keys<T extends object>(o: T): (keyof T)[] {
 	return Object.keys(o) as (keyof T)[];
@@ -12,3 +14,21 @@ export function entries<T extends object>(o: T): [keyof T, T[keyof T]][] {
 export function fromEntries<T extends object>(entries: [keyof T, T[keyof T]][]): T {
 	return Object.fromEntries(entries) as T;
 }
+
+export function omit<T extends Record<string, unknown>, K extends keyof T>(obj: T, ...keys: K[]): Omit<T, K> {
+	const result = {} as Omit<T, K>;
+	for (const key of Object.keys(obj)) {
+		if (!keys.includes(key as unknown as K)) {
+			result[key as keyof Omit<T, K>] = obj[key] as ValueOf<Omit<T, K>>;
+		}
+	}
+	return result;
+}
+
+export function pick<T extends Record<string, unknown>, K extends keyof T>(obj: T, ...keys: K[]): Pick<T, K> {
+	const result = {} as Pick<T, K>;
+	for (const key of keys) {
+		result[key] = obj[key] as ValueOf<Pick<T, K>>;
+	}
+	return result;
+}

src/routes/+layout.svelte

@@ -14,5 +14,4 @@
 {@render children?.()}
 <DebugMenu />
 <Prompts />
-<Toaster />
 <QuotaModal />