Composer layout in Discord's style #306

Closed
opened 2026-10-07 20:43:15 -04:00 by Salastil · 1 comment
Owner

Now: the input is a bordered text field with buttons in a separate row beside it (Composer.tsx:769-988) - up to seven on Matrix (emoji, sticker, location, mic, poll, attach, send). Attach ("+") is next to Send (979-987); Discord puts it on the left inside the box. Send is always enabled, even when empty. Buttons stay vertically centred as the box grows (app.css:1777-1782). The Matrix lock uses an inline style (792).

Fix: "+" on the left inside the box (holding upload, and Matrix's sticker/location/poll, like Discord's "+" menu); emoji, GIF/sticker and Send on the right inside the box; Send hidden when empty; buttons bottom-aligned as the box grows.

Part of the v1.0 UI pass.

Now: the input is a bordered text field with buttons in a separate row beside it (Composer.tsx:769-988) - up to seven on Matrix (emoji, sticker, location, mic, poll, attach, send). Attach ("+") is next to Send (979-987); Discord puts it on the left inside the box. Send is always enabled, even when empty. Buttons stay vertically centred as the box grows (app.css:1777-1782). The Matrix lock uses an inline style (792). **Fix:** "+" on the left inside the box (holding upload, and Matrix's sticker/location/poll, like Discord's "+" menu); emoji, GIF/sticker and Send on the right inside the box; Send hidden when empty; buttons bottom-aligned as the box grows. _Part of the v1.0 UI pass._
Salastil added this to the v1.0 milestone 2026-10-07 20:43:15 -04:00
Salastil added the feature label 2026-10-07 20:43:15 -04:00
Author
Owner

Finished: a59c1ab.

The composer is one rounded box, the way Discord has it.

  • "+" on the left, inside the box. It holds what is not typed: Upload a file everywhere it can go, and on Matrix Send a location and Start a poll (the extra buttons that crowded the row - up to seven on Matrix). Where a file is the only thing, the "+" is just that and goes straight to the picker without a menu. The menu opens above the button (the context menu gained an above anchor).
  • Emoji, stickers, voice and Send on the right, inside the box. The lock and Tor marks sit inside it too, on the left of the typing.
  • Send only appears when there is something to send (text or a staged file) - Enter still sends. It pops in rather than appearing flat.
  • Buttons are bottom-aligned, so they stay with the last line as the box grows over a multi-line message instead of floating in the middle. The box has one border that lights up on focus; the typing area has none of its own. The lock's inline style is gone.
  • Behaviour checked in the app: Send hidden while empty, shown with text, click sends and hides; IRC "+" has no menu; Matrix "+" lists the three entries and Start a poll opens the dialog; the box fills its column.

Matrix - before (top), after (bottom, "+" open):

matrix

A multi-line message - before, after:

multiline

Discord with a reply - before, after:

discord

Finished: [a59c1ab](https://git.salastil.com/Salastil/moho/commit/a59c1abc257492214f3fa701264f5516ba8f53b6). The composer is one rounded box, the way Discord has it. - **"+" on the left, inside the box.** It holds what is not typed: *Upload a file* everywhere it can go, and on Matrix *Send a location* and *Start a poll* (the extra buttons that crowded the row - up to seven on Matrix). Where a file is the only thing, the "+" is just that and goes straight to the picker without a menu. The menu opens above the button (the context menu gained an `above` anchor). - **Emoji, stickers, voice and Send on the right, inside the box.** The lock and Tor marks sit inside it too, on the left of the typing. - **Send only appears when there is something to send** (text or a staged file) - Enter still sends. It pops in rather than appearing flat. - **Buttons are bottom-aligned**, so they stay with the last line as the box grows over a multi-line message instead of floating in the middle. The box has one border that lights up on focus; the typing area has none of its own. The lock's inline style is gone. - Behaviour checked in the app: Send hidden while empty, shown with text, click sends and hides; IRC "+" has no menu; Matrix "+" lists the three entries and *Start a poll* opens the dialog; the box fills its column. Matrix - before (top), after (bottom, "+" open): ![matrix](https://git.salastil.com/attachments/8a1b6bf8-d02e-46e2-a7f8-337c4675c8f4) A multi-line message - before, after: ![multiline](https://git.salastil.com/attachments/8d16d3db-07b9-4826-a94f-f9628663ec18) Discord with a reply - before, after: ![discord](https://git.salastil.com/attachments/039bbf17-c355-49ec-917f-725e0979b158)
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Salastil/moho#306