LotusGuild/cinny
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: presence avatar border rings (P5-18) + room emoji prefix support (P5-6)

Browse Source 
P5-18: PresenceRingAvatar wrapper component applies a 2px box-shadow
ring to user avatars — green (online), yellow (idle/unavailable), red
(DND via status_msg='dnd'), no ring (offline). Applied to: message
timeline sender avatars, members drawer (members + knock requests),
@mention autocomplete, and inbox notification senders.

P5-6: Leading emoji in room names renders at 1.15× in the sidebar via
Unicode emoji regex detection in RoomNavItem. Emoji picker (EmojiBoard
in PopOut) added to all three room-name inputs: Create Room dialog
(converted to controlled input), Room Settings name field (shown only
when canEditName), and the "Rename for me" local rename dialog.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-06-04 21:56:19 -04:00
parent 4876c2e4ca
commit c5fbc20394
11 changed files with 326 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
LOTUS_TODO.md
+6 -2
View File
@@ -999,13 +999,15 @@ Themes:
---
### [ ] P5-6 · Channel / Room Emoji Prefix Support
### [x] P5-6 · Channel / Room Emoji Prefix Support
**What:** Render a leading emoji in a room name slightly larger in the sidebar for visual impact (e.g. 🎮 general). Optional: right-click room → "Set channel emoji" shortcut for admins.
**Note:** Matrix room names already support Unicode — this is purely a rendering enhancement.
**[AUDIT REQUIRED]** Confirm upstream Cinny doesn't strip or truncate leading emoji in sidebar room name display. Also confirm emoji in room names works end-to-end on `matrix.lotusguild.org`.
**Complexity:** Low.
**COMPLETED June 2026.** Two sub-features: **(1) Sidebar rendering** — `RoomNavItem.tsx` detects a leading emoji via `/^(\p{Emoji_Presentation}|\p{Extended_Pictographic})\s*/u`; if found, renders the emoji in a `<span style={{ fontSize: '1.15em' }}>` inside the `<Text truncate>` so overflow truncation still applies to the whole name. **(2) Emoji picker on room name inputs** — all three room-name inputs now have a 😊 `IconButton` that opens `EmojiBoard` in a `PopOut`; selecting an emoji prepends it to the name. Locations: Create Room dialog (`CreateRoom.tsx`, converted to controlled input), Room Settings name field (`RoomProfile.tsx`, controlled, only shown when `canEditName`), and the "Rename for me…" dialog in `RoomNavItem.tsx` (uncontrolled, prepends to `inputRef.current.value`). Pattern copied from `ProfileStatus` in `Profile.tsx`.
---
### [x] P5-7 · In-App Notification Toast Redesign (TDS mode only)
@@ -1108,12 +1110,14 @@ Themes:
---
### [ ] P5-18 · Status-Based Avatar Border Color
### [x] P5-18 · Status-Based Avatar Border Color
**What:** Colored ring on avatars matching presence: green (online), yellow (idle), red (DND), grey (offline). Subtle 2px CSS box-shadow/border. Applied across all avatar sizes.
**[AUDIT REQUIRED]** Check existing `PresenceBadge` component — this extends that concept to the avatar border. Verify folds Avatar allows border/shadow styling.
**Complexity:** Low-Medium.
**COMPLETED June 2026.** New `PresenceRingAvatar` wrapper component (`src/app/components/presence/PresenceRingAvatar.tsx`) — calls `useUserPresence(userId)` internally, applies `boxShadow: 0 0 0 2px <color>` + `borderRadius: 50%` on a transparent `inline-flex` wrapper div. Ring colors: `color.Success.Main` (online), `color.Warning.Main` (unavailable/idle), `color.Critical.Main` (DND — detected via `presence.status === 'dnd'`), no ring (offline). Applied to: message timeline sender avatars (`Message.tsx`), members drawer member + knock-request avatars (`MembersDrawer.tsx`), @mention autocomplete suggestions (`UserMentionAutocomplete.tsx`), and inbox notification sender avatars (`Notifications.tsx`). Exported via `src/app/components/presence/index.ts`.
---
### [x] P5-19 · Collapsible Long Messages ('Read more')