docs: update README for session 2 improvements
- Delivery status indicators for own messages - URL preview card TDS styling - Reaction chip TDS styling (dark + light) - GIF picker CSS moved to lotus-terminal.css.ts - PTT mic state save/restore - Boot animation Escape-to-skip - Read receipt debounce (150ms) - Chat background count updated
This commit is contained in:
@@ -28,7 +28,7 @@ A full custom theme engine layered on top of Cinny's vanilla-extract theming:
|
||||
- Palette: bg `#030508`, orange `#FF6B00`, cyan `#00D4FF`, green `#00FF88`, text `#c4d9ee`
|
||||
- Monospace font stack, terminal-style scrollbars
|
||||
- Custom hex-grid and circuit-board CSS background patterns
|
||||
- Matrix-style boot messages on the welcome page
|
||||
- Matrix-style boot messages on the welcome page (press Escape to skip)
|
||||
- CSS variables: `--lt-*` family covering colors, glow effects, borders, animations
|
||||
|
||||
**Light mode** (`LotusTerminalLightTheme`):
|
||||
@@ -38,7 +38,7 @@ A full custom theme engine layered on top of Cinny's vanilla-extract theming:
|
||||
- Scoped to `html[data-theme="light"] body.lotusTerminalBodyClass`
|
||||
- `ThemeManager.tsx` sets `data-theme` attribute based on active theme kind
|
||||
|
||||
**Chat Backgrounds** (18+ custom patterns, all TDS-aware):
|
||||
**Chat Backgrounds** (20+ custom patterns, all TDS-aware):
|
||||
- Blueprint grid, carbon fiber, starfield, topographic contours, herringbone, crosshatch
|
||||
- Chevron, polka dots, triangles, plaid
|
||||
- All patterns use CSS custom properties — adapt to both TDS dark and light themes
|
||||
@@ -57,6 +57,7 @@ A full custom theme engine layered on top of Cinny's vanilla-extract theming:
|
||||
- Visual indicator: plain folds `Chip` by default; when LotusGuild TDS is active: orange `PTT — Hold SPACE` / green `● LIVE` in JetBrains Mono
|
||||
- Listens on both main window and EC iframe `contentWindow` for reliable key capture
|
||||
- Implemented via `CallControl.setMicrophone()` public method on the widget bridge
|
||||
- **Mic state preservation**: when enabling PTT mode mid-call, the user's previous mic state is saved and restored when PTT is disabled — prevents unwanted unmute if the user had manually muted before switching to PTT.
|
||||
- **Noise suppression toggle**: Settings > General > Calls — passes `noiseSuppression` URL parameter to the embedded Element Call widget
|
||||
- **Call button scoping**: The upstream Cinny 4.12.1 call button (voice + video dropdown) is restricted to DMs and private group chats only. Specifically: direct messages, or invite-only rooms that have no `m.space.parent` state event (i.e. not a space/guild text channel). Public rooms and space channels are excluded to prevent accidental mass-notifications. `Room.tsx` switches to CallView layout when a call embed is active in the current room.
|
||||
- **Poll display**: `m.poll.start` events (both stable Matrix 1.7 `m.poll` content key and MSC3381 unstable `org.matrix.msc3381.poll.start`) render as read-only poll cards inside the standard message bubble — question and answer options shown. Registered as top-level event renderers AND inside the `EncryptedContent` callback so encrypted polls also display after decryption. "Open in Element to vote" note displayed. Implemented in `PollContent.tsx`.
|
||||
@@ -65,7 +66,7 @@ A full custom theme engine layered on top of Cinny's vanilla-extract theming:
|
||||
|
||||
### Messaging Enhancements
|
||||
|
||||
- **GIF picker**: Giphy-powered GIF search and send. Button appears in the message composer only when `gifApiKey` is set in `config.json`. Sends GIF as `m.image` — fetches blob, uploads via `mx.uploadContent`, sends with `mx.sendMessage`. `FocusTrap` handles click-outside / Escape to close. When TDS is active: dark navy background (`#060c14`), orange dim border, `// GIF_SEARCH` header, injected `<style>` overrides Giphy SDK search bar (dark bg, orange border/focus ring, JetBrains Mono), custom orange scrollbar.
|
||||
- **GIF picker**: Giphy-powered GIF search and send. Button appears in the message composer only when `gifApiKey` is set in `config.json`. Sends GIF as `m.image` — fetches blob, uploads via `mx.uploadContent`, sends with `mx.sendMessage`. `FocusTrap` handles click-outside / Escape to close. When TDS is active: dark navy background (`#060c14`), orange dim border, `// GIF_SEARCH` header, CSS overrides for Giphy SDK search bar (dark bg, orange border/focus ring, JetBrains Mono), custom orange scrollbar. All TDS styles live in `lotus-terminal.css.ts` — no runtime `<style>` injection, eliminating flash of unstyled content.
|
||||
- **Message forwarding**: Forward any message to any room from the message context menu.
|
||||
- **Image/video captions**: Caption text field on image and video upload — sent as a single event with the media.
|
||||
- **Location sharing**: Map embed view for incoming location events + static share button. Renders `m.location` events inline with a map tile.
|
||||
@@ -76,15 +77,39 @@ A full custom theme engine layered on top of Cinny's vanilla-extract theming:
|
||||
Full per-message read receipt system — shows who has read each message directly in the timeline.
|
||||
|
||||
**Architecture:**
|
||||
- `useRoomReadPositions(room)` hook — computes a `Map<eventId, userId[]>` from all joined members' `room.getEventReadUpTo()` positions. Subscribes to `RoomEvent.Receipt` for live updates.
|
||||
- `useRoomReadPositions(room)` hook — computes a `Map<eventId, userId[]>` from all joined members' `room.getEventReadUpTo()` positions. Subscribes to `RoomEvent.Receipt` for live updates (debounced at 150ms to batch burst updates from mass-read events).
|
||||
- `nearestRenderableId(liveEvents, evtId)` — receipts can land on reaction/edit events that `RoomTimeline` skips (renders `null`). This walks backwards from the receipt event through the live timeline until it finds a non-reaction/non-edit event to attach to.
|
||||
- `ReadPositionsContext` — React context providing the positions map from `RoomTimeline` down to all `Message` instances without prop drilling.
|
||||
- `ReadReceiptAvatars` component — renders a pill-shaped row of overlapping `StackedAvatar` circles (24px, `SurfaceVariant` outline) below messages with readers. Pill uses `color.SurfaceVariant.Container` background for visibility on any wallpaper. Max 5 avatars shown + `+N` overflow count. Avatar fallback uses `colorMXID(userId)` for distinctive per-user color.
|
||||
- Clicking the pill opens the **"Seen by" modal** (`EventReaders`) listing all readers with their avatar, display name, and a formatted read timestamp ("Today at 3:42 PM", "Yesterday at 10:15 AM", "May 14 at 9:00 AM"). Timestamps use `room.getReadReceiptForUserId(userId)?.data.ts` and respect the user's 24-hour clock setting.
|
||||
- Authenticated media (`mxcUrlToHttp` utility) used for all avatar loads, matching the correct Lotus utility signature.
|
||||
|
||||
### Delivery Status Indicators
|
||||
|
||||
Own messages display a small status marker below the message content (when no read receipts are visible yet):
|
||||
- `⟳` — message is being sent / encrypting
|
||||
- `✓` — message confirmed sent (local echo)
|
||||
- `✕` — message failed to send (shown in red; orange glow in TDS mode)
|
||||
- Status hidden once the server confirms receipt (`status === null`) — read receipts take over at that point
|
||||
|
||||
### URL Preview Cards (TDS)
|
||||
|
||||
URL preview cards (`UrlPreviewCard`) styled for terminal mode:
|
||||
- Dark transparent background with cyan border-left accent (Anduril Orange)
|
||||
- Link text in cyan, hover switches to orange with glow
|
||||
- Light TDS variant: off-white background with blue accent
|
||||
|
||||
### Reaction Chips (TDS)
|
||||
|
||||
Emoji reaction buttons styled for terminal mode via `button[data-reaction-key]` selector:
|
||||
- Unselected: `rgba(0,212,255,0.06)` background, cyan border
|
||||
- Hover: brighter background + box-shadow glow
|
||||
- Own reaction (aria-pressed=true): orange tint `rgba(255,107,0,0.12)`, orange border
|
||||
- Light TDS: equivalent blue/orange variants
|
||||
|
||||
### DM Call Improvements
|
||||
|
||||
|
||||
- **Incoming call ring**: DM calls trigger a ring tone with Answer/Decline UI. 30-second auto-dismiss if unanswered. Implemented in `Room.tsx` and `RoomViewHeader.tsx`.
|
||||
|
||||
### Infrastructure
|
||||
|
||||
Reference in New Issue
Block a user