feat(console): add a top banner for the new Console

src/lib/components/billing/gradientBanner.svelte

@@ -6,10 +6,18 @@
     import { isTabletViewport } from '$lib/stores/viewport';
     import PinkBackground from '$lib/images/pink-background.svg';
     import { bannerSpacing } from '$lib/layout/headerAlert.svelte';
-    import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+    import { createEventDispatcher, getContext, onMount, onDestroy } from 'svelte';
 
     export let variant: 'gradient' | 'image' = 'gradient';
 
+    /**
+     * An AlertStack parent is itself fixed and measures its children to offset the shell. This
+     * banner is position:fixed, so inside a stack it measures as 0 and the stack resets the
+     * header offset we just set, leaving the banner covering the navigation until the next
+     * resize. Mirror headerAlert.svelte and stand down when the stack is in charge.
+     */
+    const isInStack: boolean = getContext('isInAlertStack') ?? false;
+
     let container: HTMLElement;
     const dispatch = createEventDispatcher();
 
@@ -20,6 +28,8 @@
     });
 
     const setNavigationHeight = () => {
+        if (isInStack) return;
+
         const alertHeight = container?.getBoundingClientRect()?.height || 0;
         const { header, sidebar, content } = queryLayoutElements();
         const headerHeight = header?.getBoundingClientRect().height || 0;
@@ -51,6 +61,7 @@
 <div
     bind:this={container}
     class:darker={variant === 'image'}
+    class:in-stack={isInStack}
     class="top-banner alert is-action is-action-and-top-sticky">
     {#if variant === 'gradient'}
         <div class="top-banner-bg">
@@ -92,6 +103,11 @@
         position: fixed;
         padding: 0.8rem;
 
+        &.in-stack {
+            position: relative;
+            z-index: unset;
+        }
+
         &.darker {
             background: var(--bgcolor-neutral-default);
         }

src/lib/components/index.ts

@@ -76,6 +76,7 @@ export { default as EmptyCardImageCloud } from './emptyCardImageCloud.svelte';
 export { default as ImagePreview } from './imagePreview.svelte';
 export { default as MfaChallengeFormList } from './mfaChallengeFormList.svelte';
 export { default as BottomModalAlert } from './bottomModalAlert.svelte';
+export { default as NewConsoleBanner } from './newConsoleBanner.svelte';
 export { default as Navbar } from './navbar.svelte';
 export { default as Breadcrumbs } from './breadcrumbs.svelte';
 export { default as Sidebar } from './sidebar.svelte';

src/lib/components/newConsoleBanner.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { trackEvent } from '$lib/actions/analytics';
+    import { Button } from '$lib/elements/forms';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { isSmallViewport } from '$lib/stores/viewport';
+    import { headerAlert } from '$lib/stores/headerAlert';
+    import { activeHeaderAlert } from '$routes/(console)/store';
+    import GradientBanner from './billing/gradientBanner.svelte';
+
+    // utm_medium separates this from the promo card, so the two surfaces can be compared.
+    const href =
+        'https://appwrite.io/?utm_source=old-console&utm_medium=banner&utm_campaign=new-console';
+
+    function handleClose() {
+        const { id } = $activeHeaderAlert;
+        localStorage.setItem(id, new Date().getTime().toString());
+        trackEvent('close_new_console_banner', { source: 'new_console_banner' });
+
+        // Clear the store entry, not just this component. headerAlert.get() picks the highest
+        // importance and breaks ties by registration order, so an entry left visible keeps
+        // winning the importance-1 tie and hides the next eligible promo behind an empty slot.
+        headerAlert.updateShow(id, false);
+    }
+</script>
+
+<GradientBanner on:close={handleClose}>
+    <Layout.Stack
+        gap="m"
+        alignItems="center"
+        alignContent="center"
+        direction={$isSmallViewport ? 'column' : 'row'}>
+        <Typography.Text>
+            Introducing the new Appwrite Console, rebuilt from the ground up.
+        </Typography.Text>
+
+        <Button
+            secondary
+            external
+            fullWidthMobile
+            class="u-line-height-1"
+            {href}
+            on:click={() => trackEvent('click_new_console', { source: 'new_console_banner' })}>
+            Try it now
+        </Button>
+    </Layout.Stack>
+</GradientBanner>

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

@@ -44,7 +44,7 @@
     import { headerAlert } from '$lib/stores/headerAlert';
     import { UsageRates } from '$lib/components/billing';
     import { canSeeProjects } from '$lib/stores/roles';
-    import { BottomModalAlert } from '$lib/components';
+    import { BottomModalAlert, NewConsoleBanner } from '$lib/components';
     import { isSmallViewport } from '$lib/stores/viewport';
     import {
         IconAnnotation,
@@ -325,6 +325,19 @@
 
     $registerSearchers(orgSearcher, projectsSearcher);
 
+    onMount(() => {
+        // Same shape as newDevUpgradePro: promo tier (importance 1) so it can never outrank a
+        // payment or usage warning, dismissal keyed on the alert id in localStorage.
+        if (isCloud && !localStorage.getItem('newConsoleBanner')) {
+            headerAlert.add({
+                id: 'newConsoleBanner',
+                component: NewConsoleBanner,
+                show: true,
+                importance: 1
+            });
+        }
+    });
+
     $: (void $headerAlert, ($activeHeaderAlert = headerAlert.getExcluding('impersonation')));
 </script>