From bdab2e5bb8289cb1556da2648274a93aadf4cbdf Mon Sep 17 00:00:00 2001
From: Aeledfyr <aeledfyr@gmail.com>
Date: Sun, 22 Feb 2026 19:48:08 -0800
Subject: [PATCH] feat: add remove button to floating attachment preview

---
 src/components/message-pane/MessagePane.tsx   | 21 +++++++++++++++++--
 .../message-pane/styles.module.scss           |  4 ++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/message-pane/MessagePane.tsx b/src/components/message-pane/MessagePane.tsx
index bf3b33c3e..f42cfe12d 100644
--- a/src/components/message-pane/MessagePane.tsx
+++ b/src/components/message-pane/MessagePane.tsx
@@ -550,7 +550,7 @@ function MessageArea(props: {
         </Show>
         <FloatingSuggestions textArea={textAreaEl()} />
         <Show when={channelProperty()?.attachment}>
-          <FloatingAttachment />
+          <FloatingAttachment textArea={textAreaEl()} />
         </Show>
         <Show when={editMessageId()}>
           <EditIndicator messageId={editMessageId()!} />
@@ -1306,7 +1306,9 @@ function EditIndicator(props: { messageId: string }) {
   );
 }
 
-function FloatingAttachment(props: {}) {
+function FloatingAttachment(props: {
+  textArea?: HTMLElement,
+}) {
   const params = useParams<{ channelId: string }>();
   const { createPortal } = useCustomPortal();
   const { channelProperties } = useStore();
@@ -1350,6 +1352,11 @@ function FloatingAttachment(props: {}) {
 
   const isMobileWidth = () => (paneWidth() || 0) <= 400;
 
+  const cancelAttachment = () => {
+    channelProperties.setAttachment(params.channelId, undefined);
+    props.textArea?.focus();
+  };
+
   return (
     <Floating
       class={cn(styles.floatingAttachment, !!isMobileWidth() && styles.mobile)}
@@ -1397,6 +1404,16 @@ function FloatingAttachment(props: {}) {
             selectedId={getAttachmentFile()?.uploadTo}
           />
         </div>
+        <div class={styles.attachmentClose}>
+          <Button
+            iconName="close"
+            margin={0}
+            padding={0}
+            iconSize={24}
+            color="var(--alert-color)"
+            onClick={cancelAttachment}
+          />
+        </div>
       </div>
     </Floating>
   );
diff --git a/src/components/message-pane/styles.module.scss b/src/components/message-pane/styles.module.scss
index 34c4f634e..0287f7f85 100644
--- a/src/components/message-pane/styles.module.scss
+++ b/src/components/message-pane/styles.module.scss
@@ -356,6 +356,10 @@ body .floating.floatingSlowModeIndicator {
           padding: 6px;
         }
       }
+      .attachmentClose {
+        align-self: flex-start;
+        margin-left: auto;
+      }
     }
 
     .attachmentFilename {