page transitions

4 files changed, 82 insertions, 17 deletions

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index ae162e1f..53b31de4 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -142,4 +142,8 @@
 	.z {
 		z-index: 100;
 	}
+
+	header {
+		view-transition-name: header;
+	}
 </style>
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 7f4e3c7b..3422d358 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -10,8 +10,6 @@
 	import { warning, protectedRoutes } from '$lib/utils';
 	import { t, locale } from '$lib/translations';
 
-	const localeLocalStorageKey = 'sveltekit-i18n-locale';
-
 	export let data;
 
 	let { rate, user, subject, token, rates } = data;
@@ -22,6 +20,7 @@
 	};
 
 	onMount(async () => {
+		let localeLocalStorageKey = 'sveltekit-i18n-locale';
 		let localStorageLocale = localStorage.getItem(localeLocalStorageKey);
 		if (localStorageLocale) locale.set(localStorageLocale);
 
@@ -32,7 +31,7 @@
 		if (browser) {
 			let log = console.log;
 			checkSocket();
-      expireTimer = setTimeout(expirePin, user.locktime * 1000 || 300000);
+			expireTimer = setTimeout(expirePin, user.locktime * 1000 || 300000);
 
 			// if (window.NDEFReader) {
 			// 	try {
diff --git a/src/routes/(app)/[username]/+layout.svelte b/src/routes/(app)/[username]/+layout.svelte
index b2efa894..54fcd600 100644
--- a/src/routes/(app)/[username]/+layout.svelte
+++ b/src/routes/(app)/[username]/+layout.svelte
@@ -1,7 +1,57 @@
 <script>
 	import { AppHeader } from '$comp';
+	import { onNavigate } from '$app/navigation';
 	export let data;
+
+	onNavigate((navigation) => {
+		if (!document.startViewTransition) return;
+
+		return new Promise((resolve) => {
+			document.startViewTransition(async () => {
+				resolve();
+				await navigation.complete;
+			});
+		});
+	});
 </script>
 
 <AppHeader {data} />
-<slot />
+<div class="content">
+	<slot />
+</div>
+
+<style>
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+		}
+	}
+
+	@keyframes fade-out {
+		to {
+			opacity: 0;
+		}
+	}
+
+	@keyframes slide-from-right {
+		from {
+			transform: translateX(60px);
+		}
+	}
+
+	@keyframes slide-to-left {
+		to {
+			transform: translateX(-60px);
+		}
+	}
+
+	:root::view-transition-old(root) {
+		animation: 280ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+			180ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+	}
+
+	:root::view-transition-new(root) {
+		animation: 280ms cubic-bezier(0, 0, 0.2, 1) 80ms both fade-in,
+			180ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+	}
+</style>
diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
index a3afce62..933fa1f6 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
@@ -121,6 +121,10 @@
 				}
 			}
 
+			if (user.email !== prev.email) {
+				await post('/api/verify', { test: true });
+			}
+
 			const response = await fetch(formElement.action, {
 				method: 'POST',
 				body: data
@@ -156,20 +160,22 @@
 	<input type="hidden" name="pin" value={$pin} />
 
 	<div class="mt-24 mb-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
-		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
-			{$t('user.settings.header')}
-		</h1>
+		<div class="header">
+			<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
+				{$t('user.settings.header')}
+			</h1>
 
-		<div class="font-bold flex justify-around items-center border-b pb-3 text-secondary">
-			{#each tabs.filter((t) => t.name !== 'shopify') as { name, key }}
-				<a href={`/${user.username}/settings/${name}`}>
-					<button
-						class="hover:opacity-80"
-						class:text-black={tab === name || (tab === 'shopify' && name === 'pos')}
-						>{$t(`user.settings.${key}`)}</button
-					>
-				</a>
-			{/each}
+			<div class="font-bold flex justify-around items-center border-b pb-3 text-secondary">
+				{#each tabs.filter((t) => t.name !== 'shopify') as { name, key }}
+					<a href={`/${user.username}/settings/${name}`}>
+						<button
+							class="hover:opacity-80"
+							class:text-black={tab === name || (tab === 'shopify' && name === 'pos')}
+							>{$t(`user.settings.${key}`)}</button
+						>
+					</a>
+				{/each}
+			</div>
 		</div>
 
 		<svelte:component this={comp} {user} {rates} {submit} />
@@ -192,3 +198,9 @@
 		</button>
 	</div>
 </form>
+
+<style>
+	.header {
+		view-transition-name: tabs;
+	}
+</style>