few chnages

src/lib/components/account/sendVerificationEmailModal.svelte

@@ -5,16 +5,17 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
+    import { get } from 'svelte/store';
     import { page } from '$app/state';
     import { Card, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { Dependencies } from '$lib/constants';
     import { onMount } from 'svelte';
 
-    export let show = false;
-    let creating = false;
-    let emailSent = false;
+    let { show = $bindable(false) } = $props();
+    let creating = $state(false);
+    let emailSent = $state(false);
 
-    $: cleanUrl = page.url.origin + page.url.pathname;
+    let cleanUrl = $derived(page.url.origin + page.url.pathname);
 
     async function onSubmit() {
         if (creating) return;
@@ -64,10 +65,10 @@
 <Modal bind:show title="Send verification email" {onSubmit}>
     <Card.Base variant="secondary" padding="s">
         <Layout.Stack gap="m">
-            <Typography.Text variant="m-400" gap="m">
+            <Typography.Text gap="m">
                 To continue using Appwrite Cloud, please verify your email address. An email will be
-                sent to <Typography.Text variant="m-600" style="display:inline"
-                    >{$user?.email}</Typography.Text>
+                sent to <Typography.Text variant="m-600" style="display: inline;"
+                    >{get(user)?.email}</Typography.Text>
             </Typography.Text>
         </Layout.Stack>
     </Card.Base>

src/lib/components/alerts/emailVerificationBanner.svelte

@@ -3,12 +3,12 @@
     import { HeaderAlert } from '$lib/layout';
     import { Typography } from '@appwrite.io/pink-svelte';
     import { user } from '$lib/stores/user';
-    import SendVerificationEmailModal from '$lib/components/account/sendVerificationEmailModal.svelte';
-    import { page } from '$app/state';
+    import SendVerificationEmailModal from '../account/sendVerificationEmailModal.svelte';
+    import { page } from '$app/stores';
 
     const hasUser = $derived(!!$user);
     const needsEmailVerification = $derived(hasUser && !$user.emailVerification);
-    const notOnOnboarding = $derived(!page.url?.pathname?.includes('/console/onboarding'));
+    const notOnOnboarding = $derived(!$page.route.id.includes('/onboarding'));
     const shouldShowEmailBanner = $derived(hasUser && needsEmailVerification && notOnOnboarding);
 
     let showSendVerification = $state(false);

src/routes/(console)/account/updateEmail.svelte

@@ -8,7 +8,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
     import { onMount } from 'svelte';
-    import { Badge } from '@appwrite.io/pink-svelte';
+    import { Badge, Layout } from '@appwrite.io/pink-svelte';
 
     let email: string = null;
     let emailPassword: string = null;
@@ -42,12 +42,12 @@
 <Form onSubmit={updateEmail}>
     <CardGrid>
         <svelte:fragment slot="title">
-            <div class="email-badge">
+            <Layout.Stack direction="row" gap="s" alignItems="center">
                 Email
                 {#if $user.emailVerification}
                     <Badge variant="secondary" type="success" size="s" content="verified" />
                 {/if}
-            </div>
+            </Layout.Stack>
         </svelte:fragment>
         <svelte:fragment slot="aside">
             <InputText
@@ -73,11 +73,3 @@
         </svelte:fragment>
     </CardGrid>
 </Form>
-
-<style>
-    .email-badge {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-</style>