Add messaging overview route

src/lib/commandCenter/commands.ts

@@ -17,6 +17,7 @@ const groups = [
     'platforms',
     'databases',
     'functions',
+    'messaging',
     'storage',
     'domains',
     'webhooks',

src/lib/components/index.ts

@@ -60,3 +60,5 @@ export { default as SvgIcon } from './svgIcon.svelte';
 export { default as MigrationBox } from './migrationBox.svelte';
 export { default as FloatingActionBar } from './floatingActionBar.svelte';
 export { default as LoadingDots } from './loadingDots.svelte';
+export { default as Provider } from './provider.svelte';
+export { default as ProviderType } from './providerType.svelte';

src/lib/components/provider.svelte

@@ -0,0 +1,79 @@
+<script context="module" lang="ts">
+    export enum Providers {
+        Twilio = 'twilio',
+        Msg91 = 'msg91',
+        Telesign = 'telesign',
+        Textmagic = 'textmagic',
+        Vonage = 'vonage',
+        Mailgun = 'mailgun',
+        Sendgrid = 'sendgrid',
+        FCM = 'fcm',
+        APNS = 'apns',
+        MQTT = 'mqtt'
+    }
+</script>
+
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { app } from '$lib/stores/app';
+
+    export let provider: Providers;
+    export let name: string = '';
+
+    let icon = '';
+    let displayName = name || provider.charAt(0).toUpperCase() + provider.slice(1);
+
+    switch (provider) {
+        case Providers.FCM:
+            icon = 'firebase';
+            displayName = name || 'FCM';
+            break;
+        case Providers.APNS:
+            icon = 'apple';
+            displayName = name || 'APNS';
+            break;
+        case Providers.MQTT:
+            icon = 'mqtt';
+            displayName = name || 'MQTT';
+            break;
+        case Providers.Sendgrid:
+            icon = 'sendgrid';
+            break;
+        case Providers.Mailgun:
+            icon = 'mailgun';
+            break;
+        case Providers.Twilio:
+            icon = 'twilio';
+            break;
+        case Providers.Telesign:
+            icon = 'telesign';
+            break;
+        case Providers.Msg91:
+            icon = 'msg91';
+            displayName = name || 'MSG91';
+            break;
+        case Providers.Textmagic:
+            icon = 'textmagic';
+            displayName = name || 'TextMagic';
+            break;
+        case Providers.Vonage:
+            icon = 'vonage';
+            break;
+    }
+</script>
+
+{#if icon === ''}
+    Invalid provider
+{:else}
+    <div class="u-flex u-cross-center u-gap-8">
+        <div class="avatar is-size-small">
+            <img
+                style:--p-text-size="1.25rem"
+                src={`${base}/icons/${$app.themeInUse}/color/${icon}.svg`}
+                alt={displayName} />
+        </div>
+        <slot>
+            {displayName}
+        </slot>
+    </div>
+{/if}

src/lib/components/providerType.svelte

@@ -0,0 +1,40 @@
+<script context="module" lang="ts">
+    export enum ProviderTypes {
+        Email = 'email',
+        Sms = 'sms',
+        Push = 'push'
+    }
+</script>
+
+<script lang="ts">
+    export let type: ProviderTypes;
+
+    let icon = '';
+    let text = '';
+
+    switch (type) {
+        case ProviderTypes.Email:
+            icon = 'icon-mail';
+            text = 'Email';
+            break;
+        case ProviderTypes.Sms:
+            icon = 'icon-annotation';
+            text = 'SMS';
+            break;
+        case ProviderTypes.Push:
+            icon = 'icon-device-mobile';
+            text = 'Push';
+            break;
+    }
+</script>
+
+{#if text === ''}
+    Invalid provider type
+{:else}
+    <div class="u-flex u-cross-center u-gap-8">
+        <div class="avatar is-size-small">
+            <span class={icon} style:--p-text-size="1.25rem" aria-hidden="true" />
+        </div>
+        {text}
+    </div>
+{/if}

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

@@ -0,0 +1,62 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
+    import { project } from '../store';
+    import { showCreate } from './store';
+
+    // TODO: finalize the commands
+
+    $: $registerCommands([
+        {
+            label: 'Create message',
+            callback: () => {
+                if (!$page.url.pathname.endsWith('messaging')) {
+                    goto(`/console/project-${$project.$id}/messaging`);
+                }
+                $showCreate = true;
+            },
+            keys: $page.url.pathname.endsWith('messaging') ? ['c'] : ['c', 'm'],
+            icon: 'plus',
+            group: 'messaging'
+        },
+        {
+            label: 'Go to topics',
+            callback() {
+                goto(`/console/project-${$project.$id}/messaging/topics`);
+            },
+            keys: ['g', 't'],
+            disabled:
+                $page.url.pathname.endsWith('topics') || $page.url.pathname.includes('message-'),
+            group: 'navigation',
+            rank: 10
+        },
+        {
+            label: 'Go to providers',
+            callback() {
+                goto(`/console/project-${$project.$id}/messaging/providers`);
+            },
+            keys: ['g', 'p'],
+            disabled:
+                $page.url.pathname.endsWith('topics') || $page.url.pathname.includes('message-'),
+            group: 'navigation',
+            rank: 10
+        }
+        // {
+        //     label: 'Find messages',
+        //     callback: () => {
+        //         addSubPanel(BucketsPanel);
+        //     },
+        //     group: 'messaging',
+        //     rank: -1
+        // }
+    ]);
+
+    $: $updateCommandGroupRanks({ messaging: 200, navigation: 100 });
+</script>
+
+<svelte:head>
+    <title>Messaging - Appwrite</title>
+</svelte:head>
+
+<slot />

src/routes/console/project-[project]/messaging/+layout.ts

@@ -0,0 +1,10 @@
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = async () => {
+    return {
+        header: Header,
+        breadcrumbs: Breadcrumbs
+    };
+};