From e0b9819939df4adfd9c46be99fafa3cba2536fbe Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 20 Aug 2025 18:06:04 +0530
Subject: [PATCH 01/10] feat: added dismissible prop to header alert and email
 verification banner

---
 src/lib/layout/headerAlert.svelte   | 13 +++++++++++-
 src/routes/(console)/+layout.svelte | 33 ++++++++++++++++++++++++++++-
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/lib/layout/headerAlert.svelte b/src/lib/layout/headerAlert.svelte
index c6a7838360..d8849294eb 100644
--- a/src/lib/layout/headerAlert.svelte
+++ b/src/lib/layout/headerAlert.svelte
@@ -1,11 +1,17 @@
 <script lang="ts">
     import { onDestroy, onMount } from 'svelte';
     import { isTabletViewport } from '$lib/stores/viewport';
+    import { createEventDispatcher } from 'svelte';
+    import { Button } from '$lib/elements/forms';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconX } from '@appwrite.io/pink-icons-svelte';
 
     export let title: string;
     export let type: 'info' | 'success' | 'warning' | 'error' | 'default' = 'info';
+    export let dismissible = false;
 
     let container: HTMLElement | null = null;
+    const dispatch = createEventDispatcher();
 
     function setNavigationHeight() {
         const alertHeight = container ? container.getBoundingClientRect().height : 0;
@@ -64,9 +70,14 @@
                 <slot />
             </p>
         </div>
-        {#if $$slots.buttons}
+        {#if $$slots.buttons || dismissible}
             <div class="alert-buttons u-flex u-gap-16 u-cross-child-center">
                 <slot name="buttons" />
+                {#if dismissible}
+                    <Button text icon size="s" on:click={() => dispatch('dismiss')}>
+                        <Icon icon={IconX} slot="start" size="s" />
+                    </Button>
+                {/if}
             </div>
         {/if}
     </div>
diff --git a/src/routes/(console)/+layout.svelte b/src/routes/(console)/+layout.svelte
index 53293ca797..df47aa1271 100644
--- a/src/routes/(console)/+layout.svelte
+++ b/src/routes/(console)/+layout.svelte
@@ -3,6 +3,7 @@
     import { BillingPlan, INTERVAL } from '$lib/constants';
     import Footer from '$lib/layout/footer.svelte';
     import Shell from '$lib/layout/shell.svelte';
+    import { HeaderAlert } from '$lib/layout';
     import { app } from '$lib/stores/app';
     import { database, checkForDatabaseBackupPolicies } from '$lib/stores/database';
     import { newOrgModal, organization, type Organization } from '$lib/stores/organization';
@@ -39,11 +40,15 @@
     import MobileSupportModal from './wizard/support/mobileSupportModal.svelte';
     import { showSupportModal } from './wizard/support/store';
     import { activeHeaderAlert, consoleVariables } from './store';
+    import { user } from '$lib/stores/user';
+    import { Button } from '$lib/elements/forms';
+    import { base } from '$app/paths';
     import { headerAlert } from '$lib/stores/headerAlert';
     import { UsageRates } from '$lib/components/billing';
-    import { base } from '$app/paths';
     import { canSeeProjects } from '$lib/stores/roles';
     import { BottomModalAlert } from '$lib/components';
+    import { Typography } from '@appwrite.io/pink-svelte';
+    import { hideNotification, shouldShowNotification } from '$lib/helpers/notifications';
     import {
         IconAnnotation,
         IconBookOpen,
@@ -59,6 +64,7 @@
     import { Query } from '@appwrite.io/console';
 
     export let data: LayoutData;
+    let emailBannerClosed = false;
 
     function kebabToSentenceCase(str: string) {
         return str
@@ -345,6 +351,10 @@
     afterUpdate(() => {
         $activeHeaderAlert = headerAlert.get();
     });
+
+    function navigateToAccount() {
+        goto(`${base}/account`);
+    }
 </script>
 
 <CommandCenter />
@@ -363,6 +373,27 @@
     <Footer slot="footer" />
 </Shell>
 
+{#if $user && !$user.emailVerification && shouldShowNotification('email-verification-banner') && !$wizard.show && !$wizard.cover && !emailBannerClosed}
+    <HeaderAlert
+        type="warning"
+        title="Your email address needs to be verified"
+        dismissible={true}
+        on:dismiss={() => {
+            emailBannerClosed = true;
+            hideNotification('email-verification-banner', { coolOffPeriod: 24 });
+        }}>
+        <svelte:fragment>
+            To avoid losing access to your projects, make sure <Typography.Text
+                variant="m-500"
+                style="display:inline">{$user.email}</Typography.Text> is valid and up to date. Email
+            verification will be required soon.
+        </svelte:fragment>
+        <svelte:fragment slot="buttons">
+            <Button secondary size="s" on:click={navigateToAccount}>Update email address</Button>
+        </svelte:fragment>
+    </HeaderAlert>
+{/if}
+
 {#if $wizard.show && $wizard.component}
     <svelte:component this={$wizard.component} {...$wizard.props} />
 {:else if $wizard.cover}

From d4a27d4ee513e321ab8d50f8e91b7b8985676ac9 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Sun, 24 Aug 2025 16:13:37 +0530
Subject: [PATCH 02/10] added not onboarding check

---
 src/routes/(console)/+layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(console)/+layout.svelte b/src/routes/(console)/+layout.svelte
index df47aa1271..c0ac24f95b 100644
--- a/src/routes/(console)/+layout.svelte
+++ b/src/routes/(console)/+layout.svelte
@@ -373,7 +373,7 @@
     <Footer slot="footer" />
 </Shell>
 
-{#if $user && !$user.emailVerification && shouldShowNotification('email-verification-banner') && !$wizard.show && !$wizard.cover && !emailBannerClosed}
+{#if $user && !$user.emailVerification && shouldShowNotification('email-verification-banner') && !$wizard.show && !$wizard.cover && !emailBannerClosed && !isOnOnboarding}
     <HeaderAlert
         type="warning"
         title="Your email address needs to be verified"

From 845399e4f261ba8ce3c5af3699079e20b465f421 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Sun, 24 Aug 2025 16:37:25 +0530
Subject: [PATCH 03/10] added seperate alert component from headeralert

---
 .../alerts/emailVerificationBanner.svelte     | 52 +++++++++++++++++++
 src/lib/components/index.ts                   |  1 +
 src/routes/(console)/+layout.svelte           | 36 +++----------
 3 files changed, 59 insertions(+), 30 deletions(-)
 create mode 100644 src/lib/components/alerts/emailVerificationBanner.svelte

diff --git a/src/lib/components/alerts/emailVerificationBanner.svelte b/src/lib/components/alerts/emailVerificationBanner.svelte
new file mode 100644
index 0000000000..4365a0b4c0
--- /dev/null
+++ b/src/lib/components/alerts/emailVerificationBanner.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { goto } from '$app/navigation';
+    import { Button } from '$lib/elements/forms';
+    import { HeaderAlert } from '$lib/layout';
+    import { Typography } from '@appwrite.io/pink-svelte';
+    import { hideNotification, shouldShowNotification } from '$lib/helpers/notifications';
+    import { user } from '$lib/stores/user';
+    import { wizard } from '$lib/stores/wizard';
+    import { page } from '$app/state';
+
+    export let emailBannerClosed: boolean;
+    export let onEmailBannerClose: (closed: boolean) => void;
+
+    $: isOnOnboarding = page.route?.id?.includes('/(console)/onboarding');
+
+    $: shouldShowEmailBanner =
+        $user &&
+        !$user.emailVerification &&
+        shouldShowNotification('email-verification-banner') &&
+        !$wizard.show &&
+        !$wizard.cover &&
+        !emailBannerClosed &&
+        !isOnOnboarding;
+
+    function navigateToAccount() {
+        goto(`${base}/account`);
+    }
+
+    function handleDismiss() {
+        onEmailBannerClose(true);
+        hideNotification('email-verification-banner', { coolOffPeriod: 24 });
+    }
+</script>
+
+{#if shouldShowEmailBanner}
+    <HeaderAlert
+        type="warning"
+        title="Your email address needs to be verified"
+        dismissible
+        on:dismiss={handleDismiss}>
+        <svelte:fragment>
+            To avoid losing access to your projects, make sure <Typography.Text
+                variant="m-500"
+                style="display:inline">{$user.email}</Typography.Text> is valid and up to date. Email
+            verification will be required soon.
+        </svelte:fragment>
+        <svelte:fragment slot="buttons">
+            <Button secondary size="s" on:click={navigateToAccount}>Update email address</Button>
+        </svelte:fragment>
+    </HeaderAlert>
+{/if}
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 3f451a4bfe..ad0c869bf6 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -84,3 +84,4 @@ export { default as UsageCard } from './usageCard.svelte';
 export { default as ViewToggle } from './viewToggle.svelte';
 export { default as RegionEndpoint } from './regionEndpoint.svelte';
 export { default as ExpirationInput } from './expirationInput.svelte';
+export { default as EmailVerificationBanner } from './alerts/emailVerificationBanner.svelte';
diff --git a/src/routes/(console)/+layout.svelte b/src/routes/(console)/+layout.svelte
index c0ac24f95b..8d78f82e98 100644
--- a/src/routes/(console)/+layout.svelte
+++ b/src/routes/(console)/+layout.svelte
@@ -3,7 +3,7 @@
     import { BillingPlan, INTERVAL } from '$lib/constants';
     import Footer from '$lib/layout/footer.svelte';
     import Shell from '$lib/layout/shell.svelte';
-    import { HeaderAlert } from '$lib/layout';
+
     import { app } from '$lib/stores/app';
     import { database, checkForDatabaseBackupPolicies } from '$lib/stores/database';
     import { newOrgModal, organization, type Organization } from '$lib/stores/organization';
@@ -40,15 +40,12 @@
     import MobileSupportModal from './wizard/support/mobileSupportModal.svelte';
     import { showSupportModal } from './wizard/support/store';
     import { activeHeaderAlert, consoleVariables } from './store';
-    import { user } from '$lib/stores/user';
-    import { Button } from '$lib/elements/forms';
+
     import { base } from '$app/paths';
     import { headerAlert } from '$lib/stores/headerAlert';
     import { UsageRates } from '$lib/components/billing';
     import { canSeeProjects } from '$lib/stores/roles';
-    import { BottomModalAlert } from '$lib/components';
-    import { Typography } from '@appwrite.io/pink-svelte';
-    import { hideNotification, shouldShowNotification } from '$lib/helpers/notifications';
+    import { BottomModalAlert, EmailVerificationBanner } from '$lib/components';
     import {
         IconAnnotation,
         IconBookOpen,
@@ -351,10 +348,6 @@
     afterUpdate(() => {
         $activeHeaderAlert = headerAlert.get();
     });
-
-    function navigateToAccount() {
-        goto(`${base}/account`);
-    }
 </script>
 
 <CommandCenter />
@@ -373,26 +366,9 @@
     <Footer slot="footer" />
 </Shell>
 
-{#if $user && !$user.emailVerification && shouldShowNotification('email-verification-banner') && !$wizard.show && !$wizard.cover && !emailBannerClosed && !isOnOnboarding}
-    <HeaderAlert
-        type="warning"
-        title="Your email address needs to be verified"
-        dismissible={true}
-        on:dismiss={() => {
-            emailBannerClosed = true;
-            hideNotification('email-verification-banner', { coolOffPeriod: 24 });
-        }}>
-        <svelte:fragment>
-            To avoid losing access to your projects, make sure <Typography.Text
-                variant="m-500"
-                style="display:inline">{$user.email}</Typography.Text> is valid and up to date. Email
-            verification will be required soon.
-        </svelte:fragment>
-        <svelte:fragment slot="buttons">
-            <Button secondary size="s" on:click={navigateToAccount}>Update email address</Button>
-        </svelte:fragment>
-    </HeaderAlert>
-{/if}
+<EmailVerificationBanner
+    {emailBannerClosed}
+    onEmailBannerClose={(closed) => (emailBannerClosed = closed)} />
 
 {#if $wizard.show && $wizard.component}
     <svelte:component this={$wizard.component} {...$wizard.props} />

From dd053622e30affc1b212c1c492b3dfae114780d4 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Mon, 25 Aug 2025 10:48:45 +0530
Subject: [PATCH 04/10] chnaged notification coolOfPeriod to never again and
 svlet5

---
 .../alerts/emailVerificationBanner.svelte     | 36 ++++++++++++-------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/alerts/emailVerificationBanner.svelte b/src/lib/components/alerts/emailVerificationBanner.svelte
index 4365a0b4c0..ff28e59370 100644
--- a/src/lib/components/alerts/emailVerificationBanner.svelte
+++ b/src/lib/components/alerts/emailVerificationBanner.svelte
@@ -9,19 +9,31 @@
     import { wizard } from '$lib/stores/wizard';
     import { page } from '$app/state';
 
-    export let emailBannerClosed: boolean;
-    export let onEmailBannerClose: (closed: boolean) => void;
+    const { emailBannerClosed, onEmailBannerClose } = $props<{
+        emailBannerClosed: boolean;
+        onEmailBannerClose: (closed: boolean) => void;
+    }>();
 
-    $: isOnOnboarding = page.route?.id?.includes('/(console)/onboarding');
+    const isOnOnboarding = $derived.by(() => page.route?.id?.includes('/(console)/onboarding'));
 
-    $: shouldShowEmailBanner =
-        $user &&
-        !$user.emailVerification &&
-        shouldShowNotification('email-verification-banner') &&
-        !$wizard.show &&
-        !$wizard.cover &&
-        !emailBannerClosed &&
-        !isOnOnboarding;
+    const hasUser = $derived.by(() => !!$user);
+    const needsEmailVerification = $derived.by(() => $user && !$user.emailVerification);
+    const shouldShowNotificationBanner = $derived.by(() =>
+        shouldShowNotification('email-verification-banner')
+    );
+    const wizardNotActive = $derived.by(() => !$wizard.show && !$wizard.cover);
+    const bannerNotClosed = $derived.by(() => !emailBannerClosed);
+    const notOnOnboarding = $derived.by(() => !isOnOnboarding);
+
+    const shouldShowEmailBanner = $derived.by(
+        () =>
+            hasUser &&
+            needsEmailVerification &&
+            shouldShowNotificationBanner &&
+            wizardNotActive &&
+            bannerNotClosed &&
+            notOnOnboarding
+    );
 
     function navigateToAccount() {
         goto(`${base}/account`);
@@ -29,7 +41,7 @@
 
     function handleDismiss() {
         onEmailBannerClose(true);
-        hideNotification('email-verification-banner', { coolOffPeriod: 24 });
+        hideNotification('email-verification-banner', { coolOffPeriod: 24 * 365 * 100 });
     }
 </script>
 

From 827dd1bbd120ba4a29acf1daa2865421a44cee77 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Mon, 25 Aug 2025 18:59:44 +0530
Subject: [PATCH 05/10] replaced dervied.by with derived where needeed

---
 .../alerts/emailVerificationBanner.svelte       | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/alerts/emailVerificationBanner.svelte b/src/lib/components/alerts/emailVerificationBanner.svelte
index ff28e59370..ae6c0946a0 100644
--- a/src/lib/components/alerts/emailVerificationBanner.svelte
+++ b/src/lib/components/alerts/emailVerificationBanner.svelte
@@ -14,20 +14,19 @@
         onEmailBannerClose: (closed: boolean) => void;
     }>();
 
-    const isOnOnboarding = $derived.by(() => page.route?.id?.includes('/(console)/onboarding'));
+    const isOnOnboarding = $derived(() => page.route?.id?.includes('/(console)/onboarding'));
 
-    const hasUser = $derived.by(() => !!$user);
-    const needsEmailVerification = $derived.by(() => $user && !$user.emailVerification);
+    const hasUser = $derived(!!$user);
+    const needsEmailVerification = $derived($user && !$user.emailVerification);
     const shouldShowNotificationBanner = $derived.by(() =>
         shouldShowNotification('email-verification-banner')
     );
-    const wizardNotActive = $derived.by(() => !$wizard.show && !$wizard.cover);
-    const bannerNotClosed = $derived.by(() => !emailBannerClosed);
-    const notOnOnboarding = $derived.by(() => !isOnOnboarding);
+    const wizardNotActive = $derived(!$wizard.show && !$wizard.cover);
+    const bannerNotClosed = $derived(!emailBannerClosed);
+    const notOnOnboarding = $derived(!isOnOnboarding);
 
-    const shouldShowEmailBanner = $derived.by(
-        () =>
-            hasUser &&
+    const shouldShowEmailBanner = $derived(
+        hasUser &&
             needsEmailVerification &&
             shouldShowNotificationBanner &&
             wizardNotActive &&

From 97a9d13ddb97331eaddc987503d85f3110221661 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Tue, 26 Aug 2025 14:03:35 +0530
Subject: [PATCH 06/10] Refactor needsEmailVerification derived variable

---
 src/lib/components/alerts/emailVerificationBanner.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/alerts/emailVerificationBanner.svelte b/src/lib/components/alerts/emailVerificationBanner.svelte
index ae6c0946a0..ed8258024a 100644
--- a/src/lib/components/alerts/emailVerificationBanner.svelte
+++ b/src/lib/components/alerts/emailVerificationBanner.svelte
@@ -17,7 +17,7 @@
     const isOnOnboarding = $derived(() => page.route?.id?.includes('/(console)/onboarding'));
 
     const hasUser = $derived(!!$user);
-    const needsEmailVerification = $derived($user && !$user.emailVerification);
+    const needsEmailVerification = $derived(hasUser && !$user.emailVerification);
     const shouldShowNotificationBanner = $derived.by(() =>
         shouldShowNotification('email-verification-banner')
     );

From f59277d3c506d19f9164c265318ae21f5c471b34 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Tue, 26 Aug 2025 14:09:24 +0530
Subject: [PATCH 07/10] Update
 src/lib/components/alerts/emailVerificationBanner.svelte
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Matej Bačo <matejbaco2000@gmail.com>
---
 src/lib/components/alerts/emailVerificationBanner.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/alerts/emailVerificationBanner.svelte b/src/lib/components/alerts/emailVerificationBanner.svelte
index ed8258024a..5b6c9dc420 100644
--- a/src/lib/components/alerts/emailVerificationBanner.svelte
+++ b/src/lib/components/alerts/emailVerificationBanner.svelte
@@ -51,7 +51,7 @@
         dismissible
         on:dismiss={handleDismiss}>
         <svelte:fragment>
-            To avoid losing access to your projects, make sure <Typography.Text
+            To avoid losing access to your account, make sure <Typography.Text
                 variant="m-500"
                 style="display:inline">{$user.email}</Typography.Text> is valid and up to date. Email
             verification will be required soon.

From bedcc1a7fabe52815297cf9a14fe5a49fe3225db Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Tue, 26 Aug 2025 14:09:32 +0530
Subject: [PATCH 08/10] Update
 src/lib/components/alerts/emailVerificationBanner.svelte
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Matej Bačo <matejbaco2000@gmail.com>
---
 src/lib/components/alerts/emailVerificationBanner.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/alerts/emailVerificationBanner.svelte b/src/lib/components/alerts/emailVerificationBanner.svelte
index 5b6c9dc420..db6e8eebed 100644
--- a/src/lib/components/alerts/emailVerificationBanner.svelte
+++ b/src/lib/components/alerts/emailVerificationBanner.svelte
@@ -47,7 +47,7 @@
 {#if shouldShowEmailBanner}
     <HeaderAlert
         type="warning"
-        title="Your email address needs to be verified"
+        title="To keep your account safe, ensure your email is valid"
         dismissible
         on:dismiss={handleDismiss}>
         <svelte:fragment>

From 3b4c1ba47affe01fa472138208cb22083645b400 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 27 Aug 2025 10:26:52 +0530
Subject: [PATCH 09/10] Update emailVerificationBanner.svelte

---
 src/lib/components/alerts/emailVerificationBanner.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/alerts/emailVerificationBanner.svelte b/src/lib/components/alerts/emailVerificationBanner.svelte
index db6e8eebed..dbeb92ff7d 100644
--- a/src/lib/components/alerts/emailVerificationBanner.svelte
+++ b/src/lib/components/alerts/emailVerificationBanner.svelte
@@ -51,7 +51,7 @@
         dismissible
         on:dismiss={handleDismiss}>
         <svelte:fragment>
-            To avoid losing access to your account, make sure <Typography.Text
+            To avoid losing access to your projects, make sure <Typography.Text
                 variant="m-500"
                 style="display:inline">{$user.email}</Typography.Text> is valid and up to date. Email
             verification will be required soon.

From 176e46e265115ba11e6b1191be606fdbc355b167 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 27 Aug 2025 10:28:17 +0530
Subject: [PATCH 10/10] Update emailVerificationBanner.svelte

---
 src/lib/components/alerts/emailVerificationBanner.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/alerts/emailVerificationBanner.svelte b/src/lib/components/alerts/emailVerificationBanner.svelte
index dbeb92ff7d..ed8258024a 100644
--- a/src/lib/components/alerts/emailVerificationBanner.svelte
+++ b/src/lib/components/alerts/emailVerificationBanner.svelte
@@ -47,7 +47,7 @@
 {#if shouldShowEmailBanner}
     <HeaderAlert
         type="warning"
-        title="To keep your account safe, ensure your email is valid"
+        title="Your email address needs to be verified"
         dismissible
         on:dismiss={handleDismiss}>
         <svelte:fragment>