From 42c0ef9c6391285d76825bdf0d29371cd6ebf500 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Sat, 10 Oct 2026 08:28:53 -0700
Subject: Composers: attach and GIF sit in the field's corner. The post
 composer's row had grown to Post · 📎 · GIF · Preview · Cancel; the reply
 box's likewise. The paperclip and GIF button are now small borderless tools
 inside the text field, bottom right (the field keeps room under its text so
 nothing runs beneath them), and the row under it is only what you do with the
 post: Post, Preview, Cancel (Preview, Cancel, Reply in a thread). Tests find
 the tools in .compose-box.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vps2H27rhbG9ZqseGfMrc3
---
 src/features/messages.js | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

(limited to 'src/features')

diff --git a/src/features/messages.js b/src/features/messages.js
index 5040b0f..28e20f1 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -9960,6 +9960,7 @@ export function messagesFeature(ctx) {
       // A textarea that grows with the reply, like the chat composer: Enter
       // sends, Shift+Enter (or Ctrl+J) breaks the line — a reply used to be
       // a one-line field with no way to write a paragraph.
+      h('div', { class: 'compose-box' },
       h('coinos-text', {
         class: 'thread-reply-input', placeholder: t('threadReplyHint'),
         style: 'font-family:var(--sans);min-height:64px;max-height:160px',
@@ -9990,15 +9991,17 @@ export function messagesFeature(ctx) {
           }
         },
       }),
+      h('div', { class: 'compose-tools' },
+        (ctx.uploadMedia || ctx.uploadImage) ? h('button', {
+          type: 'button', class: 'compose-tool', title: t('feedAttach'), 'aria-label': t('feedAttach'), disabled: !!ui.postUploading,
+          onClick: () => document.getElementById('reply-file')?.click(),
+        }, ui.postUploading ? h('span', { class: 'spinner sm' }) : h('span', { style: 'display:flex', html: CLIP })) : null,
+        gifs.button('reply', 'compose-tool gif-btn'))),
       mentionList('.thread-reply-input'),
       h('div', { class: 'row reply-tools wrap', style: 'gap:8px;align-items:center' },
       // A reply can carry a picture too — same upload, same imeta tag, same
       // paperclip. The URL lands in the draft, which is what every client
       // reads as the media.
-      (ctx.uploadMedia || ctx.uploadImage) ? h('button', {
-        class: 'attach-btn', title: t('feedAttach'), 'aria-label': t('feedAttach'), disabled: !!ui.postUploading,
-        onClick: () => document.getElementById('reply-file')?.click(),
-      }, ui.postUploading ? h('span', { class: 'spinner sm' }) : h('span', { style: 'display:flex', html: CLIP })) : null,
       h('input', {
         type: 'file', id: 'reply-file', accept: 'image/*,video/*', style: 'display:none',
         onChange: async (e) => {
@@ -10012,7 +10015,6 @@ export function messagesFeature(ctx) {
           });
         },
       }),
-      gifs.button('reply', 'attach-btn gif-btn'),
       h('span', { class: 'grow' }),
       h('div', { class: 'row gap6 composer-options' },
         previewBtn(!!s.preview, () => { s.preview = !s.preview; render(); }),
@@ -10741,6 +10743,9 @@ export function messagesFeature(ctx) {
     if (ui.profCompose == null && !draftFor(POST_DRAFT)) return null;
     const text = composeText();
     return h('div', { class: 'col', style: 'gap:8px' },
+      // the attach and GIF buttons sit in the field's corner: the row under
+      // it is for what you do with the post (Post, Preview, Cancel)
+      h('div', { class: 'compose-box' },
       h('coinos-text', {
         class: 'post-input', placeholder: t('profComposePh'),
         style: 'font-family:var(--sans);min-height:84px;max-height:320px',
@@ -10759,6 +10764,12 @@ export function messagesFeature(ctx) {
           if (ui.postPreview) render();
         },
       }),
+      h('div', { class: 'compose-tools' },
+        (ctx.uploadMedia || ctx.uploadImage) ? h('button', {
+          type: 'button', class: 'compose-tool', title: t('feedAttach'), 'aria-label': t('feedAttach'), disabled: !!ui.postUploading,
+          onClick: () => document.getElementById('post-file')?.click(),
+        }, ui.postUploading ? h('span', { class: 'spinner sm' }) : h('span', { style: 'display:flex', html: CLIP })) : null,
+        gifs.button('post', 'compose-tool gif-btn'))),
       mentionList('.post-input'),
       ui.postPreview ? draftPreview(text) : null,
       mediaBar(),
@@ -10781,15 +10792,10 @@ export function messagesFeature(ctx) {
             render();
           }
         } }, t('profPostBtn')),
-        (ctx.uploadMedia || ctx.uploadImage) ? h('button', {
-          class: 'attach-btn', title: t('feedAttach'), 'aria-label': t('feedAttach'), disabled: !!ui.postUploading,
-          onClick: () => document.getElementById('post-file')?.click(),
-        }, ui.postUploading ? h('span', { class: 'spinner sm' }) : h('span', { style: 'display:flex', html: CLIP })) : null,
         h('input', {
           type: 'file', id: 'post-file', accept: 'image/*,video/*', style: 'display:none',
           onChange: async (e) => { const f = e.target.files && e.target.files[0]; e.target.value = ''; await attachMedia(f); },
         }),
-        gifs.button('post', 'attach-btn gif-btn'),
         h('div', { class: 'row gap6 composer-options' },
           previewBtn(!!ui.postPreview, () => { ui.postPreview = !ui.postPreview; render(); }),
           h('button', { class: 'btn-ghost btn-sm', onClick: requestCancelPost }, t('cancel')))),
-- 
cgit v1.2.3