From 87bb322a7fc8878c635b63694828869aed6be920 Mon Sep 17 00:00:00 2001
From: Flemmli97 <34157027+Flemmli97@users.noreply.github.com>
Date: Thu, 3 Oct 2024 11:31:23 +0200
Subject: [PATCH] fix(ui): update chatbar reply ui (#645)

---
 src/lib/lang/en.json           |  3 ++-
 src/lib/layouts/Chatbar.svelte | 39 ++++++++++++----------------------
 2 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/src/lib/lang/en.json b/src/lib/lang/en.json
index 7ffb5203f..49eb73e8b 100644
--- a/src/lib/lang/en.json
+++ b/src/lib/lang/en.json
@@ -118,7 +118,8 @@
         "send-coin": "Send Coin",
         "show-participants": "Participants",
         "group-settings": "Settings",
-        "replyTo": "Replying to: {user}"
+        "replyTo": "Replying to: {user}",
+        "attachments-count": "Attachments: {amount}"
     },
     "community": {
         "title": "Satellite Community - General",
diff --git a/src/lib/layouts/Chatbar.svelte b/src/lib/layouts/Chatbar.svelte
index 9a4a7aae5..da8c33772 100644
--- a/src/lib/layouts/Chatbar.svelte
+++ b/src/lib/layouts/Chatbar.svelte
@@ -179,31 +179,10 @@
                         {/each}
 
                         {#if replyTo.attachments.length > 0}
-                            {#each replyTo.attachments as attachment}
-                                {#if attachment.kind === MessageAttachmentKind.File || attachment.location.length == 0}
-                                    <FileEmbed
-                                        fileInfo={{
-                                            id: "1",
-                                            isRenaming: OperationState.Initial,
-                                            source: "unknown",
-                                            name: attachment.name,
-                                            size: attachment.size,
-                                            icon: Shape.Document,
-                                            type: "unknown/unknown",
-                                            remotePath: "",
-                                        }} />
-                                {:else if attachment.kind === MessageAttachmentKind.Image}
-                                    <ImageEmbed source={attachment.location} name={attachment.name} filesize={attachment.size} />
-                                {:else if attachment.kind === MessageAttachmentKind.Text}
-                                    <TextDocument />
-                                {:else if attachment.kind === MessageAttachmentKind.STL}
-                                    <STLViewer url={attachment.location} name={attachment.name} filesize={attachment.size} />
-                                {:else if attachment.kind === MessageAttachmentKind.Audio}
-                                    <AudioEmbed location={attachment.location} name={attachment.name} size={attachment.size} />
-                                {:else if attachment.kind === MessageAttachmentKind.Video}
-                                    <VideoEmbed location={attachment.location} name={attachment.name} size={attachment.size} />
-                                {/if}
-                            {/each}
+                            <div class="attachment-container">
+                                <Icon icon={Shape.Document} size={Size.Large} />
+                                {$_("chat.attachments-count", { values: { amount: replyTo.attachments.length } })}
+                            </div>
                         {/if}
                     </Message>
                     <ProfilePicture id={resolved.key} hook="message-group-remote-profile-picture" size={Size.Small} image={resolved.profile.photo.image} status={resolved.profile.status} highlight={Appearance.Default} notifications={0} />
@@ -286,6 +265,16 @@
                     overflow: hidden;
                     text-align: left;
                 }
+                .attachment-container {
+                    display: flex;
+                    align-items: center;
+                    background-color: var(--alt-color);
+                    padding: var(--padding-minimal);
+                    border-radius: var(--border-radius-less);
+                }
+                .sticker {
+                    width: 45px;
+                }
             }
             :global(.button) {
                 position: absolute;