Merge pull request #3193 from appwrite/fix-new-console-banner-tablet

fix(console): make the new Console banner responsive and snoozeable

Author: HarshMN2345

bun.lock

@@ -113,6 +113,7 @@
         "cookie": "^0.7.0",
         "ws": "^8.21.0",
         "postcss": "^8.5.18",
-        "nanoid": "^3.3.18"
+        "nanoid": "^3.3.18",
+        "browserslist": ">=4.28.7"
     }
 }

package.json

@@ -2,7 +2,8 @@
     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 { isTabletViewport } from '$lib/stores/viewport';
+    import { hideNotification } from '$lib/helpers/notifications';
     import { headerAlert } from '$lib/stores/headerAlert';
     import { activeHeaderAlert } from '$routes/(console)/store';
     import GradientBanner from './billing/gradientBanner.svelte';
@@ -13,13 +14,18 @@
 
     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);
+
+        // A migration runs for months, so dismissal is a snooze rather than a permanent opt-out:
+        // a week at first, doubling each time. Someone who keeps closing it stops seeing it, but a
+        // single stray click on the X does not remove the message for the whole rollout.
+        hideNotification(id, { coolOffPeriod: 24 * 7, exponentialBackoff: true });
     }
 </script>
 
@@ -28,15 +34,15 @@
         gap="m"
         alignItems="center"
         alignContent="center"
-        direction={$isSmallViewport ? 'column' : 'row'}>
-        <Typography.Text>
+        justifyContent="center"
+        direction={$isTabletViewport ? 'column' : 'row'}>
+        <Typography.Text align={$isTabletViewport ? 'center' : 'start'}>
             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' })}>

src/lib/components/newConsoleBanner.svelte

@@ -57,6 +57,10 @@
     afterNavigate(() => setNavigationHeight());
 </script>
 
+<!-- The stack owns the shell offset for every alert inside it, so it has to re-measure when
+     the viewport changes and an alert reflows to a different height. -->
+<svelte:window on:resize={setNavigationHeight} />
+
 <div bind:this={container} class="alert-stack">
     <slot />
 </div>

src/lib/layout/alertStack.svelte

@@ -45,6 +45,7 @@
     import { UsageRates } from '$lib/components/billing';
     import { canSeeProjects } from '$lib/stores/roles';
     import { BottomModalAlert, NewConsoleBanner } from '$lib/components';
+    import { shouldShowNotification } from '$lib/helpers/notifications';
     import { isSmallViewport } from '$lib/stores/viewport';
     import {
         IconAnnotation,
@@ -328,7 +329,7 @@
     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')) {
+        if (isCloud && shouldShowNotification('newConsoleBanner')) {
             headerAlert.add({
                 id: 'newConsoleBanner',
                 component: NewConsoleBanner,