101 Commits

Author SHA1 Message Date
rbondesson bb4a7e9613 Move RovingTabIndex to shared component and use it in ActionBarView (#33263)
Build / Build on ubuntu-24.04 (push) Failing after 42s
Build and Deploy develop / Build & Deploy develop.element.io (push) Has been skipped
Deploy documentation / GitHub Pages (push) Failing after 35s
Deploy documentation / deploy (push) Has been skipped
Publish shared component storybook / Build storybook (push) Failing after 3m4s
Publish shared component storybook / Publish storybook (push) Has been skipped
Shared Component Visual Tests / Run Visual Tests (push) Failing after 49s
Static Analysis / Docs (push) Failing after 38s
Static Analysis / ESLint (push) Failing after 28s
Static Analysis / Analyse Dead Code (push) Failing after 44s
Static Analysis / Prettier (push) Failing after 36s
Static Analysis / Style Lint (push) Failing after 38s
Static Analysis / Typescript Syntax Check (push) Failing after 38s
Static Analysis / Workflow Lint (push) Failing after 42s
Static Analysis / Rethemendex Check (push) Failing after 41s
Static Analysis / Zizmor Github Actions lint (push) Failing after 37s
Static Analysis / i18n Check (Element Desktop) (push) Failing after 0s
Static Analysis / i18n Check (Shared Components) (push) Failing after 0s
Static Analysis / i18n Check (Element Web) (push) Failing after 0s
Static Analysis / Static Analysis (push) Successful in 1s
Build / Build on macos-14 (push) Has been cancelled
Build / Build on windows-2022 (push) Has been cancelled
* Create a new shared component and a wrapper in app/web

* Move unit tests and add new for better coverage

* Refactor ActionBarView to use the RovingTabIndexProvider

* Clean up the interface and adjust callers

* Added documentation and renamed type for better readabililty

* Reverting the clean up of IContext

* Fix Sonar issues

* More Sonar issus fixed
2026-04-23 09:33:32 +00:00
Michael Telatynski 8f9953f419 Fix flaky test src/room/composer/Banner/Banner.stories.tsx > With Avatar Image (#33275)
* Fix flaky test `src/room/composer/Banner/Banner.stories.tsx > With Avatar Image`

it was previously loading an external (slow) image which was random (!) by design

Fixes https://github.com/element-hq/element-web/issues/33273

* Fix styling

* Iterate

* Update snapshot
2026-04-23 08:26:48 +00:00
Richard van der Hoff cd515444a8 Confirm before inviting unknown users to a DM/room (#33171)
* InviteDialog: factor out startDmOrSendInvites

Factor out the logic of calling `startDm` or `inviteUsers` to a helper
function. We're going to need to call this from a second location soon, so this
is useful groundwork.

* Add `UnknownIdentityUsersWarningDialog`

* Add unit tests

* Update playwright tests

* Convert if/else to switch statement

* Convert helper functions to React components

* Factor out "onRemove" callback

* Add clarifying comment
2026-04-22 20:05:31 +00:00
Florian Duros f4c62abbcd Room list: assign room to custom section (#33238)
* feat(sc): add new toast type for room list

* feat(sc): add section entries in room list item menu

* feat(rls): expose util functions

* feat: allows to tag room with custom sections

* feat(vm): add new Chat moved toast to room list vm

* feat(vm): add section selection to room list item vm

* feat(e2e): add tests for adding room in a custom section

* test(e2e): update existing screenshots

* chore: fix lint after merge

* chore: remove outline in test
2026-04-22 19:50:54 +00:00
Michael Telatynski 4b4289e211 Implement new design for Welcome page (#33211)
* Convert welcome.html to React component

In advance of changes to use Compound

* Fix types

* Fix tests

* Update styling to match Figma

* Fix random capitalisation

* Tweak styling

* Regenerate i18n

* Update tests

* Make linter happy

* Iterate
2026-04-22 15:32:05 +00:00
Will Hunt 9df7182c0c Redesign link previews (#33061)
* Commit design update

* Add figma links

* Check in other changes

* revert accidental change

* Iterative update

* linting n test fiddles

* linting

* Cleanup

* update snaps

* Move URL previews to new home

* Fix paths

* compress img

* Add back all the stories

* Improved rendering

* Fixup

* Update previews again

* lint

* update stories

* Update snaps again

* More screenshots

* Also these

* Update snaps

* include site name

* Update snaps again

* Use a scale so the images don't go blur

* update snaps again

* Update snaps

* remove mistaken playwright cfg

* update pw snaps

* update snap

* update previews

* Update with new designs

* Update screenshots
2026-04-22 13:23:24 +00:00
Florian Duros 9df9fb9428 Room list: scroll to newly creation section (#33210)
* feat(rls): emit tag when section is created

* feat(vm): scroll to newly section tag

* feat(view): scroll to new section
2026-04-22 12:21:41 +00:00
renovate[bot] e568ed8aac Update dependency caniuse-lite to v1.0.30001788 (#33245)
* Update dependency caniuse-lite to v1.0.30001788

* Update tests

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2026-04-21 20:27:27 +00:00
Michael Telatynski 354a05d89f Remove dependency on uuid (#33230)
* Remove dependency on `uuid`

* Delint
2026-04-21 16:36:27 +00:00
Richard van der Hoff e58e803368 Update to compound 9.2.0 (#33173)
* Upgrade to compound 9.2.0

... to pick up the export of PageHeader

* update snapshots

* update shared-components snapshots

* More snapshot updates

* update snapshot

* GHA: Show disk usage on failure
2026-04-17 15:51:43 +00:00
Florian Duros 6b67b24254 Room list: add custom section creation (#33155)
* feat: add creation section dialog

* feat: add in skip list a method to change filters

* feat: add helper to creation section

* feat: add custom sections data to Settings

* feat: add custom section to room list store v3

* feat: update header and room list item vms

* feat: add toast to room list vm

* feat: add new translation

* chore: move util functions of room list specs

* test: add custom section playwright tests

* chore: call loadCustomSections in RoomListStoreV3 ctor
2026-04-17 12:02:42 +00:00
adis veletanlic 73d4b63ada Fix crashes in when opening Bridges in room settings (#33137)
* use SDKContext for room settings dialog to avoid crash #33107

* format with prettier

* add SDKContext to RoomSettingsDialog test
2026-04-17 11:36:40 +00:00
adis veletanlic 1044a95687 fix(call): leave call along with room (#33162)
* make sure to disconnect from possibly active calls for a room when leaving the room

* log error on log call

* Update apps/web/src/utils/leave-behaviour.ts

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* fix wrong logger import

* hang up calls properly on empty rooms for both legacy and element calls (listen for room event and leave call if only one member left). add tests for both legacy and element calls.

* format Call-test.ts

* revert async on function def

* revert Call.ts and Call-test.ts. Wrap legacy call hangup in try

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2026-04-17 10:58:15 +00:00
Michael Telatynski 30f442208a Fix React hydration issues (#32958)
* Add more playwright axe tests to settings dialogs

* Add utility to jest setupTests to detect React hydration errors

* Iterate jest utility

* Fix axe issue heading-order

* Fix div-in-p issues

* Fix setupTests.ts

* Fix heading order

* Make types happier

* Fix hydration issues of thead containing text nodes

* Update tests

* Fix form-in-form React hydration issues

* Fix li-in-li React hydration issues

* Fix checked in form without onChange React hydration issue

* Fix styling bleeding from _common.pcss

* Update snapshots

* Fix more remaining issues

* Remove _common.pcss h2 rule altogether

* Fix test

* Update snapshots

* Iterate

* Iterate

* Update snapshots

* Simplify diff

* Test

* Update screenshots

* Update screenshot
2026-04-16 13:35:40 +00:00
Michael Telatynski 64d3802efe Fall back to OIDC response_mode query if fragment unsupported (#33169)
* Fall back to OIDC response_mode query if fragment unsupported

* Tidy comments

* Fix test
2026-04-16 11:07:39 +00:00
Michael Telatynski de4a1e6d35 Switch OIDC to response_mode=fragment (#33100)
* Refactor: kill off `parseQs` in favour of URLSearchParams

* Consolidate app-load url parameter handling

* Switch to responseMode=fragment
2026-04-15 09:35:02 +00:00
Zack 80cf9e5b4a Shared Components Restructure, Cherry Picked | Room Shell Structure (#32917)
* refactor(shared-components): move composer and right-panel tree

* refactor: cleanup remaining structure leftovers

* test(shared-components): add room shell visual baselines

* Correct Path
2026-04-14 13:20:15 +00:00
Florian Duros 23b11aaf86 Update compound web and compound design tokens (#33120)
* chore: update compound web and compound design tokens

* test: update SC snapshots

* test: update EW snapshots

* test: update EW screenshots
2026-04-13 15:40:24 +00:00
Richard van der Hoff eef8cad229 Update to compound-web 9.0.1 (#33095)
* Update to compound-web 9.0.1

There are a couple of breaking changes in v9, leading to the changes in
`BugReportDialog` and `EncryptionCard`.

Most of these updates, however, are snapshot updates, due to changes in the CSS
class names in compound web (which happens due to updates in the CSS content in
those classes; `postcss-modules` generates class names based on the hash of the
CSS).

* update playwright screenshots
2026-04-13 10:16:34 +00:00
Richard van der Hoff 4186b8e8e8 Convert TextualBody-test to out-of-line snapshots (#33104)
Sonar complains about duplication in the inline snapshots
2026-04-10 15:52:59 +00:00
Jefta 7b9e586c3a Hide spoilers from desktop notifications (#31699)
* Hide spoilers from desktop notifications

* Replace unicode blocks with spoiler tag

* Run prettier

* Add comments
2026-04-10 15:45:25 +00:00
Richard van der Hoff 4c4bfcde7e Inline inviteMultipleToRoom (#33027)
This two-line method serves mostly to obfuscate, imho. Let's get rid of it.
2026-04-09 22:11:12 +00:00
Florian Duros a5e09ebb53 feat: expand sections when filter is toggled (#33077) 2026-04-09 13:14:41 +00:00
Will Hunt b4d0c21abf Update URL Preview settings (#32992)
* Remove ability for url previews to be set per-room

* Add ability to enable E2EE URL Previews globally

* Remove old migration

* Cleanup

* Remove room account handler

* update snap

* screenshot updated

* Add a test
2026-04-09 12:32:50 +00:00
Robin 253dcb44dd Show a 'grab' cursor on picture-in-picture view (#33079)
* Remove unused 'draggable' prop from PictureInPictureDragger

* Show a 'grab' cursor on picture-in-picture view

To give it a proper affordance for dragging.
2026-04-09 12:25:14 +00:00
Zack 70e40009a3 Fix issues with /me emote two liner (#33081)
* Fix issues with me emote liner

* Fix Prettier
2026-04-09 12:13:02 +00:00
Joao Pedro Antunes Borie 5ba09a5f90 Fix #32727: Ensure VoiceRecording uses the selected microphone (#32887)
Voice messages were being recorded using the system default microphone
instead of the device selected in Element settings.

This was fixed by ensuring the preferred deviceId is correctly passed
to the MediaStream constraints in VoiceRecording.ts.

Added unit tests in VoiceRecording-test.ts to verify that the
application correctly requests the user-selected device.

Co-authored-by: Will Hunt <2072976+Half-Shot@users.noreply.github.com>
2026-04-09 11:07:32 +00:00
Florian Duros 121c2d18e9 Room list: fix expanded/collapse state of sections (#33074)
* fix: section being empty in flat list mode

When switching space (or removing a section later), if the Chat section
is collpased and the room list is in flat list mode in the other space,
the room list is empty.

The fix forces the section to be in expanded state if in flat list mode

* fix: store section expanded state by space
2026-04-08 13:44:52 +00:00
Zack d197fb4e30 Refactor and Move TileErrorBoundary to Shared Components (#32793)
* creation of stories and view in shared-components

* migrate EventTile error fallback to shared TileErrorView MVVM

* Fix lint errors and unused import

* Update tests because of the refactoring

* Update snapshots + stories

* removal of mxEvent since it never changes in timeline

* Update packages/shared-components/src/message-body/TileErrorView/TileErrorView.stories.tsx

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* Update apps/web/src/viewmodels/message-body/TileErrorViewModel.ts

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* Update apps/web/src/viewmodels/message-body/TileErrorViewModel.ts

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* docs: add TileErrorView tsdoc

* docs: add TileErrorViewModel tsdoc

* docs: add view source label tsdoc

* refactor: move tile error layout into vm

* docs: add TileErrorView story view docs

* docs: move tile error story list wrapper

* refactor: remove unused tile error event setter

* Update packages/shared-components/src/message-body/TileErrorView/TileErrorView.stories.tsx

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* docs: add tsdoc for event tile error fallback props

* refactor: rely on snapshot merge no-op checks

* remove unessecery if statment

* test: restore EventTile mocks in afterEach

* test(shared-components): move TileErrorView baselines

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-04-08 09:05:31 +00:00
renovate[bot] 6e9fc9b8fa Update npm non-major dependencies (#33001)
* Update npm non-major dependencies

* Update snapshot

* Patch plist for compatibility with updated @xmldom/xmldom

* Lockfile

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2026-04-08 07:40:43 +00:00
R Midhun Suresh edea3fffdf Collapsible Left Panel - Ensure that panels have non-fractional widths (#33052)
* Expand panel to full width

* Write tests

* Resize to nearest whole number if necessary

* Update screenshots

* Early return when resizing to whole width

* Update screenshot
2026-04-07 15:44:51 +00:00
Michael Telatynski 6c1dc7051f Accessibility improvements in settings (#32968)
* Add more playwright axe tests to settings dialogs

* Fix axe issue heading-order

* Fix heading order

* Iterate

* Update snapshots

* Iterate

* Update snapshots

* Iterate

* Update screenshot

* Iterate

* Iterate

* Update snapshot
2026-04-07 15:17:59 +00:00
Will Hunt 5de316b752 Move Low Bandwidth feature to devtools. (#32797)
* Move and rename low bandwidth mode.

* Still in use.

* remove string

* Add a test for low bandwidth mode

* Test requests too

* update snaps

* New year!
2026-04-07 12:16:35 +00:00
R Midhun Suresh 6b00466a85 Collapsible Left Panel - Clicking on separator should expand to 100% when no width is available in settings (#33053)
* Expand panel to full width

* Write tests
2026-04-07 12:05:36 +00:00
renovate[bot] 2bef316bed Update dependency caniuse-lite to v1.0.30001781 (#32996)
* Update dependency caniuse-lite to v1.0.30001781

* Update tests

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2026-04-07 10:02:33 +00:00
Florian Duros 46bff1f9e6 Room list: add activity marker to sections (#33024)
* feat: add unread status to section view

* feat: add unread tracking in room list section

* feat: populate rooms into section header vm

* test: add units for unread in section view model

* test(e2e): add unread tests
2026-04-06 19:05:45 +00:00
Richard van der Hoff 5e140768f0 InviteDialog: remove broken checks for unknown users (#33026)
* InviteDialog: remove broken checks for unknown users

Per https://github.com/element-hq/element-web/issues/33020, this doesn't
actually work, and if we were to bring it back, we'd design it differently.

* Remove now-unused `UserProfilesStore.getProfileLookupError`

This was only used in `InviteDialog.checkProfileAndStartDm`, which has now been
removed.
2026-04-02 15:31:29 +00:00
Michael Telatynski 2d3e2fcb70 Remove global h2 css rule in favour of heading styles/components (#32969)
* Remove global h2 css rule in favour of heading styles/components

* Use Compound Heading in shared-components

and forbid hX elements

* Use Compound Heading in settings

add back margin to some legacy headings

* Tweak some headings

* Update screenshots

* Update screenshots

* Update snapshots

* Tweak .gitignore

* Update snapshots

* Iterate

* Update screenshots

* Update screenshots

* Update screenshot
2026-04-02 16:13:17 +00:00
rbondesson 4315038346 Refactor MessageActionBar using MVVM and move to shared-components (#32784)
* Refactor MessageActionBar into MVVM ActionBarView

* Adding tooltips for menu items and correct i18n strings

* Layout changes

* Renaming some properties

* Rename property

* Create a first version of the view model and refactor media visibility logic

* Refactor view to take options and rections menu as optional properties

* Cleaner interface between view and view model

* Refactor view properties and replace Menu and MenuItem

* Bugfixes and switching to ActionBarView instead of MessageActionBar in element-web

* Avoid creating view models and render toolbar until it is actually shown

* Added unit and playwright tests and documented the view

* Added view model unit tests and updated snapshots of dependant tests

* Remove unused components and unnecessary css

* Remove unused language tags

* Fix for handling join-rules correctly

* Prettier

* Add handling of stale view model in async calls

* Prettier

* Split the element-web css into two different. One for legacy components and one for the ActionBarView

* Missing variables used for linting

* Fix for showing ActionBarView when using keyboard for navigation

* Handle visibility on context menu closing

* ThreadPanel uses the ActionBarView so restore css rule

* Fix for visibility of the ActionBarView in Thread panel

* Fix for ActionBarVuew visibility when closing right-click context menu and not still hovering

* Add roving index to function as a toolbar

* Adjust the RoomView test to send hover to the EventTile instead of the message text

* Fix SonarCloud issues

* Fix for SonarCloud issue

* Merge fix

* Rename mx_LegacyActionBar to mx_ThreadActionBar

* Added documentation and simplified join rules

* Generalize the ActionBarView and move logic to view model

* Add the four new buttons to the ActionBarView

* Update view model and tests to use the updated ActionBarView

* Refactor element-web to use ActionBarView

* Clean up styling in element-web

* Clean up and updating snaps and screenshots

* Added unit-tests for better coverage

* Moving ActionBarView to the correct folder in shared components

* Update snaps in element-web

* Better documentation in stories

* Merge fixes

* Updates after review comments

* Review comment fixes

* Added documentation to view models and updated snaps

* Hide button had the wrong label

* Replace createRef with useRef
2026-04-01 12:27:03 +00:00
Zack 0391543bbc Refactor and move MVideoBody to shared components (#32849)
* init MVideoBody to shared components, including test, stories and view

* fix prettier and other warnings

* move video message body to shared view + app viewmodel

* Fix prettier warnings and masking spinner for tests

* stabilize VideoBodyView screenshots with local media asset

* Disable spinner from changing image all the time

* Added mask over video spinner to prevent issues with new generated images on playwright tests

* Update prettier fix

* Update snapshot

* Add tests to cover different states of Video

* Update code to prevent the previous component Hack fix regarding jumps on the timeline.

* Update snapshot

* Update code to improve code quality for Sonar + update snapshot

* adde documentation snippets

* refactor: move m.video rendering into body factory

* docs: add tsdoc for video body view model

* docs: add thumbnail tsdoc for video body view model

* docs: add content-url tsdoc for video body view model

* docs: add dimensions tsdoc for video body view model

* docs: add aspect-ratio tsdoc for video body view model

* docs: add tsdoc for video body view state

* refactor: replace video body view state enum

* refactor: remove duplicate video body state init

* refactor: drop unused video body view state attribute

* Fix Prettier

* Update snapshot screenshot

* test: restore video story screenshot mask

* chore: refresh PR head

* Add mask to screenshot to pass CI tests

* test: narrow video story mask hook

* Fix easy Sonar warnings in video body components

* Move shared message body views into event-tile layout

* Move shared message body visual baselines

* Revert unrelated shared message body moves
2026-04-01 09:48:22 +00:00
JephDiel 3e04b24d1e Allow Element Call to use MSC4039 (#32755)
* Allow Element Call to use MSC4039

Allow Element Call to use MSC4039 so it can
download avatars if it can't authenticate with the
server directly.

* Test Allowing Element Call to use MSC4039

---------

Co-authored-by: Valere Fedronic <bill.carson@valrsoft.com>
2026-04-01 08:14:16 +00:00
Florian Duros 0f515f581e Room list: add default sections (#32785)
* feat: add sections to RLSV3

* feat: add sections in vms

* feat: add room list section labs flag

* fix: wrong margin for room list item when in sections

* feat: hide favourites and low priority filters

* fix: crash when changing filter

* feat: support sticky room in sections

* test: update SC snapshot

* test: update SC screenshot

* test: update RLS tests

* test: add tests to RoomListSectionHeaderViewModel

* test: fix existing test in RoomListViewModel

* test: add sections tests for RoomListViewModel

* test: add e2e tests for sections

* fix: incorrect selected room when expanding/collasping a section

* fix: typo in `roomSkipList`

* feat: use one skip list with all filters instead of one list by tag

* chore: put back comment about `roomIndexInSection`

* chore: add missing `readonly`

* chore: add doc about possible undefined value for room item vm
2026-03-31 18:43:32 +00:00
Zack dda9ec061b Shared Components Restructure, Cherry Picked | Room Timeline (#32916)
* refactor(shared-components): move room timeline tree

* refactor(web): move room timeline viewmodels

* Prettier FIx

* fix(refactor): align newer imports with room timeline paths

* test(shared-components): add room timeline visual baselines

* test(shared-components): drop stale timeline baseline paths
2026-03-30 15:15:21 +00:00
Will Hunt e0cf78b5b8 Add analytics tracking for URL previews (#32659)
* Add analytics tracking.

* fix import

* fix other import too

* fixup type

* Add test case

* Add better testing

* make it happier

* update lock
2026-03-30 10:10:46 +00:00
R Midhun Suresh 1dbad6101e Collapsible Room List - Clicking on separator should expand to last set width (#32909)
* Expand panel to last known width

* Update test
2026-03-29 12:23:53 +00:00
Florian Duros b3299dfbb3 Fix icon size of badges in right panel (#32952)
* fix: icon size of badges in right panel

* test: update snapshot

* test: update screenshot
2026-03-26 20:29:21 +00:00
Robin 5a074e637a Fix room list often showing the wrong icons for calls (#32881)
* Give rooms with calls a proper accessible description

Besides improving accessibility, this makes it possible to check for the presence of a call indicator in the room list in Playwright tests.

* Make room list react to calls in a room, even when not connected to them

To use the results of CallStore.getRoom reactively, you need to listen for Call events, not ConnectedCalls events.

* Don't assume that every call starts off as a video call

If a Call object is created by way of someone starting a voice call, then of course the call's initial type needs to be 'voice'.

* Make room list items react to changes in call type

The type of a call may change over time; therefore room list items explicitly need to react to the changes.

* Update a call's type before notifying listeners of the change

If we notify listeners of a change in a call's type before actually making that change, the listeners will be working with glitched state. This would cause the room list to show the wrong call type in certain situations.

* Ignore the Vitest attachments directory
2026-03-26 10:28:48 +00:00
Florian Duros 441b292353 RoomList: improve performance (#32919)
* perf: add memo to room avatar view

* perf: batch rlsV3 emit

* perf: avoid to re-render the room list if the room list state and sections are same

* perf: listen only message preview of the specific room

* perf: avoid to re-render the room list item if the notification or the content is same

* chore: replace useState and useEffect by useMemo in virtualized list

* fix: listen to room name event in RoomAvatar

* fix: room avatar re-render when room is low priority
2026-03-25 19:52:45 +00:00
Michael Telatynski ec47986ef5 Fix emoticon slash commands including stale buffers (#32928) 2026-03-25 17:06:35 +00:00
Florian Duros 1025d60001 Avoid excessive re-render when setting same reference/value in snapshot (#32918)
* perf: avoid excessive re-render when setting same value in snapshot

* test: update tests
2026-03-25 15:23:11 +00:00