add option to paste in project

src/lib/components/local-toasts.svelte

@@ -17,20 +17,21 @@
 
 	type Toast = {
 		content: string;
+		variant: "info" | "danger";
 		id: string;
 	};
 
 	let toasts = $state<Toast[]>([]);
 	let timeouts: ReturnType<typeof window.setTimeout>[] = [];
 
-	function addToast(content: string) {
+	function addToast(content: string, variant?: Toast["variant"]) {
 		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 });
+		toasts.push({ content, id, variant: variant ?? "info" });
 		timeouts.push(timeout);
 	}
 
@@ -57,13 +58,21 @@
 			destroy: autoUpdate(triggerEl, node, compute),
 		};
 	}
+
+	const classMap: Record<Toast["variant"], string> = {
+		info: "border border-blue-400 bg-gradient-to-b from-blue-500 to-blue-600",
+
+		danger: "border border-red-400 bg-gradient-to-b from-red-500 to-red-600",
+	};
 </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"
+		data-local-toast
+		data-variant={toast.variant}
+		class="rounded-full px-2 py-1 text-xs {classMap[toast.variant]}"
 		in:fly={{ y: 10 }}
 		out:fly={{ y: -4 }}
 		use:float
@@ -73,7 +82,7 @@
 {/each}
 
 <style>
-	div {
+	[data-local-toast] {
 		/* Float on top of the UI */
 		position: absolute;
 

src/lib/components/share-modal.svelte

@@ -14,30 +14,34 @@
 	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 { copyToClipboard } from "$lib/utils/copy.js";
+	import { decodeString, encodeObject } from "$lib/utils/encode.js";
 	import { fade, scale } from "svelte/transition";
+	import typia from "typia";
 	import IconCross from "~icons/carbon/close";
 	import IconCopy from "~icons/carbon/copy";
+	import IconSave from "~icons/carbon/save";
 	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();
+	import { addToast as addToastGlobally } from "./toaster.svelte.js";
 
-	onMount(() => {
-		// JUST FOR DEVELOPMENT
-		project = session.project;
-	});
+	let dialog: HTMLDialogElement | undefined = $state();
 
 	const open = $derived(!!project);
 	const encoded = $derived(encodeObject(project));
+	let pasted = $state("");
 
 	$effect(() => {
 		if (open) {
 			dialog?.showModal();
 		} else {
-			setTimeout(() => dialog?.close(), 250);
+			setTimeout(() => {
+				dialog?.close();
+				pasted = "";
+			}, 250);
 		}
 	});
+
+	const isProject = typia.createIs<Project>();
 </script>
 
 <dialog class="backdrop:bg-transparent" bind:this={dialog} onclose={() => close()}>
@@ -93,6 +97,47 @@
 							{/snippet}
 						</LocalToasts>
 					</div>
+
+					<div class="my-4 flex items-center gap-2">
+						<div class="h-px grow bg-neutral-500" aria-hidden="true"></div>
+						<span class="text-xs text-neutral-400">or</span>
+						<div class="h-px grow bg-neutral-500" aria-hidden="true"></div>
+					</div>
+
+					<h3 class="text-lg font-semibold">Save a copied project</h3>
+					<p>Paste a copied project string, and save it for your local usage.</p>
+					<LocalToasts>
+						{#snippet children({ addToast, trigger })}
+							<form
+								class="mt-4 flex gap-2"
+								onsubmit={e => {
+									e.preventDefault();
+									const decoded = decodeString(pasted);
+									if (!isProject(decoded)) {
+										addToast("String isn't valid", "danger");
+										return;
+									}
+									session.addProject({ ...decoded, name: `Saved - ${decoded.name}`, id: crypto.randomUUID() });
+									addToastGlobally({
+										variant: "success",
+										title: "Saved project",
+										description: "The project you pasted in was successfully saved.",
+									});
+									close();
+								}}
+							>
+								<input
+									class="grow 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-800 dark:text-gray-400 dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+									type="text"
+									bind:value={pasted}
+								/>
+								<button {...trigger} class="btn flex items-center gap-2" type="submit">
+									<IconSave />
+									Save
+								</button>
+							</form>
+						{/snippet}
+					</LocalToasts>
 				</div>
 
 				<!-- Modal footer -->

src/lib/state/session.svelte.ts

@@ -150,6 +150,10 @@ class SessionState {
 
 		defaultProject.conversations = [getDefaults().defaultConversation];
 
+		this.addProject(project);
+	};
+
+	addProject = (project: Project) => {
 		this.$ = { ...this.$, projects: [...this.$.projects, project], activeProjectId: project.id };
 	};
 

src/lib/utils/copy.ts

@@ -10,8 +10,7 @@ export async function copyToClipboard(text: string): Promise<void> {
 		try {
 			await navigator.clipboard.writeText(text);
 			return; // Resolve immediately if successful
-			// eslint-disable-next-line @typescript-eslint/no-unused-vars
-		} catch (_) {
+		} catch {
 			// Fallback to the older method
 		}
 	}

src/lib/utils/encode.ts

@@ -23,7 +23,11 @@ export function decodeString(encodedString: string): unknown {
 	 * Returns:
 	 *     The decoded object.
 	 */
-	const jsonString: string = decodeURIComponent(escape(atob(encodedString)));
-	const obj: unknown = JSON.parse(jsonString);
-	return obj;
+	try {
+		const jsonString: string = decodeURIComponent(escape(atob(encodedString)));
+		const obj: unknown = JSON.parse(jsonString);
+		return obj;
+	} catch {
+		return null;
+	}
 }