From dc55a6bd3a3c6483259d207975a6a3a6fbcb2a6c Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Tue, 20 Feb 2024 16:14:27 -0800
Subject: [PATCH 1/4] feat(messaging): fix total on topics page

---
 .../console/project-[project]/messaging/topics/store.ts      | 5 ++++-
 .../console/project-[project]/messaging/topics/table.svelte  | 4 ++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/routes/console/project-[project]/messaging/topics/store.ts b/src/routes/console/project-[project]/messaging/topics/store.ts
index a0f832d2b9..742f0a4325 100644
--- a/src/routes/console/project-[project]/messaging/topics/store.ts
+++ b/src/routes/console/project-[project]/messaging/topics/store.ts
@@ -6,6 +6,9 @@ export const 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: 'emailTotal', title: 'Email Subscribers', type: 'integer', show: false, width: 140 },
+    { id: 'smsTotal', title: 'SMS Subscribers', type: 'integer', show: false, width: 140 },
+    { id: 'pushTotal', title: 'Push Subscribers', type: 'integer', show: false, width: 140 },
+    { id: 'total', title: 'Subscribers', type: 'integer', show: true, filter: false, width: 140 },
     { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 140 }
 ]);
diff --git a/src/routes/console/project-[project]/messaging/topics/table.svelte b/src/routes/console/project-[project]/messaging/topics/table.svelte
index 8118edbf15..8e611a83b0 100644
--- a/src/routes/console/project-[project]/messaging/topics/table.svelte
+++ b/src/routes/console/project-[project]/messaging/topics/table.svelte
@@ -90,6 +90,10 @@
                                     {toLocaleDateTime(topic[column.id])}
                                 {/if}
                             </TableCellText>
+                        {:else if column.id === 'total'}
+                            <TableCellText title={column.title} width={column.width}>
+                                {topic.emailTotal + topic.smsTotal + topic.pushTotal}
+                            </TableCellText>
                         {:else}
                             <TableCellText title={column.title} width={column.width}>
                                 {topic[column.id]}

From 4bd21f58b899de3dae1c7f5a430e3769dda9f900 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Tue, 20 Feb 2024 16:15:51 -0800
Subject: [PATCH 2/4] fix(messaging): move topics modal description closer to
 header

---
 .../console/project-[project]/messaging/topicsModal.svelte      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/console/project-[project]/messaging/topicsModal.svelte b/src/routes/console/project-[project]/messaging/topicsModal.svelte
index de5620db3e..42c49c6ba7 100644
--- a/src/routes/console/project-[project]/messaging/topicsModal.svelte
+++ b/src/routes/console/project-[project]/messaging/topicsModal.svelte
@@ -79,7 +79,7 @@
     }
 </script>
 
-<Modal {title} bind:show onSubmit={submit} on:close={reset} size="big">
+<Modal {title} bind:show onSubmit={submit} on:close={reset} headerDivider={false} size="big">
     <p class="text">
         Select existing topics you want to send this message to its subscribers. The message will be
         sent only to {$providerType} targets.

From ccfe6b91d4895c6054eb1fa2bf15ec07a43665cb Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Tue, 20 Feb 2024 16:16:34 -0800
Subject: [PATCH 3/4] fix(messaging): reduce space before pagination in topics
 modal

---
 .../console/project-[project]/messaging/topicsModal.svelte      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/console/project-[project]/messaging/topicsModal.svelte b/src/routes/console/project-[project]/messaging/topicsModal.svelte
index 42c49c6ba7..12a2a3f581 100644
--- a/src/routes/console/project-[project]/messaging/topicsModal.svelte
+++ b/src/routes/console/project-[project]/messaging/topicsModal.svelte
@@ -111,7 +111,7 @@
                 </InputCheckbox>
             {/each}
         </FormList>
-        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+        <div class="u-flex u-main-space-between">
             <p class="text">Total results: {totalResults}</p>
             <PaginationInline limit={5} bind:offset sum={totalResults} hidePages />
         </div>

From 041ec1fae19efd56390d299a96da3fbce10f2e99 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Tue, 20 Feb 2024 16:16:55 -0800
Subject: [PATCH 4/4] fix(messaging): add dividers between topics in topics
 modal

---
 .../messaging/topicsModal.svelte              | 47 +++++++++++--------
 1 file changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/routes/console/project-[project]/messaging/topicsModal.svelte b/src/routes/console/project-[project]/messaging/topicsModal.svelte
index 12a2a3f581..e549b4796e 100644
--- a/src/routes/console/project-[project]/messaging/topicsModal.svelte
+++ b/src/routes/console/project-[project]/messaging/topicsModal.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { EmptySearch, Modal, PaginationInline } from '$lib/components';
     import { Button, FormList, InputCheckbox, InputSearch } from '$lib/elements/forms';
+    import { Table, TableBody, TableCell, TableRow } from '$lib/elements/table';
     import { sdk } from '$lib/stores/sdk';
     import { Query, type Models } from '@appwrite.io/console';
     import { createEventDispatcher } from 'svelte';
@@ -91,25 +92,33 @@
         bind:value={search} />
     {#if Object.keys(topicResultsById).length > 0}
         <FormList>
-            {#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">
-                                    ({getTotal(topic)} subscribers)
-                                </span>
-                            </span></span>
-                    </svelte:fragment>
-                </InputCheckbox>
-            {/each}
+            <Table noMargin noStyles>
+                <TableBody>
+                    {#each Object.entries(topicResultsById) as [topicId, topic]}
+                        <TableRow>
+                            <TableCell>
+                                <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">
+                                                    ({getTotal(topic)} subscribers)
+                                                </span>
+                                            </span></span>
+                                    </svelte:fragment>
+                                </InputCheckbox>
+                            </TableCell>
+                        </TableRow>
+                    {/each}
+                </TableBody>
+            </Table>
         </FormList>
         <div class="u-flex u-main-space-between">
             <p class="text">Total results: {totalResults}</p>