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

feat: quick emoji reactions on hover, in-app notification toasts, mention pulse audit

Browse Source 
P5-17: MessageQuickReactions moved from 3-dots menu to hover toolbar;
shows 5 recent emoji directly on hover. Clicking a quick-reaction also
closes any open emoji picker (setEmojiBoardAnchor). Line separator
removed from component.

P5-7: LotusToastContainer slides in from bottom-right when window is
focused — replaces OS notification for in-focus events. Correct room
path (DM vs home) derived from mDirectAtom. Invite toast routes to
inbox. 4s auto-dismiss. Full TDS styling via CSS custom properties.

P5-8: Confirmed already implemented upstream (MentionHighlightPulse,
0.6s scale+glow, one-shot, prefers-reduced-motion). Marked complete.

Code-review fixes: toast navigation used nonexistent /room/ route;
emoji picker stayed open after toolbar quick-reaction.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-06-04 21:32:37 -04:00
parent 24e6882e72
commit 4876c2e4ca
7 changed files with 300 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
LOTUS_TODO.md
+9 -3
View File
@@ -1008,20 +1008,24 @@ Themes:
---
### [ ] P5-7 · In-App Notification Toast Redesign (TDS mode only)
### [x] P5-7 · In-App Notification Toast Redesign (TDS mode only)
**What:** Slim dark card sliding in from bottom-right: user avatar, display name (orange), truncated message preview, room name (dim), × dismiss. 4-second auto-dismiss. TDS variables only — non-TDS keeps existing behavior.
**[AUDIT REQUIRED]** Find where in-app notification toasts are currently rendered in `src/app/`. May be in `ClientNonUIFeatures.tsx`.
**Complexity:** Medium.
**COMPLETED June 2026.** `src/app/state/toast.ts` — `ToastNotif` type + `toastQueueAtom` (unbounded append) + `dismissToastAtom` (filter by id). `src/app/features/toast/LotusToastContainer.tsx` — fixed `position:fixed; bottom:1.5rem; right:1.5rem; z-index:9997` stack of toast cards. Each card: 24px circular avatar (img or initials fallback), display name in `--lt-accent-orange`, body text (80-char truncated), room name in `--lt-text-secondary`, × dismiss, 4 s `setTimeout` auto-dismiss. Slide-in via `@keyframes lotusToastIn` (translateX 120%→0, 0.2 s ease-out; opacity-only fade under `prefers-reduced-motion`). `<LotusToastContainer />` added in `App.tsx` as sibling to `<NightLightOverlay />` inside `JotaiProvider`. `InviteNotifications` and `MessageNotifications` in `ClientNonUIFeatures.tsx` call `setToast` and return early when `document.hasFocus()` — OS notification path unchanged when window is blurred. Message toast uses `mDirectAtom` to pick `getDirectRoomPath` vs `getHomeRoomPath` for correct `hashPath` navigation. Invite toast uses `hashPath: getInboxInvitesPath()`.
---
### [ ] P5-8 · Mention Highlight Animation
### [x] P5-8 · Mention Highlight Animation
**What:** Brief pulse/glow animation (0.4–0.6s ease-out) on incoming @mention messages. CSS keyframe: scale 1.0 → 1.005 → 1.0 + background glow pulse. Only fires on new incoming messages, not on page load. Respects `prefers-reduced-motion`.
**[AUDIT REQUIRED]** Find where mentioned messages receive their highlight class in the timeline. Verify animation doesn't affect scroll position.
**Complexity:** Low.
**COMPLETED — already upstream (discovered June 2026).** Full audit confirmed: `MentionHighlightPulse` style in `src/app/components/message/layout/layout.css.ts:113-129` — 0.6 s `ease-out` `scale(1.003)` + `Warning.Main` box-shadow glow. Wired in `Message.tsx:975` via `isMentioned && isNewRef.current` — one-shot via `isNewRef` flipped in `onAnimationEnd`. Detects `m.mentions.user_ids` and `m.mentions.room`. Scoped to `(prefers-reduced-motion: no-preference)`. No implementation needed.
---
### [ ] P5-9 · LFG (Looking for Group) Slash Command
@@ -1094,12 +1098,14 @@ Themes:
---
### [ ] P5-17 · Quick Emoji Reaction Bar (Hover Shortcut)
### [x] P5-17 · Quick Emoji Reaction Bar (Hover Shortcut)
**What:** Floating mini-bar of 5 most recent reactions above the hover toolbar. One-click react. 6th button opens full emoji board.
**[AUDIT REQUIRED]** Find the message hover toolbar in `Message.tsx` and confirm how to inject an additional row without breaking layout. Confirm recent emoji tracking mechanism in EmojiBoard.
**Complexity:** Medium.
**COMPLETED June 2026.** `MessageQuickReactions` component (already existed) moved from the 3-dots PopOut menu into the main hover toolbar in `Message.tsx`. Now renders directly on hover between the "Add Reaction" emoji-board button and the "Reply" button, guarded by `canSendReaction`. Limit increased from 4 to 5 recent emojis (`useRecentEmoji(mx, 5)`). The `<Line />` separator (appropriate in menu context only) removed from the component. `setEmojiBoardAnchor(undefined)` added to the toolbar callback so clicking a quick reaction also closes any open emoji picker. Removed from 3-dots menu entirely (was redundant). Emoji source: Matrix account data `ElementRecentEmoji`, sorted by usage count.
---
### [ ] P5-18 · Status-Based Avatar Border Color