Presence colours disagree between places; "connecting" shows as Offline #277

Closed
opened 2026-10-07 20:42:57 -04:00 by Salastil · 1 comment
Owner
  • presenceColor() (lib/presence.ts) makes DND the pale-pink --error, and unknown statuses fall through to solid --outline. Its comment says "hollow grey for away" but nothing is hollow.
  • UserFooter's effectiveStatus can be 'connecting', which falls through to grey, and the avatar dot's tooltip then reads "Offline" (Avatar.tsx:63-68) while the text next to it says "Connecting…".
  • The server-header ConnectionDot has its own colour logic and is 6px (BufferList.tsx:778-786, app.css:257). Voice member dots are 8px and use name-hash colours, not presence (VoiceChannels.tsx:69). .presence-dot is 9px.
  • .presence-dot is defined twice (app.css:3498 and 4823); class-based dots in JoinPanel.tsx:889 and AddToConversation.tsx:161 pick up the second rule's absolute positioning.
  • The dot's ring is --surface-container-low while the sidebar/footer background is --surface-container.

Fix: one palette in lib/presence.ts (online green, idle amber, DND red, offline hollow ring, connecting pulsing grey) used by every dot, with a ring that matches the background behind it.

Part of the v1.0 UI pass.

- `presenceColor()` (`lib/presence.ts`) makes DND the pale-pink `--error`, and unknown statuses fall through to solid `--outline`. Its comment says "hollow grey for away" but nothing is hollow. - UserFooter's `effectiveStatus` can be `'connecting'`, which falls through to grey, and the avatar dot's tooltip then reads "Offline" (Avatar.tsx:63-68) while the text next to it says "Connecting…". - The server-header `ConnectionDot` has its own colour logic and is 6px (BufferList.tsx:778-786, app.css:257). Voice member dots are 8px and use name-hash colours, not presence (VoiceChannels.tsx:69). `.presence-dot` is 9px. - `.presence-dot` is defined twice (app.css:3498 and 4823); class-based dots in JoinPanel.tsx:889 and AddToConversation.tsx:161 pick up the second rule's absolute positioning. - The dot's ring is `--surface-container-low` while the sidebar/footer background is `--surface-container`. **Fix:** one palette in `lib/presence.ts` (online green, idle amber, DND red, offline hollow ring, connecting pulsing grey) used by every dot, with a ring that matches the background behind it. _Part of the v1.0 UI pass._
Salastil added this to the v1.0 milestone 2026-10-07 20:42:57 -04:00
Salastil added the bug label 2026-10-07 20:42:57 -04:00
Author
Owner

Finished: 6a82c32.

Before (left) and after (right), one Discord account in each state, the server header's dot above and the account plaque's below:

presence

  • Do not disturb is red (was a pale pink).
  • Offline / away is a hollow ring, as Discord draws it (was a solid grey that looked like a missing picture).
  • Connecting pulses grey and says "Connecting…" - it was labelled Offline on the dot.
  • The server header's connection dot is now the same dot (and 8px, not 6), and the dots in the join dialogs use the same colours; the ring around an avatar's dot is the sidebar's colour (it was one shade off).

All of it lives in lib/presence.ts (presenceKind has unit tests) and one block of the stylesheet. Not done here: the voice list's dots use name colours and the member list has no dots yet - those are #293 and #288.

Finished: [6a82c32](https://git.salastil.com/Salastil/moho/commit/6a82c3261c4c925e17f4a1f57999c96e7ab91c3e). Before (left) and after (right), one Discord account in each state, the server header's dot above and the account plaque's below: ![presence](https://git.salastil.com/attachments/c942b0e7-b0e4-479e-a758-23f33f7f1f34) - **Do not disturb** is red (was a pale pink). - **Offline / away** is a hollow ring, as Discord draws it (was a solid grey that looked like a missing picture). - **Connecting** pulses grey and says "Connecting…" - it was labelled *Offline* on the dot. - The server header's connection dot is now the same dot (and 8px, not 6), and the dots in the join dialogs use the same colours; the ring around an avatar's dot is the sidebar's colour (it was one shade off). All of it lives in `lib/presence.ts` (`presenceKind` has unit tests) and one block of the stylesheet. Not done here: the voice list's dots use name colours and the member list has no dots yet - those are #293 and #288.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Salastil/moho#277