improve saving

src/lib/helper.ts

···
 ) {
 	const promises = [];
 	// find all cards that have been updated (where items differ from originalItems)
-	for (const item of currentItems) {
+	for (let item of currentItems) {
 		const originalItem = data.cards.find((i) => cardsEqual(i, item));
 
 		if (!originalItem) {
-			let parsedItem = JSON.parse(JSON.stringify(item));
-			console.log('updated or new item', parsedItem);
-			parsedItem.updatedAt = new Date().toISOString();
+			console.log('updated or new item', item);
+			item.updatedAt = new Date().toISOString();
 			// run optional upload function for this card type
-			const cardDef = CardDefinitionsByType[parsedItem.cardType];
+			const cardDef = CardDefinitionsByType[item.cardType];
 
 			if (cardDef?.upload) {
-				parsedItem = await cardDef?.upload(parsedItem);
+				item = await cardDef?.upload(item);
 			}
+
+			const parsedItem = JSON.parse(JSON.stringify(item));
 
 			parsedItem.page = data.page;
 			parsedItem.version = 2;
···
 	}
 
 	await Promise.all(promises);
-
-	fetch('/' + data.handle + '/api/refresh').then(() => {
-		console.log('data refreshed!');
-	});
-	console.log('refreshing data');
-
-	toast('Saved', {
-		description: 'Your website has been saved!'
-	});
 }
 
 export function createEmptyCard(page: string) {

src/lib/website/EditBar.svelte

···
 	import { dev } from '$app/environment';
 	import { user } from '$lib/atproto';
 	import type { WebsiteData } from '$lib/types';
-	import { Button, Input, Modal, Navbar, Popover, Toggle } from '@foxui/core';
+	import { Button, Input, Navbar, Popover, Toggle, toast } from '@foxui/core';
 
 	let {
 		data,
···
 
 		showingMobileView = $bindable(),
 		isSaving = $bindable(),
+		hasUnsavedChanges,
 
 		save,
 
···
 		showingMobileView: boolean;
 
 		isSaving: boolean;
+		hasUnsavedChanges: boolean;
 
 		save: () => Promise<void>;
 
···
 	let imageInputRef: HTMLInputElement | undefined = $state();
 	let videoInputRef: HTMLInputElement | undefined = $state();
 
-	let shareModalOpen = $state(false);
+	function getShareUrl() {
+		const base = typeof window !== 'undefined' ? window.location.origin : '';
+		const pagePath =
+			data.page && data.page !== 'blento.self' ? `/${data.page.replace('blento.', '')}` : '';
+		return `${base}/${data.handle}${pagePath}`;
+	}
+
+	async function copyShareLink() {
+		const url = getShareUrl();
+		await navigator.clipboard.writeText(url);
+		toast.success('Link copied to clipboard!');
+	}
 </script>
 
 <input
···
 	multiple
 	bind:this={videoInputRef}
 />
-
-<Modal bind:open={shareModalOpen}></Modal>
 
 {#if dev || (user.isLoggedIn && user.profile?.did === data.did)}
 	<Navbar
···
 					/>
 				</svg>
 			</Toggle>
-			<Button
-				disabled={isSaving}
-				onclick={async () => {
-					save();
-				}}>{isSaving ? 'Saving...' : 'Save'}</Button
-			>
+			{#if hasUnsavedChanges}
+				<Button
+					disabled={isSaving}
+					onclick={async () => {
+						save();
+					}}>{isSaving ? 'Saving...' : 'Save'}</Button
+				>
+			{:else}
+				<Button onclick={copyShareLink}>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="size-5"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z"
+						/>
+					</svg>
+					Share
+				</Button>
+			{/if}
 		</div>
 	</Navbar>
 {/if}

src/lib/website/EditableWebsite.svelte

···
 	import { compressImage } from '../helper';
 	import Account from './Account.svelte';
 	import EditBar from './EditBar.svelte';
+	import SaveModal from './SaveModal.svelte';
 	import { user } from '$lib/atproto';
+	import { launchConfetti } from '@foxui/visual';
 
 	let {
 		data
···
 
 	// svelte-ignore state_referenced_locally
 	let publication = $state(JSON.stringify(data.publication));
+
+	// Track saved state for comparison
+	// svelte-ignore state_referenced_locally
+	let savedItems = $state(JSON.stringify(data.cards));
+	// svelte-ignore state_referenced_locally
+	let savedPublication = $state(JSON.stringify(data.publication));
+
+	let hasUnsavedChanges = $derived(
+		JSON.stringify(items) !== savedItems || JSON.stringify(data.publication) !== savedPublication
+	);
+
+	// Warn user before closing tab if there are unsaved changes
+	$effect(() => {
+		function handleBeforeUnload(e: BeforeUnloadEvent) {
+			if (hasUnsavedChanges) {
+				e.preventDefault();
+				return '';
+			}
+		}
+
+		window.addEventListener('beforeunload', handleBeforeUnload);
+		return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+	});
 
 	let container: HTMLDivElement | undefined = $state();
 
···
 	}
 
 	let isSaving = $state(false);
+	let showSaveModal = $state(false);
+	let saveSuccess = $state(false);
 
 	let newItem: { modal?: Component<CreationModalComponentProps>; item?: Item } = $state({});
 
 	async function save() {
 		isSaving = true;
+		saveSuccess = false;
+		showSaveModal = true;
 
 		try {
 			// Upload profile icon if changed
···
 			await savePage(data, items, publication);
 
 			publication = JSON.stringify(data.publication);
+
+			// Update saved state
+			savedItems = JSON.stringify(items);
+			savedPublication = JSON.stringify(data.publication);
+
+			saveSuccess = true;
+
+			launchConfetti();
+
+			// Refresh cached data
+			await fetch('/' + data.handle + '/api/refresh');
 		} catch (error) {
 			console.log(error);
+			showSaveModal = false;
 			toast.error('Error saving page!');
 		} finally {
 			isSaving = false;
···
 		const isGif = file.type === 'image/gif';
 
 		// Don't compress GIFs to preserve animation
-		const processedFile = isGif ? file : await compressImage(file);
-		const objectUrl = URL.createObjectURL(processedFile);
+		const objectUrl = URL.createObjectURL(file);
 
 		let item = createEmptyCard(data.page);
 
 		item.cardType = isGif ? 'gif' : 'image';
 		item.cardData = {
-			image: { blob: processedFile, objectUrl }
+			image: { blob: file, objectUrl }
 		};
 
 		// If grid position is provided
···
 		/>
 	{/if}
 
+	<SaveModal
+		bind:open={showSaveModal}
+		success={saveSuccess}
+		handle={data.handle}
+		page={data.page}
+	/>
+
 	<div
 		class={[
 			'@container/wrapper relative w-full',
···
 		bind:linkValue
 		bind:isSaving
 		bind:showingMobileView
+		{hasUnsavedChanges}
 		{newCard}
 		{addLink}
 		{save}

src/lib/website/SaveModal.svelte

···
+<script lang="ts">
+	import { Button, Modal, toast } from '@foxui/core';
+
+	let {
+		open = $bindable(),
+		success,
+		handle,
+		page
+	}: {
+		open: boolean;
+		success: boolean;
+		handle: string;
+		page: string;
+	} = $props();
+
+	function getShareUrl() {
+		const base = typeof window !== 'undefined' ? window.location.origin : '';
+		const pagePath = page && page !== 'blento.self' ? `/${page.replace('blento.', '')}` : '';
+		return `${base}/${handle}${pagePath}`;
+	}
+
+	async function copyShareLink() {
+		const url = getShareUrl();
+		await navigator.clipboard.writeText(url);
+		toast.success('Link copied to clipboard!');
+	}
+</script>
+
+<Modal {open} closeButton={false}>
+	<div class="flex flex-col items-center gap-4">
+		{#if !success}
+			<div class="flex items-center gap-4">
+				<svg
+					class="text-accent-500 size-8 animate-spin"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+				>
+					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
+					></circle>
+					<path
+						class="opacity-75"
+						fill="currentColor"
+						d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+					></path>
+				</svg>
+				<p class="text-base-700 dark:text-base-300 text-3xl font-bold">Saving...</p>
+			</div>
+		{:else}
+			<div class="flex items-center gap-4">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					fill="currentColor"
+					class="text-accent-500 size-8"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+
+				<p class="text-base-700 dark:text-base-300 text-3xl font-bold">Website Saved</p>
+			</div>
+			<div class="mt-8 flex w-full flex-col gap-2">
+				<Button size="lg" onclick={copyShareLink}>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="size-5"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z"
+						/>
+					</svg>
+					Share link
+				</Button>
+				<Button variant="ghost" onclick={() => (open = false)}>Close</Button>
+			</div>
+		{/if}
+	</div>
+</Modal>