46567555e1
ESLint errors: - usePresenceUpdater: remove redundant `const userId` inside handlePageHide that shadowed the outer declaration (no-shadow) - RoomViewHeader: prefix unused encryptedRoom with _ (no-unused-vars) Prettier: reformat 14 files to match project style Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
5.4 KiB
5.4 KiB
Lotus Chat — Implementation Reference for Backlog
Date: June 2026
This document provides technical guidance, file paths, and architectural notes for unimplemented items in LOTUS_TODO.md to assist engineers during development.
🧵 Priority 3 — Higher Complexity
P3-8 · Thread Panel (Full Side Drawer)
⚠️ Largest Feature
- Objective: Add a right-side drawer to view and reply to threads (
m.threadrelations). - Key Files to Reference:
src/app/features/room/RoomView.tsx: Main layout. Needs to render the newThreadPanelcomponent conditionally.src/app/features/room/MembersDrawer.tsx: Use this as a pattern for side drawers (fixed width, toggleable).src/app/features/room/message/Message.tsx: CheckisThreadedMessagelogic and theonReplyClick(ev, true)handler.
- Architecture:
- Create
activeThreadEventIdAtomin a new state file. ThreadPanelshould reuseTimelinecomponents but filter for events wherem.relates_to.event_id === activeThreadEventIdandrel_type === 'm.thread'.- SDK API: Use
mx.getThread(eventId)or the aggregations API:GET /rooms/{roomId}/relations/{eventId}/m.thread.
- Create
- Note:
RoomTimeline.tsxcurrently hashandleReplyClick(Line 978) which already supports starting threads.
🛠️ Priority 4 — Specialized Features
P4-3 · Knock-to-join Notifications for Admins
- Objective: Alert admins when users are knocking and provide an easy way to approve/deny.
- Key Files:
src/app/features/room/MembersDrawer.tsx: Already contains logic to show "Pending Requests" (Line 412).src/app/hooks/useRoomsNotificationPreferences.ts: Add logic to detectMembership.Knockevents in joined rooms where the user has invite permissions.
- Implementation:
- Create a hook
usePendingKnocks(room)that returnsroom.getMembersWithMembership(Membership.Knock). - Add a notification badge to the "Members" icon in the room header if knocks > 0.
- Create a hook
P4-4 · Math / LaTeX Rendering
- Objective: Render
$...$and$$...$$blocks using KaTeX. - Key Files:
src/app/utils/sanitize.ts: Critical. The sanitizer currently strips many tags. You must allow specific KaTeX/MathML outputs.src/app/plugins/react-custom-html-parser.ts: Add a custom rule to detect LaTeX patterns in plain text or handle the specific HTML from the server.src/app/styles/CustomHtml.css.ts: Add KaTeX CSS import/styles.
🎨 Priority 5 — Gamer / Aesthetic / Customization
P5-1 · Custom Accent Color Picker
- Objective: User-defined accent color for non-TDS themes.
- Key Files:
src/app/hooks/useTheme.ts: Central theme logic.src/app/state/settings.ts: AddcustomAccentColor: stringto the settings atom.
- Implementation:
- Inject a
<style>block into<head>that overrides CSS variables. - Variables to target:
--lt-accent-orange,--lt-accent-cyan,--lt-accent-green(or their non-TDS equivalents infolds).
- Inject a
P5-10 · Voice Channel User Limit
- Objective: Prevent joining a voice channel if the user limit is reached.
- Key Files:
src/app/features/call/CallView.tsx: Join logic site.
- Implementation:
- In
CallPrescreen(Line 77), retrieve theio.lotus.voice_limitstate event from the room. - Compare
callMembers.lengthwith themax_usersvalue from the event content. - If current members >= limit, disable the
canJoinflag and display a "Channel Full" message.
- In
P5-13 · Avatar Frame / Border Decorations
- Objective: Add cosmetic frames around user avatars.
- Key Files:
src/app/components/user-avatar/UserAvatar.tsx: Rendering site.
- Implementation:
- Add an optional
frameNameprop to theUserAvatarcomponent. - Since
foldscomponents likeAvatarImageare restrictive, wrap the entire return value (both fallback and image paths) in a newBoxcontainer that applies the frame/glow effects via CSS.
- Add an optional
P5-21 · Custom @Mention Highlight Color
- Objective: Persistent background highlight for messages that mention the user.
- Key Files:
src/app/components/message/layout/layout.css.ts: Styling site.src/app/features/room/message/Message.tsx: Logic site.
- Implementation:
- In
layout.css.ts, add amentionvariant to theMessageBaserecipe that sets a staticbackgroundColor. - In
Message.tsx, pass theisMentionedboolean (Line 800) into theMessageBasecomponent as a new prop to trigger the highlight variant.
- In
P5-20 · Quick Reply from Browser Notification
- Objective: Inline reply in OS notifications.
- Key Files:
src/sw.ts: Handle thenotificationclickevent.
- Implementation:
- Check for
event.replyin the service worker. - Use the
accessTokenandbaseUrlstored in thesessionsmap (already implemented insw.ts) to send a Matrix message viafetchdirectly from the Service Worker. - Crucial: Ensure the message is sent as a relation if the notification was for a thread.
- Check for
🧪 Pending Audits Guidance
Audit-3 · Profile Banner Image
- Task: Check if MSC4133 or Matrix v1.16 defines a banner field.
- Update: Matrix spec does not currently have a stable
m.bannerfield. Most clients useorg.matrix.msc4133.banner_url(unstable). - Recommendation: Use
mx.http.authedRequestto experiment with this field onmatrix.lotusguild.org.