feat: integrate-flows

infrastructure/eid-wallet/src/app.css

@@ -76,3 +76,40 @@ body {
 	padding-left: env(safe-area-inset-left);
 	padding-right: env(safe-area-inset-right);
 }
+
+/* Enable View Transitions API */
+::view-transition-old(root),
+::view-transition-new(root) {
+	animation-duration: 0.25s;
+	animation-timing-function: ease-in-out;
+}
+
+/* Old page fades out */
+::view-transition-old(root) {
+	animation-name: fadeOut;
+}
+
+/* New page slides in from right */
+::view-transition-new(root) {
+	animation-name: slideIn;
+}
+
+/* Fade out animation */
+@keyframes fadeOut {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+
+/* Slide in from right animation */
+@keyframes slideIn {
+	from {
+		transform: translateX(100%);
+	}
+	to {
+		transform: translateX(0);
+	}
+}

infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte

@@ -62,7 +62,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
                 <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
 
             {:else if variant === 'eVault'}
-                <h3 class="text-black-300 text-3xl font-semibold mb-3">{state.progressWidth} Used</h3>
+                <h3 class="text-black-300 text-3xl font-semibold mb-3 z-[1]">{state.progressWidth} Used</h3>
             {/if}
         </div>
         <div>

infrastructure/eid-wallet/src/routes/(app)/+layout.svelte

@@ -15,6 +15,6 @@ let currentRoute = $derived(page.url.pathname.split("/").pop() || "home");
 </div>
 {/if}
 
-<div class="p-6 mb-16">
+<div class="p-6">
     {@render children()}
 </div>

infrastructure/eid-wallet/src/routes/(app)/+page.svelte → infrastructure/eid-wallet/src/routes/(app)/main/+page.svelte

@@ -59,9 +59,11 @@ function shareQR() {
     />
 {/snippet}
 
-{@render Section("eName", eName)}
-{@render Section("ePassport", ePassport)}
-{@render Section("eVault", eVault)}
+<main class="pb-16">
+    {@render Section("eName", eName)}
+    {@render Section("ePassport", ePassport)}
+    {@render Section("eVault", eVault)}
+</main>
 
 <Drawer
     title="Scan QR Code"

infrastructure/eid-wallet/src/routes/(app)/settings/+layout.svelte

@@ -5,7 +5,7 @@ import { runtime } from "$lib/global/runtime.svelte";
 const { children } = $props();
 </script>
 
-<main class="h-[100vh] px-[5vw] pb-[4.5vh]">
+<main>
     <AppNav title={runtime.header.title ?? ""}/>
     {@render children?.()}
 </main>

infrastructure/eid-wallet/src/routes/(auth)/e-passport/+page.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
+import { goto } from "$app/navigation";
 import { Hero } from "$lib/fragments";
 import IdentityCard from "$lib/fragments/IdentityCard/IdentityCard.svelte";
 import { ButtonAction } from "$lib/ui";
 
-const handleFinish = async () => {};
+const handleFinish = async () => {
+	await goto("/main");
+};
 </script>
 
 
@@ -25,7 +28,7 @@ const handleFinish = async () => {};
     </section>
     <section class="mt-[4vh] mb-[9vh]">
         <h4>Your eVault</h4>
-        <p class="text-black-700">We’ve also created your eVault—secure cloud storage for your personal data. W3DS platforms access it directly, keeping you in control.</p>
+        <p class="text-black-700 mb-[1vh]">We’ve also created your eVault—secure cloud storage for your personal data. W3DS platforms access it directly, keeping you in control.</p>
         <IdentityCard variant= "eVault"
 		usedStorage= {15}
 		totalStorage= {80}/>

infrastructure/eid-wallet/src/routes/(auth)/verify/+page.svelte

@@ -12,5 +12,5 @@ import { ButtonAction } from "$lib/ui";
         />
         <img class="mx-auto mt-20" src="images/Passport.svg" alt="passport">
     </section>
-    <ButtonAction class="w-full" callback={async() => goto("/verify/id")}>I'm ready</ButtonAction>
+    <ButtonAction class="w-full" callback={async() => goto("/register")}>I'm ready</ButtonAction>
 </main>

infrastructure/eid-wallet/src/routes/+layout.svelte

@@ -2,6 +2,7 @@
 import SplashScreen from "$lib/fragments/SplashScreen/SplashScreen.svelte";
 import { onMount } from "svelte";
 import "../app.css";
+import { onNavigate } from "$app/navigation";
 
 const { children } = $props();
 
@@ -23,6 +24,23 @@ onMount(async () => {
 
 	showSplashScreen = false;
 });
+
+onNavigate((navigation) => {
+	if (showSplashScreen) return;
+	if (!document.startViewTransition) return;
+
+	const currentRoute = navigation.from?.url.pathname;
+	const targetRoute = navigation.to?.url.pathname;
+
+	if (currentRoute === targetRoute) return;
+
+	return new Promise((resolve) => {
+		document.startViewTransition(async () => {
+			resolve();
+			await navigation.complete;
+		});
+	});
+});
 </script>
 
 {#if showSplashScreen}

infrastructure/eid-wallet/src/routes/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { goto } from "$app/navigation";
+
+$effect(() => {
+	goto("/onboarding");
+});
+</script>