From 7143794883cc41d2587050a9aa37534d5ec48379 Mon Sep 17 00:00:00 2001
From: harsh mahajan <harshmahajan2345@gmail.com>
Date: Mon, 27 Apr 2026 11:53:15 +0530
Subject: [PATCH 1/2] fix: stack impersonation banner with customer alerts

The header-alert system previously rendered only the highest-importance
banner. Since the impersonation banner has importance 100, it always
suppressed payment-failed and other billing alerts (importance 1),
making them invisible to operators during impersonation sessions.

Now the impersonation banner renders in a separate fixed-position stack
alongside the highest-priority customer alert, so operators can see
exactly what the customer sees while impersonating.
---
 src/lib/layout/alertStack.svelte    | 71 +++++++++++++++++++++++++++++
 src/lib/layout/headerAlert.svelte   | 31 +++++++++----
 src/lib/layout/index.ts             |  1 +
 src/lib/layout/shell.svelte         | 28 ++++++++++--
 src/lib/stores/billing.ts           |  2 +-
 src/lib/stores/headerAlert.ts       | 18 ++++++++
 src/routes/(console)/+layout.svelte |  4 +-
 7 files changed, 139 insertions(+), 16 deletions(-)
 create mode 100644 src/lib/layout/alertStack.svelte

diff --git a/src/lib/layout/alertStack.svelte b/src/lib/layout/alertStack.svelte
new file mode 100644
index 0000000000..dd94d892c9
--- /dev/null
+++ b/src/lib/layout/alertStack.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+    import { setContext, onMount, onDestroy } from 'svelte';
+    import { isTabletViewport } from '$lib/stores/viewport';
+    import { afterNavigate } from '$app/navigation';
+    import { bannerSpacing } from './headerAlert.svelte';
+
+    // Signal to child HeaderAlert components that layout is managed here
+    setContext('isInAlertStack', true);
+
+    let container: HTMLElement | null = null;
+    let resizeObserver: ResizeObserver;
+
+    function setNavigationHeight() {
+        const alertHeight = container ? container.getBoundingClientRect().height : 0;
+
+        if (alertHeight) {
+            bannerSpacing.set(`${alertHeight}px`);
+        } else {
+            bannerSpacing.set(undefined);
+        }
+
+        const header: HTMLHeadingElement = document.querySelector('main > header');
+        const sidebar: HTMLElement = document.querySelector('main nav');
+        const contentSection: HTMLElement = document.querySelector('main .main-content');
+
+        if (header) {
+            header.style.top = `${alertHeight}px`;
+        }
+
+        if (sidebar) {
+            const headerHeight = header?.getBoundingClientRect().height ?? 0;
+            const topOffset = alertHeight + ($isTabletViewport ? 0 : headerHeight);
+            sidebar.style.top = `${topOffset}px`;
+            sidebar.style.height = `calc(100vh - ${topOffset}px)`;
+        }
+
+        if (contentSection) {
+            contentSection.style.paddingBlockStart = `${alertHeight}px`;
+        }
+    }
+
+    onMount(() => {
+        if (container) {
+            resizeObserver = new ResizeObserver(setNavigationHeight);
+            resizeObserver.observe(container);
+        }
+    });
+
+    onDestroy(() => {
+        container = null;
+        setNavigationHeight();
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+        }
+    });
+
+    afterNavigate(() => setNavigationHeight());
+</script>
+
+<div bind:this={container} class="alert-stack">
+    <slot />
+</div>
+
+<style>
+    .alert-stack {
+        position: fixed;
+        top: 0;
+        width: 100%;
+        z-index: 100;
+    }
+</style>
diff --git a/src/lib/layout/headerAlert.svelte b/src/lib/layout/headerAlert.svelte
index b092797d5f..6c30af074b 100644
--- a/src/lib/layout/headerAlert.svelte
+++ b/src/lib/layout/headerAlert.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <script lang="ts">
-    import { onDestroy, onMount } from 'svelte';
+    import { getContext, onDestroy, onMount } from 'svelte';
     import { isTabletViewport } from '$lib/stores/viewport';
     import { createEventDispatcher } from 'svelte';
     import { Button } from '$lib/elements/forms';
@@ -17,6 +17,9 @@
     export let type: 'info' | 'success' | 'warning' | 'error' | 'default' = 'info';
     export let dismissible = false;
 
+    // When inside an AlertStack, layout management is handled by the stack wrapper
+    const isInStack: boolean = getContext('isInAlertStack') ?? false;
+
     /**
      * This is needed because when the
      * slot's height gets changed, sometimes the update doesn't come through!
@@ -57,28 +60,33 @@
     }
 
     onMount(() => {
-        if (container) {
+        if (!isInStack && container) {
             resizeObserver = new ResizeObserver(setNavigationHeight);
             resizeObserver.observe(container);
         }
     });
 
     onDestroy(() => {
-        container = null;
-        setNavigationHeight();
-
-        // remove observer!
-        if (resizeObserver) {
-            resizeObserver.disconnect();
+        if (!isInStack) {
+            container = null;
+            setNavigationHeight();
+
+            // remove observer!
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
         }
     });
 
-    afterNavigate(() => setNavigationHeight());
+    afterNavigate(() => {
+        if (!isInStack) setNavigationHeight();
+    });
 </script>
 
 <section
     bind:this={container}
     class="alert is-action is-action-and-top-sticky u-sep-block-end"
+    class:in-stack={isInStack}
     class:is-success={type === 'success'}
     class:is-warning={type === 'warning'}
     class:is-danger={type === 'error'}
@@ -125,6 +133,11 @@
         z-index: 100;
     }
 
+    .alert.in-stack {
+        position: static;
+        z-index: unset;
+    }
+
     .alert-content {
         gap: 0.25rem;
     }
diff --git a/src/lib/layout/index.ts b/src/lib/layout/index.ts
index 11a2f4fc84..248cc3c6c3 100644
--- a/src/lib/layout/index.ts
+++ b/src/lib/layout/index.ts
@@ -16,6 +16,7 @@ export { default as Activity } from './activity.svelte';
 export { default as Progress } from './progress.svelte';
 export { default as GridHeader } from './gridHeader.svelte';
 export { default as ContainerHeader } from './containerHeader.svelte';
+export { default as AlertStack } from './alertStack.svelte';
 export { default as HeaderAlert } from './headerAlert.svelte';
 export { default as ContainerButton } from './containerButton.svelte';
 export { default as WizardSecondaryContainer } from './wizardSecondaryContainer.svelte';
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 19d27b7133..9fc5bc8b93 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -3,6 +3,12 @@
     import { Navbar, Sidebar } from '$lib/components';
     import { isNewWizardStatusOpen, wizard } from '$lib/stores/wizard';
     import { activeHeaderAlert } from '$routes/(console)/store';
+    import AlertStack from './alertStack.svelte';
+    import ImpersonationBanner from '$lib/components/impersonation/banner.svelte';
+    import {
+        impersonationRevision,
+        readImpersonationTargetUserId
+    } from '$lib/appwrite/impersonation';
     import { onMount, setContext } from 'svelte';
     import { writable } from 'svelte/store';
     import { showSubNavigation, showOnboardingAnimation } from '$lib/stores/layout';
@@ -28,6 +34,13 @@
 
     $: activeProject = selectedProject && page.params.project ? selectedProject : null;
 
+    let isImpersonating = !!readImpersonationTargetUserId();
+    $: {
+        void $impersonationRevision;
+        isImpersonating = !!readImpersonationTargetUserId();
+    }
+    $: hasAnyAlert = isImpersonating || !!$activeHeaderAlert?.show;
+
     // variables
     let yOnMenuOpen: number;
     let showAccountMenu = false;
@@ -214,16 +227,23 @@
 
 <svelte:body use:style={$bodyStyle} />
 
-{#if $activeHeaderAlert?.show && !$isNewWizardStatusOpen}
-    <svelte:component this={$activeHeaderAlert.component} />
+{#if hasAnyAlert && !$isNewWizardStatusOpen}
+    <AlertStack>
+        {#if isImpersonating}
+            <ImpersonationBanner />
+        {/if}
+        {#if $activeHeaderAlert?.show}
+            <svelte:component this={$activeHeaderAlert.component} />
+        {/if}
+    </AlertStack>
 {/if}
 
 <main
-    class:has-alert={$activeHeaderAlert?.show}
+    class:has-alert={hasAnyAlert}
     class:is-open={$showSubNavigation}
     class:is-sidebar-open={$isSidebarOpen}
     class:u-hide={$wizard.show || $wizard.cover}
-    class:is-fixed-layout={$activeHeaderAlert?.show}
+    class:is-fixed-layout={hasAnyAlert}
     class:no-header={!showHeader || $showOnboardingAnimation}
     style:--p-side-size={sideSize}>
     {#if showHeader && !$showOnboardingAnimation}
diff --git a/src/lib/stores/billing.ts b/src/lib/stores/billing.ts
index 7f85293ec5..7c75642a0d 100644
--- a/src/lib/stores/billing.ts
+++ b/src/lib/stores/billing.ts
@@ -518,7 +518,7 @@ export async function checkPaymentAuthorizationRequired(org: Models.Organization
             importance: 8
         });
     }
-    activeHeaderAlert.set(headerAlert.get());
+    activeHeaderAlert.set(headerAlert.getExcluding('impersonation'));
 
     actionRequiredInvoices.set(invoices);
 }
diff --git a/src/lib/stores/headerAlert.ts b/src/lib/stores/headerAlert.ts
index 1d5faffeef..1103c1008a 100644
--- a/src/lib/stores/headerAlert.ts
+++ b/src/lib/stores/headerAlert.ts
@@ -57,6 +57,24 @@ function createHeaderAlertStore() {
                 return n;
             });
             return component as HeaderAlert;
+        },
+        getExcluding: (excludeId: string): HeaderAlert => {
+            // return highest importance visible component, excluding a specific id
+            let component = {
+                id: '',
+                show: false,
+                component: null,
+                importance: 0
+            };
+            update((n) => {
+                n.components.forEach((c) => {
+                    if (c.show && c.id !== excludeId && c.importance > component.importance) {
+                        component = c;
+                    }
+                });
+                return n;
+            });
+            return component as HeaderAlert;
         }
     };
 }
diff --git a/src/routes/(console)/+layout.svelte b/src/routes/(console)/+layout.svelte
index 47a5c06899..ea0830ac0c 100644
--- a/src/routes/(console)/+layout.svelte
+++ b/src/routes/(console)/+layout.svelte
@@ -305,7 +305,7 @@
                     calculateTrialDay(org);
                 }
             }
-            $activeHeaderAlert = headerAlert.get();
+            $activeHeaderAlert = headerAlert.getExcluding('impersonation');
         }
     }
 
@@ -318,7 +318,7 @@
     $registerSearchers(orgSearcher, projectsSearcher);
 
     afterUpdate(() => {
-        $activeHeaderAlert = headerAlert.get();
+        $activeHeaderAlert = headerAlert.getExcluding('impersonation');
     });
 </script>
 

From 57201952380b63598da61cc3ab8c699ff50a863d Mon Sep 17 00:00:00 2001
From: harsh mahajan <harshmahajan2345@gmail.com>
Date: Mon, 27 Apr 2026 12:03:56 +0530
Subject: [PATCH 2/2] fix: address code review findings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use svelte/store get() for read-only access in headerAlert.get() and
  getExcluding() to avoid spurious subscriber notifications on every call
- Fix bannerSpacing.set(undefined) → set(null) to match the store's
  declared string | null type (alertStack and headerAlert)
- Remove redundant isImpersonating guard around ImpersonationBanner;
  the component self-manages visibility, eliminating the transient
  empty-stack layout edge case
---
 src/lib/layout/alertStack.svelte  |  2 +-
 src/lib/layout/headerAlert.svelte |  2 +-
 src/lib/layout/shell.svelte       |  5 ++--
 src/lib/stores/headerAlert.ts     | 44 +++++++++----------------------
 4 files changed, 17 insertions(+), 36 deletions(-)

diff --git a/src/lib/layout/alertStack.svelte b/src/lib/layout/alertStack.svelte
index dd94d892c9..597b5f2fa8 100644
--- a/src/lib/layout/alertStack.svelte
+++ b/src/lib/layout/alertStack.svelte
@@ -16,7 +16,7 @@
         if (alertHeight) {
             bannerSpacing.set(`${alertHeight}px`);
         } else {
-            bannerSpacing.set(undefined);
+            bannerSpacing.set(null);
         }
 
         const header: HTMLHeadingElement = document.querySelector('main > header');
diff --git a/src/lib/layout/headerAlert.svelte b/src/lib/layout/headerAlert.svelte
index 6c30af074b..4916e4f96f 100644
--- a/src/lib/layout/headerAlert.svelte
+++ b/src/lib/layout/headerAlert.svelte
@@ -39,7 +39,7 @@
             // for sidebar and sub-navigation!
             bannerSpacing.set(`${alertHeight}px`);
         } else {
-            bannerSpacing.set(undefined);
+            bannerSpacing.set(null);
         }
 
         if (header) {
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 9fc5bc8b93..0dc0d0bce9 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -229,9 +229,8 @@
 
 {#if hasAnyAlert && !$isNewWizardStatusOpen}
     <AlertStack>
-        {#if isImpersonating}
-            <ImpersonationBanner />
-        {/if}
+        <!-- ImpersonationBanner self-manages its own visibility via its internal {#if isImpersonating} guard -->
+        <ImpersonationBanner />
         {#if $activeHeaderAlert?.show}
             <svelte:component this={$activeHeaderAlert.component} />
         {/if}
diff --git a/src/lib/stores/headerAlert.ts b/src/lib/stores/headerAlert.ts
index 1103c1008a..dbde513359 100644
--- a/src/lib/stores/headerAlert.ts
+++ b/src/lib/stores/headerAlert.ts
@@ -1,5 +1,5 @@
 import type { Component } from 'svelte';
-import { writable } from 'svelte/store';
+import { get as getStore, writable } from 'svelte/store';
 
 export type HeaderAlert = {
     id: string;
@@ -13,13 +13,11 @@ export type HeaderAlertStore = {
 };
 
 function createHeaderAlertStore() {
-    const { subscribe, update, set } = writable<HeaderAlertStore>({
-        components: []
-    });
+    const store = writable<HeaderAlertStore>({ components: [] });
+    const { subscribe, update } = store;
 
     return {
         subscribe,
-        set,
         add: (component: HeaderAlert) => {
             update((n) => {
                 if (n.components.some((c) => c.id === component.id)) return n;
@@ -42,37 +40,21 @@ function createHeaderAlertStore() {
         },
         get: (): HeaderAlert => {
             // return highest importance visible component
-            let component = {
-                id: '',
-                show: false,
-                component: null,
-                importance: 0
-            };
-            update((n) => {
-                n.components.forEach((c) => {
-                    if (c.show && c.importance > component.importance) {
-                        component = c;
-                    }
-                });
-                return n;
+            let component = { id: '', show: false, component: null, importance: 0 };
+            getStore(store).components.forEach((c) => {
+                if (c.show && c.importance > component.importance) {
+                    component = c;
+                }
             });
             return component as HeaderAlert;
         },
         getExcluding: (excludeId: string): HeaderAlert => {
             // return highest importance visible component, excluding a specific id
-            let component = {
-                id: '',
-                show: false,
-                component: null,
-                importance: 0
-            };
-            update((n) => {
-                n.components.forEach((c) => {
-                    if (c.show && c.id !== excludeId && c.importance > component.importance) {
-                        component = c;
-                    }
-                });
-                return n;
+            let component = { id: '', show: false, component: null, importance: 0 };
+            getStore(store).components.forEach((c) => {
+                if (c.show && c.id !== excludeId && c.importance > component.importance) {
+                    component = c;
+                }
             });
             return component as HeaderAlert;
         }