From f2313e3f045b5f8a5c8cccff85995bf062d8ef01 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Fri, 20 Oct 2023 12:18:46 -0700
Subject: [PATCH 1/9] Add messaging topics route

---
 .../messaging/topics/+page.svelte             | 160 ++++++++++++++++++
 .../messaging/topics/+page.ts                 |  62 +++++++
 .../messaging/topics/create.svelte            |  68 ++++++++
 .../messaging/topics/store.ts                 |  11 ++
 4 files changed, 301 insertions(+)
 create mode 100644 src/routes/console/project-[project]/messaging/topics/+page.svelte
 create mode 100644 src/routes/console/project-[project]/messaging/topics/+page.ts
 create mode 100644 src/routes/console/project-[project]/messaging/topics/create.svelte
 create mode 100644 src/routes/console/project-[project]/messaging/topics/store.ts

diff --git a/src/routes/console/project-[project]/messaging/topics/+page.svelte b/src/routes/console/project-[project]/messaging/topics/+page.svelte
new file mode 100644
index 0000000000..1a990e8b88
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/topics/+page.svelte
@@ -0,0 +1,160 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import {
+        TableHeader,
+        TableBody,
+        TableRowLink,
+        TableCellHead,
+        TableCellText,
+        TableCell,
+        TableCellHeadCheck,
+        TableScroll,
+        TableCellCheck
+    } from '$lib/elements/table';
+    import { Button } from '$lib/elements/forms';
+    import {
+        Empty,
+        EmptySearch,
+        SearchQuery,
+        PaginationWithLimit,
+        Heading,
+        Id,
+        ViewSelector
+    } from '$lib/components';
+    import Create from './create.svelte';
+    import { goto } from '$app/navigation';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { Container } from '$lib/layout';
+    import { base } from '$app/paths';
+    import type { Models } from '@appwrite.io/console';
+    import type { PageData } from './$types';
+    import { columns, showCreate } from './store';
+    import { View } from '$lib/helpers/load';
+    import Filters from '$lib/components/filters/filters.svelte';
+
+    export let data: PageData;
+    let selected: string[] = [];
+
+    const project = $page.params.project;
+    const topicCreated = async (event: CustomEvent<Models.Team<Record<string, unknown>>>) => {
+        await goto(`${base}/console/project-${project}/messaging/topics/topic-${event.detail.$id}`);
+    };
+</script>
+
+<Container>
+    <div class="u-flex u-flex-vertical">
+        <div class="u-flex u-main-space-between">
+            <Heading tag="h2" size="5">Topics</Heading>
+            <div class="is-only-mobile">
+                <Button on:click={() => ($showCreate = true)} event="create_topic">
+                    <span class="icon-plus" aria-hidden="true" />
+                    <span class="text">Create topic</span>
+                </Button>
+            </div>
+        </div>
+        <!-- TODO: fix width of search input in mobile -->
+        <SearchQuery search={data.search} placeholder="Search by name or ID">
+            <div class="u-flex u-gap-16 is-not-mobile">
+                <Filters query={data.query} {columns} />
+                <ViewSelector
+                    view={View.Table}
+                    {columns}
+                    hideView
+                    allowNoColumns
+                    showColsTextMobile />
+                <Button on:click={() => ($showCreate = true)} event="create_topic">
+                    <span class="icon-plus" aria-hidden="true" />
+                    <span class="text">Create topic</span>
+                </Button>
+            </div>
+        </SearchQuery>
+        <div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
+            <div class="u-flex-basis-50-percent">
+                <!-- TODO: fix width -->
+                <ViewSelector
+                    view={View.Table}
+                    {columns}
+                    hideView
+                    allowNoColumns
+                    showColsTextMobile />
+            </div>
+            <div class="u-flex-basis-50-percent">
+                <!-- TODO: fix width -->
+                <Filters query={data.query} {columns} />
+            </div>
+        </div>
+    </div>
+    {#if data.topics.total}
+        <TableScroll>
+            <TableHeader>
+                <TableCellHeadCheck
+                    bind:selected
+                    pageItemsIds={data.topics.topics.map((d) => d.$id)} />
+                {#each $columns as column}
+                    {#if column.show}
+                        <TableCellHead width={column.width}>{column.title}</TableCellHead>
+                    {/if}
+                {/each}
+            </TableHeader>
+            <TableBody>
+                {#each data.topics.topics as topic (topic.$id)}
+                    <TableRowLink
+                        href={`${base}/console/project-${project}/messaging/topics/topic-${topic.$id}`}>
+                        <TableCellCheck bind:selectedIds={selected} id={topic.$id} />
+
+                        {#each $columns as column (column.id)}
+                            {#if column.show}
+                                {#if column.id === '$id'}
+                                    {#key $columns}
+                                        <TableCell title={column.title} width={column.width}>
+                                            <Id value={topic.$id}>{topic.$id}</Id>
+                                        </TableCell>
+                                    {/key}
+                                {:else if column.type === 'datetime'}
+                                    <TableCellText title={column.title} width={column.width}>
+                                        {#if !topic[column.id]}
+                                            -
+                                        {:else}
+                                            {toLocaleDateTime(topic[column.id])}
+                                        {/if}
+                                    </TableCellText>
+                                {:else}
+                                    <TableCellText title={column.title} width={column.width}>
+                                        {topic[column.id]}
+                                    </TableCellText>
+                                {/if}
+                            {/if}
+                        {/each}
+                    </TableRowLink>
+                {/each}
+            </TableBody>
+        </TableScroll>
+
+        <PaginationWithLimit
+            name="Topics"
+            limit={data.limit}
+            offset={data.offset}
+            total={data.topics.total} />
+        <!-- TODO: remove data.search != 'empty' when the API is ready with data -->
+    {:else if data.search && data.search != 'empty'}
+        <EmptySearch>
+            <div class="u-text-center">
+                <b>Sorry, we couldn't find '{data.search}'</b>
+                <p>There are no topics that match your search.</p>
+            </div>
+            <Button secondary href={`/console/project-${$page.params.project}/messaging/topics`}>
+                Clear Search
+            </Button>
+        </EmptySearch>
+    {:else}
+        <!-- TODO: update docs link -->
+        <Empty
+            single
+            on:click={() => ($showCreate = true)}
+            href="https://appwrite.io/docs/references/cloud/client-web/teams"
+            target="topic" />
+    {/if}
+</Container>
+
+<!-- TODO: handle create -->
+<Create bind:showCreate={$showCreate} on:created={topicCreated} />
diff --git a/src/routes/console/project-[project]/messaging/topics/+page.ts b/src/routes/console/project-[project]/messaging/topics/+page.ts
new file mode 100644
index 0000000000..ead3791dfa
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/topics/+page.ts
@@ -0,0 +1,62 @@
+import { Query } from '@appwrite.io/console';
+import { sdk } from '$lib/stores/sdk';
+import { getLimit, getPage, getQuery, getSearch, pageToOffset } from '$lib/helpers/load';
+import { PAGE_LIMIT } from '$lib/constants';
+import { queryParamToMap, queries } from '$lib/components/filters/store';
+
+// TODO: remove when sdk has the model
+export type Topic = {
+    $id: string;
+    $createdAt: string;
+    $updatedAt: string;
+    providerId: string;
+    name: string;
+    total: number;
+    description: string;
+};
+
+export const load = async ({ url, route }) => {
+    const page = getPage(url);
+    const search = getSearch(url);
+    const limit = getLimit(url, route, PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
+    const query = getQuery(url);
+
+    const parsedQueries = queryParamToMap(query || '[]');
+    queries.set(parsedQueries);
+
+    const payload = {
+        queries: [
+            Query.limit(limit),
+            Query.offset(offset),
+            Query.orderDesc(''),
+            ...parsedQueries.values()
+        ]
+    };
+
+    if (search) {
+        payload['search'] = search;
+    }
+
+    // TODO: remove when the API is ready with data
+    // This allows us to mock w/ data and when search returns 0 results
+    const topics: { topics: Topic[]; total: number } = await sdk.forProject.client.call(
+        'GET',
+        new URL(sdk.forProject.client.config.endpoint + '/messaging/topics'),
+        {
+            'X-Appwrite-Project': sdk.forProject.client.config.project,
+            'content-type': 'application/json',
+            'X-Appwrite-Mode': 'admin'
+        },
+        payload
+    );
+
+    return {
+        offset,
+        limit,
+        search,
+        query,
+        page,
+        topics
+    };
+};
diff --git a/src/routes/console/project-[project]/messaging/topics/create.svelte b/src/routes/console/project-[project]/messaging/topics/create.svelte
new file mode 100644
index 0000000000..65528f2c00
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/topics/create.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Modal, CustomId } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { InputText, Button, FormList } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { ID } from '@appwrite.io/console';
+    import { createEventDispatcher } from 'svelte';
+
+    export let showCreate = false;
+
+    const dispatch = createEventDispatcher();
+
+    let name: string, id: string, error: string;
+    let showCustomId = false;
+
+    const create = async () => {
+        try {
+            const team = await sdk.forProject.teams.create(id ?? ID.unique(), name);
+            name = '';
+            showCreate = false;
+            showCustomId = false;
+            addNotification({
+                type: 'success',
+                message: `${team.name} has been created`
+            });
+            trackEvent(Submit.TeamCreate, {
+                customId: !!id
+            });
+            dispatch('created', team);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.TeamCreate);
+        }
+    };
+
+    $: if (!showCreate) {
+        showCustomId = false;
+        error = null;
+    }
+</script>
+
+<Modal title="Create team" {error} size="big" bind:show={showCreate} onSubmit={create}>
+    <FormList>
+        <InputText
+            id="name"
+            label="Name"
+            placeholder="Enter name"
+            autofocus={true}
+            required
+            bind:value={name} />
+        {#if !showCustomId}
+            <div>
+                <Pill button on:click={() => (showCustomId = !showCustomId)}
+                    ><span class="icon-pencil" aria-hidden="true" />
+                    <span class="text"> Team ID </span>
+                </Pill>
+            </div>
+        {:else}
+            <CustomId bind:show={showCustomId} name="Team" bind:id />
+        {/if}
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
+        <Button submit>Create</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/messaging/topics/store.ts b/src/routes/console/project-[project]/messaging/topics/store.ts
new file mode 100644
index 0000000000..f8bd1df06a
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/topics/store.ts
@@ -0,0 +1,11 @@
+import type { Column } from '$lib/helpers/types';
+import { writable } from 'svelte/store';
+
+export let showCreate = writable(false);
+
+export const columns = writable<Column[]>([
+    { id: '$id', title: 'Topic ID', type: 'string', show: true, width: 140 },
+    { id: 'name', title: 'Name', type: 'string', show: true, width: 140 },
+    { id: 'total', title: 'Subscribers', type: 'integer', show: true, width: 140 },
+    { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 140 }
+]);

From ca674731d06c5849b7dd17970b545f7927301790 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 30 Oct 2023 15:32:39 -0700
Subject: [PATCH 2/9] Implmement create topic modal

---
 src/lib/actions/analytics.ts                  |  5 +++-
 .../messaging/topics/create.svelte            | 28 +++++++++++++------
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index e9c127f9c5..5d9a037c9b 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -292,5 +292,8 @@ export enum Submit {
     MessagingProviderDelete = 'submit_messaging_provider_delete',
     MessagingProviderUpdate = 'submit_messaging_provider_update',
     MessagingMessageCreate = 'submit_messaging_message_create',
-    MessagingMessageDelete = 'submit_messaging_message_delete'
+    MessagingMessageDelete = 'submit_messaging_message_delete',
+    MessagingTopicCreate = 'submit_messaging_topic_create',
+    MessagingTopicDelete = 'submit_messaging_topic_delete',
+    MessagingTopicUpdateName = 'submit_messaging_topic_update_name',
 }
diff --git a/src/routes/console/project-[project]/messaging/topics/create.svelte b/src/routes/console/project-[project]/messaging/topics/create.svelte
index 65528f2c00..f3246a1960 100644
--- a/src/routes/console/project-[project]/messaging/topics/create.svelte
+++ b/src/routes/console/project-[project]/messaging/topics/create.svelte
@@ -17,21 +17,33 @@
 
     const create = async () => {
         try {
-            const team = await sdk.forProject.teams.create(id ?? ID.unique(), name);
+            const topic = await sdk.forProject.client.call(
+                'POST',
+                new URL(sdk.forProject.client.config.endpoint + '/messaging/topics'),
+                {
+                    'X-Appwrite-Project': sdk.forProject.client.config.project,
+                    'content-type': 'application/json',
+                    'X-Appwrite-Mode': 'admin'
+                },
+                {
+                    topicId: id ?? ID.unique(),
+                    name: name
+                }
+            );
             name = '';
             showCreate = false;
             showCustomId = false;
             addNotification({
                 type: 'success',
-                message: `${team.name} has been created`
+                message: `${topic.name} has been created`
             });
-            trackEvent(Submit.TeamCreate, {
+            trackEvent(Submit.MessagingTopicCreate, {
                 customId: !!id
             });
-            dispatch('created', team);
+            dispatch('created', topic);
         } catch (e) {
             error = e.message;
-            trackError(e, Submit.TeamCreate);
+            trackError(e, Submit.MessagingTopicCreate);
         }
     };
 
@@ -41,7 +53,7 @@
     }
 </script>
 
-<Modal title="Create team" {error} size="big" bind:show={showCreate} onSubmit={create}>
+<Modal title="Create topic" {error} size="big" bind:show={showCreate} onSubmit={create}>
     <FormList>
         <InputText
             id="name"
@@ -54,11 +66,11 @@
             <div>
                 <Pill button on:click={() => (showCustomId = !showCustomId)}
                     ><span class="icon-pencil" aria-hidden="true" />
-                    <span class="text"> Team ID </span>
+                    <span class="text"> Topic ID </span>
                 </Pill>
             </div>
         {:else}
-            <CustomId bind:show={showCustomId} name="Team" bind:id />
+            <CustomId bind:show={showCustomId} name="Topic" bind:id />
         {/if}
     </FormList>
     <svelte:fragment slot="footer">

From 5856b5161516a521ac427d1276e4a925426af630 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 30 Oct 2023 15:55:02 -0700
Subject: [PATCH 3/9] Add topic detail route

---
 src/lib/constants.ts                          |  3 +-
 .../topics/topic-[topic]/+layout.svelte       |  5 ++
 .../messaging/topics/topic-[topic]/+layout.ts | 30 +++++++++
 .../topics/topic-[topic]/+page.svelte         | 12 ++++
 .../topics/topic-[topic]/breadcrumbs.svelte   | 27 ++++++++
 .../topics/topic-[topic]/dangerZone.svelte    | 45 +++++++++++++
 .../topics/topic-[topic]/deleteTopic.svelte   | 56 ++++++++++++++++
 .../topics/topic-[topic]/details.svelte       | 19 ++++++
 .../topics/topic-[topic]/header.svelte        | 54 +++++++++++++++
 .../messaging/topics/topic-[topic]/store.ts   |  9 +++
 .../topics/topic-[topic]/updateName.svelte    | 66 +++++++++++++++++++
 11 files changed, 325 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/console/project-[project]/messaging/topics/topic-[topic]/+layout.svelte
 create mode 100644 src/routes/console/project-[project]/messaging/topics/topic-[topic]/+layout.ts
 create mode 100644 src/routes/console/project-[project]/messaging/topics/topic-[topic]/+page.svelte
 create mode 100644 src/routes/console/project-[project]/messaging/topics/topic-[topic]/breadcrumbs.svelte
 create mode 100644 src/routes/console/project-[project]/messaging/topics/topic-[topic]/dangerZone.svelte
 create mode 100644 src/routes/console/project-[project]/messaging/topics/topic-[topic]/deleteTopic.svelte
 create mode 100644 src/routes/console/project-[project]/messaging/topics/topic-[topic]/details.svelte
 create mode 100644 src/routes/console/project-[project]/messaging/topics/topic-[topic]/header.svelte
 create mode 100644 src/routes/console/project-[project]/messaging/topics/topic-[topic]/store.ts
 create mode 100644 src/routes/console/project-[project]/messaging/topics/topic-[topic]/updateName.svelte

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index c9868fdcd0..bcf4f966b2 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -49,7 +49,8 @@ export enum Dependencies {
     CONSOLE_VARIABLES = 'dependency:console_variables',
     MESSAGING_PROVIDERS = 'dependency:messaging_providers',
     MESSAGING_PROVIDER = 'dependency:messaging_provider',
-    MESSAGING_MESSAGE = 'dependency:messaging_message'
+    MESSAGING_MESSAGE = 'dependency:messaging_message',
+    MESSAGING_TOPIC = 'dependency:messaging_topic'
 }
 
 export const scopes: {
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/+layout.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/+layout.svelte
new file mode 100644
index 0000000000..525eedb90f
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/+layout.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+    <title>Topic - Appwrite</title>
+</svelte:head>
+
+<slot />
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/+layout.ts b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/+layout.ts
new file mode 100644
index 0000000000..594acc96ba
--- /dev/null
+++ b/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);
+    }
+};
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/+page.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/+page.svelte
new file mode 100644
index 0000000000..9776c07f37
--- /dev/null
+++ b/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>
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/breadcrumbs.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/breadcrumbs.svelte
new file mode 100644
index 0000000000..c41df553b9
--- /dev/null
+++ b/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} />
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/dangerZone.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/dangerZone.svelte
new file mode 100644
index 0000000000..113c2550cd
--- /dev/null
+++ b/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} />
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/deleteTopic.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/deleteTopic.svelte
new file mode 100644
index 0000000000..a3e4226e33
--- /dev/null
+++ b/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>
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/details.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/details.svelte
new file mode 100644
index 0000000000..1e81e5044e
--- /dev/null
+++ b/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>
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/header.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/header.svelte
new file mode 100644
index 0000000000..7b1998220f
--- /dev/null
+++ b/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>
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/store.ts b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/store.ts
new file mode 100644
index 0000000000..5678f26174
--- /dev/null
+++ b/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
+);
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/updateName.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/updateName.svelte
new file mode 100644
index 0000000000..dfc6dd1af4
--- /dev/null
+++ b/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>

From ece8ec7c9bdf0dd2abf33191550804d2272d649c Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Wed, 1 Nov 2023 16:41:03 -0700
Subject: [PATCH 4/9] Add subscribers list route

---
 src/lib/actions/analytics.ts                  |   1 +
 src/lib/constants.ts                          |   3 +-
 .../topics/topic-[topic]/header.svelte        |  10 +-
 .../topic-[topic]/subscribers/+page.svelte    | 173 ++++++++++++++++++
 .../topics/topic-[topic]/subscribers/+page.ts |  51 ++++++
 5 files changed, 232 insertions(+), 6 deletions(-)
 create mode 100644 src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.svelte
 create mode 100644 src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.ts

diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index 5d9a037c9b..78603fbe33 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -296,4 +296,5 @@ export enum Submit {
     MessagingTopicCreate = 'submit_messaging_topic_create',
     MessagingTopicDelete = 'submit_messaging_topic_delete',
     MessagingTopicUpdateName = 'submit_messaging_topic_update_name',
+    MessagingTopicSubscriberAdd = 'submit_messaging_topic_subscriber_add'
 }
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index bcf4f966b2..2c0a1a75d6 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -50,7 +50,8 @@ export enum Dependencies {
     MESSAGING_PROVIDERS = 'dependency:messaging_providers',
     MESSAGING_PROVIDER = 'dependency:messaging_provider',
     MESSAGING_MESSAGE = 'dependency:messaging_message',
-    MESSAGING_TOPIC = 'dependency:messaging_topic'
+    MESSAGING_TOPIC = 'dependency:messaging_topic',
+    MESSAGING_TOPIC_SUBSCRIBERS = 'dependency:messaging_topic_subscribers'
 }
 
 export const scopes: {
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/header.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/header.svelte
index 7b1998220f..660b177e71 100644
--- a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/header.svelte
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/header.svelte
@@ -14,11 +14,11 @@
             title: 'Overview',
             event: 'overview'
         },
-        // {
-        //     href: `${path}/memberships`,
-        //     title: 'Memberships',
-        //     event: 'memberships'
-        // },
+        {
+            href: `${path}/subscribers`,
+            title: 'Subscribers',
+            event: 'subscribers'
+        }
         // {
         //     href: `${path}/sessions`,
         //     title: 'Sessions',
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.svelte
new file mode 100644
index 0000000000..84fd06bf18
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.svelte
@@ -0,0 +1,173 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import {
+        TableHeader,
+        TableBody,
+        TableRowLink,
+        TableCellHead,
+        TableCellText,
+        TableCell,
+        TableScroll,
+    } from '$lib/elements/table';
+    import { Button } from '$lib/elements/forms';
+    import {
+        Empty,
+        EmptySearch,
+        SearchQuery,
+        PaginationWithLimit,
+        Heading,
+    } from '$lib/components';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { Container } from '$lib/layout';
+    import { base } from '$app/paths';
+    import { ID, type Models } from '@appwrite.io/console';
+    import type { PageData } from './$types';
+    import { writable } from 'svelte/store';
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import type { Subscriber } from './+page';
+
+    export let data: PageData;
+    let users = writable(new Map<string, Models.User<Models.Preferences>>());
+    let selectedSubscriber: Subscriber | null = null;
+    let showAdd = false;
+    let showDelete = false;
+
+    const project = $page.params.project;
+
+    async function add(event: CustomEvent<string[]>) {
+        const userIds = event.detail;
+
+        async function addSubscriber(userId: string) {
+            try {
+                await sdk.forProject.client.call(
+                    'POST',
+                    new URL(
+                        `${sdk.forProject.client.config.endpoint}/messaging/topics/${$page.params.topic}/subscribers`
+                    ),
+                    {
+                        'X-Appwrite-Project': sdk.forProject.client.config.project,
+                        'content-type': 'application/json',
+                        'X-Appwrite-Mode': 'admin'
+                    },
+                    {
+                        subscriberId: ID.unique(),
+                        topicId: $page.params.topic,
+                        targetId: userId
+                    }
+                );
+                trackEvent(Submit.MessagingTopicCreate);
+                await invalidate(Dependencies.MESSAGING_TOPIC_SUBSCRIBERS);
+            } catch (e) {
+                trackError(e, Submit.MessagingTopicCreate);
+            }
+        }
+
+        const promises = userIds.map(addSubscriber);
+
+        await Promise.all(promises);
+
+        showAdd = false;
+        addNotification({
+            type: 'success',
+            message: `Added ${userIds.length} subscriber${userIds.length > 1 ? 's' : ''} to topic}`
+        });
+    }
+
+    $: console.log($users);
+</script>
+
+<Container>
+    <div class="u-flex u-flex-vertical">
+        <div class="u-flex u-main-space-between">
+            <Heading tag="h2" size="5">Subscribers</Heading>
+            <div class="is-only-mobile">
+                <Button on:click={() => (showAdd = true)} event="create_subscriber">
+                    <span class="icon-plus" aria-hidden="true" />
+                    <span class="text">Create topic</span>
+                </Button>
+            </div>
+        </div>
+        <!-- TODO: fix width of search input in mobile -->
+        <SearchQuery search={data.search} placeholder="Search by name">
+            <div class="u-flex u-gap-16 is-not-mobile">
+                <Button on:click={() => (showAdd = true)} event="create_subscriber">
+                    <span class="icon-plus" aria-hidden="true" />
+                    <span class="text">Add subscriber</span>
+                </Button>
+            </div>
+        </SearchQuery>
+    </div>
+    {#if data.subscribers.total}
+        <TableScroll>
+            <TableHeader>
+                <TableCellHead>Name</TableCellHead>
+                <TableCellHead onlyDesktop>Created</TableCellHead>
+                <TableCellHead width={30} />
+            </TableHeader>
+            <TableBody>
+                {#each data.subscribers.subscribers as subscriber}
+                    {@const user = data.targetsById.get(subscriber.$id)}
+                    <TableRowLink
+                        href={`${base}/console/project-${project}/auth/users/user-${user.$id}`}>
+                        <!-- <TableCell title="ID">
+                            <Id value={topic.$id}>
+                                {topic.$id}
+                            </Id>
+                        </TableCell> -->
+                        <TableCell title="Name">
+                            {user.name ?? '-'}
+                        </TableCell>
+                        <TableCellText onlyDesktop title="Created">
+                            {toLocaleDateTime(subscriber.$createdAt)}
+                        </TableCellText>
+                        <TableCell>
+                            <button
+                                class="button is-only-icon is-text"
+                                aria-label="Delete item"
+                                on:click|preventDefault={() => {
+                                    selectedSubscriber = subscriber;
+                                    showDelete = true;
+                                    trackEvent('click_delete_subscriber');
+                                }}>
+                                <span class="icon-trash" aria-hidden="true" />
+                            </button>
+                        </TableCell>
+                    </TableRowLink>
+                {/each}
+            </TableBody>
+        </TableScroll>
+
+        <PaginationWithLimit
+            name="Subscribers"
+            limit={data.limit}
+            offset={data.offset}
+            total={data.subscribers.total} />
+        <!-- TODO: remove data.search != 'empty' when the API is ready with data -->
+    {:else if data.search && data.search != 'empty'}
+        <EmptySearch>
+            <div class="u-text-center">
+                <b>Sorry, we couldn't find '{data.search}'</b>
+                <p>There are no subscribers that match your search.</p>
+            </div>
+            <Button
+                secondary
+                href={`/console/project-${$page.params.project}/messaging/topics/topic-${$page.params.topic}/subscribers`}>
+                Clear Search
+            </Button>
+        </EmptySearch>
+    {:else}
+        <!-- TODO: update docs link -->
+        <Empty
+            single
+            on:click={() => (showAdd = true)}
+            href="https://appwrite.io/docs/references/cloud/client-web/teams"
+            target="subscriber" />
+    {/if}
+</Container>
+
+<!-- TODO: handle create -->
+<!-- <UserModal bind:show={showAdd} on:submit={add} bind:users /> -->
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.ts b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.ts
new file mode 100644
index 0000000000..cc5b47a476
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.ts
@@ -0,0 +1,51 @@
+import { sdk } from '$lib/stores/sdk';
+import { getLimit, getPage, getSearch, pageToOffset } from '$lib/helpers/load';
+import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+import type { Models } from '@appwrite.io/console';
+
+export type Subscriber = {
+    $id: string;
+    $createdAt: string;
+    targetId: string;
+    topicId: string;
+};
+
+export const load: PageLoad = async ({ params, url, route, depends }) => {
+    depends(Dependencies.MESSAGING_TOPIC_SUBSCRIBERS);
+    const page = getPage(url);
+    const limit = getLimit(url, route, PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
+    const search = getSearch(url);
+
+    // TODO: remove when the API is ready with data
+    // This allows us to mock w/ data and when search returns 0 results
+    const subscribers: { subscribers: Subscriber[]; total: number } =
+        await sdk.forProject.client.call(
+            'GET',
+            new URL(
+                `${sdk.forProject.client.config.endpoint}/messaging/topics/${params.topic}/subscribers`
+            ),
+            {
+                'X-Appwrite-Project': sdk.forProject.client.config.project,
+                'content-type': 'application/json',
+                'X-Appwrite-Mode': 'admin'
+            }
+        );
+
+    const targetsById = new Map<string, Models.User<Models.Preferences>>();
+    const userPromises = subscribers.subscribers.map((subscriber) =>
+        sdk.forProject.users.get(subscriber.targetId)
+    );
+    for await (const user of userPromises) {
+        targetsById.set(user.$id, user);
+    }
+
+    return {
+        offset,
+        limit,
+        search,
+        subscribers,
+        targetsById
+    };
+};

From dbad10b897eba367099717d951b32c3a8362561a Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Tue, 5 Dec 2023 14:56:27 +0100
Subject: [PATCH 5/9] Add support for adding a subscriber to a topic

---
 src/lib/actions/analytics.ts                  |   3 +-
 .../messaging/actions.svelte                  |  44 ++++
 .../project-[project]/messaging/store.ts      |  25 +++
 .../messaging/topics/+page.ts                 |  12 +-
 .../messaging/topics/topic-[topic]/store.ts   |   2 +-
 .../topic-[topic]/subscribers/+page.svelte    | 178 ++++++++--------
 .../topics/topic-[topic]/subscribers/+page.ts |  46 +++--
 .../topics/topic-[topic]/subscribers/store.ts |  11 +
 .../topic-[topic]/subscribers/table.svelte    | 191 ++++++++++++++++++
 .../messaging/topicsModal.svelte              | 167 +++++++++++++++
 .../messaging/userTargetsModal.svelte         |  14 +-
 11 files changed, 559 insertions(+), 134 deletions(-)
 create mode 100644 src/routes/console/project-[project]/messaging/actions.svelte
 create mode 100644 src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/store.ts
 create mode 100644 src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/table.svelte
 create mode 100644 src/routes/console/project-[project]/messaging/topicsModal.svelte

diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index 78603fbe33..9b6196be7c 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -296,5 +296,6 @@ export enum Submit {
     MessagingTopicCreate = 'submit_messaging_topic_create',
     MessagingTopicDelete = 'submit_messaging_topic_delete',
     MessagingTopicUpdateName = 'submit_messaging_topic_update_name',
-    MessagingTopicSubscriberAdd = 'submit_messaging_topic_subscriber_add'
+    MessagingTopicSubscriberAdd = 'submit_messaging_topic_subscriber_add',
+    MessagingTopicSubscriberDelete = 'submit_messaging_topic_subscriber_delete'
 }
diff --git a/src/routes/console/project-[project]/messaging/actions.svelte b/src/routes/console/project-[project]/messaging/actions.svelte
new file mode 100644
index 0000000000..bf2bb5b7bf
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/actions.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { DropList, DropListItem } from '$lib/components';
+    import { createEventDispatcher } from 'svelte';
+    import { targetsById } from './wizard/store';
+    import UserTargetsModal from './userTargetsModal.svelte';
+    import type { ProviderTypes } from './providerType.svelte';
+    import TopicsModal from './topicsModal.svelte';
+    import { topicsById } from './store';
+
+    export let showDropdown: boolean;
+    export let showUserTargets: boolean;
+    export let showTopics: boolean;
+    export let providerType: ProviderTypes = null;
+
+    const dispatch = createEventDispatcher();
+
+    $: if (showUserTargets || showTopics) {
+        showDropdown = false;
+    }
+</script>
+
+<DropList bind:show={showDropdown} placement="bottom-end" fixed>
+    <slot />
+    <svelte:fragment slot="list">
+        <DropListItem on:click={() => (showTopics = true)}>Select topics</DropListItem>
+        <DropListItem on:click={() => (showUserTargets = true)}>Select targets</DropListItem>
+    </svelte:fragment>
+</DropList>
+
+<TopicsModal
+    bind:show={showTopics}
+    bind:topicsById={$topicsById}
+    on:update={(e) => {
+        showTopics = false;
+        dispatch('addTopics', e.detail);
+    }} />
+<UserTargetsModal
+    {providerType}
+    bind:show={showUserTargets}
+    bind:targetsById={$targetsById}
+    on:update={(e) => {
+        showUserTargets = false;
+        dispatch('addTargets', e.detail);
+    }} />
diff --git a/src/routes/console/project-[project]/messaging/store.ts b/src/routes/console/project-[project]/messaging/store.ts
index 6a08966c05..d30c67b808 100644
--- a/src/routes/console/project-[project]/messaging/store.ts
+++ b/src/routes/console/project-[project]/messaging/store.ts
@@ -15,6 +15,9 @@ export const columns = writable<Column[]>([
     { id: 'deliveredAt', title: 'Delivered at', type: 'datetime', show: false, width: 120 }
 ]);
 
+export const targetsById = writable<Record<string, Target>>({});
+export const topicsById = writable<Record<string, Topic>>({});
+
 // TODO: remove this when the SDK and API are ready
 export type Message = {
     $id: string;
@@ -238,3 +241,25 @@ export const providersById: { [providerId: string]: Provider } = {
         options: {}
     }
 };
+
+// TODO: remove when sdk has the model
+export type Topic = {
+    $id: string;
+    $createdAt: string;
+    $updatedAt: string;
+    providerId: string;
+    name: string;
+    total: number;
+    description: string;
+};
+
+export type Target = {
+    $id: string;
+    $createdAt: string;
+    $updatedAt: string;
+    name: string;
+    userId: string;
+    providerId: string;
+    providerType: ProviderTypes;
+    identifier: string;
+};
diff --git a/src/routes/console/project-[project]/messaging/topics/+page.ts b/src/routes/console/project-[project]/messaging/topics/+page.ts
index ead3791dfa..08e899df61 100644
--- a/src/routes/console/project-[project]/messaging/topics/+page.ts
+++ b/src/routes/console/project-[project]/messaging/topics/+page.ts
@@ -3,17 +3,7 @@ import { sdk } from '$lib/stores/sdk';
 import { getLimit, getPage, getQuery, getSearch, pageToOffset } from '$lib/helpers/load';
 import { PAGE_LIMIT } from '$lib/constants';
 import { queryParamToMap, queries } from '$lib/components/filters/store';
-
-// TODO: remove when sdk has the model
-export type Topic = {
-    $id: string;
-    $createdAt: string;
-    $updatedAt: string;
-    providerId: string;
-    name: string;
-    total: number;
-    description: string;
-};
+import type { Topic } from '../store';
 
 export const load = async ({ url, route }) => {
     const page = getPage(url);
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/store.ts b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/store.ts
index 5678f26174..a2379dadd2 100644
--- a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/store.ts
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/store.ts
@@ -1,6 +1,6 @@
 import { derived } from 'svelte/store';
 import { page } from '$app/stores';
-import type { Topic } from '../+page';
+import type { Topic } from '../../store';
 
 export const topic = derived(
     page,
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.svelte
index 84fd06bf18..02aef8a3e0 100644
--- a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.svelte
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.svelte
@@ -1,14 +1,5 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import {
-        TableHeader,
-        TableBody,
-        TableRowLink,
-        TableCellHead,
-        TableCellText,
-        TableCell,
-        TableScroll,
-    } from '$lib/elements/table';
     import { Button } from '$lib/elements/forms';
     import {
         Empty,
@@ -16,68 +7,83 @@
         SearchQuery,
         PaginationWithLimit,
         Heading,
+        ViewSelector
     } from '$lib/components';
-    import { toLocaleDateTime } from '$lib/helpers/date';
     import { Container } from '$lib/layout';
-    import { base } from '$app/paths';
-    import { ID, type Models } from '@appwrite.io/console';
+    import { ID } from '@appwrite.io/console';
     import type { PageData } from './$types';
-    import { writable } from 'svelte/store';
     import { sdk } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
+    import Table from './table.svelte';
+    import { type Target, targetsById } from '../../../store';
+    import UserTargetsModal from '../../../userTargetsModal.svelte';
+    import { onMount } from 'svelte';
     import type { Subscriber } from './+page';
+    import Filters from '$lib/components/filters/filters.svelte';
+    import { columns } from './store';
+    import { View } from '$lib/helpers/load';
 
     export let data: PageData;
-    let users = writable(new Map<string, Models.User<Models.Preferences>>());
-    let selectedSubscriber: Subscriber | null = null;
     let showAdd = false;
-    let showDelete = false;
-
-    const project = $page.params.project;
-
-    async function add(event: CustomEvent<string[]>) {
-        const userIds = event.detail;
+    let subscribersByTargetId: Record<string, Subscriber> = {};
 
-        async function addSubscriber(userId: string) {
-            try {
-                await sdk.forProject.client.call(
-                    'POST',
-                    new URL(
-                        `${sdk.forProject.client.config.endpoint}/messaging/topics/${$page.params.topic}/subscribers`
-                    ),
-                    {
-                        'X-Appwrite-Project': sdk.forProject.client.config.project,
-                        'content-type': 'application/json',
-                        'X-Appwrite-Mode': 'admin'
-                    },
-                    {
-                        subscriberId: ID.unique(),
-                        topicId: $page.params.topic,
-                        targetId: userId
-                    }
-                );
-                trackEvent(Submit.MessagingTopicCreate);
-                await invalidate(Dependencies.MESSAGING_TOPIC_SUBSCRIBERS);
-            } catch (e) {
-                trackError(e, Submit.MessagingTopicCreate);
-            }
+    onMount(() => {
+        $targetsById = {};
+        for (const subscriber of $page.data.subscribers.subscribers) {
+            const { target } = subscriber;
+            $targetsById[target.$id] = target;
+            subscribersByTargetId[target.$id] = subscriber;
         }
+    });
 
-        const promises = userIds.map(addSubscriber);
+    async function addTargets(event: CustomEvent<Record<string, Target>>) {
+        showAdd = false;
+        $targetsById = event.detail;
+        async function addSubscriber(targetId: string) {
+            await sdk.forProject.client.call(
+                'POST',
+                new URL(
+                    `${sdk.forProject.client.config.endpoint}/messaging/topics/${$page.params.topic}/subscribers`
+                ),
+                {
+                    'X-Appwrite-Project': sdk.forProject.client.config.project,
+                    'content-type': 'application/json',
+                    'X-Appwrite-Mode': 'admin'
+                },
+                {
+                    subscriberId: ID.unique(),
+                    topicId: $page.params.topic,
+                    targetId: targetId
+                }
+            );
+        }
 
-        await Promise.all(promises);
+        const targetIds = Object.keys($targetsById).filter(
+            (targetId) => !(targetId in subscribersByTargetId)
+        );
+        const promises = targetIds.map(addSubscriber);
 
-        showAdd = false;
-        addNotification({
-            type: 'success',
-            message: `Added ${userIds.length} subscriber${userIds.length > 1 ? 's' : ''} to topic}`
-        });
+        try {
+            await Promise.all(promises);
+            addNotification({
+                type: 'success',
+                message: `Added ${targetIds.length} subscriber${
+                    targetIds.length > 1 ? 's' : ''
+                } to topic`
+            });
+            trackEvent(Submit.MessagingTopicSubscriberAdd);
+            await invalidate(Dependencies.MESSAGING_TOPIC_SUBSCRIBERS);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.MessagingTopicSubscriberAdd);
+        }
     }
-
-    $: console.log($users);
 </script>
 
 <Container>
@@ -87,59 +93,44 @@
             <div class="is-only-mobile">
                 <Button on:click={() => (showAdd = true)} event="create_subscriber">
                     <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Create topic</span>
+                    <span class="text">Add subscriber</span>
                 </Button>
             </div>
         </div>
         <!-- TODO: fix width of search input in mobile -->
         <SearchQuery search={data.search} placeholder="Search by name">
             <div class="u-flex u-gap-16 is-not-mobile">
+                <Filters query={data.query} {columns} />
+                <ViewSelector
+                    view={View.Table}
+                    {columns}
+                    hideView
+                    allowNoColumns
+                    showColsTextMobile />
                 <Button on:click={() => (showAdd = true)} event="create_subscriber">
                     <span class="icon-plus" aria-hidden="true" />
                     <span class="text">Add subscriber</span>
                 </Button>
             </div>
         </SearchQuery>
+        <div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
+            <div class="u-flex-basis-50-percent">
+                <!-- TODO: fix width -->
+                <ViewSelector
+                    view={View.Table}
+                    {columns}
+                    hideView
+                    allowNoColumns
+                    showColsTextMobile />
+            </div>
+            <div class="u-flex-basis-50-percent">
+                <!-- TODO: fix width -->
+                <Filters query={data.query} {columns} />
+            </div>
+        </div>
     </div>
     {#if data.subscribers.total}
-        <TableScroll>
-            <TableHeader>
-                <TableCellHead>Name</TableCellHead>
-                <TableCellHead onlyDesktop>Created</TableCellHead>
-                <TableCellHead width={30} />
-            </TableHeader>
-            <TableBody>
-                {#each data.subscribers.subscribers as subscriber}
-                    {@const user = data.targetsById.get(subscriber.$id)}
-                    <TableRowLink
-                        href={`${base}/console/project-${project}/auth/users/user-${user.$id}`}>
-                        <!-- <TableCell title="ID">
-                            <Id value={topic.$id}>
-                                {topic.$id}
-                            </Id>
-                        </TableCell> -->
-                        <TableCell title="Name">
-                            {user.name ?? '-'}
-                        </TableCell>
-                        <TableCellText onlyDesktop title="Created">
-                            {toLocaleDateTime(subscriber.$createdAt)}
-                        </TableCellText>
-                        <TableCell>
-                            <button
-                                class="button is-only-icon is-text"
-                                aria-label="Delete item"
-                                on:click|preventDefault={() => {
-                                    selectedSubscriber = subscriber;
-                                    showDelete = true;
-                                    trackEvent('click_delete_subscriber');
-                                }}>
-                                <span class="icon-trash" aria-hidden="true" />
-                            </button>
-                        </TableCell>
-                    </TableRowLink>
-                {/each}
-            </TableBody>
-        </TableScroll>
+        <Table {data} />
 
         <PaginationWithLimit
             name="Subscribers"
@@ -169,5 +160,4 @@
     {/if}
 </Container>
 
-<!-- TODO: handle create -->
-<!-- <UserModal bind:show={showAdd} on:submit={add} bind:users /> -->
+<UserTargetsModal bind:show={showAdd} bind:targetsById={$targetsById} on:update={addTargets} />
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.ts b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.ts
index cc5b47a476..fe22003d8e 100644
--- a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.ts
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.ts
@@ -1,22 +1,46 @@
+import { Query } from '@appwrite.io/console';
 import { sdk } from '$lib/stores/sdk';
-import { getLimit, getPage, getSearch, pageToOffset } from '$lib/helpers/load';
+import { getLimit, getPage, getQuery, getSearch, pageToOffset } from '$lib/helpers/load';
 import { Dependencies, PAGE_LIMIT } from '$lib/constants';
 import type { PageLoad } from './$types';
-import type { Models } from '@appwrite.io/console';
+import type { Target } from '../../../store';
+import { queryParamToMap, queries } from '$lib/components/filters/store';
 
 export type Subscriber = {
     $id: string;
     $createdAt: string;
+    $updatedAt: string;
     targetId: string;
+    target: Target;
+    userName: string;
     topicId: string;
 };
 
-export const load: PageLoad = async ({ params, url, route, depends }) => {
+export const load: PageLoad = async ({ params, url, route, depends, parent }) => {
     depends(Dependencies.MESSAGING_TOPIC_SUBSCRIBERS);
     const page = getPage(url);
     const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
     const search = getSearch(url);
+    const query = getQuery(url);
+
+    const parsedQueries = queryParamToMap(query || '[]');
+    queries.set(parsedQueries);
+
+    const payload = {
+        queries: [
+            Query.limit(limit),
+            Query.offset(offset),
+            Query.orderDesc(''),
+            ...parsedQueries.values()
+        ]
+    };
+
+    if (search) {
+        payload['search'] = search;
+    }
+
+    const { topic } = await parent();
 
     // TODO: remove when the API is ready with data
     // This allows us to mock w/ data and when search returns 0 results
@@ -30,22 +54,16 @@ export const load: PageLoad = async ({ params, url, route, depends }) => {
                 'X-Appwrite-Project': sdk.forProject.client.config.project,
                 'content-type': 'application/json',
                 'X-Appwrite-Mode': 'admin'
-            }
+            },
+            payload
         );
 
-    const targetsById = new Map<string, Models.User<Models.Preferences>>();
-    const userPromises = subscribers.subscribers.map((subscriber) =>
-        sdk.forProject.users.get(subscriber.targetId)
-    );
-    for await (const user of userPromises) {
-        targetsById.set(user.$id, user);
-    }
-
     return {
         offset,
         limit,
         search,
-        subscribers,
-        targetsById
+        query,
+        topic,
+        subscribers
     };
 };
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/store.ts b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/store.ts
new file mode 100644
index 0000000000..014bca76cf
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/store.ts
@@ -0,0 +1,11 @@
+import type { Column } from '$lib/helpers/types';
+import { writable } from 'svelte/store';
+
+export const columns = writable<Column[]>([
+    { id: '$id', title: 'Subscriber ID', type: 'string', show: true, width: 140 },
+    { id: 'userName', title: 'Name', type: 'string', show: true, width: 100 },
+    { id: 'targetId', title: 'Target ID', type: 'string', show: true, width: 140 },
+    { id: 'target', title: 'Target', type: 'string', show: true, width: 140 },
+    { id: 'type', title: 'Type', type: 'string', show: true, width: 80 },
+    { id: '$createdAt', title: 'Created', type: 'string', show: true, width: 100 }
+]);
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/table.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/table.svelte
new file mode 100644
index 0000000000..13fbbf7f0a
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/table.svelte
@@ -0,0 +1,191 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { FloatingActionBar, Id, Modal } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
+    import {
+        TableBody,
+        TableCell,
+        TableCellCheck,
+        TableCellHead,
+        TableCellHeadCheck,
+        TableCellText,
+        TableHeader,
+        TableRowLink,
+        TableScroll
+    } from '$lib/elements/table';
+    import { addNotification } from '$lib/stores/notifications';
+    import type { PageData } from './$types';
+    import { columns } from './store';
+    import ProviderType, { ProviderTypes } from '../../../providerType.svelte';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { project } from '$routes/console/project-[project]/store';
+    import { sdk } from '$lib/stores/sdk';
+    import { page } from '$app/stores';
+    import { targetsById } from '../../../store';
+    import type { Subscriber } from './+page';
+
+    export let data: PageData;
+
+    let subscribers: Record<string, Subscriber> = {};
+    let selectedIds: string[] = [];
+    let selected: Record<string, Subscriber> = {};
+    let showDelete = false;
+    let deleting = false;
+
+    async function handleDelete() {
+        showDelete = false;
+
+        async function deleteSubscriber(subscriberId: string) {
+            await sdk.forProject.client.call(
+                'DELETE',
+                new URL(
+                    `${sdk.forProject.client.config.endpoint}/messaging/topics/${$page.params.topic}/subscribers/${subscriberId}`
+                ),
+                {
+                    'X-Appwrite-Project': sdk.forProject.client.config.project,
+                    'content-type': 'application/json',
+                    'X-Appwrite-Mode': 'admin'
+                }
+            );
+            const { target } = subscribers[subscriberId];
+            const { [target.$id]: _, ...rest } = $targetsById;
+            $targetsById = rest;
+        }
+
+        const promises = selectedIds.map((id) => deleteSubscriber(id));
+
+        try {
+            await Promise.all(promises);
+            trackEvent(Submit.MessagingTopicSubscriberDelete, {
+                total: selectedIds.length
+            });
+            addNotification({
+                type: 'success',
+                message: `${selectedIds.length} subscriber${
+                    selectedIds.length > 1 ? 's' : ''
+                } deleted`
+            });
+            invalidate(Dependencies.MESSAGING_TOPIC_SUBSCRIBERS);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.MessagingTopicSubscriberDelete);
+        } finally {
+            selectedIds = [];
+            showDelete = false;
+        }
+    }
+
+    $: data.subscribers.subscribers.forEach((s) => {
+        subscribers[s.$id] = s;
+    });
+    $: selectedIds.forEach((id) => {
+        selected[id] = subscribers[id];
+    });
+</script>
+
+<TableScroll>
+    <TableHeader>
+        <TableCellHeadCheck
+            bind:selected={selectedIds}
+            pageItemsIds={data.subscribers.subscribers.map((d) => d.$id)} />
+        {#each $columns as column}
+            {#if column.show}
+                <TableCellHead width={column.width}>{column.title}</TableCellHead>
+            {/if}
+        {/each}
+    </TableHeader>
+    <TableBody>
+        {#each data.subscribers.subscribers as subscriber (subscriber.$id)}
+            {@const target = subscriber.target}
+            <TableRowLink
+                href={`${base}/console/project-${$project.$id}/auth/user-${subscriber.target.userId}`}>
+                <TableCellCheck bind:selectedIds id={subscriber.$id} />
+
+                {#each $columns as column}
+                    {#if column.show}
+                        {#if column.id === '$id'}
+                            {#key $columns}
+                                <TableCell title="Subscriber ID">
+                                    <Id value={subscriber.$id}>
+                                        {subscriber.$id}
+                                    </Id>
+                                </TableCell>
+                            {/key}
+                        {:else if column.id === 'targetId'}
+                            <TableCell title={column.title}>
+                                <Id value={subscriber[column.id]}>
+                                    {subscriber[column.id]}
+                                </Id>
+                            </TableCell>
+                        {:else if column.id === 'target'}
+                            <TableCell title={column.title}>
+                                {#if target.providerType === ProviderTypes.Push}
+                                    {target.name}
+                                {:else}
+                                    {target.identifier}
+                                {/if}
+                            </TableCell>
+                        {:else if column.id === 'type'}
+                            <TableCellText title={column.title} width={column.width}>
+                                <ProviderType type={subscriber.target.providerType} size="s" />
+                            </TableCellText>
+                        {:else if column.id === '$createdAt'}
+                            <TableCellText title={column.title} width={column.width}>
+                                {toLocaleDateTime(subscriber[column.id])}
+                            </TableCellText>
+                        {:else}
+                            <TableCellText title={column.title} width={column.width}>
+                                {subscriber[column.id]}
+                            </TableCellText>
+                        {/if}
+                    {/if}
+                {/each}
+            </TableRowLink>
+        {/each}
+    </TableBody>
+</TableScroll>
+
+<FloatingActionBar show={selectedIds.length > 0}>
+    <div class="u-flex u-cross-center u-main-space-between actions">
+        <div class="u-flex u-cross-center u-gap-8">
+            <span class="indicator body-text-2 u-bold">{selectedIds.length}</span>
+            <p>
+                <span class="is-only-desktop">
+                    {selectedIds.length > 1 ? 'subscribers' : 'subscriber'}
+                </span>
+                selected
+            </p>
+        </div>
+
+        <div class="u-flex u-cross-center u-gap-8">
+            <Button text on:click={() => (selectedIds = [])}>Cancel</Button>
+            <Button secondary on:click={() => (showDelete = true)}>
+                <p>Delete</p>
+            </Button>
+        </div>
+    </div>
+</FloatingActionBar>
+
+<Modal
+    title="Delete subscriber"
+    icon="exclamation"
+    state="warning"
+    bind:show={showDelete}
+    onSubmit={handleDelete}
+    headerDivider={false}
+    closable={!deleting}>
+    <p class="text" data-private>
+        Are you sure you want to delete <b>{selectedIds.length}</b>
+        {selectedIds.length > 1 ? 'subscribers' : 'subscriber'}?
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)} disabled={deleting}>Cancel</Button>
+        <Button secondary submit disabled={deleting}>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/messaging/topicsModal.svelte b/src/routes/console/project-[project]/messaging/topicsModal.svelte
new file mode 100644
index 0000000000..f1141b26e0
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/topicsModal.svelte
@@ -0,0 +1,167 @@
+<script lang="ts">
+    import { Button, InputCheckbox, InputSearch } from '$lib/elements/forms';
+    import { createEventDispatcher } from 'svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { Query } from '@appwrite.io/console';
+    import { EmptySearch, Modal, PaginationInline } from '$lib/components';
+    import type { Topic } from './store';
+
+    export let show: boolean;
+    export let topicsById: Record<string, Topic>;
+    export let title = 'Select topics';
+
+    const dispatch = createEventDispatcher();
+
+    let search = '';
+    let offset = 0;
+    let totalResults = 0;
+    let topicResultsById: Record<string, Topic> = {}; // use a hash map so we can quickly look up a user by id
+    let selected: Record<string, Topic> = {};
+    let hasSelection = false;
+
+    function reset() {
+        offset = 0;
+        search = '';
+    }
+
+    function submit() {
+        dispatch('update', selected);
+        reset();
+    }
+
+    async function request() {
+        if (!show) return;
+        const queries = [Query.limit(5), Query.offset(offset)];
+
+        const params = {
+            queries
+        };
+
+        if (search) {
+            params['search'] = search;
+        }
+
+        // TODO: replace with sdk.forProject.users.list once User type has targets
+        const response = await sdk.forProject.client.call(
+            'GET',
+            new URL(sdk.forProject.client.config.endpoint + '/messaging/topics'),
+            {
+                'X-Appwrite-Project': sdk.forProject.client.config.project,
+                'content-type': 'application/json',
+                'X-Appwrite-Mode': 'admin'
+            },
+            params
+        );
+
+        totalResults = response.total;
+        topicResultsById = {};
+        response.topics.forEach((topic) => {
+            topicResultsById = {
+                ...topicResultsById,
+                [topic.$id]: topic
+            };
+        });
+    }
+
+    function onTopicSelection(event: Event, topic: Topic) {
+        const { checked } = event.currentTarget as HTMLInputElement;
+
+        if (checked) {
+            selected = {
+                ...selected,
+                [topic.$id]: topic
+            };
+        } else {
+            const { [topic.$id]: _, ...rest } = selected;
+            selected = rest;
+        }
+    }
+
+    $: if (show) {
+        request();
+    }
+    $: if (offset !== null) {
+        request();
+    }
+    $: if (search !== null) {
+        offset = 0;
+        request();
+    }
+
+    $: selectedSize = Object.keys(selected).length;
+
+    $: hasSelection = selectedSize > 0;
+
+    $: if (show) {
+        selected = topicsById;
+    }
+</script>
+
+<Modal {title} bind:show onSubmit={submit} on:close={reset} size="big">
+    <p class="text">Select existing topics you want to send this message to its recipients.</p>
+    <InputSearch
+        autofocus
+        disabled={totalResults === 0 && !search}
+        placeholder="Search for topics"
+        bind:value={search} />
+    {#if Object.keys(topicResultsById).length > 0}
+        {#each Object.entries(topicResultsById) as [topicId, topic]}
+            <InputCheckbox
+                id={topicId}
+                disabled={!!topicsById[topicId]}
+                checked={!!selected[topicId]}
+                on:change={(event) => onTopicSelection(event, topic)}>
+                <svelte:fragment slot="description">
+                    <span class="title"
+                        ><span class="u-line-height-1-5">
+                            <span class="body-text-2 u-bold" data-private>
+                                {topic.name}
+                            </span><span class="collapsible-button-optional"
+                                >({topic.total} subscribers)</span>
+                        </span></span>
+                </svelte:fragment>
+            </InputCheckbox>
+        {/each}
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <p class="text">Total results: {totalResults}</p>
+            <PaginationInline limit={5} bind:offset sum={totalResults} hidePages />
+        </div>
+    {:else if search}
+        <EmptySearch hidePages>
+            <div class="common-section">
+                <div class="u-text-center common-section">
+                    <b class="body-text-2 u-bold">Sorry we couldn't find "{search}"</b>
+                    <p>There are no topics that match your search.</p>
+                </div>
+                <div class="u-flex u-gap-16 common-section u-main-center">
+                    <Button external href="https://appwrite.io/docs/products/auth/accounts" text
+                        >Documentation</Button>
+                    <Button secondary on:click={() => (search = '')}>Clear search</Button>
+                </div>
+            </div>
+        </EmptySearch>
+    {:else}
+        <EmptySearch hidePages>
+            <div class="common-section">
+                <div class="u-text-center common-section">
+                    <p class="text u-line-height-1-5">
+                        You have no topics. Create a topic to see them here.
+                    </p>
+                    <!-- TODO: link to topics docs -->
+                    <p class="text u-line-height-1-5">
+                        Need a hand? Learn more in our <a
+                            href="https://appwrite.io/docs/products/auth/quick-start"
+                            target="_blank"
+                            rel="noopener noreferrer">
+                            documentation</a
+                        >.
+                    </p>
+                </div>
+            </div>
+        </EmptySearch>
+    {/if}
+
+    <svelte:fragment slot="footer">
+        <Button submit disabled={!hasSelection}>Add</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/messaging/userTargetsModal.svelte b/src/routes/console/project-[project]/messaging/userTargetsModal.svelte
index fad9a00226..878e77a277 100644
--- a/src/routes/console/project-[project]/messaging/userTargetsModal.svelte
+++ b/src/routes/console/project-[project]/messaging/userTargetsModal.svelte
@@ -1,16 +1,3 @@
-<script context="module" lang="ts">
-    export type Target = {
-        $id: string;
-        $createdAt: string;
-        $updatedAt: string;
-        name: string;
-        userId: string;
-        providerId: string;
-        providerType: ProviderTypes;
-        identifier: string;
-    };
-</script>
-
 <script lang="ts">
     import { Button, FormList, InputCheckbox, InputSearch } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
@@ -24,6 +11,7 @@
         Modal,
         PaginationInline
     } from '$lib/components';
+    import type { Target } from './store';
 
     export let show: boolean;
     export let targetsById: Record<string, Target>;

From 8e789b6e6c8161ef403f301ca09a080923052542 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Wed, 6 Dec 2023 10:28:00 +0100
Subject: [PATCH 6/9] Update the create message wizard to support topics

---
 .../project-[project]/messaging/create.svelte |  5 --
 .../messaging/createMessageDropdown.svelte    |  2 +
 .../messaging/wizard/step2.svelte             | 85 +++++++++++++++----
 .../messaging/wizard/store.ts                 |  2 +-
 4 files changed, 71 insertions(+), 23 deletions(-)

diff --git a/src/routes/console/project-[project]/messaging/create.svelte b/src/routes/console/project-[project]/messaging/create.svelte
index feeb993e42..52e96a0292 100644
--- a/src/routes/console/project-[project]/messaging/create.svelte
+++ b/src/routes/console/project-[project]/messaging/create.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { onDestroy } from 'svelte';
     import { Wizard } from '$lib/layout';
     import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import Step1 from './wizard/step1.svelte';
@@ -97,10 +96,6 @@
         }
     }
 
-    onDestroy(() => {
-        console.log('destroy');
-    });
-
     const stepsComponents: WizardStepsType = new Map();
     stepsComponents.set(1, {
         label: 'Message',
diff --git a/src/routes/console/project-[project]/messaging/createMessageDropdown.svelte b/src/routes/console/project-[project]/messaging/createMessageDropdown.svelte
index 48d69abfd6..30d297df05 100644
--- a/src/routes/console/project-[project]/messaging/createMessageDropdown.svelte
+++ b/src/routes/console/project-[project]/messaging/createMessageDropdown.svelte
@@ -6,6 +6,7 @@
     import Create from './create.svelte';
     import { messageParams, providerType, targetsById } from './wizard/store';
     import { ProviderTypes } from './providerType.svelte';
+    import { topicsById } from './store';
 
     export let showCreateDropdown = false;
 </script>
@@ -29,6 +30,7 @@
                     )
                         return;
                     $providerType = type;
+                    $topicsById = {};
                     $targetsById = {};
                     const common = {
                         topics: [],
diff --git a/src/routes/console/project-[project]/messaging/wizard/step2.svelte b/src/routes/console/project-[project]/messaging/wizard/step2.svelte
index 3b1c0433fa..cb456bc95e 100644
--- a/src/routes/console/project-[project]/messaging/wizard/step2.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/step2.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { Card } from '$lib/components';
-    import UserTargetsModal, { type Target } from '../userTargetsModal.svelte';
     import { Button } from '$lib/elements/forms';
     import {
         Table,
@@ -12,11 +11,26 @@
     } from '$lib/elements/table';
     import { WizardStep } from '$lib/layout';
     import { messageParams, providerType, targetsById } from './store';
+    import Actions from '../actions.svelte';
+    import { topicsById, type Target, type Topic } from '../store';
 
     let showDropdown = false;
+    let showTopics = false;
+    let showUserTargets = false;
     let targetIdsLength = 0;
+    let topicIdsLength = 0;
 
-    function update(event: CustomEvent<Record<string, Target>>) {
+    function addTopics(event: CustomEvent<Record<string, Topic>>) {
+        $topicsById = event.detail;
+        showDropdown = false;
+    }
+
+    function removeTopic(topicId: string) {
+        const { [topicId]: _, ...rest } = $topicsById;
+        $topicsById = rest;
+    }
+
+    function addTargets(event: CustomEvent<Record<string, Target>>) {
         $targetsById = event.detail;
         showDropdown = false;
     }
@@ -28,11 +42,12 @@
 
     async function beforeSubmit() {
         $messageParams[$providerType].targets = Object.keys($targetsById);
+        $messageParams[$providerType].topics = Object.keys($topicsById);
         console.log($messageParams[$providerType]);
     }
 
+    $: topicIdsLength = Object.keys($topicsById).length;
     $: targetIdsLength = Object.keys($targetsById).length;
-    $: console.log(targetIdsLength);
 </script>
 
 <WizardStep {beforeSubmit}>
@@ -40,12 +55,20 @@
     <!-- TODO: add support for topics -->
     <svelte:fragment slot="subtitle"
         >Select users to whom this message should be directed.</svelte:fragment>
-    {#if targetIdsLength == 0}
+    {#if targetIdsLength === 0 && topicIdsLength === 0}
         <Card>
             <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
-                <Button secondary round on:click={() => (showDropdown = !showDropdown)}>
-                    <i class="icon-plus" />
-                </Button>
+                <Actions
+                    providerType={$providerType}
+                    bind:showDropdown
+                    bind:showUserTargets
+                    bind:showTopics
+                    on:addTargets={addTargets}
+                    on:addTopics={addTopics}>
+                    <Button secondary round on:click={() => (showDropdown = !showDropdown)}>
+                        <i class="icon-plus" />
+                    </Button>
+                </Actions>
                 <div class="common-section">
                     <span class="text"> Select recipients to get started</span>
                 </div>
@@ -59,6 +82,32 @@
                     <TableCellHead width={32} />
                 </TableHeader>
                 <TableBody>
+                    {#each Object.entries($topicsById) as [topicId, topic] (topicId)}
+                        <TableRow>
+                            <TableCell title="Target">
+                                <div class="u-flex u-cross-center">
+                                    <span class="title"
+                                        ><span class="u-line-height-1-5">
+                                            <span class="body-text-2 u-bold" data-private>
+                                                {topic.name}
+                                            </span><span class="collapsible-button-optional"
+                                                >({topic.total} subscribers)</span>
+                                        </span></span>
+                                </div>
+                            </TableCell>
+                            <TableCell title="Remove" width={40}>
+                                <div class="u-flex u-main-end">
+                                    <button
+                                        class="button is-text is-only-icon"
+                                        type="button"
+                                        aria-label="delete"
+                                        on:click={() => removeTopic(topicId)}>
+                                        <span class="icon-x" aria-hidden="true" />
+                                    </button>
+                                </div>
+                            </TableCell>
+                        </TableRow>
+                    {/each}
                     {#each Object.entries($targetsById) as [targetId, target] (targetId)}
                         <TableRow>
                             <TableCell title="Target">
@@ -84,15 +133,17 @@
                 </TableBody>
             </Table>
         </div>
-        <Button text noMargin on:click={() => (showDropdown = !showDropdown)}>
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Add target</span>
-        </Button>
+        <Actions
+            providerType={$providerType}
+            bind:showDropdown
+            bind:showUserTargets
+            bind:showTopics
+            on:addTargets={addTargets}
+            on:addTopics={addTopics}>
+            <Button text noMargin on:click={() => (showDropdown = !showDropdown)}>
+                <span class="icon-plus" aria-hidden="true" />
+                <span class="text">Add</span>
+            </Button>
+        </Actions>
     {/if}
 </WizardStep>
-
-<UserTargetsModal
-    providerType={$providerType}
-    bind:show={showDropdown}
-    bind:targetsById={$targetsById}
-    on:update={update} />
diff --git a/src/routes/console/project-[project]/messaging/wizard/store.ts b/src/routes/console/project-[project]/messaging/wizard/store.ts
index df3fecdcec..3b02644524 100644
--- a/src/routes/console/project-[project]/messaging/wizard/store.ts
+++ b/src/routes/console/project-[project]/messaging/wizard/store.ts
@@ -1,6 +1,6 @@
 import { ProviderTypes } from '../providerType.svelte';
-import type { Target } from '../userTargetsModal.svelte';
 import { writable } from 'svelte/store';
+import type { Target } from '../store';
 
 export enum MessageStatuses {
     DRAFT = 'draft',

From 9b84ea5947e4ccba4b12c3a09b6e835fe261dff3 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Thu, 14 Dec 2023 10:54:42 -0800
Subject: [PATCH 7/9] Refactor topics table and add bulk delete

---
 src/lib/constants.ts                          |   1 +
 .../messaging/topics/+page.svelte             |  60 +------
 .../messaging/topics/+page.ts                 |   5 +-
 .../messaging/topics/table.svelte             | 154 ++++++++++++++++++
 4 files changed, 160 insertions(+), 60 deletions(-)
 create mode 100644 src/routes/console/project-[project]/messaging/topics/table.svelte

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 2c0a1a75d6..da342ce92c 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -50,6 +50,7 @@ export enum Dependencies {
     MESSAGING_PROVIDERS = 'dependency:messaging_providers',
     MESSAGING_PROVIDER = 'dependency:messaging_provider',
     MESSAGING_MESSAGE = 'dependency:messaging_message',
+    MESSAGING_TOPICS = 'dependency:messaging_topics',
     MESSAGING_TOPIC = 'dependency:messaging_topic',
     MESSAGING_TOPIC_SUBSCRIBERS = 'dependency:messaging_topic_subscribers'
 }
diff --git a/src/routes/console/project-[project]/messaging/topics/+page.svelte b/src/routes/console/project-[project]/messaging/topics/+page.svelte
index 1a990e8b88..a31adb1659 100644
--- a/src/routes/console/project-[project]/messaging/topics/+page.svelte
+++ b/src/routes/console/project-[project]/messaging/topics/+page.svelte
@@ -1,16 +1,5 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import {
-        TableHeader,
-        TableBody,
-        TableRowLink,
-        TableCellHead,
-        TableCellText,
-        TableCell,
-        TableCellHeadCheck,
-        TableScroll,
-        TableCellCheck
-    } from '$lib/elements/table';
     import { Button } from '$lib/elements/forms';
     import {
         Empty,
@@ -18,12 +7,10 @@
         SearchQuery,
         PaginationWithLimit,
         Heading,
-        Id,
         ViewSelector
     } from '$lib/components';
     import Create from './create.svelte';
     import { goto } from '$app/navigation';
-    import { toLocaleDateTime } from '$lib/helpers/date';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
     import type { Models } from '@appwrite.io/console';
@@ -31,9 +18,9 @@
     import { columns, showCreate } from './store';
     import { View } from '$lib/helpers/load';
     import Filters from '$lib/components/filters/filters.svelte';
+    import Table from './table.svelte';
 
     export let data: PageData;
-    let selected: string[] = [];
 
     const project = $page.params.project;
     const topicCreated = async (event: CustomEvent<Models.Team<Record<string, unknown>>>) => {
@@ -85,50 +72,7 @@
         </div>
     </div>
     {#if data.topics.total}
-        <TableScroll>
-            <TableHeader>
-                <TableCellHeadCheck
-                    bind:selected
-                    pageItemsIds={data.topics.topics.map((d) => d.$id)} />
-                {#each $columns as column}
-                    {#if column.show}
-                        <TableCellHead width={column.width}>{column.title}</TableCellHead>
-                    {/if}
-                {/each}
-            </TableHeader>
-            <TableBody>
-                {#each data.topics.topics as topic (topic.$id)}
-                    <TableRowLink
-                        href={`${base}/console/project-${project}/messaging/topics/topic-${topic.$id}`}>
-                        <TableCellCheck bind:selectedIds={selected} id={topic.$id} />
-
-                        {#each $columns as column (column.id)}
-                            {#if column.show}
-                                {#if column.id === '$id'}
-                                    {#key $columns}
-                                        <TableCell title={column.title} width={column.width}>
-                                            <Id value={topic.$id}>{topic.$id}</Id>
-                                        </TableCell>
-                                    {/key}
-                                {:else if column.type === 'datetime'}
-                                    <TableCellText title={column.title} width={column.width}>
-                                        {#if !topic[column.id]}
-                                            -
-                                        {:else}
-                                            {toLocaleDateTime(topic[column.id])}
-                                        {/if}
-                                    </TableCellText>
-                                {:else}
-                                    <TableCellText title={column.title} width={column.width}>
-                                        {topic[column.id]}
-                                    </TableCellText>
-                                {/if}
-                            {/if}
-                        {/each}
-                    </TableRowLink>
-                {/each}
-            </TableBody>
-        </TableScroll>
+        <Table {data} />
 
         <PaginationWithLimit
             name="Topics"
diff --git a/src/routes/console/project-[project]/messaging/topics/+page.ts b/src/routes/console/project-[project]/messaging/topics/+page.ts
index 08e899df61..3ba12e6d80 100644
--- a/src/routes/console/project-[project]/messaging/topics/+page.ts
+++ b/src/routes/console/project-[project]/messaging/topics/+page.ts
@@ -1,11 +1,12 @@
 import { Query } from '@appwrite.io/console';
 import { sdk } from '$lib/stores/sdk';
 import { getLimit, getPage, getQuery, getSearch, pageToOffset } from '$lib/helpers/load';
-import { PAGE_LIMIT } from '$lib/constants';
+import { Dependencies, PAGE_LIMIT } from '$lib/constants';
 import { queryParamToMap, queries } from '$lib/components/filters/store';
 import type { Topic } from '../store';
 
-export const load = async ({ url, route }) => {
+export const load = async ({ depends, url, route }) => {
+    depends(Dependencies.MESSAGING_TOPICS);
     const page = getPage(url);
     const search = getSearch(url);
     const limit = getLimit(url, route, PAGE_LIMIT);
diff --git a/src/routes/console/project-[project]/messaging/topics/table.svelte b/src/routes/console/project-[project]/messaging/topics/table.svelte
new file mode 100644
index 0000000000..c72533d667
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/topics/table.svelte
@@ -0,0 +1,154 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { FloatingActionBar, Id, Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import {
+        TableBody,
+        TableCell,
+        TableCellCheck,
+        TableCellHead,
+        TableCellHeadCheck,
+        TableCellText,
+        TableHeader,
+        TableRowLink,
+        TableScroll
+    } from '$lib/elements/table';
+    import { addNotification } from '$lib/stores/notifications';
+    import type { PageData } from './$types';
+    import { columns } from './store';
+    import { project } from '$routes/console/project-[project]/store';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { sdk } from '$lib/stores/sdk';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+
+    export let data: PageData;
+
+    let selectedIds: string[] = [];
+    let showDelete = false;
+    let deleting = false;
+
+    async function handleDelete() {
+        showDelete = false;
+
+        function deleteTopic(topicId: string) {
+            return sdk.forProject.client.call(
+                'DELETE',
+                new URL(`${sdk.forProject.client.config.endpoint}/messaging/topics/${topicId}`),
+                {
+                    'X-Appwrite-Project': sdk.forProject.client.config.project,
+                    'content-type': 'application/json',
+                    'X-Appwrite-Mode': 'admin'
+                }
+            );
+        }
+
+        const promises = selectedIds.map((id) => deleteTopic(id));
+
+        try {
+            await Promise.all(promises);
+            trackEvent(Submit.MessagingTopicDelete, {
+                total: selectedIds.length
+            });
+            addNotification({
+                type: 'success',
+                message: `${selectedIds.length} topic${selectedIds.length > 1 ? 's' : ''} deleted`
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.MessagingTopicDelete);
+        } finally {
+            invalidate(Dependencies.MESSAGING_TOPICS);
+            selectedIds = [];
+            showDelete = false;
+        }
+    }
+</script>
+
+<TableScroll>
+    <TableHeader>
+        <TableCellHeadCheck
+            bind:selected={selectedIds}
+            pageItemsIds={data.topics.topics.map((d) => d.$id)} />
+        {#each $columns as column}
+            {#if column.show}
+                <TableCellHead width={column.width}>{column.title}</TableCellHead>
+            {/if}
+        {/each}
+    </TableHeader>
+    <TableBody>
+        {#each data.topics.topics as topic (topic.$id)}
+            <TableRowLink
+                href={`${base}/console/project-${$project.$id}/messaging/topics/topic-${topic.$id}`}>
+                <TableCellCheck bind:selectedIds id={topic.$id} />
+
+                {#each $columns as column (column.id)}
+                    {#if column.show}
+                        {#if column.id === '$id'}
+                            {#key $columns}
+                                <TableCell title={column.title} width={column.width}>
+                                    <Id value={topic.$id}>{topic.$id}</Id>
+                                </TableCell>
+                            {/key}
+                        {:else if column.type === 'datetime'}
+                            <TableCellText title={column.title} width={column.width}>
+                                {#if !topic[column.id]}
+                                    -
+                                {:else}
+                                    {toLocaleDateTime(topic[column.id])}
+                                {/if}
+                            </TableCellText>
+                        {:else}
+                            <TableCellText title={column.title} width={column.width}>
+                                {topic[column.id]}
+                            </TableCellText>
+                        {/if}
+                    {/if}
+                {/each}
+            </TableRowLink>
+        {/each}
+    </TableBody>
+</TableScroll>
+
+<FloatingActionBar show={selectedIds.length > 0}>
+    <div class="u-flex u-cross-center u-main-space-between actions">
+        <div class="u-flex u-cross-center u-gap-8">
+            <span class="indicator body-text-2 u-bold">{selectedIds.length}</span>
+            <p>
+                <span class="is-only-desktop">
+                    {selectedIds.length > 1 ? 'topics' : 'topic'}
+                </span>
+                selected
+            </p>
+        </div>
+
+        <div class="u-flex u-cross-center u-gap-8">
+            <Button text on:click={() => (selectedIds = [])}>Cancel</Button>
+            <Button secondary on:click={() => (showDelete = true)}>
+                <p>Delete</p>
+            </Button>
+        </div>
+    </div>
+</FloatingActionBar>
+
+<Modal
+    title="Delete topics"
+    icon="exclamation"
+    state="warning"
+    bind:show={showDelete}
+    onSubmit={handleDelete}
+    headerDivider={false}
+    closable={!deleting}>
+    <p class="text" data-private>
+        Are you sure you want to delete <b>{selectedIds.length}</b>
+        {selectedIds.length > 1 ? 'topics' : 'topic'}?
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)} disabled={deleting}>Cancel</Button>
+        <Button secondary submit disabled={deleting}>Delete</Button>
+    </svelte:fragment>
+</Modal>

From 842da80e4b35369d036c800845e4bb5d4fa5fb95 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Fri, 15 Dec 2023 10:21:28 -0800
Subject: [PATCH 8/9] Add description to topics table and details

---
 src/lib/actions/analytics.ts                  |  1 +
 .../messaging/topics/+page.svelte             |  1 -
 .../messaging/topics/create.svelte            | 14 +++-
 .../messaging/topics/store.ts                 |  1 +
 .../topics/topic-[topic]/+page.svelte         |  4 +-
 .../topic-[topic]/updateDescription.svelte    | 65 +++++++++++++++++++
 6 files changed, 81 insertions(+), 5 deletions(-)
 create mode 100644 src/routes/console/project-[project]/messaging/topics/topic-[topic]/updateDescription.svelte

diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index 9b6196be7c..39551514b2 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -296,6 +296,7 @@ export enum Submit {
     MessagingTopicCreate = 'submit_messaging_topic_create',
     MessagingTopicDelete = 'submit_messaging_topic_delete',
     MessagingTopicUpdateName = 'submit_messaging_topic_update_name',
+    MessagingTopicUpdateDescription = 'submit_messaging_topic_update_description',
     MessagingTopicSubscriberAdd = 'submit_messaging_topic_subscriber_add',
     MessagingTopicSubscriberDelete = 'submit_messaging_topic_subscriber_delete'
 }
diff --git a/src/routes/console/project-[project]/messaging/topics/+page.svelte b/src/routes/console/project-[project]/messaging/topics/+page.svelte
index a31adb1659..659b734de9 100644
--- a/src/routes/console/project-[project]/messaging/topics/+page.svelte
+++ b/src/routes/console/project-[project]/messaging/topics/+page.svelte
@@ -100,5 +100,4 @@
     {/if}
 </Container>
 
-<!-- TODO: handle create -->
 <Create bind:showCreate={$showCreate} on:created={topicCreated} />
diff --git a/src/routes/console/project-[project]/messaging/topics/create.svelte b/src/routes/console/project-[project]/messaging/topics/create.svelte
index f3246a1960..2bb52245e2 100644
--- a/src/routes/console/project-[project]/messaging/topics/create.svelte
+++ b/src/routes/console/project-[project]/messaging/topics/create.svelte
@@ -12,7 +12,7 @@
 
     const dispatch = createEventDispatcher();
 
-    let name: string, id: string, error: string;
+    let name: string, description: string, id: string, error: string;
     let showCustomId = false;
 
     const create = async () => {
@@ -26,11 +26,13 @@
                     'X-Appwrite-Mode': 'admin'
                 },
                 {
-                    topicId: id ?? ID.unique(),
-                    name: name
+                    name,
+                    description,
+                    topicId: id ?? ID.unique()
                 }
             );
             name = '';
+            description = '';
             showCreate = false;
             showCustomId = false;
             addNotification({
@@ -62,6 +64,12 @@
             autofocus={true}
             required
             bind:value={name} />
+        <InputText
+            id="description"
+            label="Description"
+            placeholder="Enter description"
+            bind:value={description}>
+        </InputText>
         {#if !showCustomId}
             <div>
                 <Pill button on:click={() => (showCustomId = !showCustomId)}
diff --git a/src/routes/console/project-[project]/messaging/topics/store.ts b/src/routes/console/project-[project]/messaging/topics/store.ts
index f8bd1df06a..0c950c385b 100644
--- a/src/routes/console/project-[project]/messaging/topics/store.ts
+++ b/src/routes/console/project-[project]/messaging/topics/store.ts
@@ -6,6 +6,7 @@ export let showCreate = writable(false);
 export const columns = writable<Column[]>([
     { id: '$id', title: 'Topic ID', type: 'string', show: true, width: 140 },
     { id: 'name', title: 'Name', type: 'string', show: true, width: 140 },
+    { id: 'description', title: 'Description', type: 'string', show: true, width: 140 },
     { id: 'total', title: 'Subscribers', type: 'integer', show: true, width: 140 },
     { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 140 }
 ]);
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/+page.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/+page.svelte
index 9776c07f37..dd88db1906 100644
--- a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/+page.svelte
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/+page.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
     import DangerZone from './dangerZone.svelte';
-    import UpdateName from './updateName.svelte';
     import Details from './details.svelte';
+    import UpdateDescription from './updateDescription.svelte';
+    import UpdateName from './updateName.svelte';
 </script>
 
 <Container>
     <Details />
     <UpdateName />
+    <UpdateDescription />
     <DangerZone />
 </Container>
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/updateDescription.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/updateDescription.svelte
new file mode 100644
index 0000000000..137e7944c1
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/updateDescription.svelte
@@ -0,0 +1,65 @@
+<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 description: string = null;
+    onMount(async () => {
+        description ??= $topic.description;
+    });
+    async function updateDescription() {
+        try {
+            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'
+                },
+                {
+                    description
+                }
+            );
+            await invalidate(Dependencies.MESSAGING_TOPIC);
+            addNotification({
+                message: 'Description has been updated',
+                type: 'success'
+            });
+            trackEvent(Submit.MessagingTopicUpdateDescription);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.MessagingTopicUpdateDescription);
+        }
+    }
+</script>
+
+<Form onSubmit={updateDescription}>
+    <CardGrid>
+        <Heading tag="h6" size="7">Description</Heading>
+
+        <svelte:fragment slot="aside">
+            <ul data-private>
+                <InputText
+                    id="description"
+                    label="Description"
+                    placeholder="Enter description"
+                    autocomplete={false}
+                    bind:value={description} />
+            </ul>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={description === $topic.description} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>

From fee8e9cbed0aee769355aff386bc4da6480bd9a4 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Fri, 15 Dec 2023 11:51:39 -0800
Subject: [PATCH 9/9] Add topic activity page

---
 .../topic-[topic]/activity/+page.svelte       |  8 +++++
 .../topics/topic-[topic]/activity/+page.ts    | 34 +++++++++++++++++++
 .../topics/topic-[topic]/header.svelte        | 16 +++------
 3 files changed, 47 insertions(+), 11 deletions(-)
 create mode 100644 src/routes/console/project-[project]/messaging/topics/topic-[topic]/activity/+page.svelte
 create mode 100644 src/routes/console/project-[project]/messaging/topics/topic-[topic]/activity/+page.ts

diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/activity/+page.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/activity/+page.svelte
new file mode 100644
index 0000000000..f805a79f04
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/activity/+page.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    import { Activity } from '$lib/layout';
+
+    export let data: PageData;
+</script>
+
+<Activity {...data} />
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/activity/+page.ts b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/activity/+page.ts
new file mode 100644
index 0000000000..97f3d29aeb
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/activity/+page.ts
@@ -0,0 +1,34 @@
+import { Query, type Models } from '@appwrite.io/console';
+import { sdk } from '$lib/stores/sdk';
+import { getLimit, getPage, pageToOffset } from '$lib/helpers/load';
+import { PAGE_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, url, route }) => {
+    const page = getPage(url);
+    const limit = getLimit(url, route, PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
+
+    const payload = {
+        queries: [Query.limit(limit), Query.offset(offset)]
+    };
+
+    // TODO: remove when the API is ready with data
+    // This allows us to mock w/ data and when search returns 0 results
+    const logs: Models.LogList = await sdk.forProject.client.call(
+        'GET',
+        new URL(`${sdk.forProject.client.config.endpoint}/messaging/topics/${params.topic}/logs`),
+        {
+            'X-Appwrite-Project': sdk.forProject.client.config.project,
+            'content-type': 'application/json',
+            'X-Appwrite-Mode': 'admin'
+        },
+        payload
+    );
+
+    return {
+        offset,
+        limit,
+        logs
+    };
+};
diff --git a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/header.svelte b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/header.svelte
index 660b177e71..0848e48db2 100644
--- a/src/routes/console/project-[project]/messaging/topics/topic-[topic]/header.svelte
+++ b/src/routes/console/project-[project]/messaging/topics/topic-[topic]/header.svelte
@@ -18,18 +18,12 @@
             href: `${path}/subscribers`,
             title: 'Subscribers',
             event: 'subscribers'
+        },
+        {
+            href: `${path}/activity`,
+            title: 'Activity',
+            event: 'activity'
         }
-        // {
-        //     href: `${path}/sessions`,
-        //     title: 'Sessions',
-        //     event: 'sessions'
-        // },
-        // {
-        //     href: `${path}/activity`,
-        //     title: 'Activity',
-        //     event: 'activity',
-        //     hasChildren: true
-        // }
     ];
 </script>