# 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.thread` relations). - **Key Files to Reference:** - `src/app/features/room/RoomView.tsx`: Main layout. Needs to render the new `ThreadPanel` component 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`: Check `isThreadedMessage` logic and the `onReplyClick(ev, true)` handler. - **Architecture:** - Create `activeThreadEventIdAtom` in a new state file. - `ThreadPanel` should reuse `Timeline` components but filter for events where `m.relates_to.event_id === activeThreadEventId` and `rel_type === 'm.thread'`. - **SDK API:** Use `mx.getThread(eventId)` or the aggregations API: `GET /rooms/{roomId}/relations/{eventId}/m.thread`. - **Note:** `RoomTimeline.tsx` currently has `handleReplyClick` (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 detect `Membership.Knock` events in joined rooms where the user has invite permissions. - **Implementation:** - Create a hook `usePendingKnocks(room)` that returns `room.getMembersWithMembership(Membership.Knock)`. - Add a notification badge to the "Members" icon in the room header if knocks > 0. ### 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`: Add `customAccentColor: string` to the settings atom. - **Implementation:** - Inject a `