* pasting should focus the message field
also refactored a small amount to use KeyEvent.code
instead of KeyEvent.keyCode, which is deprecated.
fixesajbura/cinny#544
* fix lint
* comments
* Initial display support
* Use better colors for error in math parsing
* Parse math markdown
* Use proper jsx
* Better copy support
* use css var directly
* Remove console.debug call
* Lazy load math module
* Show fallback while katex is loading
* Now adapting to small screen sizes, needs improvements
* Fix that site only gets into mobile mode when resized
* - Added navigation event triggered if user requests to return to navigation on compact screens
- People drawer wont be shown on compact screens
- Still accessible using settings
- would be duplicated UI
- mobileSize is now compactSize
* Put threshold for collapsing the base UI in a shared file
* Switch to a more simple solution using CSS media queries over JS
- Move back button to the left a bit so it doesnt get in touch with room icon
* switch from component-individual-thresholds to device-type thresholds
- <750px: Mobile
- <900px: Tablet
- >900px: Desktop
* Make Settings drawer component collapse on mobile
* Fix EmojiBoard not showing up and messing up UI when screen is smaller than 360px
* Improve code quality; allow passing classNames to IconButton
- remove unnessesary div wrappers
- use dir.side where appropriate
- rename threshold and its mixins to more descriptive names
- Rename "OPEN_NAVIGATION" to "NAVIGATION_OPENED"
* - follow BEM methology
- remove ROOM_SELECTED listener
- rename NAVIGATION_OPENED to OPEN_NAVIGATION where appropriate
- this does NOT changes that ref should be used for changing visability
* Use ref to change visability to avoid re-rendering
* Use ref to change visability to avoid re-rendering
* Fix that room component is not hidden by default.
This resulted in a broken view when application is viewed in mobile size without having selected a room since loading.
* fix: leaving a room should bring one back to navigation
Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>
* Fix power level in permissions
Fix allowed value of power level in room permissions, earlier the max value was 100 even if room members have power level more than 100.
* Update RoomPermissions.jsx
* Fixes#434
* Fixes#433
* Prtially fixes#432
* Disable auto labelling of issues
* Use yaml instead of yml as recommended by yaml.org
* shortened the strings
* simplified option description
* Allow node type prop in setting tile
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Update popup window max height
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Add device management setting
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Add password based login
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* truncate long list of verified devices
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Add invite sound
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Add credits
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Change invite sound to google material
* Sort search result by activity
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Optimize generateResults function codes
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Improve jump to unread button
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Remove unused cod
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Fix mark as read not hidding jump to unread btn
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Add notification mark as read action
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Add esc as hotkey to mark room as read
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Add message icons
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Change jump to unread icon
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Add recent section to emoji board
* Add section to emoji board sidebar
* Add emoji limit like element web has
* Ignore custom emojis
* Filter out invalid emojis
* Update heart icon with clock
Co-authored-by: Krishan <33421343+kfiven@users.noreply.github.com>
* Add sort util
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Use sort util for members
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Sort dms by activity
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Sort dms activily
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Chanege roomIdByLastActive func name
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Fix new message no appearing
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Fix room not marking as read
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Fix room automatically gets mark as read
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Fix sending wrong read recipt
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Fix sending message not mark as read
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Move getNotifType function
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Fix bug in getNotiType
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Add isMuted prop in room selector
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Fix muted room show unread indicator
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Fix muted room notification visible in space
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Fix space shows muted room notification on load
Signed-off-by: Ajay Bura <ajbura@gmail.com>
* Toggle room mute when changed from other client
Signed-off-by: Ajay Bura <ajbura@gmail.com>
Signed-off-by: Clament John <cj@hackerlab.in>
fixes#376
When we click view source for an edited message we were showing
the original event (the unedited event) instead of the latest
edited event.
* Simplify production build actions
This merges both the netlify-prod and docker action and also automatically add tarball to releases.
* Delete docker.yaml
* Delete netlify-prod.yaml
* Cosmetic changes and add dockerhub check
* Cosmetic changes
* Fix check runs on Tuesdays only
* Add basic drop overlay
* Prevent crash when dragging text
* Only show popup when files are being dragged
* Make drop box bigger
* Make drag drop overlay without a modal
* Don't show drag drop menu on top of modals
* Use different way to check for modal
* Focus when opening the emoji board and editing a message
* Clean emoji board after closing
* Focus room search and member search
* Resolve conversations
* Use npm ci over install to achive faster and more expectable build results;
Split copy package(-lock).json files and ci then to avoid reinstalling dependencies when not needed => Faster build times
* Stopp adding wasm type to mime.types, its already there (duplicate):
- avoids warning in console
- cleans up
- might have been missing in past nginx:alpine versions but now exists
* Change node tag from alpine and nginx to more specific ones for #260
* Add notifications
* Abide push actions
* Handle browsers not having notification support
* Ask for notification permission after loading
* Make usePermission work without live permission support
* Focus message when clicking the notification
* make const all caps
* Fix usePermission error in Safari
* Fix live permissions
* Remove userActivity and use document.visibilityState instead
* Change setting label to "desktop notifications"
* Check for notification permissions in the settings.js
* Add Auto theme that uses browser's preferred color scheme
This will use dark mode automatically if the browser requests it.
* fixup! Add Auto theme that uses browser's preferred color scheme
* Use a toggle to use system theme
* Display custom emoji in picker
Adds a single category at the start of the emoji picker to display the user's custom emoji
* Show any amount of custom emoji packs in the Emoji Board
* Use thumbnails in emoji picker + mark as emoji
* Fix emoji picker stretching when too many packs are available
* Sprinkle in a few comments for good measure
* Remove emoji-less packs from the emoji picker
* Add support for sending room-local emoji
Does not add support for sending a room's emoji outside of that room, but enables users to
send an emoji if the packs in a room support it. Does not include room emoji in the
picker YET.
* Amend PR #209: Don't freak out if the `pack` tag is missing
* Amending PR: Refactor emojifier, use better method for retrieving packs
* Amending PR: Improve resiliance to bad data in emoji state events
* Amend PR: Remove redundant code, fix crash on edit
* Add support for sending user emoji using autocomplete
What's included:
- An implementation for detecting user emojis
- Addition of user emojis to the emoji autocomplete in the command bar
- Translation of shortcodes into image tags on message sending
What's not included:
- Loading emojis from the active room, loading the user's global emoji packs, loading emoji from spaces
- Selecting custom emoji using the emoji picker
This is a predominantly proof-of-concept change, and everything here may be subject to
architectural review and reworking.
* Amending PR: Allow sending multiple of the same emoji
* Amending PR: Add support for emojis in edited messages
* Amend PR: Apply requested revisions
This commit consists of several small changes, including:
- Fix crash when the user doesn't have the im.ponies.user_emotes account data entry
- Add mx-data-emoticon attribute to command bar emoji
- Rewrite alt text in the command bar interface
- Remove "vertical-align" attribute from sent emoji
* Amending PR: Fix bugs (listed below)
- Fix bug where sending emoji w/ markdown off resulted in a crash
- Fix bug where alt text in the command bar was wrong
* Amending PR: Add support for replacement of twemoji shortcodes
* Amending PR: Fix & refactor getAllEmoji -> getShortcodeToEmoji
* Amending PR: Fix bug: Sending two of the same emoji corrupts message
* Amending PR: Stylistic fixes
* Display messages containing only <7 emoji bigger
* Amending PR: Address mentioned concerns
This fixes several concerns raised during the PR review process. A summary of the changes
implemented is below:
- Size jumbo emoji using the text-h1 class, instead of hardcoding a size
- Increase the emoji limit to 10
- Re-wrap m.text messages in a p tag, fixing a bug where newlines were lost
Line 335 already gives blockquotes their padding. The mixin explicitly sets the right padding back to 0 and the left padding to exactly what it was already set to.
* Fix commands activating anywhere in the input
Writing `The command to leave a channel is /leave` might have had "fun"
consequences for users.
Fixes#155
* Fix go-to commands activating anywhere in the input
While less obtrusive than `/` commands activating anywhere, it seems
logical to only activate completion of those when at the beginning of
the input.
`break-all` meant that links would split mid-word e.g. I observed `email` become `e\nmail`. `break-word` avoids this but also ensures long links still break before overflowing the line length.
* Address 301 redirect issue and Safari regex issue.
* Restored login redirect
as this doesn't not fix the sso redirect #143.
Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>
> Please read through [the Discussion rules](https://github.com/cinnyapp/cinny/discussions/2653) and check for both existing [Discussions](https://github.com/cinnyapp/cinny/discussions?discussions_q=) and [Issues](https://github.com/cinnyapp/cinny/issues?q=sort%3Areactions-desc) prior to opening a new Discussion.
- type:markdown
attributes:
value:'# Issue Details'
- type:textarea
attributes:
label:Issue Description
description:|
Provide a detailed description of the issue. Include relevant information, such as:
- The feature or configuration option you encounter the issue with.
- Screenshots, screen recordings, or other supporting media (as needed).
- If this is a regression of an existing issue that was closed or resolved, please include the previous item reference (Discussion, Issue, PR, commit) in your description.
placeholder:|
When I try to send a message in a room, the message doesn't appear in the timeline.
OR
The application crashes when I click on the settings button.
validations:
required:true
- type:textarea
attributes:
label:Expected Behavior
description:|
Describe how you expect Cinny to behave in this situation.
placeholder:|
I expected the message to appear in the room timeline immediately after sending.
OR
The settings panel should open smoothly without any crashes.
validations:
required:true
- type:textarea
attributes:
label:Actual Behavior
description:|
Describe how Cinny actually behaves in this situation. If it is not immediately obvious how the actual behavior differs from the expected behavior described above, please be sure to mention the deviation specifically.
placeholder:|
The application freezes for 3 seconds and then shows a white screen.
validations:
required:true
- type:textarea
attributes:
label:Reproduction Steps
description:|
Provide a detailed set of step-by-step instructions for reproducing this issue.
placeholder:|
1. Open Cinny and log in to my account
2. Navigate to the #general room
3. Type a message in the message box
4. Press Enter to send
5. Notice that the message doesn't appear in the timeline
validations:
required:true
- type:textarea
attributes:
label:Environement
description:|
Please provide information about your environment. Include the following:
- OS:
- Browser:
- Cinny Web Version: (app.cinny.in or self hosted)
- Cinny desktop Version: (appimage or deb or flatpak)
- Matrix Homeserver:
placeholder:|
- OS: Windows 11
- Browser: Chrome 120.0.6099.109
- Cinny Web Version: 3.2.0 (app.cinny.in or self hosted)
- Cinny desktop Version: 3.2.0 (appimage or deb or flatpak)
- Matrix Homeserver: matrix.org (Synapse 1.97.0)
render:text
validations:
required:true
- type:textarea
id:logs
attributes:
label:Relevant Logs
description:|
If applicable, add browser console logs to help explain your problem.
**To get browser console logs:**
- Chrome/Edge: Press F12 → Console tab
- Firefox: Press F12 → Console tab
- Safari: Develop → Show Web Inspector → Console
Please wrap large log outputs in code blocks with triple backticks (```).
placeholder:|
```
Error: Failed to send message
at MessageComposer.sendMessage (composer.js:245)
at HTMLButtonElement.onClick (composer.js:189)
TypeError: Cannot read property 'content' of undefined
at RoomTimeline.render (timeline.js:567)
```
render:shell
validations:
required:false
- type:textarea
attributes:
label:Additional context
description:|
Add any other context about the problem here (e.g., when did this start happening, does it happen on different homeservers, etc.)
placeholder:|
- This started happening after I updated to version 3.2.0
- It only happens in encrypted rooms, not in public rooms
- I've tried on both Firefox and Chrome with the same result
- It works fine on my phone using the same account
- This happens on all homeservers I've tested (matrix.org, mozilla.org)
validations:
required:false
- type:markdown
attributes:
value:|
# User Acknowledgements
> [!TIP]
> Use these links to review the existing Cinny [Discussions](https://github.com/cinnyapp/cinny/discussions?discussions_q=) and [Issues](https://github.com/cinnyapp/cinny/issues?q=sort%3Areactions-desc).
- type:checkboxes#add faqs in future
attributes:
label:'I acknowledge that:'
options:
- label:I have searched the Cinny repository (both open and closed Discussions and Issues) and confirm this is not a duplicate of an existing issue or discussion.
required:true
- label:I have checked the "Preview" tab on all text fields to ensure that everything looks right, and have wrapped all configuration and code in code blocks with a group of three backticks (` ``` `) on separate lines.
<!-- Please read https://github.com/ajbura/cinny/CONTRIBUTING.md before submitting your pull request -->
### Description
<!-- Please include a summary of the change. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
Fixes #
#### Type of change
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] This change requires a documentation update
### Checklist:
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
if:(github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
# the below token should have repo scope and must be manually added by you in the repository's secret
PERSONAL_ACCESS_TOKEN:${{ secrets.CLA_PAT }}
with:
path-to-signatures:'signatures.json'
path-to-document:'https://github.com/cinnyapp/cla/blob/main/cla.md'# e.g. a CLA or a DCO document
# branch should not be protected
branch:'main'
allowlist:ajbura,bot*
#below are the optional inputs - If the optional inputs are not given, then default values will be taken
remote-organization-name:cinnyapp
remote-repository-name:cla
#create-file-commit-message: 'For example: Creating file for storing CLA Signatures'
#signed-commit-message: 'For example: $contributorName has signed the CLA in #$pullRequestNo'
#custom-notsigned-prcomment: 'pull request comment with Introductory message to ask new contributors to sign'
#custom-pr-sign-comment: 'The signature to be committed in order to sign the CLA'
#custom-allsigned-prcomment: 'pull request comment when all contributors has signed, defaults to **CLA Assistant Lite bot** All Contributors have signed the CLA.'
#lock-pullrequest-aftermerge: false - if you don't want this bot to automatically lock the pull request after merging (default - true)
#use-dco-flag: true - If you are using DCO instead of CLA
@@ -5,7 +5,6 @@ First off, thanks for taking the time to contribute! ❤️
All types of contributions are encouraged and valued. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉
> And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about:
>
> - Star the project
> - Tweet about it (tag @cinnyapp)
> - Refer this project in your project's readme
@@ -19,8 +18,7 @@ Bug reports and feature suggestions must use descriptive and concise titles and
## Pull requests
> ### Legal Notice
>
> When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license. You will also be asked to [sign the CLA](https://github.com/cinnyapp/cla) upon submiting your pull request.
>When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license.
**NOTE: If you want to add new features, please discuss with maintainers before coding or opening a pull request.** This is to ensure that we are on same track and following our roadmap.
@@ -28,9 +26,9 @@ Bug reports and feature suggestions must use descriptive and concise titles and
- **Issue:** The modal fetches edit history via raw `fetch`. Edit events not found in the room cache were constructed from raw encrypted content and never decrypted.
- **Fix:** Each newly constructed `MatrixEvent` is now passed through `mx.decryptEventIfNeeded()` before rendering when `evt.isEncrypted()` is true.
### 2. Service Worker Ephemeral Sessions
**File:**`src/sw.ts`
**Status:****NOT A BUG — by design**
- The `sessions` Map is intentionally in-memory. The main window re-posts the session to the SW via `postMessage` on every load. Persisting access tokens in SW IndexedDB would duplicate credential storage unnecessarily and is not required for the current feature set.
---
## 📱 PWA & Mobile Issues
### 1. No PWA Precaching (Offline Mode Broken)
**File:**`src/sw.ts`, `vite.config.js`
**Status:****DEFERRED — out of scope**
- Full offline Matrix requires persisting sync state, E2EE keys, and an event send queue. The SW exists for authenticated media and notifications, which it handles correctly. Adding Workbox precaching is a multi-sprint project with limited benefit for a Matrix client.
- **Issue:** Resize corner `onMouseDown` handlers did not fire on touch devices.
- **Fix:** Added `handleResizeTouchStart` using touch events with the same geometry math extracted into a shared `applyResize` helper. `onTouchStart` is now wired to all four resize corners.
- **Issue:** When Glassmorphism is enabled, the chat background was rendered on both `document.body` and `RoomView`, running the same CSS animation twice.
- **Fix:** `RoomView` now reads the `glassmorphismSidebar` setting and skips applying `chatBgStyle` when it is active, relying entirely on the `document.body` background that `SidebarNav` already mirrors.
| `--lt-accent-green` | `#006d35` | Success / active states |
| `--lt-text` | `#111827` | Body text |
**Differences from dark mode:**
- CRT effects (scanlines, vignette, phosphor glow) are disabled
- Scoped to `html[data-theme="light"] body.lotusTerminalBodyClass` to avoid bleed into non-TDS themes
-`ThemeManager.tsx` is responsible for setting the `data-theme` attribute on the `<html>` element when theme changes
### Chat Background Patterns (20+ static)
A library of CSS-only background patterns for the chat area, all using CSS custom properties so they adapt automatically to both TDS dark and light palettes:
- Blueprint grid
- Carbon fiber
- Starfield
- Topographic contours
- Herringbone
- Crosshatch
- Chevron
- Polka dots
- Triangles
- Plaid
- (and additional variants)
---
## Animated Chat Backgrounds (P5-4)
Five CSS-only animated wallpapers implemented with vanilla-extract keyframes. No `<canvas>` element is used — all animation is pure CSS.
### Available Animations
**Digital Rain**
Two-layer vertical stripe scroll with parallax effect. Wide stripes animate at 8s, narrow stripes at 4s, creating depth.
**Star Drift**
Three-layer radial-gradient dot field drifting diagonally across the viewport. Each layer moves at a distinct speed and angle.
**Grid Pulse**
Neon grid lines that expand and contract via a `backgroundSize` keyframe. Grid color follows `--lt-accent-cyan` in dark mode.
**Aurora Flow**
Four radial-gradient ellipses sweeping across a 200% canvas. Colors use the TDS green/cyan/orange palette and blend softly.
**Fireflies**
Three layers of warm glowing dots that drift slowly. Dot color follows `--lt-accent-orange` for a warm bioluminescent feel.
Strips all `animation` properties from the returned style object when either `pauseAnimations` is `true` or the `prefers-reduced-motion: reduce` media query is active.
### Settings Integration
A "Pause Background Animations" toggle is exposed in **Settings → Appearance**. The preference is persisted and read by `getChatBg()` at render time.
-`src/app/features/lotus/chatBackground.ts` — `getChatBg()` implementation and pattern registry
---
## Glassmorphism Sidebar (P5-3)
An optional frosted-glass sidebar style toggled in **Settings → Appearance**.
**Implementation:**
-`SidebarGlass` vanilla-extract class applies `background: rgba(3, 5, 8, 0.55)` and `backdropFilter: blur(12px)` to the sidebar element
-`SidebarNav.tsx` uses a `useEffect` to mirror the active chat background onto `document.body` when the glassmorphism setting is enabled, so the blur filter has meaningful content to work through
- Degrades gracefully on browsers without `backdrop-filter` support (falls back to the semi-transparent background)
---
## Night Light / Blue Light Filter (P5-5)
A warm orange overlay rendered over the entire UI to reduce blue light emission.
**Implementation:**
-`NightLightOverlay` component mounted directly in `App.tsx`
- **JetBrains Mono** — `'JetBrains Mono', monospace` (already loaded from Google Fonts)
- **Fira Code** — `'Fira Code', monospace` (added to Google Fonts preload in `index.html`)
Applied by overriding `--font-secondary` on `document.body` via `AppearanceEffects` in `App.tsx`. The TDS terminal mode font stack is unaffected.
---
## Custom @Mention Highlight Color (P5-21)
Users can set a custom background color for `@mention` chips that highlight their own name, in **Settings → Appearance**.
- Color picker (native `<input type="color">`) with a **Reset** button to revert to the theme default
- Text color (black/white) auto-computed from the chosen background's luminance for readability
- Applied via CSS custom properties `--mention-highlight-bg`, `--mention-highlight-text`, `--mention-highlight-border` set on `document.body`
-`CustomHtml.css.ts` uses these as CSS `var()` fallbacks over the original folds `Success` token colors
---
## Voice / Video Call Improvements
### Element Call Upgrade
Upgraded embedded Element Call widget from **0.16.3** to **0.19.4**.
### Camera Default Off
Camera starts disabled on join. The `cameraOnJoin` setting is explicitly opt-in and is not persisted to `localStorage` between sessions, preventing the previous behavior where a prior-session preference could unexpectedly enable the camera.
### UI Fixes
- **Deafen button** — corrected tooltip text that was previously swapped with the mute tooltip
- **Screenshare confirmation** — a confirmation dialog is shown before initiating a screenshare broadcast to the room
- **Auto-revert spotlight on screenshare** — removed; the 600ms grid-revert click was causing fullscreen screenshare to show avatar tiles instead of the screen. EC now handles layout natively.
### Push to Talk (PTT)
- Configurable keybind; defaults to `Space`
- Visual indicator shown in both TDS and non-TDS themes while PTT is active
- Event listener attached to both the main window and the Element Call iframe's `contentWindow` to ensure reliable capture regardless of focus
- Mic state is preserved correctly when switching into or out of PTT mode
### Push to Deafen
`M` key triggers `toggleSound()` in `CallControls.tsx`, toggling the deafen state without requiring a mouse click.
### AFK Auto-Mute in Voice (P5-11)
Automatically mutes the microphone after a configurable period of microphone-on silence.
**Implementation:**
-`useAfkAutoMute(callEmbed)` hook opens a separate monitoring-only `getUserMedia` stream (independent of Element Call's stream) and analyzes it via `AudioContext` + `AnalyserNode`
- RMS level is sampled every 500ms; if it stays below threshold while the mic is on, the silence timer starts
- After the configured timeout (`afkTimeoutMinutes` setting), `callEmbed.control.setMicrophone(false)` mutes the mic and an in-app toast is shown
- Monitoring stream and `AudioContext` are fully cleaned up on unmount (no resource leak)
- Activated inside `CallControls` via `useAfkAutoMute(callEmbed)` — no changes required to `CallEmbed` or Element Call
Room admins can cap the number of participants allowed in a room's voice call. The cap is a **hard, server-side limit enforced for every Matrix client** (Element, FluffyChat, …), backed by a client-side UX layer in Lotus Chat.
**Client (this repo):**
- Limit is stored in the `io.lotus.voice_limit` room state event with content `{ max_users: N }` (0 / absent = no limit)
-`RoomVoiceLimit` component in Room Settings → General → **Voice** lets admins set the cap with a number input. Editing is gated by `permissions.stateEvent(StateEvent.LotusVoiceLimit, …)`, so only users with `state_default` power (or above) can change it
-`CallPrescreen` (`CallView.tsx`) reads the limit reactively via `useStateEvent` and compares it against the live `useCallMembers` count; at capacity the **Join** button is disabled and a "Channel Full (N/N)" message is shown
- A user already in the session (rejoining) is never blocked — only new joiners are gated
Files: `src/app/features/common-settings/general/RoomVoiceLimit.tsx`, `src/app/features/call/CallView.tsx`, `StateEvent.LotusVoiceLimit` in `src/types/matrix/room.ts`
**Server (the hard backstop — `matrix` repo `livekit/voice-limit-guard.py`):**
- Every client must fetch a LiveKit JWT from `lk-jwt-service` before joining a call. A fail-open guard sidecar sits in front of it (guard on `:8070`, lk-jwt-service moved to `:8071`)
- On each token request the guard reads the room's `io.lotus.voice_limit` (Synapse admin API), and if the room is at capacity it returns `403` so the client cannot obtain a token and therefore cannot join — regardless of which client they use
- Distinct Matrix users are counted via LiveKit `ListParticipants`; rejoins / extra devices are allowed. Any failure fails open so calls never break
> The client-side "Channel Full" check is UX/early-feedback; the server guard is the actual enforcement.
### Custom Join / Leave Sound Effects (P5-16)
A local sound plays when another participant joins or leaves a call you're in.
**Implementation:**
-`useCallJoinLeaveSounds(embed)` hook (wired in `CallUtils` inside `CallEmbedProvider`) listens to `MatrixRTCSession` membership changes via `useCallMembersChange`
- Membership identity is tracked by `sender|deviceId`; a snapshot is taken when the session (re)starts so participants already present never trigger a sound
- Your own membership is filtered out (`mx.getSafeUserId()` prefix), and sounds fire only while you are actually joined (`useCallJoined`)
- Sounds are synthesized in-browser with the Web Audio API (`OscillatorNode` + envelope) — no audio assets to bundle. Join uses a rising motif, leave a falling one
- Three styles: **Chime** (sine), **Soft** (triangle), **Retro** (square arpeggio), plus **Off**
**Settings (Settings → Calls):**
- **Join & Leave Sounds** dropdown — Off / Chime / Soft / Retro (default: Chime). Selecting a style previews the join sound immediately
A `noiseSuppression` URL parameter is passed to the Element Call widget URL, allowing the noise suppression feature to be toggled from within Lotus settings.
### Call Button Scoping
The call button is shown only in DMs and invite-only rooms that do not have an `m.space.parent` event. It is hidden in public rooms and space channels to avoid accidental broadcast calls.
### Picture-in-Picture (PiP)
- 280×158px floating window that stays on screen when navigating away from the call room
- Draggable via pointer events with a 5px movement threshold to distinguish drags from clicks; touch events are supported
- Clicking the PiP window navigates back to the call room
- Implemented with an imperative `useEffect` style for position overrides because `useCallEmbedPlacementSync` writes geometry directly onto the DOM element, making declarative approaches unreliable
### Call Embed Positioning
- Uses `getBoundingClientRect()` (viewport-relative) instead of the previous `offsetTop`/`offsetLeft` (parent-relative) calculations, fixing misalignment in scrolled layouts
- Position is synced on mount via `useEffect` with a `ResizeObserver` to handle dynamic layout changes
### Dark Mode in Element Call
`applyStyles()` injects `:root { color-scheme: dark | light }` into the Element Call iframe after the user joins. The theme is also updated when `setTheme()` is called, keeping the call UI in sync with the Lotus theme selection.
### Call Embed Wallpaper
The active `chatBackground` pattern is applied to the `div[data-call-embed-container]` wrapper. The iframe's `html, body` are forced to `background: none !important` so the host pattern shows through.
### TDS Typing Indicator
The animated typing indicator dots use `var(--lt-accent-orange)` as their color when the TDS theme is active, matching the terminal aesthetic.
---
## Per-Message Read Receipts
A full per-message read receipt system showing exactly who has seen each message.
- Listens to `Room.localEchoUpdated` and `RoomMember.typing` events to stay reactive
- Debounced 150ms to avoid excessive re-renders during rapid receipt updates
- Located at `src/app/hooks/useRoomReadPositions.ts`
### `nearestRenderableId()`
A utility that walks backward through the event timeline from a given event ID to find the nearest event that is actually rendered (skipping reactions, edits, and other non-display events). Used to map a user's read position to a visible message.
### `ReadPositionsContext`
React context at `src/app/features/room/ReadPositionsContext.ts` that provides the positions map to all timeline components without prop drilling.
### `ReadReceiptAvatars`
A pill of overlapping 24px user avatars displayed at the bottom-right of each message. Shows a maximum of 5 avatars; additional readers are shown as an overflow count (e.g., `+3`).
### "Seen by" Modal — `EventReaders`
Clicking the avatar pill opens a modal (`src/app/components/event-readers/EventReaders.tsx`) listing:
- User avatar
- Display name
- Formatted timestamp of when the receipt was recorded
- Respects the `hour24Clock` setting for timestamp formatting
---
## Delivery Status Indicators
Visual feedback on message delivery state, shown on the sender's own messages:
The indicator is hidden once the server confirms the event (when the internal status transitions to `null`), keeping the timeline clean for settled messages.
---
## Messaging Enhancements
### Rich Room Topics
- Topic `formatted_body` is rendered via `sanitizeCustomHtml` + `html-react-parser`, supporting bold, italic, links, and other inline HTML
- The room header shows a plain-text preview of the topic
- Clicking the topic preview opens a full modal with the formatted body
- The room settings topic editor includes a formatting toolbar with **B**, _I_, ~~S~~, and `code` buttons
### Edit History Viewer
`EditHistoryModal.tsx` fetches and displays the full edit history of a message.
- E2EE fix: the "Original" entry uses `getClearContent()` to retrieve the decrypted content rather than the encrypted payload
- Accessible from the message context menu
### Inline GIF Preview
- Detects Giphy and Tenor share URLs via pattern matching on the message body
- Renders matched URLs as `<img loading="lazy">` inline in the message
- URL is proxied through the Matrix `/_matrix/media/v3/preview_url` endpoint to avoid mixed-content issues
### GIF Picker
- Giphy-powered picker accessible from the composer toolbar
- The button is only shown when `gifApiKey` is set in `config.json`
- Selected GIFs are sent as `m.image` events
- Picker UI is styled with TDS variables when the TDS theme is active
- Located at `src/app/components/GifPicker.tsx`
### Message Forwarding
Context menu → **Forward** allows forwarding a message to any room the user is a member of.
### Draft Persistence
- Composer drafts are stored in `localStorage` keyed by `roomId`
- Draft is cleared on successful send
- The Jotai atom is the primary source of truth; `localStorage` is only read on room mount
### Message Search Date Range
- The search panel accepts `from_ts` and `to_ts` values (epoch milliseconds) passed to the search API
- A chip shows the active date range with an **×** button to clear it
### Image / Video Captions
Images and videos can be sent with a caption. The caption and media are sent as a single event.
### Location Sharing
`m.location` events render an inline map tile using the coordinates from the event content.
### Deleted Message Placeholders
Redacted events display "This message has been deleted" along with the redaction reason if one was provided, rather than leaving a blank gap in the timeline. This is a one-line change in the `eventRenderer` filter.
### Message Bookmarks
- Bookmarks are stored in `io.lotus.bookmarks` account data, syncing across all devices
- Maximum of 500 bookmarked entries
-`BookmarksPanel.tsx` is a sidebar panel accessible from the navigation rail
- Hook: `src/app/hooks/useBookmarks.ts`
### Message Scheduling
- Implements MSC4140 delayed events for scheduling messages to be sent at a future time
-`ScheduleMessageModal.tsx` provides the date/time picker UI
- A collapsible "Scheduled" tray in the room shows all pending scheduled messages with individual cancel buttons
- Utilities in `src/app/utils/scheduledMessages.ts`
### File Upload Compression (opt-in)
- Implemented in `UploadCardRenderer.tsx`
- Uses the Canvas API: `canvas.toBlob(callback, 'image/jpeg', 0.82)` for compression
- A `Switch` toggle in the upload preview UI lets the user opt in per upload
- Shows before and after file sizes so the user can evaluate the tradeoff
- Works on all image types except SVG (which cannot be drawn to canvas)
- On send, the original uncompressed MXC URL is deleted from the media store
- On cancel, any orphaned MXC from a prior upload is cleaned up via `tryDeleteMxcContent()`
Generic (non-domain-specific) cards display a Google S2 favicon. Empty or unparseable preview responses are suppressed entirely rather than showing a blank card.
- Supports both single-choice and multiple-choice modes
- Accessible via the `Icons.OrderList` button in the composer toolbar
### Poll Display
`PollContent.tsx` renders polls in read-only mode. Handles both the stable `m.poll` format and the legacy MSC3381 unstable `org.matrix.msc3381.poll.start` format. Displays current vote counts and a note directing users to Element to cast votes.
### Voice Message Playback Speed
`AudioContent.tsx` adds a playback speed cycle button to voice message players. Available speeds: `[0.75, 1, 1.5, 2]×`. A `useEffect` sets `audioElement.playbackRate` whenever the speed selection changes.
---
## Presence
### Discord-Style Presence Selector
A presence status selector in the user panel offering five modes:
| Do Not Disturb | `unavailable` + `status_msg: 'dnd'` |
| Invisible | `offline` |
| Auto | Standard Matrix presence lifecycle |
- Selection persists via the `presenceStatus` setting
-`usePresenceUpdater` short-circuits its automatic presence updates when a manual mode (anything other than Auto) is selected
### Custom Status Message
- Up to 64 characters of free text plus an emoji
- Optional auto-clear timer with presets: 30 minutes, 1 hour, 4 hours, 1 day, 3 days, 7 days
- Status is broadcast via `mx.setPresence({ status_msg: ... })`
- Character counter appears at 56/64 characters remaining to warn of the limit
### Presence Badges
`PresenceBadge` component displays a colored dot indicating presence state. Used in:
- Members drawer
- User settings panel
### Presence Avatar Ring
`PresenceRingAvatar` wraps any avatar component using `React.cloneElement` to inject an `outline: 2px solid` ring whose color maps to the user's presence state. `outlineOffset: 2px` ensures the ring sits cleanly outside the avatar regardless of the avatar's `border-radius`.
Applied in:
- Message timeline
- Members drawer
-`@mention` autocomplete dropdown
- Inbox / notifications panel
### Document Title Unread Count
The browser tab title updates to reflect unread state:
-`(N) Lotus Chat` — N unread messages
-`· Lotus Chat` — unread activity without a specific count
-`Lotus Chat` — no unread items
### Extended Profile Fields
Supports MSC4133 custom profile fields via `PUT /_matrix/client/unstable/uk.tcpip.msc4133/{userId}/{field}`:
- Their profile panel shows a clock icon, their current local time, and the timezone abbreviation
- The displayed time updates every 60 seconds
- Respects the global `hour24Clock` setting for 12h/24h formatting
Hook: `src/app/hooks/useLocalTime.ts`
---
## UX & Composer
### Message Length Counter
A character count indicator is shown in the composer when `charCount > 0`. The counter resets to zero when switching rooms.
### Quick Emoji Reactions on Hover
A hover toolbar appears over messages, showing the 3 most recently used emojis (sourced from `ElementRecentEmoji` account data) as one-click reaction buttons. The buttons are positioned between the emoji-board button and the Reply button. Clicking a quick reaction closes any open emoji picker.
- Slide-in animation via `@keyframes lotusToastIn`
OS-level notifications are unchanged and still fire when the window is not focused.
### Collapsible Long Messages
Messages exceeding a configurable line threshold are truncated with a "Show more" toggle.
- Default threshold: 20 lines
- Threshold is configurable in **Settings → Appearance**
- Uses CSS `max-height` + `overflow: hidden` with a smooth transition
- Transition is disabled when `prefers-reduced-motion: reduce` is active
### Message Send Animation
A subtle animation plays on the sender's own messages as they appear in the timeline:
-`transform: scale(0.97) → scale(1)` combined with `opacity: 0.4 → 1`
- Duration: 0.15s, ease-out
- Only applied to the current user's outgoing messages
- Disabled when `prefers-reduced-motion: reduce` is active
### Right-Click Room Context Menu
Right-clicking a room in the sidebar opens a context menu with:
- **Mute** with a duration submenu: 15 minutes, 1 hour, 8 hours, 24 hours, Indefinite
- **Copy Room Link** — copies the `matrix.to` URI to clipboard
- **Mark as Read** — marks all events in the room as read
- **Leave Room** — with a confirmation step
- **Room Settings** — opens the room settings panel
### Unverified Device Warning
- Controlled by the `warnOnUnverifiedDevices` setting (off by default)
- When enabled, a `Warning.Container` banner is displayed above the composer in encrypted rooms that have unverified device sessions
- The warning is informational only and never blocks sending
### Sidebar Room Filter
A text input at the top of the room list filters rooms by display name in real time. The filter is cleared automatically when switching sidebar tabs.
### DM Last Message Preview
Direct message entries in the sidebar show:
- A 48-character truncated preview of the last message body
- A relative timestamp (e.g., "2m ago")
- Reactivity via `useRoomLatestRenderedEvent`
- Encrypted messages show "Encrypted message" if decryption fails; successfully decrypted messages show their plaintext preview
### Room Sort Order
The room list sort order can be configured in **Settings → Appearance**:
- Recent Activity (default)
- A → Z (alphabetical)
- Unread First
Persists via the `homeRoomSort` setting.
### Favorite Rooms
- Rooms can be favorited via the `m.favourite` tag (standard Matrix tag)
- A "Favorites" section appears above the main room list when any rooms are favorited
- Favorited rooms display a star indicator in the sidebar
- Favorites sync across all devices via account data
### Invite Link + QR Code
`RoomShareInvite.tsx` provides a shareable invite UI:
- 160×160px QR code generated via `api.qrserver.com`
- "Copy Link" button to copy the `matrix.to` URI
- Also accessible via a toggle button (⊞) in the Invite modal
### Private Read Receipts
A toggle in **Settings → Privacy** switches between sending `m.read` (public receipts) and `m.read.private` (private receipts visible only to the sender and the server).
### Media Gallery
`MediaGallery.tsx` — a right-side drawer for browsing room media.
- Three tabs: **Images**, **Videos**, **Files**
- Reads already-decrypted events from the room timeline
- Encrypted images show a lock placeholder rather than an error
- "Load More" button triggers `mx.paginateEventTimeline()` to fetch older media
### Knock-to-Join
-`RoomIntro.tsx` shows a "Request to Join" button for knock-restricted rooms
- Clicking sends `mx.knockRoom(roomId)` with an optional reason
- The members drawer shows a "Pending Requests" section for room admins, listing users who have knocked
### Knock-to-Join Notifications for Admins (P4-3)
Room and space admins are notified in real time when users knock on a restricted room.
-`usePendingKnocks(room)` hook listens to `RoomMemberEvent.Membership` events and returns all members currently in the `knock` state
- Power level check: only shown to users with sufficient invite-level permissions (`usePowerLevelsContext()`)
- **Members button badge:** when knocks are pending, a `Warning`-variant solid `Badge` overlays the Members button in the room header showing the pending count
- Badge is `aria-hidden`; the Members button `aria-label` is updated to announce the count for screen readers
Hook: `src/app/hooks/usePendingKnocks.ts`
### Code Syntax Highlighting (TDS)
`syntaxHighlight.ts` provides TDS-aware syntax highlighting using inline styles derived from `--lt-accent-*` CSS variables. Supported languages: JavaScript, TypeScript, JSX, TSX, Python, Rust. Falls back to ReactPrism for unsupported languages.
### Room Emoji Prefix
A leading emoji in a room name is rendered at 1.15× size in the sidebar for visual hierarchy. An emoji picker button (😊) is added to all room name input fields, prepending the selected emoji to the room name.
### Configurable Composer Toolbar (P3-6)
Users can individually show or hide each composer toolbar button in **Settings → Editor → Composer Toolbar Buttons**:
The `useAuthentication` parameter was previously mispositioned, causing unauthenticated requests to be sent for media in rooms that required authentication.
### Upstream Tracking
- An `upstream` git remote pointing to `github.com/cinnyapp/cinny` is maintained for merge tracking
- A daily divergence check runs via `cinny-upstream-check.sh` on LXC 106
- This enables prompt review of upstream security patches and feature releases
### Rolldown CJS Interop — millify
`src/app/plugins/millify.ts` re-exports `millify` as a named import to bypass the `__toESM` interop bug in the Rolldown bundler, which caused the default export of CJS modules to be undefined at runtime.
### Sentry Noise Filter
`ignoreErrors: ['Request timed out']` is added to `Sentry.init()` to suppress a high-volume, low-signal error caused by transient network conditions. This keeps the Sentry issue queue focused on actionable errors.
### URL Preview Default in Encrypted Rooms
The `encUrlPreview` setting defaults to `true` rather than `false`. A security advisory chip in **Settings → Privacy** explains the tradeoff (the homeserver can see which URLs are being previewed) so users can make an informed choice.
**Confirmed bug** — drag a file over the window without dropping: the drop overlay persists.
**Fix:** Ensure `dragleave` fires correctly at the window/document level. Child element boundaries can cause spurious `dragleave` — use a counter or `relatedTarget` check.
**[AUDIT REQUIRED]** Find the drag-and-drop overlay component in `RoomInput.tsx` or the room view. Confirm the exact event listener structure.
**Complexity:** Low (bug fix).
---
## Priority 3 — Higher complexity / lower daily frequency
**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).
**Complexity:** Medium-High (audit is the main work).
---
### [x] P3-6 · Configurable Composer Toolbar
**What:** Let users rearrange or hide individual composer toolbar buttons (GIF, Sticker, Emoji, File, Voice, Location). Changes stored in `settingsAtom`. Access via a small "⚙ Customize toolbar" option in toolbar overflow.
**[AUDIT REQUIRED]** — Audit the current toolbar button rendering in `RoomInput.tsx`. Understand the layout system (is it a fixed array or already mapped from config?). Drag-to-reorder may require a DnD library; consider whether reorder is worth the complexity vs just toggle-visibility.
**⚠️ 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).
**Complexity:** High.
---
## Priority 4 — Specialized, high complexity, or low priority
**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).
**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).
---
### [x] P4-3 · Knock-to-join Notifications for Admins
**Note:** The basic knock-to-join UX is covered in P1-11 (completed). This task adds the admin notification side.
**What:** Space/room admins see a notification badge when there are pending knock requests. A "Pending Join Requests" section in the members drawer or room settings. Approve (invite) or deny (kick) each knock.
**Complexity:** Medium.
---
### [ ] 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.
**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.
**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.
**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.
**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.
**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
**What:**`/lfg` generates a formatted LFG post visible on ALL Matrix clients using standard `m.room.message` HTML. Fields: Game, Players Needed, Platform, Skill Level, Description, DM link. Other clients see clean formatted HTML; Lotus Chat renders an enhanced styled card.
**[AUDIT REQUIRED]** Test which HTML tags survive Matrix HTML sanitization on Element/FluffyChat before designing the card structure. Test with minimal HTML.
**Complexity:** Medium.
---
### [x] P5-10 · Voice Channel User Limit
**What:** Admins set max participants via custom state event `io.lotus.voice_limit: { max_users: N }`. Show "Channel Full (5/5)" to users over the limit. Local enforcement only.
**[AUDIT REQUIRED]** Check if Element Call has its own participant limit that should be integrated with rather than duplicated.
**Complexity:** Medium.
**Done:**`RoomVoiceLimit` admin control in Room Settings → General → Voice; `CallPrescreen` disables Join + shows "Channel Full (N/N)" when at capacity (rejoiners exempt). State event `StateEvent.LotusVoiceLimit`. **Hard enforcement is server-side for ALL clients** via `voice-limit-guard` (matrix repo `livekit/voice-limit-guard.py`) — a fail-open sidecar fronting `lk-jwt-service` (guard `:8070`, lk-jwt `:8071`) that refuses the LiveKit JWT (403) when the room is at capacity. The client check is UX-only. EC has only a global `max_participants` (50), so per-room limits were not duplicating an EC feature.
---
### [x] P5-11 · AFK / Idle Auto-Mute in Voice
**What:** Auto-mute mic after X minutes of silence (detected via Web Audio AnalyserNode). Show "You were auto-muted due to inactivity" toast with click-to-unmute. Admin-configurable via `io.lotus.afk_timeout` state event. Disableable in Settings → Calls.
**[AUDIT REQUIRED]** Verify auto-mute must go through the same CallControl bridge as manual mute.
**Complexity:** Medium.
---
### [ ] P5-12 · Seasonal / Event Themes
**What:** Automatic + manually toggleable seasonal overlays with CSS particle effects and accent color variants:
**What:** Animated WebM/GIF overlays that float around avatars (transparent center showing avatar). Curated built-in set OR user-uploaded mxc:// overlay. Stored in account data. Only Lotus Chat users see them.
**[AUDIT REQUIRED]** See #P5-13 audit. Also decide: curated set only vs user-uploadable.
**Complexity:** Medium.
---
### [ ] 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.
---
### [x] P5-16 · Custom Join / Leave Sound Effects
**What:** Local-only sounds when participants join/leave a call you're in. Built-in options + per-user settable. Detect via Element Call participant list change events.
**[AUDIT REQUIRED]** Find how Element Call exposes join/leave participant events to the parent window via postMessage bridge.
**Complexity:** Medium.
**Done:** Detected via `MatrixRTCSession` membership changes (`useCallMembersChange`) rather than the EC postMessage bridge — more reliable, identity tracked by `sender|deviceId`. Sounds synthesized with Web Audio (no assets). Styles Off/Chime/Soft/Retro in Settings → Calls. Hook `useCallJoinLeaveSounds`, util `callSounds.ts`.
---
### [ ] 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) This requires a Service Worker to handle the reply event — confirm if Lotus Chat has one or needs one.
**Complexity:** Medium-High.
---
### [x] P5-21 · Custom @Mention Highlight Color
**What:** Each user sets their own mention highlight color in Settings → Appearance. Applied as `--user-mention-color` CSS property override on mention-highlighted message rows.
**Complexity:** Low.
---
### [x] P5-22 · Font Selector for the UI
**What:** Font picker in Settings → Appearance. Options: JetBrains Mono, Inter, Geist, Fira Code, OpenDyslexic, System Default. Applied via CSS custom property overrides.
**[AUDIT REQUIRED]** Check if any fonts are already globally loaded to avoid double-loading.
**What:** Saved presets that change all notification settings atomically. Gaming (mentions only), Work (DMs + mentions), Sleep (all off). Quick-switch from sidebar or settings.
**Complexity:** Medium.
---
## 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.
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 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.
# 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.
- Add an optional `frameName` prop to the `UserAvatar` component.
- Since `folds` components like `AvatarImage` are restrictive, wrap the entire return value (both fallback and image paths) in a new `Box` container that applies the frame/glow effects via CSS.
### P5-21 · Custom @Mention Highlight Color
- **Objective:** Persistent background highlight for messages that mention the user.
- In `layout.css.ts`, add a `mention` variant to the `MessageBase` recipe that sets a static `backgroundColor`.
- In `Message.tsx`, pass the `isMentioned` boolean (Line 800) into the `MessageBase` component as a new prop to trigger the highlight variant.
### P5-20 · Quick Reply from Browser Notification
- **Objective:** Inline reply in OS notifications.
- **Key Files:**
-`src/sw.ts`: Handle the `notificationclick` event.
- **Implementation:**
- Check for `event.reply` in the service worker.
- Use the `accessToken` and `baseUrl` stored in the `sessions` map (already implemented in `sw.ts`) to send a Matrix message via `fetch` directly from the Service Worker.
- **Crucial:** Ensure the message is sent as a relation if the notification was for a thread.
---
## 🧪 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.banner` field. Most clients use `org.matrix.msc4133.banner_url` (unstable).
- **Recommendation:** Use `mx.http.authedRequest` to experiment with this field on `matrix.lotusguild.org`.
The source code is licensed under [AGPLv3](LICENSE), the same license as the upstream Cinny project. The source for this fork is public at [code.lotusguild.org/LotusGuild/cinny](https://code.lotusguild.org/LotusGuild/cinny).
Cinny is a [Matrix](https://matrix.org) client focusing primarily on simple, elegant and secure interface.
- Room topics support rich formatting (bold, links, italics)
- Deleted messages show a placeholder instead of disappearing
- Code blocks highlight syntax for JS/TS, Python, and Rust
- Rich link preview cards for YouTube, GitHub, Twitter/X, Reddit, Spotify, Twitch, Steam, Wikipedia, Discord, npm, Stack Overflow, and IMDb
### Building from source
### Calls & Voice
Execute the following commands to compile the app from its source code:
- Push to Talk with a configurable keybind (default: Space)
- Push to Deafen with the M key
- Camera starts turned off by default when joining a call
- Screenshare requires confirmation before going live
- Toggle noise suppression on or off
- Calls float in a draggable picture-in-picture window when you navigate away
- Your chat background shows through the call view
- Dark/light mode inside calls matches your Lotus Chat theme
- Calls are available in DMs and private groups only — no accidental mass rings
- AFK auto-mute: mic is automatically silenced after a configurable idle timeout (1–30 min); a toast confirms the action
- Voice channel user limit: admins can cap how many people can be in a room's call — enforced server-side for every Matrix client (not just Lotus Chat); others see "Channel Full" until a spot opens
- Custom join/leave sound effects when someone enters or leaves your call — choose Chime, Soft, Retro, or off
### Customization & Appearance
- LotusGuild Terminal Design System (TDS) — a CRT terminal-inspired dark theme
- TDS light mode variant for daytime use
- 20+ static chat background patterns
- 5 animated chat backgrounds: Digital Rain, Star Drift, Grid Pulse, Aurora Flow, Fireflies
- Toggle to pause background animations
- Glassmorphism sidebar — frosted glass effect that lets the background show through
- Night Light / blue light filter with an adjustable intensity slider
- Emoji prefixes on room names render larger in the sidebar (e.g. 🎮 general)
- Rename any room for yourself only — other members see the original name
- Emoji picker on all room name inputs
### Presence & Profile
- Discord-style presence selector: Online, Idle, Do Not Disturb, Invisible, or Auto
- Custom status message with emoji and an optional auto-clear timer
- Colored presence ring on member avatars (green / yellow / red)
- Profile fields for pronouns and timezone
- When a user's timezone is set, their current local time appears in their profile
- Unread count shown in the browser tab title
### Moderation & Privacy
- Report any room to homeserver admins from the room menu
- View policy lists and ban lists (Draupnir-compatible, read-only)
- Toggle private read receipts so others can't see when you've read messages
- Optional warning when an encrypted room contains unverified devices
- Full push rule editor in notification settings
- View and edit Server ACL rules in room settings
- Filterable room activity / mod log (joins, kicks, bans, power level changes, etc.)
- Room stats and insights panel (active members, top reactions, media breakdown, activity heatmap)
- Export room history as plain text, JSON, or HTML with optional date range filter
### Notifications
- In-app toast notifications appear bottom-right when the window is focused
- Custom notification sounds per category (messages, invites)
- Quiet hours — suppress notifications during a configured time window
- Click a toast to jump directly to the room or DM
### UX
- Filter and search rooms in the sidebar
- Favorite rooms sync across devices and appear in a pinned section
- Sort rooms by recent activity, alphabetical, or unread first
- DM rows show a message preview and relative timestamp
- Right-click a room for a context menu: mute with duration, copy link, mark as read
- Quick emoji reactions appear on message hover — one click to react
- Knock-to-join: request access to a room; admins approve or deny from the members list
- Media gallery drawer: browse all images, videos, and files shared in a room
- Invite link and QR code in room settings
- Pending knock requests shown in the members list for room admins with a live badge count on the Members button
- Homeserver support contact displayed in Help & About (MSC1929)
- Server notice rooms are visually distinct from regular DMs
---
## Desktop App
Lotus Chat has a desktop app for Windows, macOS, and Linux. It wraps the same web client in a native window with automatic background updates — no need to reinstall for new versions.
### Download
Download the latest release from the [Releases page on code.lotusguild.org](https://code.lotusguild.org).
### SmartScreen Warning (Windows)
When you first run the installer on Windows, you may see a popup that says **"Windows protected your PC"** with the app listed as an unknown publisher. This is normal.
**Why it happens:** Windows SmartScreen flags any app that does not have an expensive commercial code-signing certificate from a major CA. Lotus Chat is signed with its own key for update verification, but that key is not in Microsoft's pre-approved list.
**How to install anyway:**
1. Click **"More info"** in the SmartScreen dialog.
2. A **"Run anyway"** button will appear.
3. Click it to proceed with installation.
After the first install, automatic in-app updates handle all future versions — you will not see this prompt again for updates.
---
## For Developers
The source code lives in `/root/code/cinny`. All changes should be made on the `lotus` branch. Push to `origin/lotus` and CI will automatically build and deploy to [chat.lotusguild.org](https://chat.lotusguild.org) in approximately 11 minutes — no manual build or deploy steps required.
See [LOTUS_FEATURES.md](LOTUS_FEATURES.md) for the full feature changelog and [LOTUS_TODO.md](LOTUS_TODO.md) for the work backlog.
### Build
```bash
npm ci && npm run build # outputs to dist/
```sh
npm ci # Installs all dependencies
npm run build # Compiles the app into the dist/ directory
```
If the build is killed due to out-of-memory:
You can then copy the files to a webserver's webroot of your choice.
```bash
NODE_OPTIONS=--max_old_space_size=6144 npm run build
```
To serve a development version of the app locally for testing, you may also use the command `npm start`.
### CI/CD
### Running with Docker
This repository includes a Dockerfile, which builds the application from source and serves it with Nginx on port 80. To
use this locally, you can build the container like so:
```
edit → commit → git push → ~11 min → live at chat.lotusguild.org
docker build -t cinny:latest .
```
You can then run the container you've built with a command similar to this:
```
docker run -p 8080:80 cinny:latest
```
This will forward your `localhost` port 8080 to the container's port 80. You can visit the app in your browser by
navigating to `http://localhost:8080`.
Alternatively you can just pull the [DockerHub image](https://hub.docker.com/r/ajbura/cinny) by `docker pull ajbura/cinny`.
### Configuring default Homeserver
To set default Homeserver on login and register page, place a customized [`config.json`](config.json) in webroot of your choice.
## License
Copyright (c) 2021 Ajay Bura (ajbura)
Code licensed under the MIT License: <http://opensource.org/licenses/MIT>
Graphics licensed under CC-BY 4.0: <https://creativecommons.org/licenses/by/4.0/>
<p>The requested URL <code>/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4xD-IQ.woff2</code> was not found on this server. <ins>That’s all we know.</ins>
<p>The requested URL <code>/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4xD-IQ.woff2</code> was not found on this server. <ins>That’s all we know.</ins>
<p>The requested URL <code>/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4xD-IQ.woff2</code> was not found on this server. <ins>That’s all we know.</ins>
<metaname="description"content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source.">
<metaproperty="og:description"content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source.">
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.