add copy project option

src/app.css

@@ -68,3 +68,7 @@ html {
 body {
 	overflow: hidden;
 }
+
+body.dark {
+	color-scheme: dark;
+}

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

@@ -7,8 +7,10 @@
 	import IconEdit from "~icons/carbon/edit";
 	import IconSave from "~icons/carbon/save";
 	import IconDelete from "~icons/carbon/trash-can";
+	import IconShare from "~icons/carbon/share";
 	import { prompt } from "../prompts.svelte";
 	import Tooltip from "../tooltip.svelte";
+	import { showShareModal } from "../share-modal.svelte";
 
 	interface Props {
 		class?: string;
@@ -49,29 +51,39 @@
 		</div>
 	</button>
 
-	{#if isDefault}
+	<div class="flex items-center gap-2">
 		<Tooltip>
 			{#snippet trigger(tooltip)}
-				<button class="btn size-[32px] p-0" {...tooltip.trigger} onclick={saveProject}>
-					<IconSave />
+				<button class="btn size-[32px] p-0" {...tooltip.trigger} onclick={() => showShareModal(session.project)}>
+					<IconShare />
 				</button>
 			{/snippet}
-			Save to Project
+			Share options
 		</Tooltip>
-	{:else}
-		<Tooltip>
-			{#snippet trigger(tooltip)}
-				<button
-					class="btn size-[32px] p-0"
-					{...tooltip.trigger}
-					onclick={() => (session.$.activeProjectId = "default")}
-				>
-					<IconCross />
-				</button>
-			{/snippet}
-			Close project
-		</Tooltip>
-	{/if}
+		{#if isDefault}
+			<Tooltip>
+				{#snippet trigger(tooltip)}
+					<button class="btn size-[32px] p-0" {...tooltip.trigger} onclick={saveProject}>
+						<IconSave />
+					</button>
+				{/snippet}
+				Save to Project
+			</Tooltip>
+		{:else}
+			<Tooltip>
+				{#snippet trigger(tooltip)}
+					<button
+						class="btn size-[32px] p-0"
+						{...tooltip.trigger}
+						onclick={() => (session.$.activeProjectId = "default")}
+					>
+						<IconCross />
+					</button>
+				{/snippet}
+				Close project
+			</Tooltip>
+		{/if}
+	</div>
 </div>
 
 <div {...select.content} class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">

src/lib/components/local-toasts.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { onDestroy, type Snippet } from "svelte";
+	import { computePosition, autoUpdate } from "@floating-ui/dom";
+	import { fly } from "svelte/transition";
+
+	interface Props {
+		children: Snippet<[{ addToast: typeof addToast; trigger: typeof trigger }]>;
+		closeDelay?: number;
+	}
+	const { children, closeDelay = 2000 }: Props = $props();
+
+	const id = $props.id();
+
+	const trigger = {
+		id,
+	} as const;
+
+	type Toast = {
+		content: string;
+		id: string;
+	};
+
+	let toasts = $state<Toast[]>([]);
+	let timeouts: ReturnType<typeof window.setTimeout>[] = [];
+
+	function addToast(content: string) {
+		const id = crypto.randomUUID();
+		const timeout = setTimeout(() => {
+			toasts = toasts.filter(t => t.id !== id);
+			timeouts = timeouts.filter(t => t !== timeout);
+		}, closeDelay);
+
+		toasts.push({ content, id });
+		timeouts.push(timeout);
+	}
+
+	onDestroy(() => {
+		timeouts.forEach(t => clearTimeout(t));
+	});
+
+	function float(node: HTMLElement) {
+		const triggerEl = document.getElementById(trigger.id);
+		if (!triggerEl) return;
+
+		const compute = () =>
+			computePosition(triggerEl, node, {
+				placement: "top",
+				strategy: "absolute",
+			}).then(({ x, y }) => {
+				Object.assign(node.style, {
+					left: `${x}px`,
+					top: `${y - 8}px`,
+				});
+			});
+
+		return {
+			destroy: autoUpdate(triggerEl, node, compute),
+		};
+	}
+</script>
+
+{@render children({ trigger, addToast })}
+
+{#each toasts as toast (toast.id)}
+	<div
+		class="rounded-full border border-blue-400 bg-gradient-to-b from-blue-500 to-blue-600 px-2 py-1 text-xs"
+		in:fly={{ y: 10 }}
+		out:fly={{ y: -4 }}
+		use:float
+	>
+		{toast.content}
+	</div>
+{/each}
+
+<style>
+	div {
+		/* Float on top of the UI */
+		position: absolute;
+
+		/* Avoid layout interference */
+		width: max-content;
+		top: 0;
+		left: 0;
+	}
+</style>

src/lib/components/share-modal.svelte

@@ -0,0 +1,111 @@
+<script lang="ts" module>
+	let project = $state<Project>();
+
+	export function showShareModal(p: Project) {
+		project = p;
+	}
+
+	function close() {
+		project = undefined;
+	}
+</script>
+
+<script lang="ts">
+	import { clickOutside } from "$lib/actions/click-outside.js";
+	import { session } from "$lib/state/session.svelte";
+	import type { Project } from "$lib/types.js";
+	import { onMount } from "svelte";
+	import { fade, scale } from "svelte/transition";
+	import IconCross from "~icons/carbon/close";
+	import IconCopy from "~icons/carbon/copy";
+	import LocalToasts from "./local-toasts.svelte";
+	import { encodeObject } from "$lib/utils/encode.js";
+	import { copyToClipboard } from "$lib/utils/copy.js";
+	let dialog: HTMLDialogElement | undefined = $state();
+
+	onMount(() => {
+		// JUST FOR DEVELOPMENT
+		project = session.project;
+	});
+
+	const open = $derived(!!project);
+	const encoded = $derived(encodeObject(project));
+
+	$effect(() => {
+		if (open) {
+			dialog?.showModal();
+		} else {
+			setTimeout(() => dialog?.close(), 250);
+		}
+	});
+</script>
+
+<dialog class="backdrop:bg-transparent" bind:this={dialog} onclose={() => close()}>
+	{#if open}
+		<!-- Backdrop -->
+		<div
+			class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/50 backdrop-blur-sm"
+			transition:fade={{ duration: 150 }}
+		>
+			<!-- Content -->
+			<div
+				class="relative w-xl rounded-xl bg-white shadow-sm dark:bg-gray-900"
+				use:clickOutside={() => close()}
+				transition:scale={{ start: 0.975, duration: 250 }}
+			>
+				<div class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-800">
+					<h2 class="flex items-center gap-2.5 text-lg font-semibold text-gray-900 dark:text-white">Sharing</h2>
+					<button
+						type="button"
+						class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
+						onclick={close}
+					>
+						<div class="text-xl">
+							<IconCross />
+						</div>
+						<span class="sr-only">Close modal</span>
+					</button>
+				</div>
+				<!-- Modal body -->
+				<div class="p-4 md:p-5">
+					<h3 class="text-lg font-semibold">Share your project</h3>
+					<p>Copy an unique string that shares your entire project until this point.</p>
+					<div class="mt-4 flex gap-2">
+						<input
+							class="grow cursor-not-allowed rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+							type="text"
+							value={encoded}
+							disabled
+						/>
+						<LocalToasts>
+							{#snippet children({ addToast, trigger })}
+								<button
+									{...trigger}
+									class="btn flex items-center gap-2"
+									onclick={() => {
+										copyToClipboard(encoded);
+										addToast("Copied to clipboard");
+									}}
+								>
+									<IconCopy />
+									Copy
+								</button>
+							{/snippet}
+						</LocalToasts>
+					</div>
+				</div>
+
+				<!-- Modal footer -->
+				<!--
+				<div class="flex rounded-b border-t border-gray-200 p-4 md:p-5 dark:border-gray-800">
+					<button
+						type="submit"
+						class="ml-auto rounded-lg bg-black px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 focus:outline-hidden dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+						>Submit</button
+					>
+				</div>
+				-->
+			</div>
+		</div>
+	{/if}
+</dialog>

src/lib/utils/copy.ts

@@ -0,0 +1,42 @@
+/**
+ * Copies a string to the clipboard, with a fallback for older browsers.
+ *
+ * @param text The string to copy to the clipboard.
+ * @returns A promise that resolves when the text has been successfully copied,
+ *          or rejects if the copy operation fails.
+ */
+export async function copyToClipboard(text: string): Promise<void> {
+	if (navigator.clipboard) {
+		try {
+			await navigator.clipboard.writeText(text);
+			return; // Resolve immediately if successful
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		} catch (_) {
+			// Fallback to the older method
+		}
+	}
+
+	// Fallback for browsers that don't support the Clipboard API
+	try {
+		const textArea = document.createElement("textarea");
+		textArea.value = text;
+
+		// Avoid scrolling to bottom of page in MS Edge.
+		textArea.style.top = "0";
+		textArea.style.left = "0";
+		textArea.style.position = "fixed";
+
+		document.body.appendChild(textArea);
+		textArea.focus();
+		textArea.select();
+
+		const successful = document.execCommand("copy");
+		document.body.removeChild(textArea);
+
+		if (!successful) {
+			throw new Error("Failed to copy text using fallback method.");
+		}
+	} catch (err) {
+		return Promise.reject(err);
+	}
+}

src/lib/utils/encode.ts

@@ -0,0 +1,29 @@
+export function encodeObject(obj: unknown): string {
+	/**
+	 * Encodes an object to a string using JSON serialization and Base64 encoding.
+	 *
+	 * Args:
+	 *     obj: The object to encode.
+	 *
+	 * Returns:
+	 *     A string representation of the object.
+	 */
+	const jsonString: string = JSON.stringify(obj);
+	const encodedString: string = btoa(unescape(encodeURIComponent(jsonString))); // btoa expects only ASCII chars
+	return encodedString;
+}
+
+export function decodeString(encodedString: string): unknown {
+	/**
+	 * Decodes a string to an object using Base64 decoding and JSON deserialization.
+	 *
+	 * Args:
+	 *     encodedString: The string to decode.
+	 *
+	 * Returns:
+	 *     The decoded object.
+	 */
+	const jsonString: string = decodeURIComponent(escape(atob(encodedString)));
+	const obj: unknown = JSON.parse(jsonString);
+	return obj;
+}

src/routes/+layout.svelte

@@ -2,6 +2,7 @@
 	import DebugMenu from "$lib/components/debug-menu.svelte";
 	import Prompts from "$lib/components/prompts.svelte";
 	import QuotaModal from "$lib/components/quota-modal.svelte";
+	import ShareModal from "$lib/components/share-modal.svelte";
 	import "../app.css";
 
 	interface Props {
@@ -12,6 +13,8 @@
 </script>
 
 {@render children?.()}
+
 <DebugMenu />
 <Prompts />
 <QuotaModal />
+<ShareModal />