jared
a33d28a7ae
Pure formatting reflows (multi-line wrapping of long lines/imports/tables); no behavior change. Clears the working tree of pending prettier diffs. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
753 lines
50 KiB
Markdown
753 lines
50 KiB
Markdown
# Lotus Chat — Work Backlog
|
||
|
||
**Repo:** `lotus` branch at `https://code.lotusguild.org/LotusGuild/cinny`
|
||
**Deploy:** push to `lotus` → CI → auto-deploy to `chat.lotusguild.org` (~11 min)
|
||
|
||
---
|
||
|
||
## 🏗️ Infrastructure & Maintenance
|
||
|
||
- [x] **Upgrade Synapse to v1.155.0** ✅ Done 2026-06-18
|
||
- **Context:** 1.155.0 is the last version supporting Debian 12 Bookworm. LXC 151 is already on Debian 13 Trixie — OS migration was completed prior to this upgrade.
|
||
- **What changed (1.154→1.155):** No breaking changes, no config changes, no DB migrations. Bugfixes: to-device EDU size limiting, restricted room joins, sliding sync subscription response timing. Rust port of more internal classes (perf only).
|
||
- **MSC4452** (Preview URL capabilities) shipped in 1.154 — opt-in via `msc4452_enabled`, not enabled.
|
||
|
||
---
|
||
|
||
## 📱 Quick Feature Additions
|
||
|
||
- [x] **Full-Screen Camera Broadcasts** ⚠️ UNTESTED — verify in a real call
|
||
- **Context:** Element Call currently supports full-screening screenshares. We need to parity this functionality for camera broadcasts.
|
||
- **Goal:** Users should be able to toggle any camera feed to full-screen mode, similar to the existing screenshare full-screen implementation.
|
||
- **Implemented 2026-06-18:**
|
||
1. **Fullscreen button always shows** — removed `screenshare &&` gate in `CallControls.tsx`. The fullscreen button is now available in camera-only calls, not just during screenshares.
|
||
2. **Per-participant camera focus** — `CallControl.focusCameraParticipant(userId)` added. Finds the participant's video tile via `[data-testid="videoTile"]` / `[data-video-fit]` + `[aria-label="${userId}"]`, enables spotlight mode, then clicks the tile to focus them.
|
||
3. **MemberGlance "Focus camera" action** — clicking a participant avatar in the call status bar now opens a mini popup with "Focus camera" (triggers focusCameraParticipant) and "View profile" options, rather than immediately opening the profile.
|
||
4. **PiP fullscreen button** — a small fullscreen toggle button (⛶/⊡) is shown in the PiP overlay top-right, allowing users to go fullscreen directly from PiP mode without navigating back to the call room.
|
||
|
||
---
|
||
|
||
## ⚠️ TDS DESIGN LAW — READ BEFORE TOUCHING ANY UI
|
||
|
||
> **ALL Lotus Terminal Design System (TDS) styling — colors, animations, glows, borders, fonts, spacing — MUST come exclusively from `/root/code/web_template/base.css` CSS variables.**
|
||
> Do NOT hardcode hex values. Do NOT invent new variable names. Do NOT deviate from the design tokens defined in that file.
|
||
> The canonical variable reference: `--lt-accent-orange`, `--lt-accent-cyan`, `--lt-accent-green`, `--lt-glow-orange`, `--lt-box-glow-*`, `--lt-border-color`, etc.
|
||
> Reference implementation for code patterns: `/root/code/tinker_tickets/` (markdown.js, base.js, ticket.css)
|
||
> This rule applies to EVERY task in this file without exception.
|
||
|
||
---
|
||
|
||
Completed features are documented in [LOTUS_FEATURES.md](./LOTUS_FEATURES.md).
|
||
|
||
---
|
||
|
||
Legend:
|
||
|
||
- `[AUDIT REQUIRED]` — at least one assumption needs code/server verification before implementing
|
||
- `[SERVER CHECK]` — depends on a Synapse feature or MSC; verify on `matrix.lotusguild.org`
|
||
- `[LOW PRIORITY]` — implement after all higher-priority items
|
||
- `[EXTREME COMPLEXITY]` — multi-sprint, plan separately before touching
|
||
- `[BLOCKED]` — cannot build until a server upgrade, upstream MSC, or dependency resolves
|
||
- `[IMPROVE]` — feature exists in upstream Cinny; this task enhances it for Lotus Chat
|
||
|
||
Status: `[ ]` pending · `[~]` in progress · `[x]` completed
|
||
|
||
---
|
||
|
||
## Server Capabilities (as of June 2026)
|
||
|
||
- **Homeserver:** `matrix.lotusguild.org`
|
||
- **Synapse version:** `1.155.0` (2026-06-18) — fully up to date; last version for Debian 12 (LXC 151 already on Debian 13 Trixie)
|
||
- **Matrix spec:** up to `v1.12` formally; newer MSC features via `unstable_features`
|
||
|
||
### Confirmed facts
|
||
|
||
| Finding | Impact |
|
||
| --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
|
||
| **MSC flags ON:** `msc4140` · `msc3771` · `msc3440.stable` · `msc4133.stable` · `simplified_msc3575` · `msc4222` · `msc3266` · `msc3401_matrix_rtc` | All safe to use now |
|
||
| **MSC flags OFF:** `msc4306` (thread subscriptions) · `msc3882` · `msc3912` · `msc4155` | These features are BLOCKED |
|
||
| **MSC3266** room summary: flag `msc3266_enabled: true` set but `GET /v1/rooms/{id}/summary` still returns 404 (M_UNRECOGNIZED) | Room Preview BLOCKED — endpoint not implemented in Synapse 1.155 |
|
||
| **MSC3892** relation redaction: not in flags | Reaction Redaction feature BLOCKED |
|
||
| **MSC4260** report user: `POST /_matrix/client/v3/users/{userId}/report` returns **200** ✅ | **Report User UNBLOCKED** — endpoint live since Synapse 1.133; ready to build |
|
||
| **MSC4151** report room: HTTP 405 on GET = endpoint exists (POST only) | Report Room live ✅ |
|
||
| `folds AvatarImage` does NOT accept children | Add frame/overlay inside `UserAvatar.tsx` itself — optional `frameName` prop |
|
||
| No in-app toast system exists (was) | Built `ToastProvider` + Jotai queue; at `App.tsx:65` |
|
||
| `useUnverifiedDeviceCount()` hook exists | `src/app/hooks/useDeviceVerificationStatus.ts:65-106` |
|
||
| Voice player: `AudioContent.tsx:44-223` | Playback rate on hidden `<audio>` at line 217 |
|
||
| `CallControl.setMicrophone(bool)` at `CallControl.ts:206-212` | For AFK auto-mute |
|
||
| `CallControl.toggleSound()` at `CallControl.ts:230-251` | Push-to-deafen — just wire a hotkey to this |
|
||
| matrix-js-sdk has NO arbitrary profile field methods | Use `mx.http.authedRequest()` for MSC4133 |
|
||
| Sanitizer (`sanitize.ts`) allows table, div, span, a, code, hr | LFG HTML card is safe locally; test on Element/FluffyChat |
|
||
| Sanitizer STRIPS `<math>`/MathML tags | Math/LaTeX task must also modify sanitizer |
|
||
| Service worker EXISTS at `src/sw.ts` | Quick-reply task: add `notificationclick` handler |
|
||
| `knockSupported()` utility exists at `matrix.ts:376-391` | Knock UX: only need "Request to Join" in `RoomIntro.tsx` |
|
||
| `KeywordMessages.tsx` already has custom keyword push rules | Full push rule editor: only non-keyword rule types need new UI |
|
||
| `getMatrixToRoom()` in `matrix-to.ts` generates invite URLs | Invite link: just add QR code to room settings |
|
||
| Cindy CANNOT inject audio into EC call stream | In-call soundboard must be redesigned as local-only |
|
||
| Folds uses vanilla-extract in non-TDS, NOT CSS custom properties | Custom accent color: must create new vanilla-extract theme variant dynamically |
|
||
| Theme presets need ~50 CSS custom properties each | Significant design work before coding |
|
||
| `useCallSpeakers.ts` CSS MutationObserver polling | Visual speaking indicator: TDS ring animation on top of existing data |
|
||
| MSC3489/3672 live location: BOTH false on server | Live Location BLOCKED |
|
||
|
||
---
|
||
|
||
## Key File Reference
|
||
|
||
| What you need | File | Lines |
|
||
| -------------------------------- | ------------------------------------------------------------- | ------------------- |
|
||
| Global keydown hook | `src/app/hooks/useKeyDown.ts` | whole file |
|
||
| Room navigation | `src/app/hooks/useRoomNavigate.ts` | 19-72 |
|
||
| All room IDs atom | `src/app/state/room-list/roomList.ts` | `allRoomsAtom` |
|
||
| Room unread counts | `src/app/state/room/roomToUnread.ts` | `roomToUnreadAtom` |
|
||
| Overlay portal provider | `src/app/pages/App.tsx` | 65 |
|
||
| Portal container div | `index.html` | 101 |
|
||
| Room settings tabs | `src/app/features/room-settings/RoomSettings.tsx` | 27-56 |
|
||
| State event read/write pattern | `src/app/features/common-settings/general/RoomEncryption.tsx` | 42-52 |
|
||
| Power level checker | `src/app/hooks/usePowerLevels.ts` | whole file |
|
||
| Slash command registration | `src/app/hooks/useCommands.ts` | 140-537 |
|
||
| Chat background picker | `src/app/features/settings/general/General.tsx` | 945-981 |
|
||
| Chat backgrounds definition | `src/app/features/lotus/chatBackground.ts` | whole file |
|
||
| Matrix.to URL builder | `src/app/plugins/matrix-to.ts` | `getMatrixToRoom()` |
|
||
| Media event content types | `src/app/types/matrix/common.ts` | 46-91 |
|
||
| Media URL conversion | `src/app/utils/matrix.ts` | `mxcUrlToHttp()` |
|
||
| Message pagination (search) | `src/app/features/message-search/useMessageSearch.ts` | 74-121 |
|
||
| Infinite pagination pattern | `src/app/features/message-search/MessageSearch.tsx` | 234-365 |
|
||
| Poll event format | `src/app/components/message/content/PollContent.tsx` | 1-320 |
|
||
| Theme class application | `src/app/hooks/useTheme.ts` | 25-60 |
|
||
| Animations file | `src/app/styles/Animations.css.ts` | whole file |
|
||
| Message status (EventStatus) | `src/app/features/room/message/Message.tsx` | 84-142 |
|
||
| Call member change events | `src/app/hooks/useCall.ts` | 37-52 |
|
||
| Mic control in calls | `src/app/plugins/call/CallControl.ts` | 206-212 |
|
||
| Device verification hook | `src/app/hooks/useDeviceVerificationStatus.ts` | 65-106 |
|
||
| Knock room support check | `src/app/utils/matrix.ts` | 376-391 |
|
||
| Room join button location | `src/app/components/room-intro/RoomIntro.tsx` | 25-119 |
|
||
| Notification mute via push rules | `src/app/hooks/useRoomsNotificationPreferences.ts` | 110-150 |
|
||
| Message text body CSS | `src/app/components/message/layout/layout.css.ts` | 182-205 |
|
||
|
||
---
|
||
|
||
## Priority 3 — Higher complexity / lower daily frequency
|
||
|
||
### [ ] P3-4 · Accessibility Improvements (WCAG 2.1 AA)
|
||
|
||
**What:** Comprehensive audit and fix pass targeting the critical user paths:
|
||
|
||
- Room list navigation (keyboard-only)
|
||
- Reading messages in the timeline (screen reader announces new messages)
|
||
- Composing and sending a reply
|
||
- Opening and closing modals (focus trap, return focus)
|
||
- ARIA labels on all icon-only buttons
|
||
|
||
**Scope:** Do NOT attempt to make every corner of the app AA-compliant in one pass — focus on the golden path (open app → find room → read → reply → send).
|
||
**[AUDIT REQUIRED]** — Run an automated audit first: `npx axe-core` or browser DevTools accessibility tree. Document every violation before writing a single line of code. Prioritize by severity (critical > serious > moderate).
|
||
|
||
**Investigation Findings:**
|
||
|
||
- **Root Cause:** Inconsistent focus management, missing `aria-live` regions for dynamic timeline updates, and sparse global keyboard shortcuts.
|
||
- **Approach:** Standardize `focus-trap-react` usage (reference `RoomNavItem.tsx`). Add `aria-live` regions to the timeline. Expand `useKeyDown.ts` for section navigation shortcuts.
|
||
- **Complexity:** Medium-High (audit is the main work).
|
||
|
||
---
|
||
|
||
### [ ] P3-8 · Thread Panel (full side drawer)
|
||
|
||
**⚠️ LARGEST FEATURE — requires its own planning session before implementation.**
|
||
**What:** A right-side drawer for threaded conversations. Currently "Reply in Thread" exists but there is no panel to read or write thread replies.
|
||
|
||
Features:
|
||
|
||
- Click "Reply in Thread" → opens thread drawer on the right
|
||
- Thread root event shown at the top of the panel
|
||
- Full message rendering for all in-thread replies (reuse timeline components)
|
||
- Reply input at the bottom (full composer with formatting, emoji, etc.)
|
||
- Unread count badge on the thread button in the main timeline
|
||
- Keyboard shortcut to close thread panel
|
||
|
||
**Architecture:**
|
||
|
||
- New Jotai atom: `activeThreadEventId: string | null`
|
||
- New component: `src/app/features/room/thread/ThreadPanel.tsx`
|
||
- Rendered alongside `RoomView` as a conditional right panel (mirror the members drawer pattern)
|
||
- Filter events in timeline to `m.thread` relation for the active root event ID
|
||
- Shares the same `mx` client and room reference as the main timeline
|
||
|
||
**[AUDIT REQUIRED]** — Deeply audit how `m.thread` relation events are currently stored and retrieved in the matrix-js-sdk. Understand the thread aggregation API: `GET /rooms/{roomId}/relations/{eventId}/m.thread`. Check if `RoomTimeline.tsx` currently filters out thread replies from the main timeline (it should — confirm).
|
||
|
||
**Investigation Findings:**
|
||
|
||
- **Root Cause:** Current `m.thread` events are treated as standard `m.room.message` events and rendered in the main timeline.
|
||
- **Approach:** Introduce new Jotai atom `activeThreadEventId`. Create `ThreadPanel.tsx`. Update `RoomTimeline.tsx` to filter out thread relations (`m.relates_to`). Implement aggregation fetch using `GET /rooms/{roomId}/relations/{eventId}/m.thread`. Use `thread.timelineSet` directly for the most accurate thread view.
|
||
- **Complexity:** High.
|
||
|
||
---
|
||
|
||
## Priority 4 — Specialized, high complexity, or low priority
|
||
|
||
### [ ] P4-7 · Virtualized Infinite Scroll for Search Results
|
||
|
||
**What:** Replace the manual "load more" button with an automated, virtualized infinite scroll for search results.
|
||
**Approach:** Utilize `@tanstack/react-virtual` in `MessageSearch.tsx` to handle the `nextToken` automatically as the user scrolls.
|
||
|
||
### [ ] P4-8 · Encrypted Message Search Indexing & Caching
|
||
|
||
**What:** Implement a persistent local cache for search results, optimized for encrypted rooms.
|
||
**Approach:** Use `IndexedDB` to store search metadata (event IDs, timestamps) to prevent redundant server-side decryption/fetching.
|
||
|
||
### [x] P4-9 · Advanced Search Filter UI — PARTIALLY DONE (UNTESTED)
|
||
|
||
**What:** Improve search filter UX in `SearchFilters.tsx`.
|
||
**Completed 2026-06-18:**
|
||
|
||
- ✅ `SelectSenderButton` — picker UI for sender filter (previously required typing `from:@user` by hand)
|
||
- ✅ `DateRangeButton` — quick-pick presets: Today / Last week / Last month / Last year
|
||
- ✅ `Has link` chip — `contains_url: true` filter, wired to Matrix API and URL param
|
||
**UNTESTED** — needs verification at chat.lotusguild.org.
|
||
|
||
**Remaining for parity with Discord/Slack:**
|
||
|
||
- [ ] `has:image` / `has:file` / `has:video` — msgtype filters (require client-side post-filtering, no server API)
|
||
- [ ] Pinned messages filter
|
||
- [ ] Saved searches / search history
|
||
|
||
---
|
||
|
||
### [ ] P4-1 · Thread Notification Mode Per-Thread (MSC3771)
|
||
|
||
**Spec:** MSC3771 (stable). Depends on Thread Panel (#P3-8).
|
||
**What:** Per-thread notification toggle: "All messages" vs "Mentions only". Accessible from the thread panel header. Tracks unread counts separately per thread.
|
||
**[AUDIT REQUIRED]** — Implement after Thread Panel. Requires understanding how the SDK tracks per-thread unread counts.
|
||
**Complexity:** Medium (after thread panel exists).
|
||
|
||
---
|
||
|
||
### [ ] P4-2 · Thread Subscriptions (MSC4306) [BLOCKED]
|
||
|
||
**Spec:** MSC4306 (Synapse experimental). Depends on Thread Panel (#P3-8).
|
||
**What:** "Follow thread" button to receive notifications for a thread you haven't posted in. Uses MSC4306 subscription endpoint.
|
||
**[SERVER CHECK]** — `org.matrix.msc4306 = false` on `matrix.lotusguild.org` — BLOCKED until server enables it.
|
||
**Complexity:** Medium (after thread panel exists).
|
||
|
||
---
|
||
|
||
### [ ] P4-4 · Math / LaTeX Rendering in Messages (LOW PRIORITY)
|
||
|
||
**Spec:** CS-API §11.5 (stable) — `formatted_body` can contain LaTeX.
|
||
**What:** Render `$...$` or `$$...$$` LaTeX expressions in message bodies. Use KaTeX (lightweight, ~100KB, renders server-side-compatible CSS). Must gracefully fall back to raw LaTeX text if KaTeX fails.
|
||
**Note:** This is LOW PRIORITY — only useful for academic/technical communities. Implement last.
|
||
**[AUDIT REQUIRED]** — Confirm KaTeX bundle size impact on the Vite bundle. Check if matrix-js-sdk's HTML sanitizer strips LaTeX before it reaches the renderer. The formatted_body sanitization pipeline is the main risk here. (Confirmed: sanitizer STRIPS `<math>` tags — must be patched alongside the renderer.)
|
||
**Complexity:** Low-Medium.
|
||
|
||
---
|
||
|
||
### [ ] P4-5 · Live Location Sharing (MSC3489 + MSC3672) (LOW PRIORITY, HIGH COMPLEXITY) [BLOCKED]
|
||
|
||
**Spec:** MSC3489 + MSC3672. Implemented in Element Web.
|
||
**Note:** Static location sharing is already implemented. This adds live/real-time GPS beacons. Very low priority per user preference.
|
||
**What:** Start sharing live location → creates `m.beacon_info` state event → client posts `m.beacon` events on a timer → other users see your position update live on a map.
|
||
**[SERVER CHECK]** — `org.matrix.msc3489 = false` AND `org.matrix.msc3672 = false` on `matrix.lotusguild.org` — BLOCKED.
|
||
**Complexity:** High. Requires background geolocation API + live map rendering.
|
||
|
||
---
|
||
|
||
### [ ] P4-6 · OIDC / SSO Next-Gen Auth (MSC3861) (EXTREME COMPLEXITY, LOW PRIORITY)
|
||
|
||
**Spec:** MSC3861, merged Matrix spec v1.15. Uses Matrix Authentication Service (MAS).
|
||
**Context:** ~80% of homeserver users have LLDAP/Authelia/SSO accounts. SSO is currently enabled on `matrix.lotusguild.org` but accounts are not yet linked. This would allow users to log in via their SSO credentials.
|
||
**What:** OAuth 2.0 / OIDC login flow, token refresh, account management page linking Matrix identity to SSO identity.
|
||
**EXTREME COMPLEXITY** — requires: MAS deployment/configuration on the homeserver, significant auth flow changes in the client, token refresh handling, session management overhaul.
|
||
**[SERVER CHECK]** — Before any client work, audit whether MAS is already deployed on `compute-storage-01`. Check: `pct exec 151 -- systemctl status matrix-authentication-service` or similar.
|
||
**Complexity:** Extreme. Multi-sprint project. Plan separately.
|
||
|
||
---
|
||
|
||
## Priority 5 — Gamer / Aesthetic / Customization
|
||
|
||
### [ ] P5-1 · Custom Accent Color Picker (non-TDS mode only)
|
||
|
||
**What:** A hex/HSL color picker in Settings → Appearance. Chosen color replaces the primary accent throughout the UI: buttons, badges, active states, highlights, presence dot, links. Applied via a CSS custom property override injected into `<head>`.
|
||
**IMPORTANT:** This feature is completely inactive when TDS is enabled — TDS has its own fixed palette. Add this setting under a "Non-TDS Themes" section that is hidden when TDS is active.
|
||
**[AUDIT REQUIRED]** Identify all CSS custom properties that constitute the "accent color" in non-TDS mode. Map them to the folds/vanilla-extract token names. (Confirmed: folds uses vanilla-extract, NOT CSS custom properties — must create a new vanilla-extract theme variant dynamically.)
|
||
**Complexity:** Medium.
|
||
|
||
---
|
||
|
||
### [ ] P5-2 · Additional Color Theme Presets
|
||
|
||
**What:** 5 new one-click theme presets alongside TDS. Each must be a complete, polished system with proper contrast ratios (WCAG AA). All implemented as vanilla-extract themes matching the existing TDS pattern.
|
||
|
||
Themes:
|
||
|
||
1. **Cyberpunk** — deep navy bg (`#0a0015`), electric purple (`#bf5fff`) + hot pink (`#ff2d9b`) accents, neon glow
|
||
2. **Ocean** — deep sea blue bg (`#020b18`), teal (`#00c9b1`) + aqua (`#0096d6`) accents, soft feel
|
||
3. **Blood Red** — near-black bg (`#0d0203`), deep crimson (`#7a0010`) + bright red (`#ff2233`) accents
|
||
4. **Classic Matrix** — pure black bg (`#000000`), phosphor green (`#00ff41`) text + accents
|
||
5. **Midnight** — dark charcoal (`#111827`), cool blue-grey (`#6b7ca8`) accents, clean minimal
|
||
|
||
**[AUDIT REQUIRED]** Study `src/lotus-terminal.css.ts` for the full token list before designing themes. All tokens must be covered (~50 CSS custom properties each).
|
||
**Complexity:** Medium (design effort is the main cost).
|
||
|
||
---
|
||
|
||
### [MOVED] P5-9 · LFG (Looking for Group) Command → LotusBot
|
||
|
||
**Decision:** Implemented as `!lfg` in LotusBot rather than a client slash command. Bot-side rendering works consistently across all Matrix clients; client-side enhanced cards would only be visible to Lotus Chat users and require sanitizer auditing. The bot can also support richer flows (list active LFGs, DM interested players, auto-expire posts).
|
||
|
||
---
|
||
|
||
### [x] P5-5 · Intersection-Based Lazy Loading ⚠️ UNTESTED — needs verification in timeline with many images
|
||
|
||
**What:** Use `IntersectionObserver` to trigger media decryption and loading only when components approach the viewport.
|
||
**Approach:** Reduce initial memory footprint and improve timeline load times by deferring decryption of images/videos until they are visible.
|
||
|
||
### [x] P5-6 · Context-Aware Thumbnail Previews ⚠️ UNTESTED
|
||
|
||
**What:** Enhance thumbnail rendering in the timeline for consistent, polished aesthetics.
|
||
**Approach:** Use CSS `object-fit: cover` with improved focal-point centering within `ThumbnailContent` to prevent media stretching or awkward aspect-ratio cropping.
|
||
**Fix Applied:** Added `objectPosition: 'center top'` to: (1) `media.css.ts` → `Image` component (timeline images), (2) video thumbnail inline style in `RenderMessageContent.tsx`, (3) `GalleryTile` `<img>` in `MediaGallery.tsx`. Full-size viewers retain `objectFit: 'contain'` — no change. `objectPosition: 'center top'` prevents face/subject cropping on tall portrait images capped at 600px by `AttachmentBox`.
|
||
|
||
---
|
||
|
||
### [ ] P5-15 · In-Call Soundboard
|
||
|
||
**What:** Grid of short audio clips playable into the call audio stream via Web Audio API (AudioBufferSourceNode → MediaStreamDestinationNode → mixed with mic). Built-in clips + user-uploadable custom clips (stored as mxc://). Accessible from call controls bar.
|
||
**[AUDIT REQUIRED]** Verify the Element Call integration exposes the mic MediaStream for mixing. This is the highest-risk part of this feature.
|
||
**Complexity:** High.
|
||
|
||
---
|
||
|
||
### [~] P5-20 · Quick Reply from Browser Notification
|
||
|
||
**What:** Inline reply field in browser notification toasts via Notification Actions API. Reply sends as threaded reply to the triggering message.
|
||
**[AUDIT REQUIRED]** (1) Verify browser Notification Actions API support in target browsers. (2) Confirmed: service worker EXISTS at `src/sw.ts` — add `notificationclick` handler there.
|
||
**Complexity:** Medium-High.
|
||
**Partial Fix Applied ⚠️ UNTESTED:** Notifications now (a) show the real message body (`username: message` instead of "New inbox notification from..."), (b) click navigates directly to the room at the specific event (not the inbox), (c) `window.focus()` called on click so the tab comes to front, (d) reminder toasts also link to the specific event. Full inline-reply via Notification Actions API still needs the SW `push`+`notificationclick` pipeline (requires switching from `new Notification()` to `showNotification()` through the SW).
|
||
|
||
---
|
||
|
||
### [x] P5-30 · Advanced ML Noise Suppression (Krisp-style)
|
||
|
||
**What:** High-end background noise cancellation using a pre-trained ML model (RNNoise) running in the browser. Removes dogs, fans, and keyboard clicks from the mic stream.
|
||
**Shipped:** 3-tier setting (Off / Browser-native / ML) in Settings → General → Calls. ML tier injects a same-origin pre-init shim into the vendored Element Call `index.html` that monkeypatches `getUserMedia` and routes the captured mic through an RNNoise `AudioWorklet` before LiveKit publishes — no EC fork required. See LOTUS_FEATURES.md → "Noise Suppression (Advanced Multi-Tier)".
|
||
**Key decision:** LiveKit's Krisp filter is LiveKit-Cloud-only (we self-host the SFU); EC's own RNNoise PR #3892 is unmerged. The shim is the same post-capture pipeline #3892 uses, executed from the realm we control, so it survives EC version bumps.
|
||
**AEC note (resolved-as-accepted):** WebAudio capture routing can weaken browser AEC — same tradeoff as EC's upstream feature; mitigated by keeping `echoCancellation`/`autoGainControl` on the raw capture and labeling the tier "beta".
|
||
|
||
**Model Roadmap (priority order):**
|
||
|
||
- [ ] **Verify DTLN** (16 kHz narrowband fix) in a real call before investing further — wired but unverified.
|
||
- [ ] **DeepFilterNet 3** — best self-hostable upgrade: Rust→WASM, CPU real-time, 48 kHz fullband. Effort: self-host `df_bg.wasm` + DFN3 ONNX model, wire a 48 kHz worklet.
|
||
- [ ] **Desktop-only / HW-gated:** FRCRN or NVIDIA Maxine (RTX/Tensor only) — impossible in-browser; would run in Tauri Rust backend + bridge a virtual mic into the webview. Must detect capability and only offer on supported hardware; web falls back to RNNoise.
|
||
- **Excluded:** Krisp (LiveKit Cloud only); FRCRN/Maxine on web (GPU/server-bound).
|
||
|
||
---
|
||
|
||
### [ ] P5-31 · Granular Voice & Screenshare Quality Controls (Discord-style)
|
||
|
||
**What:** Let users (or room admins via room settings) adjust audio bitrates (e.g., 64kbps to 512kbps) and screenshare quality (resolution: 720p/1080p/Source, framerate: 15/30/60fps).
|
||
**Note:** Requires tight integration with the LiveKit SFU and custom state events for per-room quality caps.
|
||
**[AUDIT REQUIRED]** Must verify if current `lk-jwt-service` can be extended with custom bitrate/resolution claims or if a new sidecar (similar to `voice-limit-guard`) is needed for server-side enforcement.
|
||
**Complexity:** Extreme.
|
||
|
||
---
|
||
|
||
### [ ] P5-35 · Desktop — Notification Click Opens Room (DEFERRED)
|
||
|
||
**What:** Clicking a system tray notification navigates to the relevant room. Quick-reply from the notification toast would send the reply without opening the window.
|
||
**Status:** Deferred — `tauri-plugin-notification` has no Rust click/action callback API. Quick-reply would need a custom WinRT toast activator + COM registration, which can't be compile-tested without a Windows build environment.
|
||
**Note:** Tray icon and `matrix:` deep links already bring the window forward on most interactions. Revisit when tauri-plugin-notification gains click handler support upstream.
|
||
**Complexity:** High (platform-specific native code required).
|
||
|
||
---
|
||
|
||
### [ ] P5-36 · Desktop — Windows Jump List (DEFERRED)
|
||
|
||
**What:** Right-clicking the taskbar icon shows a jump list with recent/favorite rooms for quick navigation.
|
||
**Status:** Deferred — implementing the Windows COM jump list API in Tauri requires iterating on C++/COM code that can only be compile-checked on Windows, making blind CI iteration impractical.
|
||
**Action when unblocked:** Revisit when a Tauri plugin abstracts the Windows Shell `ICustomDestinationList` interface, or when a Windows build environment is available for local iteration.
|
||
**Complexity:** High (Windows-only native COM).
|
||
|
||
---
|
||
|
||
### [x] P5-40 · Desktop — Proactive Update Notifications (Tauri) ⚠️ UNTESTED (requires Tauri build)
|
||
|
||
**What:** Automatically check for app updates on launch and periodically during long sessions. If an update is available, show an in-app toast or badge (e.g., on the Settings icon) to alert the user without requiring a manual check in settings.
|
||
**Mechanism:** Use the `useTauriUpdater` hook in a global component like `ClientNonUIFeatures.tsx`.
|
||
**Note:** Ensure the check is throttled (e.g., once every 12 hours) to avoid redundant Tauri commands.
|
||
**Complexity:** Low-Medium.
|
||
|
||
---
|
||
|
||
### [ ] P5-41 · Desktop — Native WinRT Toast Notifications
|
||
|
||
**What:** Replace emulated notifications with native WinRT Toast notifications.
|
||
**Approach:** Implement native WinRT Toast integration using `windows-rs` to enable full Action Center integration, including native Quick Reply functionality.
|
||
|
||
### [ ] P5-42 · Desktop — Persistent Background Sync
|
||
|
||
**What:** Maintain light connection to homeserver when WebView2 is suspended.
|
||
**Approach:** Implement a headless Rust sidecar to fetch unread counts/notifications while the webview is suspended to ensure instant notification delivery.
|
||
|
||
### [ ] P5-43 · Desktop — System Media Transport Controls (SMTC)
|
||
|
||
**What:** Integrate with Windows SMTC for volume flyout call/media control.
|
||
**Approach:** Use Windows SMTC API to expose call status, mic mute/unmute, and media controls to the Windows volume flyout/media overlay.
|
||
|
||
### [ ] P5-44 · Desktop — Taskbar Thumbnail Toolbar
|
||
|
||
**What:** Add persistent call controls to the taskbar preview.
|
||
**Approach:** Implement a COM thumbnail toolbar in the application preview window, featuring Mute/Deafen/End Call buttons.
|
||
|
||
### [ ] P5-46 · Desktop — System Power Management (Call Continuity)
|
||
|
||
**What:** Prevent system sleep/hibernate during active calls.
|
||
**Approach:** Use Tauri/Rust `power-manager` or platform-specific APIs to block system power saving states while a voice/video session is active.
|
||
|
||
### [ ] P5-47 · Desktop — TDS-Styled Native Window Chrome
|
||
|
||
**What:** Replace system titlebar with custom Lotus TDS chrome.
|
||
**Approach:** Configure Tauri window (`decorations: false`) and implement custom, TDS-token compliant titlebar controls (Close/Max/Min) for a cohesive UI.
|
||
|
||
### [ ] P5-48 · Desktop — Native File System Drag-and-Drop Improvements
|
||
|
||
**What:** Enhance drag-and-drop support for Windows.
|
||
**Approach:** Improve handling for Windows file shortcuts, recursive folder uploads, and shell-integrated "Send To" context menu actions.
|
||
|
||
### [ ] P5-49 · Desktop — Network Awareness (NCSI Integration)
|
||
|
||
**What:** Proactively detect Windows network connectivity changes.
|
||
**Approach:** Integrate with the Windows Network Connectivity Status Indicator (NCSI) API to improve offline mode transition latency and network recovery.
|
||
|
||
### [ ] P5-50 · Desktop — Windows Hardware-Accelerated Media Pipeline
|
||
|
||
**What:** Replace standard browser decoding with native Windows Media Foundation.
|
||
**Approach:** Leverage DirectShow/Media Foundation to offload video/audio decoding from the CPU to the GPU, significantly reducing power consumption and latency during calls.
|
||
|
||
### [ ] P5-51 · Desktop — Federated "Identity Contexts" (Isolation Manager)
|
||
|
||
**What:** Compartmentalize sessions, local databases, and caches into isolated "Contexts."
|
||
**Approach:** Implement a zero-leak boundary for personas (e.g., Work vs. Personal) by isolating `IndexedDB`, filesystem caches, and session persistence per context.
|
||
**Priority:** Extreme Low (Multi-sprint/Architectural).
|
||
|
||
### [~] P5-52 · Desktop — Room-Level Sync Governor (Performance Control) [STILL_CONSIDERING]
|
||
|
||
**What:** Granular sync tuning for individual rooms.
|
||
**Approach:** Allow per-room overrides for sync frequency and event type filtering (e.g., disable read receipts/typing in heavy rooms) to optimize performance. Implementation requires careful UX to prevent complexity fatigue.
|
||
|
||
### [ ] P5-53 · Desktop — Local-Only "Scripting" Plugin System (Tampermonkey-like)
|
||
|
||
**What:** A sandboxed environment for local execution of user scripts on Matrix events.
|
||
**Approach:** Implement a WASM-based execution engine that allows users to write local-only, client-side scripts to interact with incoming Matrix events, trigger sounds/notifications, or inject custom UI elements based on event payload rules. Designed for privacy — all logic runs exclusively on the local machine.
|
||
|
||
### [ ] P5-55 · Desktop — Composer Toolbar Drag-and-Drop Reordering
|
||
|
||
**What:** Allow users to reorder toolbar icons via drag-and-drop.
|
||
**Approach:** Extend the current settings-based toolbar toggle system to include a drag-and-drop UI mode in the composer settings, allowing users to personalize their icon order.
|
||
|
||
### [ ] P5-56 · Desktop — Windows "Focus Assist" (DND) Sync
|
||
|
||
**What:** Automatically toggle notification state based on Windows Focus Assist.
|
||
**Approach:** Integrate with the Windows `NotificationCenter` / `Focus` state via Tauri/Rust to automatically enable/disable Lotus Chat's internal notification suppression mode when Windows Focus Assist is toggled.
|
||
|
||
### [ ] P5-57 · Desktop — Visual Draft Persistence Indicator
|
||
|
||
---
|
||
|
||
## 🚀 Features to Add
|
||
|
||
- [ ] **Mobile Audit:** Comprehensive audit of all features in LOTUS_FEATURES.md for mobile PWA usability and layout responsiveness.
|
||
- [x] **Remind Me Later:** Slack-style reminders for messages — fully implemented ⚠️ UNTESTED end-to-end
|
||
- **Storage:** `useReminders.ts` — persists to `io.lotus.reminders` account data with `addReminder` / `removeReminder` / `getReminders`
|
||
- **UI:** `RemindMeDialog.tsx` — 4 presets (20 min, 1 hr, 3 hr, tomorrow 9am); wired into `Message.tsx` context menu via `remindOpen` state; `useModalStyle(320)` for mobile fullscreen
|
||
- **Monitor:** `ReminderMonitor` in `ClientNonUIFeatures.tsx` — polls every 30s + on tab visibility; fires Lotus toast when due and calls `removeReminder`
|
||
- [x] **Mobile Bookmarks:** Fixed ⚠️ UNTESTED — bookmarks now accessible from within any room on mobile
|
||
- **Root Cause:** `BookmarksPanel` renders correctly on mobile but `BookmarksTab` lives in `SidebarNav`, which is hidden when inside a room on mobile (`MobileFriendlyClientNav` returns `null`). No trigger existed.
|
||
- **Fix:** Added "Saved Messages" `MenuItem` to the `RoomMenu` (···More Options) in `RoomViewHeader.tsx`. Toggles `bookmarksPanelAtom` and closes the menu. Works on all screen sizes — desktop users see it as a duplicate of the sidebar star, mobile users now have their only in-room access point.
|
||
|
||
---
|
||
|
||
## Blocked Features
|
||
|
||
These features are confirmed desirable but cannot be built until the listed dependency is resolved.
|
||
Check back after each Synapse upgrade — re-run `/matrix/client/versions` and `unstable_features` to see if they've become available.
|
||
|
||
### [BLOCKED] · Live Location Sharing (MSC3489 + MSC3672)
|
||
|
||
**Blocked by:** `org.matrix.msc3489 = false` AND `org.matrix.msc3672 = false` on `matrix.lotusguild.org` (confirmed from unstable_features).
|
||
**What it would do:** Real-time GPS beacon streaming upgrading the existing static location share.
|
||
**Action when unblocked:** Both MSCs must be enabled on the homeserver before any client work.
|
||
|
||
### [BLOCKED] · Reaction / Relation Redaction (MSC3892)
|
||
|
||
**Blocked by:** `org.matrix.msc3892` = false on `matrix.lotusguild.org`
|
||
**What it would do:** Cleanly remove a reaction without redacting the parent message.
|
||
**Current behavior:** Full event redaction — acceptable fallback, no user-facing issue.
|
||
**Action when unblocked:** Find `onReactionToggle` redaction call site; swap in MSC3892 endpoint with fallback.
|
||
|
||
### [BLOCKED] · Room Preview Before Joining (MSC3266)
|
||
|
||
**Blocked by:** `GET /_matrix/client/v1/rooms/{roomId}/summary` returns `M_UNRECOGNIZED` 404 — endpoint not implemented in Synapse 1.155. Config flag `msc3266_enabled: true` is set but has no effect; Synapse appears not to have shipped a stable implementation at the v1 path. Verified 2026-06-18.
|
||
**What it would do:** Show room name, topic, avatar, member count before joining.
|
||
**Action when unblocked:** Re-test after each future Synapse upgrade.
|
||
|
||
### [BLOCKED] · Thread Subscriptions (MSC4306)
|
||
|
||
**Blocked by:** `org.matrix.msc4306` = false on `matrix.lotusguild.org`
|
||
**What it would do:** Follow a thread without posting; get notifications for replies.
|
||
**Action when unblocked:** Add "Follow thread" button in the thread panel header (depends on #P3-8 Thread Panel).
|
||
|
||
### [DONE] · Report User (MSC4260) ✅
|
||
|
||
**Previously blocked by:** Server spec v1.12, but `POST /_matrix/client/v3/users/{userId}/report` was confirmed **200** on 2026-06-18 (live since Synapse 1.133.0).
|
||
**What it does:** Reports a specific user to homeserver admins (separate from reporting a message).
|
||
**Note:** Report Message already exists in upstream Cinny. This adds Report User to the profile panel.
|
||
**Implemented 2026-06-18:** `ReportUserModal.tsx` added at `src/app/features/room/ReportUserModal.tsx`. Button wired into `UserRoomProfile.tsx` between UserModeration and UserDeviceSessions (hidden for own profile). Category dropdown + reason text, inline success/error feedback, auto-close 1500ms after success.
|
||
|
||
---
|
||
|
||
## Pending Audits
|
||
|
||
### [ ] Audit-3 · Profile banner image — Matrix protocol support
|
||
|
||
Research whether Matrix spec or MSC4133 (v1.16) defines a standard profile banner field. `uk.tcpip.msc4133.stable = true` on our server — check if a `banner_url` or similar field is defined. If no cross-client standard exists, do not implement.
|
||
|
||
---
|
||
|
||
## 📚 Implementation Reference
|
||
|
||
Exhaustive, low-level implementation details for backlog items. Follow these patterns to ensure code is "Lotus-perfect" (idiomatic, performant, and TDS-compliant).
|
||
|
||
### P3-8 · Thread Panel (Full Side Drawer)
|
||
|
||
**Architecture:** Mirror the `MembersDrawer` pattern but with a specialized timeline.
|
||
|
||
- **State (`src/app/state/room/thread.ts`):**
|
||
```typescript
|
||
export const activeThreadIdAtom = atom<string | null>(null);
|
||
```
|
||
- **Layout (`src/app/features/room/Room.tsx`):** Insert `ThreadPanel` conditionally alongside `RoomTimeline`:
|
||
```tsx
|
||
{
|
||
activeThreadId && (
|
||
<>
|
||
<Line variant="Background" direction="Vertical" size="300" />
|
||
<ThreadPanel roomId={roomId} threadId={activeThreadId} />
|
||
</>
|
||
);
|
||
}
|
||
```
|
||
- **Component (`src/app/features/room/thread/ThreadPanel.tsx`):** Use `room.getThread(threadId)` from the SDK. Render a `Header` with a "Close" button that sets `activeThreadIdAtom` to `null`. Reuse `RoomTimeline` but pass a filtered `EventTimelineSet`. Use `thread.timelineSet` directly for the most accurate thread view.
|
||
|
||
---
|
||
|
||
### P4-4 · Math / LaTeX Rendering
|
||
|
||
**Mechanism:** KaTeX injection into the HTML parser.
|
||
|
||
- **Sanitizer (`src/app/utils/sanitize.ts`):** Allow KaTeX-specific tags and classes (e.g., `span`, `annotation`, `math`). Use a specialized allowed list for math blocks.
|
||
- **Parser (`src/app/plugins/react-custom-html-parser.tsx`):** Detect `$ ... $` and `$$ ... $$` patterns in text nodes:
|
||
```tsx
|
||
if (node.type === 'text') {
|
||
const parts = node.data.split(/(\$\$.*?\$\$|\$.*?\$)/g);
|
||
return parts.map((p) => {
|
||
if (p.startsWith('$')) return <KaTeX math={p.replace(/\$/g, '')} />;
|
||
return p;
|
||
});
|
||
}
|
||
```
|
||
- **CSS (`src/app/styles/CustomHtml.css.ts`):** Import `katex/dist/katex.min.css` only when a math block is rendered to save initial bundle size.
|
||
|
||
---
|
||
|
||
### P4-6 · OIDC / SSO Next-Gen Auth (MSC3861)
|
||
|
||
**Mechanism:** Matrix Authentication Service (MAS) Integration.
|
||
|
||
- **Architecture:** Shift from password-based `/login` to OAuth2 `authorization_code` flow.
|
||
- **Key Files:** `src/app/pages/auth/Login.tsx` and `src/app/hooks/useAuth.ts`.
|
||
- **Implementation:** Use `oidc-client-ts` or a similar lightweight OIDC library. Check for `m.authentication` in `/.well-known/matrix/client`. Redirect to the MAS authorization endpoint. Handle the callback in a new `OidcCallback` route and store the OIDC `refresh_token`.
|
||
|
||
---
|
||
|
||
### P5-1 · Custom Accent Color Picker (Non-TDS only)
|
||
|
||
**Mechanism:** Dynamic CSS variable injection.
|
||
|
||
- **Setting (`src/app/state/settings.ts`):** Add `customAccentColor: string` (hex).
|
||
- **Manager (`src/app/pages/ThemeManager.tsx`):** Inside the `useEffect` that monitors theme changes:
|
||
```typescript
|
||
if (!lotusTerminal && customAccentColor) {
|
||
document.documentElement.style.setProperty('--lt-accent-orange', customAccentColor);
|
||
document.documentElement.style.setProperty('--lt-accent-orange-glow', `${customAccentColor}80`);
|
||
}
|
||
```
|
||
- **UI (`src/app/features/settings/general/General.tsx`):** Use `<Input type="color">`. Hide this section if `lotusTerminal` is `true`.
|
||
|
||
---
|
||
|
||
### P5-15 · In-Call Soundboard
|
||
|
||
**Mechanism:** Local-to-Global Audio Bridge via Web Audio API.
|
||
|
||
- Create an `AudioContext` and a `MediaStreamDestinationNode`.
|
||
- Create an `AudioBufferSourceNode` for each clip.
|
||
- Route the mic `MediaStream` and the clip source to the destination node.
|
||
- Pass the destination's `.stream` to the call bridge.
|
||
|
||
---
|
||
|
||
### P5-20 · Quick Reply from Browser Notification
|
||
|
||
**Mechanism:** Service Worker `notificationclick` Action.
|
||
|
||
```typescript
|
||
// src/sw.ts
|
||
self.addEventListener('notificationclick', (event) => {
|
||
if (event.action === 'reply' && event.reply) {
|
||
const { roomId, threadId } = event.notification.data;
|
||
const session = sessions.get(event.clientId);
|
||
fetch(`${session.baseUrl}/_matrix/client/v3/rooms/${roomId}/send/m.room.message`, {
|
||
method: 'POST',
|
||
headers: { Authorization: `Bearer ${session.accessToken}` },
|
||
body: JSON.stringify({
|
||
msgtype: 'm.text',
|
||
body: event.reply,
|
||
'm.relates_to': threadId ? { rel_type: 'm.thread', event_id: threadId } : undefined,
|
||
}),
|
||
});
|
||
}
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
### P5-30 · Advanced ML Noise Suppression — Model Roadmap
|
||
|
||
See shipped implementation in LOTUS_FEATURES.md → "Noise Suppression (Advanced Multi-Tier)".
|
||
|
||
**Models status:**
|
||
|
||
- **RNNoise** (sapphi, 48 kHz) — ✅ working, default fallback. Keep — runs on any hardware.
|
||
- **Speex** (sapphi, 48 kHz) — ✅ working, low value; candidate to drop.
|
||
- **DTLN** (@workadventure, 16 kHz) — 🟡 wired; sample-rate fix applied (was robotic at 48 kHz). **TODO: verify in a real call.** Narrowband (16 kHz) = slightly telephone-y even when correct.
|
||
|
||
**Constraints:** client-side AudioWorklet, fully self-hosted, no GPU, self-hosted SFU (no LiveKit Cloud).
|
||
|
||
**Roadmap:**
|
||
|
||
- [ ] Verify DTLN 16 kHz fix in a real call.
|
||
- [ ] **DeepFilterNet 3** — best self-hostable upgrade: Rust→WASM, CPU real-time, 48 kHz fullband. Self-host `df_bg.wasm` + DFN3 ONNX model; wire a 48 kHz worklet. Audio quality unverifiable without a real-call test.
|
||
- [ ] **Desktop-only / HW-gated:** FRCRN (Alibaba) or NVIDIA Maxine (RTX/Tensor only). Runs in Tauri Rust backend + bridges a virtual mic into the webview. Must detect capability; web + weak HW falls back to RNNoise/DTLN.
|
||
|
||
---
|
||
|
||
### P5-31 · Granular Voice & Screenshare Quality Controls
|
||
|
||
**Mechanism:** WebRTC Encoding Parameters + Backend Quality Guard.
|
||
|
||
- **State Event:** `io.lotus.room_quality` (state key `""`) containing:
|
||
```json
|
||
{ "audio_bitrate": 128000, "screen_max_res": "1080p", "screen_max_fps": 60 }
|
||
```
|
||
- **Screenshare:** In `src/app/plugins/call/CallControl.ts`, map the "Quality" setting to `getDisplayMedia` constraints.
|
||
- **Audio Bitrate:** After the call joins, find the `RTCRtpSender` for the audio track:
|
||
```typescript
|
||
const sender = peerConnection.getSenders().find((s) => s.track?.kind === 'audio');
|
||
const params = sender.getParameters();
|
||
params.encodings[0].maxBitrate = roomBitrate || 128000;
|
||
await sender.setParameters(params);
|
||
```
|
||
- **Backend Sidecar:** Extend `voice-limit-guard.py` (LXC 151) to fetch `io.lotus.room_quality` and inject limits into the LiveKit JWT or return them as an authorized config packet.
|
||
|
||
---
|
||
|
||
### P5-40 · Desktop — Proactive Update Notifications (Tauri)
|
||
|
||
**Key Files:** `src/app/hooks/useTauriUpdater.ts`, `src/app/pages/client/ClientNonUIFeatures.tsx`, `src/app/features/toast/LotusToastContainer.tsx`.
|
||
|
||
1. Create a `TauriUpdateFeature` component. Use `useTauriUpdater()` to get the `check` function and `status`.
|
||
2. In a `useEffect`, call `check()` on mount and then on a `setInterval` (every 12 hours).
|
||
3. When status transitions to `{ state: 'available', version: '...' }`, fire a Lotus Toast: "Lotus Chat v[version] is available!" with an "Update" button that calls `install()`.
|
||
4. Store `lastCheck` timestamp in `localStorage` to prevent redundant checks on refresh.
|
||
|
||
---
|
||
|
||
### Mobile Bookmarks Visibility Fix
|
||
|
||
**Issue:** `ClientLayout.tsx` explicitly restricts `BookmarksPanel` to `ScreenSize.Desktop` (lines 51-56).
|
||
|
||
```tsx
|
||
// ClientLayout.tsx
|
||
{
|
||
bookmarksOpen && (
|
||
<BookmarksPanel
|
||
onClose={() => setBookmarksOpen(false)}
|
||
isMobile={screenSize !== ScreenSize.Desktop}
|
||
/>
|
||
);
|
||
}
|
||
```
|
||
|
||
`BookmarksPanel.tsx` already supports the `isMobile` prop (line 127) to enable full-screen absolute positioning. No other changes required.
|
||
|
||
---
|
||
|
||
### Remind Me Later (Slack-style)
|
||
|
||
**Mechanism:** Account Data + Timer/Service Worker.
|
||
|
||
- **Storage (`src/app/hooks/useReminders.ts`):** Store in account data `io.lotus.reminders` as `Array<{ id: string, roomId: string, eventId: string, timestamp: number }>`.
|
||
- **Context Menu (`src/app/features/room/message/MessageContextMenu.tsx`):** Add "Remind me" option → opens date/time picker modal (reuse `JumpToTime.tsx` logic).
|
||
- **Trigger (foreground):** `setTimeout` in a hook inside `ReminderMonitor` in `ClientNonUIFeatures.tsx` → pushes to `toastQueueAtom` in `state/toast.ts` when due.
|
||
- **Trigger (background):** Use Service Worker — `setTimeout` in the main thread will not fire when the PWA is suspended.
|
||
|
||
---
|
||
|
||
### Mobile Usability Audit — Methodology
|
||
|
||
1. **Viewport & Touch:** All interactive elements must have at least `44px × 44px` touch targets. Audit for horizontal overflow (horizontal scrolling must be disabled).
|
||
2. **Modal Responsiveness:** All modals (Settings, Profile, etc.) MUST cover the full screen on mobile, not float as overlays.
|
||
3. **Sidebar / Panels:** On mobile, sidebar panels (Members, Bookmarks, Media) must become full-screen overlays (using a `Drawer` or `Modal` pattern) rather than side-by-side flexbox panels.
|
||
4. **Input & Composer:** Ensure the composer doesn't get obscured by the mobile keyboard. Test focus trap and blur behaviors.
|
||
|
||
---
|
||
|
||
## Implementation Notes
|
||
|
||
### ⚠️ TDS DESIGN LAW (repeated here for emphasis)
|
||
|
||
> Every TDS color, animation, glow, border, shadow, and font value MUST come from `/root/code/web_template/base.css`.
|
||
> Never hardcode hex values. Never invent CSS variable names.
|
||
> Key variables: `--lt-accent-orange` · `--lt-accent-cyan` · `--lt-accent-green` · `--lt-glow-*` · `--lt-box-glow-*` · `--lt-border-color` · `--lt-font-mono`
|
||
> Reference implementation: `/root/code/tinker_tickets/` (markdown.js, base.js, ticket.css)
|
||
> This applies without exception to every task marked `[IMPROVE]`, `[Build]`, or any UI change.
|
||
|
||
### Design Rules
|
||
|
||
- All new components must respect both TDS dark (`LotusTerminalTheme`) and TDS light (`LotusTerminalLightTheme`) modes
|
||
- Non-TDS theme work (custom accent color, theme presets) uses vanilla-extract theme files — match the pattern in `src/lotus-terminal.css.ts`
|
||
- Code syntax highlighting token classes: `.tok-kw .tok-str .tok-num .tok-cmt .tok-fn` (defined in `web_template/base.css`)
|
||
- `folds AvatarImage` does NOT accept children — wrap Avatar components externally for overlays/frames/borders
|
||
|
||
### CI/CD Pipeline
|
||
|
||
```
|
||
edit → commit → git push origin lotus
|
||
→ Gitea Actions: tsc --noEmit, eslint, prettier (~3 min)
|
||
→ Webhook: lotus_deploy.sh on LXC 106 polls CI, then npm ci && npm run build → rsync
|
||
→ Live at chat.lotusguild.org (~11 min total)
|
||
```
|
||
|
||
### Per-Feature Checklist (before marking complete)
|
||
|
||
- [ ] `npx tsc --noEmit` — zero TypeScript errors
|
||
- [ ] `npx eslint src/` — zero new errors (warnings OK if pre-existing)
|
||
- [ ] `npx prettier --check src/` — formatting passes
|
||
- [ ] `README.md` updated (Lotus-custom features only — not upstream Cinny features)
|
||
- [ ] `landing/index.html` updated if the feature appears in the comparison table
|
||
- [ ] Visually tested at `chat.lotusguild.org` after CI deploys
|
||
|
||
### Homeserver Access (for server audits)
|
||
|
||
- **Synapse (Matrix):** LXC 151 on `compute-storage-01` — `pct exec 151 -- bash`
|
||
- **Config:** `/etc/matrix-synapse/homeserver.yaml`
|
||
- **Version check:** `curl -s https://matrix.lotusguild.org/_matrix/client/versions`
|