improve: usability.

src/routes/(console)/project-[project]/+layout.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-    import { MigrationBox, BottomModalAlert, UploadBox } from '$lib/components';
+    import { BottomModalAlert, MigrationBox, UploadBox } from '$lib/components';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
-    import { addBottomModalAlerts, project, stats } from './store';
+    import { project, stats } from './store';
+    import { addBottomModalAlerts } from './bottomAlerts';
 
     import { goto } from '$app/navigation';
     import { registerCommands, registerSearchers } from '$lib/commandCenter';
@@ -17,8 +18,9 @@
     import { page } from '$app/stores';
     import { base } from '$app/paths';
 
+    addBottomModalAlerts();
+
     onMount(() => {
-        addBottomModalAlerts();
         return sdk.forConsole.client.subscribe(['project', 'console'], (response) => {
             if (response.events.includes('stats.connections')) {
                 for (const [projectId, value] of Object.entries(response.payload)) {

src/routes/(console)/project-[project]/bottomAlerts.ts

@@ -0,0 +1,53 @@
+import RolesSampleDark from '$lib/images/samples/roles-sample-dark.svg';
+import RolesSampleLight from '$lib/images/samples/roles-sample-light.svg';
+import BackupsSampleDark from '$lib/images/samples/backups-sample-dark.svg';
+import BackupsSampleLight from '$lib/images/samples/backups-sample-light.svg';
+
+import { type BottomModalAlertItem, showBottomModalAlert } from '$lib/stores/bottom-alerts';
+
+const listOfPromotions: BottomModalAlertItem[] = [
+    {
+        id: 'memberRoles',
+        src: {
+            dark: RolesSampleDark,
+            light: RolesSampleLight
+        },
+        title: 'Member roles now available',
+        message:
+            'Enhance your workflow and security by assigning roles to members. Try it now for free until Dec 2024.',
+
+        cta: {
+            text: 'Try Now',
+            link: 'https://appwrite.io'
+        },
+        learnMore: {
+            link: 'https://appwrite.io/docs'
+        }
+    },
+
+    {
+        id: 'databaseBackups',
+        src: {
+            dark: BackupsSampleDark,
+            light: BackupsSampleLight
+        },
+        title: 'Database backups are now available',
+        message:
+            'Protect your data and ensure quick recovery with our new backups. <br/><b>Try it now for free until Nov 2024</b>.',
+
+        isHtml: true,
+        importance: 10,
+
+        cta: {
+            text: 'Try Now',
+            link: 'https://appwrite.io'
+        },
+        learnMore: {
+            link: 'https://appwrite.io/docs'
+        }
+    }
+];
+
+export function addBottomModalAlerts() {
+    listOfPromotions.forEach((promotion) => showBottomModalAlert(promotion));
+}

src/routes/(console)/project-[project]/store.ts

@@ -2,12 +2,6 @@ import { page } from '$app/stores';
 import type { Models } from '@appwrite.io/console';
 import type { BarSeriesOption } from 'echarts/charts';
 import { derived, writable } from 'svelte/store';
-import { type BottomModalAlertItem, showBottomModalAlert } from '$lib/stores/bottom-alerts';
-import RolesSampleDark from '$lib/images/samples/roles-sample-dark.svg';
-import RolesSampleLight from '$lib/images/samples/roles-sample-light.svg';
-
-import BackupsSampleDark from '$lib/images/samples/backups-sample-dark.svg';
-import BackupsSampleLight from '$lib/images/samples/backups-sample-light.svg';
 
 export const project = derived(
     page,
@@ -49,53 +43,4 @@ function createStats() {
     };
 }
 
-export const stats = createStats();
-
-const listOfPromotions: BottomModalAlertItem[] = [
-    {
-        id: 'memberRoles',
-        src: {
-            dark: RolesSampleDark,
-            light: RolesSampleLight
-        },
-        title: 'Member roles now available',
-        message:
-            'Enhance your workflow and security by assigning roles to members. Try it now for free until Dec 2024.',
-
-        cta: {
-            text: 'Try Now',
-            link: 'https://appwrite.io'
-        },
-        learnMore: {
-            link: 'https://appwrite.io/docs'
-        }
-    },
-
-    {
-        id: 'databaseBackups',
-        src: {
-            dark: BackupsSampleDark,
-            light: BackupsSampleLight
-        },
-        title: 'Database backups are now available',
-        message:
-            'Protect your data and ensure quick recovery with our new backups. <br/><b>Try it now for free until Nov 2024</b>.',
-
-        isHtml: true,
-        importance: 10,
-
-        cta: {
-            text: 'Try Now',
-            link: 'https://appwrite.io'
-        },
-        learnMore: {
-            link: 'https://appwrite.io/docs'
-        }
-    }
-];
-
-export function addBottomModalAlerts() {
-    listOfPromotions.forEach((promotion) => {
-        showBottomModalAlert(promotion);
-    });
-}
+export const stats = createStats();