Add native-like page transitions with @ssgoi/svelte

package.json

@@ -77,6 +77,7 @@
 		"@ffmpeg/ffmpeg": "^0.12.15",
 		"@ffmpeg/util": "^0.12.2",
 		"@octokit/rest": "^22.0.1",
+		"@ssgoi/svelte": "^4.0.0",
 		"@tauri-apps/plugin-fs": "~2",
 		"@zumer/snapdom": "^2.0.1",
 		"better-auth": "^1.4.4",
@@ -94,4 +95,4 @@
 			"esbuild"
 		]
 	}
-}
+}

src/lib/styles/animations.css

@@ -1,45 +1,6 @@
 /* Modern Animations & Transitions Library */
 /* Inspired by Svelte Magic, Luxe, and Aceternity UI */
 
-/* ==================== View Transitions ==================== */
-@view-transition {
-  navigation: auto;
-}
-
-/* Default page transition */
-::view-transition-old(root) {
-  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
-}
-
-::view-transition-new(root) {
-  animation: 300ms cubic-bezier(0, 0, 0.2, 1) both fade-in;
-}
-
-/* Scoped transitions for specific elements */
-.view-transition-card {
-  view-transition-name: card;
-}
-
-::view-transition-old(card) {
-  animation: 200ms ease-out both scale-out, 200ms ease-out both fade-out;
-}
-
-::view-transition-new(card) {
-  animation: 400ms ease-in both scale-in, 400ms ease-in both fade-in;
-}
-
-.view-transition-modal {
-  view-transition-name: modal;
-}
-
-::view-transition-old(modal) {
-  animation: 200ms ease-out both slide-down, 200ms ease-out both fade-out;
-}
-
-::view-transition-new(modal) {
-  animation: 300ms cubic-bezier(0.16, 1, 0.3, 1) both slide-up, 300ms ease-in both fade-in;
-}
-
 /* ==================== Keyframe Animations ==================== */
 
 @keyframes fade-in {

src/routes/(app)/+layout.svelte

@@ -28,6 +28,7 @@
 	import X from '@lucide/svelte/icons/x';
 	import { cn } from '$lib/utils';
 	import { auth } from '$lib/stores/auth.svelte';
+	import { SsgoiTransition } from '@ssgoi/svelte';
 
 	let { children } = $props();
 
@@ -417,9 +418,9 @@
 
 		<!-- Page Content -->
 		<main class="flex-1 overflow-y-auto p-3 md:p-4 lg:p-6 pb-20 md:pb-6 animate-fade-in">
-			<div class="view-transition-card">
+			<SsgoiTransition id={page.url.pathname}>
 				{@render children()}
-			</div>
+			</SsgoiTransition>
 		</main>
 	</div>
 </div>

src/routes/(auth)/+layout.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { SsgoiTransition } from '@ssgoi/svelte';
+
+	let { children } = $props();
+</script>
+
+<SsgoiTransition id={page.url.pathname}>
+	{@render children()}
+</SsgoiTransition>

src/routes/(marketing)/+layout.svelte

@@ -8,6 +8,7 @@
 	import Twitter from '@lucide/svelte/icons/twitter';
 	import { cn } from '$lib/utils';
 	import { onMount } from 'svelte';
+	import { SsgoiTransition } from '@ssgoi/svelte';
 	import '../layout.css';
 
 	let { children } = $props();
@@ -113,7 +114,9 @@
 
 	<!-- Main Content -->
 	<main class="flex-1 pt-16">
-		{@render children()}
+		<SsgoiTransition id={page.url.pathname}>
+			{@render children()}
+		</SsgoiTransition>
 	</main>
 
 	<!-- Footer -->

src/routes/+layout.svelte

@@ -7,6 +7,8 @@
 	import { onMount } from 'svelte';
 	import { settingsStore } from '$lib/stores/index.svelte';
 	import { CSS_VARS } from '$lib/constants';
+	import { Ssgoi } from '@ssgoi/svelte';
+	import { fade } from '@ssgoi/svelte/view-transitions';
 
 	let { children } = $props();
 
@@ -35,22 +37,15 @@
 		}
 	}
 
-	// Enable View Transitions API for smooth page navigation
-	onNavigate((navigation) => {
-		if (!document.startViewTransition) return;
-
-		return new Promise((resolve) => {
-			document.startViewTransition(async () => {
-				resolve();
-				await navigation.complete;
-			});
-		});
-	});
 </script>
 
 <svelte:head>
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
 <ModeWatcher />
-{@render children()}
+<Ssgoi config={{ defaultTransition: fade() }}>
+	<div style="position: relative; min-height: 100vh;">
+		{@render children()}
+	</div>
+</Ssgoi>

src/routes/onboarding/+layout.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { SsgoiTransition } from '@ssgoi/svelte';
+
+	let { children } = $props();
+</script>
+
+<SsgoiTransition id={page.url.pathname}>
+	{@render children()}
+</SsgoiTransition>

src/routes/share/+layout.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { SsgoiTransition } from '@ssgoi/svelte';
+
+	let { children } = $props();
+</script>
+
+<SsgoiTransition id={page.url.pathname}>
+	{@render children()}
+</SsgoiTransition>