The composer looked off in two ways, both confirmed by rendering CustomEditor
with RoomInput's exact props and measuring the buttons headlessly:
Desktop: the Lotus additions (location, poll, voice, schedule) used
`Icon size="100"` (18px) inside the same `IconButton size="300"` as the
upstream Aa/sticker/emoji/send buttons (24px icons), so one row mixed
32×32, 26×26 and a 28×19 "GIF" text stub. Every button is now 32×32: the
four small icons use the default icon size and the GIF label sits in a
1.5rem box, the same footprint as an icon. The mic's idle button in
VoiceMessageRecorder gets the same treatment since it lives in this row.
Phones: d6159997 let the before|editable|after row flex-wrap at <=750px, but
folds' Scroll (the editable's wrapper) is `width: 100%`, so the row ALWAYS
broke into three stacked lines — "+" alone on top, the input flush against
the left edge on its own line (the :first-child padding selectors no longer
matched), and emoji/draft/send left-aligned underneath. e1bb8301's "+"
overflow menu was meant to produce [ + | input | emoji | send ] but never
could while the row wrapped. The row no longer wraps (upstream behaviour);
instead the collapse into the "+" overflow is keyed on the viewport
(ScreenSize.Mobile) as well as the touch UA, so a phone-width window on a
desktop UA — iPad desktop mode, split-screen PWA, docked window — also
collapses instead of rendering ten controls inline and clipping Send behind
the editor's overflow:hidden. The "Draft saved" label moves into the overflow
row in compact mode so the inline row stays [ + | input | emoji | count |
send ]. The editable's vertical padding grows to 19px at phone width (only
when the row actually has buttons) so the text sits level with the 44px
touch targets instead of hugging the top of the row. Those touch targets now
also apply the shared MobileTouchTarget class, matching the recorder button.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
On phones the composer's 7-8 secondary action buttons wrapped into a tall
multi-row stack ("massive height"). Mobile now shows a single compact row —
[ + | input | emoji | send ] — where "+" toggles a collapsible row (above the
formatting toolbar) holding attach, GIF, location, poll, voice, formatting and
schedule. Desktop is unchanged (isMobile === false; the mobile branches are
never entered and composerOverflow stays null).
The after-builder stashes the collapsed buttons in a render-local `let` that
the bottom slot reads; safe because JSX props evaluate in source order within
one render (verified by review). Emoji/Send stay inline; the emoji and GIF
PopOut anchors still resolve wherever their button renders.
Review fixes folded in: the "+" toggle uses aria-expanded + aria-controls
(dropped the redundant aria-pressed) pointing at the labelled role="group"
overflow row; the voice recorder's idle mic button gets the @media-gated
MobileTouchTarget 44px target so the overflow row is uniformly tappable.
Two review agents (correctness + UX/a11y); gate-green (tsc, eslint, prettier,
914 tests, build). Visual confirmation still wants a real device per
LOTUS_TESTING.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Address findings from 2 review agents (pause/resume duration model +
meter lifecycle were verified correct):
- Mic-stream leak (HIGH, pre-existing but in this change's blast radius):
the mic tracks were only stopped inside mr.onstop, which cancel() nulls
and the unmount effect never triggered — so cancelling or unmounting
mid-recording/pause left the mic live (OS indicator on). Hold the stream
in a ref and release its tracks explicitly (stopStream) on cancel and on
unmount, independent of onstop. Normal stop still releases via onstop.
- Defensive: startMeters now cancels any existing rAF/interval before
starting, so it can never spawn a second loop.
- a11y/UX: the finish button (checkmark, advances to the preview step) is
relabeled "Finish recording"/"Finish" so the label matches the check
glyph (was "Stop recording" with the old pause icon). The three
recording-control buttons get flexShrink:0 so they don't squish the
waveform at narrow composer widths.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The voice recorder was a single continuous take — an interruption meant
stopping early or starting over (and the Stop button confusingly used a
Pause icon). Add real pause/resume.
- MediaRecorder.pause()/resume() with a new 'paused' state.
- Duration now accumulates only active-recording time: an accumulate-on-
pause model (accumulatedMsRef + segmentStartRef) replaces the wall-clock
startTime, so paused time is excluded from both the live timer and the
finalized preview duration.
- Extracted startMeters/stopMeters so the waveform rAF + timer interval are
reused across start/resume; stopMeters keeps the audio graph alive for
resume while stopAll tears it down.
- Recording view now also renders the 'paused' state: a Pause/Resume toggle
(Pause vs Play icon), the record dot stops pulsing (dimmed), and the
waveform/timer freeze. Stop/Cancel/unmount all handle a paused recorder.
- Fixed the mislabeled finish button: it now shows a checkmark (it advances
to the preview step) instead of a pause icon.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
DP7: fix inverted Deafen/Undeafen aria-label on the sound button so it
matches the action and tooltip.
DP8: add aria-pressed to Sound/Video/ScreenShare toggles and align the
Microphone toggle to the same "pressed = feature on/active" semantic.
DP9: return focus to the trigger when the GifPicker closes and cap its
fixed width to min(312px, calc(100vw - 16px)) so it can't overflow
narrow viewports.
DP10: drop redundant mouse-only clear onClick nested inside the search
filter Chip buttons (parent chip/menu already performs the clear);
the cross icons are now purely decorative.
DP11: constrain the voice recorder widget and let the waveform shrink so
it fits a narrow composer, and expose the live duration as a role="timer"
snapshot instead of spamming a screen reader every 100ms.
DP12: announce the live-call participant count via a visually-hidden
role="status" region.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Accessible names for ~15 controls that lacked them: invite/join/create-room/
account-data/image-pack/private-note/power-level inputs (visible <label htmlFor>
where a label exists, else aria-label); the two range sliders (night-light
intensity, noise-gate threshold); the soundboard file input; media <video>
elements; and the Media Gallery (region) + Search (dialog) overlays. Hidden
notification/preview <audio> marked aria-hidden.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- GifPicker: replace #FF6B00 and #060c14 with var(--lt-accent-orange) and
var(--lt-bg-secondary); rgba opacity values use color-mix()
- VoiceMessageRecorder: replace #FF6B00 and #00FF88 waveform/dot colors
with var(--lt-accent-orange) / var(--lt-accent-green)
- Presence: replace aria-labelledby referencing a lazy tooltip ID with a
direct aria-label so screen readers always have the text in the DOM
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- useMessageSearch: add fromTs/toTs to useCallback dep array (exhaustive-deps error)
- useMessageSearch: restore eslint-disable on the correct line for the `as any` cast
- VoiceMessageRecorder: remove two eslint-disable directives for rules that are
globally off (jsx-a11y/media-has-caption) or not enabled (react/no-array-index-key)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
When lotusTerminal is enabled, the recording dot turns orange (#FF6B00),
the duration timer uses JetBrains Mono in green (#00FF88), and the
waveform bars match green — consistent with the PTT badge and GIF
picker terminal aesthetics.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- VoiceMessageRecorder recording dot now pulses (reuses pttLivePulse keyframe)
- Added data-voice-recorder / data-voice-rec-dot / data-voice-waveform attributes
for TDS targeting: green pulsing dot, cyan waveform bars, subtle border in TDS dark
- Wire VoiceMessageRecorder onError to the same input-bar error display used by
location errors (mic denied, media error surfaces to user instead of silent fail)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add VoiceMessageRecorder component: mic button in composer toolbar,
live waveform + timer, preview before send, MSC3245-compliant content
(org.matrix.msc3245.voice, org.matrix.msc1767.audio with waveform),
E2EE support via encryptFile before upload
- Add useUserVerifiedStatus hook: uses crypto.getUserVerificationStatus,
reacts live to CryptoEvent.UserTrustStatusChanged
- MembersDrawer: show green/yellow shield badge per member in encrypted
rooms (cross-signing verified/unverified), E2EE status banner in header
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
jaredandClaude Opus 5