page transitions

6 files changed, 155 insertions, 70 deletions

diff --git a/package.json b/package.json
index 911e287f..b1b4bcd5 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
 	"devDependencies": {
 		"@scure/base": "^1.1.1",
 		"@sveltejs/adapter-node": "^1.1.4",
-		"@sveltejs/kit": "^1.14.0",
+		"@sveltejs/kit": "^1.27.6",
 		"@tailwindcss/line-clamp": "^0.4.2",
 		"@zerodevx/svelte-toast": "^0.7.2",
 		"autoprefixer": "^10.4.13",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1463027a..026e22a3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -33,10 +33,10 @@ devDependencies:
     version: 1.1.1
   '@sveltejs/adapter-node':
     specifier: ^1.1.4
-    version: 1.1.4(@sveltejs/[email protected])
+    version: 1.1.4(@sveltejs/[email protected])
   '@sveltejs/kit':
-    specifier: ^1.14.0
-    version: 1.14.0([email protected])([email protected])
+    specifier: ^1.27.6
+    version: 1.27.6([email protected])([email protected])
   '@tailwindcss/line-clamp':
     specifier: ^0.4.2
     version: 0.4.2([email protected])
@@ -330,10 +330,19 @@ packages:
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0, npm: '>=6.14.13'}
     dev: false
 
+  /@fastify/[email protected]:
+    resolution: {integrity: sha512-+KpH+QxZU7O4675t3mnkQKcZZg56u+K/Ct2K+N2AZYNVK8kyeo/bI18tI8aPm3tvNNRyTWfj6s5tnGNlcbQRsA==}
+    engines: {node: '>=14'}
+    dev: true
+
   /@jridgewell/[email protected]:
     resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
     dev: true
 
+  /@jridgewell/[email protected]:
+    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+    dev: true
+
   /@mapbox/[email protected]:
     resolution: {integrity: sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==}
     hasBin: true
@@ -506,7 +515,7 @@ packages:
       '@noble/hashes': 1.3.0
       '@scure/base': 1.1.1
 
-  /@sveltejs/[email protected](@sveltejs/[email protected]):
+  /@sveltejs/[email protected](@sveltejs/[email protected]):
     resolution: {integrity: sha512-3iEBqi1fXLXP9YIbVuz2LXajoebRJCmAFEQbN40DlxAnA7G+InxUgnqFun3q9gBMz2Qvd99K51g/HxWetXRe8Q==}
     peerDependencies:
       '@sveltejs/kit': ^1.0.0
@@ -514,53 +523,70 @@ packages:
       '@rollup/plugin-commonjs': 24.0.1([email protected])
       '@rollup/plugin-json': 6.0.0([email protected])
       '@rollup/plugin-node-resolve': 15.0.1([email protected])
-      '@sveltejs/kit': 1.14.0([email protected])([email protected])
+      '@sveltejs/kit': 1.27.6([email protected])([email protected])
       rollup: 3.8.1
     dev: true
 
-  /@sveltejs/[email protected]([email protected])([email protected]):
-    resolution: {integrity: sha512-4e/cZT0z4IppEkqNvMrurGz6VE1gScukFU7XqwTL/yrGJGXHqS9D7RvsOcE1hASsgrMu6w/fKTIhxT5oN0K1Jw==}
+  /@sveltejs/[email protected]([email protected])([email protected]):
+    resolution: {integrity: sha512-GsjTkMbKzXdbeRg0tk8S7HNShQ4879ftRr0ZHaZfjbig1xQwG57Bvcm9U9/mpLJtCapLbLWUnygKrgcLISLC8A==}
     engines: {node: ^16.14 || >=18}
     hasBin: true
     requiresBuild: true
     peerDependencies:
-      svelte: ^3.54.0
+      svelte: ^3.54.0 || ^4.0.0-next.0 || ^5.0.0-next.0
       vite: ^4.0.0 || 4
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 2.0.2([email protected])([email protected])
+      '@sveltejs/vite-plugin-svelte': 2.5.3([email protected])([email protected])
       '@types/cookie': 0.5.1
       cookie: 0.5.0
-      devalue: 4.3.0
+      devalue: 4.3.2
       esm-env: 1.0.0
       kleur: 4.1.5
       magic-string: 0.30.0
-      mime: 3.0.0
+      mrmime: 1.0.1
       sade: 1.8.1
-      set-cookie-parser: 2.5.1
+      set-cookie-parser: 2.6.0
       sirv: 2.0.2
       svelte: 3.55.0
       tiny-glob: 0.2.9
-      undici: 5.21.0
+      undici: 5.26.5
       vite: 4.2.1
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@sveltejs/[email protected]([email protected])([email protected]):
-    resolution: {integrity: sha512-xCEan0/NNpQuL0l5aS42FjwQ6wwskdxC3pW1OeFtEKNZwRg7Evro9lac9HesGP6TdFsTv2xMes5ASQVKbCacxg==}
+  /@sveltejs/[email protected](@sveltejs/[email protected])([email protected])([email protected]):
+    resolution: {integrity: sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==}
     engines: {node: ^14.18.0 || >= 16}
     peerDependencies:
-      svelte: ^3.54.0
+      '@sveltejs/vite-plugin-svelte': ^2.2.0
+      svelte: ^3.54.0 || ^4.0.0
       vite: ^4.0.0 || 4
     dependencies:
+      '@sveltejs/vite-plugin-svelte': 2.5.3([email protected])([email protected])
       debug: 4.3.4
-      deepmerge: 4.2.2
+      svelte: 3.55.0
+      vite: 4.2.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@sveltejs/[email protected]([email protected])([email protected]):
+    resolution: {integrity: sha512-erhNtXxE5/6xGZz/M9eXsmI7Pxa6MS7jyTy06zN3Ck++ldrppOnOlJwHHTsMC7DHDQdgUp4NAc4cDNQ9eGdB/w==}
+    engines: {node: ^14.18.0 || >= 16}
+    peerDependencies:
+      svelte: ^3.54.0 || ^4.0.0 || ^5.0.0-next.0
+      vite: ^4.0.0 || 4
+    dependencies:
+      '@sveltejs/vite-plugin-svelte-inspector': 1.0.4(@sveltejs/[email protected])([email protected])([email protected])
+      debug: 4.3.4
+      deepmerge: 4.3.1
       kleur: 4.1.5
-      magic-string: 0.27.0
+      magic-string: 0.30.5
       svelte: 3.55.0
-      svelte-hmr: 0.15.1([email protected])
+      svelte-hmr: 0.15.3([email protected])
       vite: 4.2.1
-      vitefu: 0.2.4([email protected])
+      vitefu: 0.2.5([email protected])
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -796,13 +822,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /[email protected]:
-    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
-    engines: {node: '>=10.16.0'}
-    dependencies:
-      streamsearch: 1.1.0
-    dev: true
-
   /[email protected]:
     resolution: {integrity: sha512-nZD//kc78OOxeYtRlVk8/zXqTB4gf/nlguL1ggWA8FuchMyOxcyHR4QPQZMUmA7czC+YnaBrPUCubqAWe50DaA==}
     dependencies:
@@ -898,6 +917,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /[email protected]:
     resolution: {integrity: sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==}
     dev: true
@@ -917,8 +941,8 @@ packages:
       minimist: 1.2.7
     dev: true
 
-  /[email protected]:
-    resolution: {integrity: sha512-n94yQo4LI3w7erwf84mhRUkUJfhLoCZiLyoOZ/QFsDbcWNZePrLwbQpvZBUG2TNxwV3VjCKPxkiiQA6pe3TrTA==}
+  /[email protected]:
+    resolution: {integrity: sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==}
     dev: true
 
   /[email protected]:
@@ -1305,6 +1329,13 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.14
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true
+
   /[email protected]:
     resolution: {integrity: sha512-SfRq9bT68GytDzCOG0IoTGg2rASbgdYunW/6xhnp55QuLmwG1M/YOlXxqHaphwia7kZbMvBOocvY0fp5yfTjZA==}
     engines: {node: '>=16.14.0', npm: '>=8.1.0'}
@@ -1349,12 +1380,6 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /[email protected]:
-    resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
-    engines: {node: '>=10.0.0'}
-    hasBin: true
-    dev: true
-
   /[email protected]:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
@@ -1720,8 +1745,8 @@ packages:
     engines: {node: ^14.13.1 || >=16.0.0}
     dev: true
 
-  /[email protected]:
-    resolution: {integrity: sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ==}
+  /[email protected]:
+    resolution: {integrity: sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==}
     dev: true
 
   /[email protected]:
@@ -1804,11 +1829,6 @@ packages:
       extend-shallow: 3.0.2
     dev: false
 
-  /[email protected]:
-    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
-    engines: {node: '>=10.0.0'}
-    dev: true
-
   /[email protected]:
     resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
     engines: {node: '>=8'}
@@ -1827,11 +1847,11 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /[email protected]([email protected]):
-    resolution: {integrity: sha512-BiKB4RZ8YSwRKCNVdNxK/GfY+r4Kjgp9jCLEy0DuqAKfmQtpL38cQK3afdpjw4sqSs4PLi3jIPJIFp259NkZtA==}
+  /[email protected]([email protected]):
+    resolution: {integrity: sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==}
     engines: {node: ^12.20 || ^14.13.1 || >= 16}
     peerDependencies:
-      svelte: '>=3.19.0'
+      svelte: ^3.19.0 || ^4.0.0
     dependencies:
       svelte: 3.55.0
     dev: true
@@ -2005,11 +2025,11 @@ packages:
     engines: {node: '>=18'}
     dev: false
 
-  /[email protected]:
-    resolution: {integrity: sha512-HOjK8l6a57b2ZGXOcUsI5NLfoTrfmbOl90ixJDl0AEFG4wgHNDQxtZy15/ZQp7HhjkpaGlp/eneMgtsu1dIlUA==}
-    engines: {node: '>=12.18'}
+  /[email protected]:
+    resolution: {integrity: sha512-cSb4bPFd5qgR7qr2jYAi0hlX9n5YKK2ONKkLFkxl+v/9BvC0sOpZjBHDBSXc5lWAf5ty9oZdRXytBIHzgUcerw==}
+    engines: {node: '>=14.0'}
     dependencies:
-      busboy: 1.6.0
+      '@fastify/busboy': 2.1.0
     dev: true
 
   /[email protected]:
@@ -2086,10 +2106,10 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /[email protected]([email protected]):
-    resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==}
+  /[email protected]([email protected]):
+    resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==}
     peerDependencies:
-      vite: ^3.0.0 || ^4.0.0 || 4
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || 4
     peerDependenciesMeta:
       vite:
         optional: true
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>