Add topic detail route

src/lib/actions/analytics.ts

@@ -285,5 +285,5 @@ export enum Submit {
     SmsUpdateVerificationTemplate = 'submit_sms_update_verification_template',
     MessagingTopicCreate = 'submit_messaging_topic_create',
     MessagingTopicDelete = 'submit_messaging_topic_delete',
-    MessagingTopicUpdaeName = 'submit_messaging_topic_update_name',
+    MessagingTopicUpdateName = 'submit_messaging_topic_update_name',
 }

src/lib/constants.ts

@@ -42,7 +42,8 @@ export enum Dependencies {
     MIGRATIONS = 'dependency:migrations',
     COLLECTIONS = 'dependency:collections',
     RUNTIMES = 'dependency:runtimes',
-    CONSOLE_VARIABLES = 'dependency:console_variables'
+    CONSOLE_VARIABLES = 'dependency:console_variables',
+    MESSAGING_TOPIC = 'dependency:messaging_topic'
 }
 
 export const scopes: {

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

@@ -0,0 +1,5 @@
+<svelte:head>
+    <title>Topic - Appwrite</title>
+</svelte:head>
+
+<slot />

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

@@ -0,0 +1,30 @@
+import type { LayoutLoad } from './$types';
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+import { sdk } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import { error } from '@sveltejs/kit';
+
+export const load: LayoutLoad = async ({ params, depends }) => {
+    depends(Dependencies.MESSAGING_TOPIC);
+
+    const response = await sdk.forProject.client.call(
+        'GET',
+        new URL(sdk.forProject.client.config.endpoint + '/messaging/topics/' + params.topic),
+        {
+            'X-Appwrite-Project': sdk.forProject.client.config.project,
+            'content-type': 'application/json',
+            'X-Appwrite-Mode': 'admin'
+        }
+    );
+
+    try {
+        return {
+            header: Header,
+            breadcrumbs: Breadcrumbs,
+            topic: response
+        };
+    } catch (e) {
+        throw error(e.code, e.message);
+    }
+};

src/routes/console/project-[project]/messaging/topics/topic-[topic]/+page.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import { Container } from '$lib/layout';
+    import DangerZone from './dangerZone.svelte';
+    import UpdateName from './updateName.svelte';
+    import Details from './details.svelte';
+</script>
+
+<Container>
+    <Details />
+    <UpdateName />
+    <DangerZone />
+</Container>

src/routes/console/project-[project]/messaging/topics/topic-[topic]/breadcrumbs.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '$routes/console/project-[project]/store';
+    import { topic } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization.$id}`,
+            title: $organization.name
+        },
+        {
+            href: `/console/project-${$project.$id}`,
+            title: $project.name
+        },
+        {
+            href: `/console/project-${$project.$id}/messaging`,
+            title: 'Messaging'
+        },
+        {
+            href: `/console/project-${$project.$id}/messaging/topics/topic-${$topic?.$id}`,
+            title: $topic?.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />

src/routes/console/project-[project]/messaging/topics/topic-[topic]/dangerZone.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" context="module">
+    import { get } from 'svelte/store';
+    let showDelete = writable(false);
+    export const promptDeleteUser = (id: string) => {
+        showDelete.set(true);
+        goto(`/console/project-${get(project).$id}/auth/user-${id}`);
+    };
+</script>
+
+<script lang="ts">
+    import { CardGrid, BoxAvatar, Heading } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { writable } from 'svelte/store';
+    import { topic } from './store';
+    import { goto } from '$app/navigation';
+    import { project } from '$routes/console/project-[project]/store';
+    import DeleteTopic from './deleteTopic.svelte';
+</script>
+
+<CardGrid danger>
+    <div>
+        <Heading tag="h6" size="7">Delete topic</Heading>
+    </div>
+    <p>
+        The topic will be permanently deleted, including all data associated with this topic. This
+        action is irreversible.
+    </p>
+    <svelte:fragment slot="aside">
+        <BoxAvatar>
+            <svelte:fragment slot="title">
+                <h6 class="u-bold u-trim-1">{$topic.name}</h6>
+            </svelte:fragment>
+            <p>
+                {$topic.total} subscriber{$topic.total === 1 ? '' : 's'}
+            </p>
+        </BoxAvatar>
+    </svelte:fragment>
+
+    <svelte:fragment slot="actions">
+        <Button secondary on:click={() => ($showDelete = true)} event="delete_messaging_provider"
+            >Delete</Button>
+    </svelte:fragment>
+</CardGrid>
+
+<DeleteTopic bind:showDelete={$showDelete} />

src/routes/console/project-[project]/messaging/topics/topic-[topic]/deleteTopic.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { topic } from './store';
+    import { project } from '../../../store';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+
+    export let showDelete = false;
+    const deleteTopic = async () => {
+        try {
+            await sdk.forProject.client.call(
+                'DELETE',
+                new URL(sdk.forProject.client.config.endpoint + '/messaging/topics/' + $topic.$id),
+                {
+                    'X-Appwrite-Project': sdk.forProject.client.config.project,
+                    'content-type': 'application/json',
+                    'X-Appwrite-Mode': 'admin'
+                }
+            );
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `${$topic.name} has been deleted`
+            });
+            trackEvent(Submit.MessagingTopicDelete);
+            await goto(`${base}/console/project-${$page.params.project}/messaging/topics`);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.MessagingTopicDelete);
+        }
+    };
+</script>
+
+<Modal
+    title="Delete topic"
+    bind:show={showDelete}
+    onSubmit={deleteTopic}
+    icon="exclamation"
+    state="warning"
+    headerDivider={false}>
+    <p data-private>
+        Are you sure you want to delete <b>{$topic.name}</b> from '{$project.name}'?
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>

src/routes/console/project-[project]/messaging/topics/topic-[topic]/details.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { CardGrid, Heading } from '$lib/components';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { topic } from './store';
+</script>
+
+<CardGrid>
+    <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16" data-private>
+        <Heading tag="h6" size="7">Details</Heading>
+    </div>
+    <svelte:fragment slot="aside">
+        <div class="u-flex u-main-space-between">
+            <div data-private>
+                <p class="title">{$topic.total} subscriber{$topic.total === 1 ? '' : 's'}</p>
+                <p>Created: {toLocaleDateTime($topic.$createdAt)}</p>
+            </div>
+        </div>
+    </svelte:fragment>
+</CardGrid>

src/routes/console/project-[project]/messaging/topics/topic-[topic]/header.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Id, Tab, Tabs } from '$lib/components';
+    import { isTabSelected } from '$lib/helpers/load';
+    import { Cover, CoverTitle } from '$lib/layout';
+    import { topic } from './store';
+
+    const projectId = $page.params.project;
+    const topicId = $page.params.topic;
+    const path = `/console/project-${projectId}/messaging/topics/topic-${topicId}`;
+    const tabs = [
+        {
+            href: path,
+            title: 'Overview',
+            event: 'overview'
+        },
+        // {
+        //     href: `${path}/memberships`,
+        //     title: 'Memberships',
+        //     event: 'memberships'
+        // },
+        // {
+        //     href: `${path}/sessions`,
+        //     title: 'Sessions',
+        //     event: 'sessions'
+        // },
+        // {
+        //     href: `${path}/activity`,
+        //     title: 'Activity',
+        //     event: 'activity',
+        //     hasChildren: true
+        // }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle href={`/console/project-${projectId}/messaging/topics`}>
+            {$topic.name}
+        </CoverTitle>
+        <Id value={$topic.$id} event="topic">{$topic.$id}</Id>
+    </svelte:fragment>
+
+    <Tabs>
+        {#each tabs as tab}
+            <Tab
+                href={tab.href}
+                selected={isTabSelected(tab, $page.url.pathname, path, tabs)}
+                event={tab.event}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>

src/routes/console/project-[project]/messaging/topics/topic-[topic]/store.ts

@@ -0,0 +1,9 @@
+import { derived } from 'svelte/store';
+import { page } from '$app/stores';
+import type { Topic } from '../+page';
+
+export const topic = derived(
+    page,
+    // TODO: Set actual type
+    ($page) => $page.data.topic as Topic
+);

src/routes/console/project-[project]/messaging/topics/topic-[topic]/updateName.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+    import { CardGrid, Heading } from '$lib/components';
+    import { Button, Form, InputText } from '$lib/elements/forms';
+    import { onMount } from 'svelte';
+    import { topic } from './store';
+    import { invalidate } from '$app/navigation';
+    import { trackEvent, Submit, trackError } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+
+    let name: string = null;
+    onMount(async () => {
+        name ??= $topic.name;
+    });
+    async function updateName() {
+        try {
+            // await sdk.forProject.users.updateName($provider.$id, providerName);
+            await sdk.forProject.client.call(
+                'PATCH',
+                new URL(`${sdk.forProject.client.config.endpoint}/messaging/topics/${$topic.$id}`),
+                {
+                    'X-Appwrite-Project': sdk.forProject.client.config.project,
+                    'content-type': 'application/json',
+                    'X-Appwrite-Mode': 'admin'
+                },
+                {
+                    name: name
+                }
+            );
+            await invalidate(Dependencies.MESSAGING_TOPIC);
+            addNotification({
+                message: 'Name has been updated',
+                type: 'success'
+            });
+            trackEvent(Submit.MessagingTopicUpdateName);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.MessagingTopicUpdateName);
+        }
+    }
+</script>
+
+<Form onSubmit={updateName}>
+    <CardGrid>
+        <Heading tag="h6" size="7">Name</Heading>
+
+        <svelte:fragment slot="aside">
+            <ul data-private>
+                <InputText
+                    id="name"
+                    label="Name"
+                    placeholder="Enter name"
+                    autocomplete={false}
+                    bind:value={name} />
+            </ul>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={name === $topic.name} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>