From b097c06656fe3dcab50ed6886e9963620449e065 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 16 Dec 2024 12:01:22 +0530
Subject: [PATCH 1/2] fix: simplify draft checks.

---
 .../message-[message]/emailMessage.svelte      | 18 +++++++-----------
 .../message-[message]/updateTargets.svelte     | 12 +++++++-----
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/emailMessage.svelte b/src/routes/(console)/project-[project]/messaging/message-[message]/emailMessage.svelte
index 6fcaad6d47..36c479683b 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/emailMessage.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/emailMessage.svelte
@@ -60,25 +60,21 @@
         subject === message.data.subject &&
         content === message.data.content &&
         html === ((message.data['html'] ?? false) as boolean);
+
+    $: isDraft = message.status === 'draft';
 </script>
 
 <Form onSubmit={update}>
-    <CardGrid hideFooter={message.status != 'draft'}>
+    <CardGrid hideFooter={!isDraft}>
         <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
             <Heading tag="h6" size="7">Message</Heading>
         </div>
         <svelte:fragment slot="aside">
             <FormList>
-                <InputText
-                    id="subject"
-                    label="Subject"
-                    disabled={message.status != 'draft'}
-                    bind:value={subject}></InputText>
-                <InputTextarea
-                    id="message"
-                    label="Message"
-                    disabled={message.status != 'draft'}
-                    bind:value={content}></InputTextarea>
+                <InputText id="subject" label="Subject" disabled={!isDraft} bind:value={subject}
+                ></InputText>
+                <InputTextarea id="message" label="Message" disabled={!isDraft} bind:value={content}
+                ></InputTextarea>
                 <InputSwitch label="HTML mode" id="html" bind:value={html}>
                     <svelte:fragment slot="description">
                         Enable the HTML mode if your message contains HTML tags.
diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/updateTargets.svelte b/src/routes/(console)/project-[project]/messaging/message-[message]/updateTargets.svelte
index 8c112fba95..c05bdce614 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/updateTargets.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/updateTargets.svelte
@@ -93,11 +93,13 @@
         }
     }
 
+    $: isDraft = message.status === 'draft';
+
     $: disabled = symmetricDifference(targetIds, Object.keys(selectedTargetsById)).length === 0;
 </script>
 
 <Form onSubmit={update}>
-    <CardGrid hideFooter={message.status != 'draft'}>
+    <CardGrid hideFooter={!isDraft}>
         <Heading tag="h6" size="7" id="variables">Targets</Heading>
         <svelte:fragment slot="aside">
             {@const sum = targetIds.length}
@@ -106,7 +108,7 @@
                     <div>
                         <span class="eyebrow-heading-3">Target</span>
                     </div>
-                    {#if message.status == 'draft'}
+                    {#if isDraft}
                         <Button
                             text
                             noMargin
@@ -143,7 +145,7 @@
                                         </div>
                                     </TableCell>
                                     <TableCell title="Remove">
-                                        {#if message.status === 'draft'}
+                                        {#if isDraft}
                                             <div
                                                 class="u-flex u-main-end"
                                                 style="--p-button-size: 1.25rem">
@@ -151,7 +153,7 @@
                                                     text
                                                     class="is-only-icon"
                                                     ariaLabel="delete"
-                                                    disabled={message.status != 'draft'}
+                                                    disabled={!isDraft}
                                                     on:click={() => removeTarget(target.$id)}>
                                                     <span
                                                         class="icon-x u-font-size-20"
@@ -169,7 +171,7 @@
                         <PaginationInline {sum} {limit} bind:offset />
                     </div>
                 </div>
-            {:else if message.status == 'draft'}
+            {:else if isDraft}
                 <Empty on:click={() => (showTargets = true)}>Add a target</Empty>
             {:else}
                 <EmptySearch hidePagination>

From 95865e3ccbeecdd19dc3aaa60ba927f403fd2697 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 16 Dec 2024 16:55:47 +0530
Subject: [PATCH 2/2] add: users section.

---
 .../messaging/message-[message]/+layout.ts    | 10 +-
 .../messaging/message-[message]/+page.svelte  |  2 +
 .../message-[message]/recipients.svelte       | 91 +++++++++++++++++++
 3 files changed, 102 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/(console)/project-[project]/messaging/message-[message]/recipients.svelte

diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/+layout.ts b/src/routes/(console)/project-[project]/messaging/message-[message]/+layout.ts
index 7e3985ea37..637631dd93 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/+layout.ts
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/+layout.ts
@@ -41,13 +41,21 @@ export const load: LayoutLoad = async ({ params, depends }) => {
             })
         );
 
-        await Promise.allSettled(usersPromise);
+        const messageRecipients: Record<string, Models.User<Models.Preferences>> = {};
+        const messageRecipientsPromise = Object.values(message.users).map((userId) =>
+            sdk.forProject.users.get(userId).then((user) => {
+                messageRecipients[user.$id] = user;
+            })
+        );
+
+        await Promise.allSettled([usersPromise, messageRecipientsPromise]);
 
         return {
             message,
             topicsById,
             targetsById,
             usersById,
+            messageRecipients,
             header: Header,
             breadcrumbs: Breadcrumbs
         };
diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/+page.svelte b/src/routes/(console)/project-[project]/messaging/message-[message]/+page.svelte
index 878c47ffdc..6e299cc847 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/+page.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/+page.svelte
@@ -12,6 +12,7 @@
     import { MessagingProviderType } from '@appwrite.io/console';
     import UpdateTopics from './updateTopics.svelte';
     import UpdateTargets from './updateTargets.svelte';
+    import Recipients from './recipients.svelte';
     import { onMount } from 'svelte';
 
     export let data: PageData;
@@ -34,6 +35,7 @@
     {/if}
     <UpdateTopics message={$message} selectedTopicsById={data.topicsById} />
     <UpdateTargets message={$message} selectedTargetsById={data.targetsById} />
+    <Recipients message={$message} selectedRecipients={data.messageRecipients} />
     {#if $message.status !== 'processing'}
         <Delete message={$message} />
     {/if}
diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/recipients.svelte b/src/routes/(console)/project-[project]/messaging/message-[message]/recipients.svelte
new file mode 100644
index 0000000000..fcce2439d3
--- /dev/null
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/recipients.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+    import { MessagingProviderType, type Models } from '@appwrite.io/console';
+    import {
+        Table,
+        TableBody,
+        TableCell,
+        TableCellHead,
+        TableHeader,
+        TableRow
+    } from '$lib/elements/table';
+    import { CardGrid, EmptySearch, Heading, PaginationInline } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+
+    export let message: Models.Message;
+    export let selectedRecipients: Record<string, Models.User<Models.Preferences>>;
+
+    let offset = 0;
+    const limit = 10;
+    let messageRecipients = Object.values(selectedRecipients);
+
+    function getIdentifier(user: Models.User<Models.Preferences>): string {
+        switch (message.providerType) {
+            case MessagingProviderType.Email:
+                return user.email;
+            case MessagingProviderType.Sms:
+                return user.phone;
+            case MessagingProviderType.Push:
+                return (
+                    user.targets?.find((target) => target.providerType === 'push')?.name ||
+                    'Unknown identifier'
+                );
+        }
+        return 'Unknown identifier';
+    }
+</script>
+
+<CardGrid hideFooter={message.status !== 'draft'}>
+    <Heading tag="h6" size="7" id="variables">Users</Heading>
+    <svelte:fragment slot="aside">
+        {@const sum = messageRecipients.length}
+        {#if sum}
+            <div class="u-flex u-flex-vertical u-gap-24">
+                <Table noMargin noStyles>
+                    <TableHeader>
+                        <TableCellHead>Name</TableCellHead>
+                        <TableCellHead>Identifier</TableCellHead>
+                    </TableHeader>
+                    <TableBody>
+                        {#each messageRecipients.slice(offset, offset + limit) as recipient (recipient.$id)}
+                            <TableRow>
+                                <TableCell title="Name">
+                                    <div class="u-flex u-cross-center">
+                                        <span class="body-text-2 u-bold" data-private>
+                                            {recipient.name}
+                                        </span>
+                                    </div>
+                                </TableCell>
+                                <TableCell title="Identifier">
+                                    <span class="body-text-2" data-private>
+                                        {getIdentifier(recipient)}
+                                    </span>
+                                </TableCell>
+                            </TableRow>
+                        {/each}
+                    </TableBody>
+                </Table>
+                <div class="u-flex u-main-space-between">
+                    <p class="text">Total users: {messageRecipients.length}</p>
+                    <PaginationInline {sum} {limit} bind:offset />
+                </div>
+            </div>
+        {:else}
+            <EmptySearch hidePagination>
+                <div class="u-text-center">
+                    No users have been selected.
+                    <p>
+                        Need a hand? Check out our
+                        <Button
+                            link
+                            external
+                            href="https://appwrite.io/docs/products/messaging"
+                            text>
+                            documentation
+                        </Button>
+                        .
+                    </p>
+                </div>
+            </EmptySearch>
+        {/if}
+    </svelte:fragment>
+</CardGrid>