Hover toolbar: fade in, keyboard access, Edit/Thread/Copy, recent reactions #298

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

The toolbar switches display:none→flex (app.css:2886-2913) with no fade and no :focus-within, so keyboard users can't reach it. It has a fixed list of four quick reactions (MessageRow.tsx:82) and no Edit, Thread or Copy buttons.

Discord fades it in, shows Edit on your own messages, and uses your frequent emoji.

Fix: fade in; :focus-within; Edit (own), Thread (where the service has threads), Copy; quick reactions from the emoji picker's recents.

Part of the v1.0 UI pass.

The toolbar switches `display:none`→`flex` (app.css:2886-2913) with no fade and no `:focus-within`, so keyboard users can't reach it. It has a fixed list of four quick reactions (MessageRow.tsx:82) and no Edit, Thread or Copy buttons. Discord fades it in, shows Edit on your own messages, and uses your frequent emoji. **Fix:** fade in; `:focus-within`; Edit (own), Thread (where the service has threads), Copy; quick reactions from the emoji picker's recents. _Part of the v1.0 UI pass._
Salastil added this to the v1.0 milestone 2026-10-07 20:43:11 -04:00
Salastil added the feature label 2026-10-07 20:43:11 -04:00
Author
Owner

Finished: 57e1856.

Before (top) and after (bottom) - the pointer over your own message in the Discord-shaped test guild, from scripts/ui-shots.mjs:

hover toolbar

  • Fades in (--motion-fast) instead of appearing: it is always in the page and see-through until the row is pointed at or has focus in it, which is also why it is now reachable by keyboard (Tab into a row's buttons and it shows). It used to be display:none, which took the buttons out of the tab order.
  • Not on lines that are not messages - joins, parts, notices - nor on one that has not been sent yet or has failed (that has its own Retry).
  • Edit on your own messages (where the service can edit) and Copy text on every message with text.
  • The four reactions are the account's recent ones, from the same list the emoji picker keeps, topped up with 👍 ❤️ 😂 🔥. Custom emoji are left out of it - they belong to a server.
  • No longer clipped on the first visible line: the log has room above it for the toolbar that hangs over its top edge.

Not added: a Thread button. A thread is entered from the reply count under the message it grew out of (already there), and the services here have no "start a thread" that the toolbar could offer.

Finished: [57e1856](https://git.salastil.com/Salastil/moho/commit/57e185645f7337b9f5bd6cd07e84562c17f49df3). Before (top) and after (bottom) - the pointer over your own message in the Discord-shaped test guild, from `scripts/ui-shots.mjs`: ![hover toolbar](https://git.salastil.com/attachments/4ccbcc46-dded-4bc2-9b88-d0b3127fcd24) - **Fades in** (`--motion-fast`) instead of appearing: it is always in the page and see-through until the row is pointed at or has focus in it, which is also why it is now **reachable by keyboard** (Tab into a row's buttons and it shows). It used to be `display:none`, which took the buttons out of the tab order. - **Not on lines that are not messages** - joins, parts, notices - nor on one that has not been sent yet or has failed (that has its own Retry). - **Edit** on your own messages (where the service can edit) and **Copy text** on every message with text. - **The four reactions are the account's recent ones**, from the same list the emoji picker keeps, topped up with 👍 ❤️ 😂 🔥. Custom emoji are left out of it - they belong to a server. - **No longer clipped** on the first visible line: the log has room above it for the toolbar that hangs over its top edge. Not added: a Thread button. A thread is entered from the reply count under the message it grew out of (already there), and the services here have no "start a thread" that the toolbar could offer.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Salastil/moho#298