Commit Graph

176 Commits

Author SHA1 Message Date
Zack 3bb9cb2234 Refactor ThreadSummary to MVVM (#33603)
* Refactor ThreadSummary to MVVM

* Stories Snapshot images

* Add ThreadSummary ViewModel coverage

* Fix ThreadSummary preview avatar rendering

* Remove ThreadSummary classnames helper

* Fix Prettier

* Match ThreadMessagePreview typography

* Move folder to correct path and fix storybook path

* Catch ThreadSummary preview refresh errors

* Update snapshot images + fix prettier

* Fix ThreadSummary classNames import

* Update Images

* Remove wrong path
2026-05-28 08:57:55 +00:00
Zack 34c388f760 Refactor E2eMessageSharedIcon to MVVM (#33544)
* Refactor E2eMessageSharedIcon to MVVM

* FIx Prettier and i18n

* Fix prettier

* Remove legacy E2eMessageSharedIcon component

* Cover E2eMessageSharedIcon MVVM updates

* Fix prettier

* Update apps/web/src/components/views/rooms/EventTile.tsx

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

* Skip unknown E2E shared icon visual

* Track E2E shared icon listener disposal

* Remove E2E shared icon room state guard

* Remove E2E shared icon client resync

* Use built-in disposables for shared icon VM

* Update shared icon VM without React key

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-05-28 08:01:39 +00:00
rbondesson 6c0f9960b5 Refactor EventTile using the MVVM pattern - #6 (#33621)
* Thin EventTile render state wiring

* Move EventTile E2E verification into a view model

* Derive EventTile E2E padlock slots in view model

* Derive EventTile timestamp slots in render state

* Derive EventTile footer slots in render state

* Fix SonarCloud issues
2026-05-27 11:34:56 +00:00
Florian Duros 1ef544c5c6 Room list: add analytic events (#33625)
* chore: update analytics

* feat: add new analytics
2026-05-27 09:50:22 +00:00
Florian Duros abe383d996 Room list: improve custom sections in Spaces (#33523)
* feat: display empty custom sections in the space where they were created

* test: update tests

* fix: room can't be drag in to a section if a section is created before

* fix: re-render issue when section is created
2026-05-27 09:43:59 +00:00
Hubert Chathi 220f68935e Periodically nag the user if their device remains unverified (#33346)
* nag the user to verify their device 2 days after they dismiss the toast

* lint

* recheck doesn't need to be awaited

* call setDeviceState
2026-05-26 23:49:40 +00:00
David Baker 2b4f983bb7 Increase timeout on BeaconViewDialog (#33607)
standard 1s doesn't seem long enough to avoid flakes
2026-05-26 17:52:04 +00:00
David Baker d533522663 Fix misaligned display name on desktop (#33623)
* Fix misaligned display name on desktop

Move the usermenu custom class to the whole thing, not just the button

* Update comment

* Update snapshot
2026-05-26 14:02:01 +00:00
R Midhun Suresh bc7ac39d5b Use the separator as border between roomlist and main panel (#33598)
* Remove border from roomlist container

The separator will act as the border so we no longer need the roomlist
border.

* Use pointer events to detect click event

Otherwise the onClick handler would run when you resize the panel.

* Support showing the border in separator

* Update tests

* Disable double click behaviour on separator

* Fix screenshot tests failing
2026-05-26 11:22:41 +01:00
Michael Telatynski f0342ddbd2 Add support for m.recent_emoji account data event (#33172)
* Improve types in AccountSettingsHandler

* Add support for `m.recent_emoji` account data event

Maintains read-compatibility with `io.element.recent_emoji`

* Iterate

* Make ts happier

* Improve coverage

* Improve coverage

* Improve coverage
2026-05-26 08:30:02 +00:00
rbondesson 15626733b1 Fix copyright texts (#33613) 2026-05-26 07:44:43 +00:00
Zack 384db1faaf Move E2ePadlock icon colors to CSS module (#33577)
* Move E2ePadlock icon colors to CSS module

* update react id labelling

* Update E2eMessageSharedIcon snapshots
2026-05-26 07:13:15 +00:00
rbondesson 5486a22922 Refactor EventTile using the MVVM pattern - #5b (#33600)
* Extract EventTile E2E padlock state

* Refactor EventTile E2E padlock rendering after review comments
2026-05-26 06:36:05 +00:00
renovate[bot] d63792f672 Update dependency caniuse-lite to v1.0.30001793 (#33552)
* Update dependency caniuse-lite to v1.0.30001793

* Update browser support tests

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2026-05-25 14:23:38 +00:00
rbondesson 40fbe1fae1 Stabilise flaky QR code rendering tests (#33593)
* Stabilise QR code rendering tests

* Extract QR mocking code to test-utils
2026-05-25 07:10:10 +00:00
rbondesson 03360eb260 Refactor EventTile using the MVVM pattern - #5a (#33587)
* Extract EventTile receipt state

* Extract EventTile thread state

* Extract EventTile reaction relation state

* Extract EventTile reply-chain state

* Keep reply chain collapse wiring in EventTile

* Reuse message event eligibility for receipts
2026-05-22 18:25:32 +00:00
David Baker 5a1d7385f8 Hopefully bust another flake (#33584)
I guess this sometimes takes more than a second (!?)
2026-05-22 16:00:57 +00:00
rbondesson 7285293b7b Make shared-components tiles render identically outside Element Web - # 3 (#33529)
* Clean up unused app/web styling for ReactionsRow

* Align shared Storybook theme root with app/web

* Move PlayPauseButton styling into shared component

* Use closest compound icon color for all crypto events in both app/web and Storybook

* Updated snapshot

* Experimental strict color matching threshold for playwright

* Experimental color matching threshold for playwright

* Revert color matching threshold for playwright to the default value

* Updated screenshots after matching icon size in audio player with other media body components

* Changed icon color for crypto events accroding to recommendation from the design team

* Use --cpd-color-icon-primary for all crypto events

* Updated snapshots and screenshots after icon color changes

* Updated app/web snapshots and screenshots
2026-05-22 16:00:38 +00:00
rbondesson 53fba7ff71 Mocking PasswordScorer.scorePassword to reduce risk of flakiness (#33591)
Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2026-05-22 15:29:55 +00:00
rbondesson 70e59c6221 Refactor EventTile using the MVVM pattern - #4 (#33539)
* Extract EventTile interaction state transitions

* Fix sonar issues
2026-05-21 13:41:58 +00:00
rbondesson 80024991aa Stabilise React useId values in DOM snapshots in element-web (#33579)
* Stabilise React useId values in DOM snapshots - app/web

* Stabilise React useId values in DOM snapshots - shared components

* Update additional snapshots

* Added comments and changed replace pattern to 'react-use-id-N'
2026-05-21 13:30:05 +01:00
Zack 223a861535 Move E2ePadlock to shared components (#33538)
* Move E2ePadlock to shared components

* Add storybook images

* Move translation to shared components

* Fix E2ePadlock story accessibility

* Update E2eMessageSharedIcon test for padlock role
2026-05-20 13:20:17 +00:00
David Baker b5aa339243 Increase timeout on wysiwig test (#33540)
To hopefully make it not flake
2026-05-20 10:54:59 +00:00
Florian Duros 4b6e0b7ebf Fix pinned message banner disappearing when a pinned message event is unkown (#33534)
* fix: remove unknown event when fetching pinned message events

* test: update tsts
2026-05-20 09:40:09 +00:00
rbondesson d41ff70057 Refactor EventTile using the MVVM pattern - #3 (#33516)
* Introduce thin EventTile view model snapshot

* Fix errors after merge conflict resolution
2026-05-20 08:32:05 +00:00
David Baker 0140563b64 Tweak new user menu design (#33444)
* Tweak new user menu design

* Update screenshots

* More screenshots

* Add story with no avatar

* add story to test

* Expand the menu so it actually shows what it's supposed to show

* Use the open parameter

which is the param to open the menu

* snapshot

* Add test for normal open menu version

* Move menu to the right of the avatar

and make it appear on top of the display name

* Fix user menu layout

* screenshots

* snapshot

* screenshots

* more screenshots

* Shift toasts to the left slightly

So they completely cover the display name of the user menu when
it's expanded. Also down slightly so they're level with the user menu.

* Tweak toast border radius & position

to match & sit on top of the user menu

* Close toasts in cider tests

* Only close the toast if it's actually there

* Fix some toasts to be dismissed & update screenshots

more to come though

* Make closeKeyStorageToast actually optional

* Fix some more toasts & races

* Screenshots again again (again)

* More screenshots

* Convert to rejectToast

* Fix toast rejectors to not wait and update screenshots

* Apparently 1ms is not long enough
2026-05-19 13:10:14 +00:00
Will Hunt 02b6520f09 Module API for adding new file upload mechanisms (#33355)
* Initial reword of upload to MVVM.

* Update tests

* More incremental improvements

* Refactor tests to use helper method for composer uploads.

* Add drag and drop tests

* lint

* Add commentary

* fixup test

* More precise selector

* Retarget uploads

* lint

* fixup

* one more type

* update snap

* Fixup composerUploadFiles

* fix import

* lint

* Copy and paste fixes too

* Add tests for pasting

* Add tests for pasting files.

* Remove redundant fn

* rm comment

* tidy up

* Test cleanup

* More clean up

* another fix

* Begin fleshing out

* Park changes

* More stuff

* Use condensed version

* Cleanup tests

* more cleaning

* last bity

* Add a test for the composer

* Park up changes

* Rewrite Measured to be a functional component

* Add tests to cover narrow viewports

* lint

* breakpoint is optional

* Cleanup

* Support narrow mode

* fixup

* begone

* Provide default value

* add label

* fixup test

* update copyright

* cleanup

* Be a bit more lazy with FileDropTarget

* remove a debug statement

* Fixup

* fix two snaps

* Update screenshot

* and the other one

* Update snaps

* unfake CIDER

* update screens again

* remove extra test

* Undo accidental snapshots

* Bit of tidyup

* fixup

* even more tidyup

* may drag and drop file

* tidy up again

* snap snap snap

* Use load to make sonarQube happy

* Bunch of refactors

* More cleanup

* cleanup debug code

* tweaks

* remove a test we no longer need

* make it happy

* fix import

* fixup

* Update snaps

* typo

* one off

* Add tests

* lint

* remove only

* Reduce screenshot scope

* fix snapshot usage

* cleanup
2026-05-18 21:41:38 +00:00
Andy Balaam 66b739fea9 Remove an impossible case in DeviceListener (#32977)
* Remove an impossible case in DeviceListener

We only reach this branch if recoveryIsOk is false, which means
recoveryDisabled can't be true.

* Add a test for when recovery is bad but backup is disabled
2026-05-18 18:18:56 +00:00
rbondesson 297ad9bb8d Make shared-components tiles render identically outside Element Web - # 2 (#33485)
* Adding correct layout/density attributes to unit tests

* Move app/web styling to FileBodyView

* Unify styling for MediaBody wrapped components

* Fix prettier issues

* Update app/web snapshots

* Wrap file download and audio loading states in MediaBody

* Revert the MediaBody for download buttons.

* Revert changes for MediaBody wrappers

* Updated snaphots for MediaBody components
2026-05-18 05:59:03 +00:00
rbondesson 7fe8cdafe0 Refactor EventTile using the MVVM pattern - #2 (#33489)
* Improve coverage

* Add view model unit tests to improve coverage

* Extract initial pure EventTile derived state helpers

* Extract EventTile derived state helpers

* Extract EventTile class state derivation

* Extract EventTile line class derivation

* Extract EventTile sender profile state

* Extract EventTile avatar member selection

* Extract EventTile avatar clickability state

* Extract EventTile sender profile mode

* Extract EventTile action bar visibility

* Extract EventTile timestamp visibility

* Extract EventTile timestamp selection

* Extract EventTile timestamp display state

* Extract ReplyChain timestamp visibility

* Extract EventTile footer display state

* Fix sonar issue
2026-05-18 05:36:13 +00:00
İsmail Özsoy c5a2109ef5 Incoming Element Calls now trigger a regular OS notification (#33499)
* Fix missing OS-level desktop notification for Element Call (MSC4075)

* Add Unit-test for textForCallInviteEvent and lint fixes

* Refactor call invite notification

* prettier fix

* Added mock supportsVoip for notifier-test
2026-05-15 11:07:08 +00:00
R Midhun Suresh 435acf1ba7 Call Tile - Support declined call tile (#33371)
* Extract shared types and css

* Add CallDeclinedTileView

* Add storybook and view tests

* Support declined event in view model

* Render declined view from tile factory

* Update snapshots

* Add 10px padding to top and bottom

* Distinguish between call declined by us and other users

* Support `isCallDeclinedByUs` in view model

* Update tests

* Add better comments

* Rename getInitial to generateSnapshot
2026-05-14 14:12:05 +00:00
Florian Duros 47f8012691 Room list: add robustness to custom section loading (#33475)
* refactor: move all access to custom sections settings into `section.ts`

* fix: add robustness when getting the order list of custom sections

* fix: add robustness when getting the custom section data

* fix: ignore malformed section but don't erase them

* fix: remove useless await operator

* test: add more tests
2026-05-13 15:50:33 +00:00
Zack 8400f56004 Fix edited reply quote collapse (#33487)
* Fix edited reply quote collapse

* Add regression test for edited reply quotes
2026-05-13 10:23:56 +00:00
Florian Duros 85aca65a81 Room list: drag and drop rooms into sections (#33366)
* chore: add dnd kit deps

* chore: patch dnd kit to fix ts error

* feat(sc): add drag-and-drop to room list item and wrapper

* feat(sc): make the room list header a droppable element

* feat(sc): add dnd to room list view

* feat(tags): can tag room as CHAT

* feat(vm): implement `changeRoomSection`

* feat(sc): disable dragging in flat list

* fix: disable keyboard navigation when dragging element

* test(sc): update snapshots

* test(sc): add dnd test

* test(e2e): add e2e tests for room drag and drop

* test(vm): add tests for changeRoomSection

* fix: remove focus visible when dropping with the mouse

* test(playwright): update existing screenshots

* chore(sc): move numbers out of main build

The Ew RecorderWorklet imports shared component bundle. However if the
bundle uses some deps using document/window which, the worklet will not
work.

The solution is to put the used functions into a separate bundle.

* doc(sc): add subpath import into README

* doc: typo barrel/bundle

* test: improve test expect

* refactor: add utils to section tag

* fix: incorrect check in tagRoom

* fix: add doc about dndkit tunning
2026-05-13 09:06:22 +00:00
rbondesson 97da3be67a Fix for message action bar visibility getting out of sync with the real UI state (#33445)
* Make sure action bar is not visible when using up/down arrows during editing

* Add a temporary mouse move listener to handle tooltips stealing onMouseLeave events

* Better naming, add comments and test

* Fix test that performs its own hover/pointer movement before clicking.

* Fix playwright test that actually displayed a message time stamp when hover state was stale

* Fixes after merge
2026-05-13 07:52:47 +00:00
Zack 1e7c9f672a Phase 2 Refactor MImageBody to MVVM and remove legacy component (#33212)
* MVVMing of MImageBody and removing legacy component + css

* Fix Prettier

* update small image to large image in test

* Update test

* Preserve MImageBody legacy class names

* Click image in custom component download test

* Update snapshots

* Update MBodyFactory snapshots

* Added new tests to pass coverage

* Fix prettier

* Remove legacy import that was removed

* Add MImageReplayBody test for coverage

* Remove legacy MImageBody selectors from image view

* Update image body selectors in Playwright tests

* Keep file panel image body spacing compact

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

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

* added documentation to component

* Fix hidden media placeholder import

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-05-13 06:03:43 +00:00
rbondesson 0f723390a9 Refactor EventTile using the MVVM pattern - #1 (#33463)
* Add EventTile layout attribute tests

* Add EventTile timestamp tests

* Add EventTile sender and avatar tests

* Add EventTile read receipt tests

* Add EventTile reactions and footer tests

* Add EventTile action bar tests

* Add EventTile reply chain tests

* Add EventTile highlight exclusion tests

* Add EventTile action bar focus tests

* Add EventTile context menu characterization tests

* Add EventTile rendering attribute tests

* Add EventTile search thread info tests

* Add EventTile reaction update tests

* Add EventTile message type class tests

* Fix flakyness in root attribute tests

* Fix Sonar issues

* Fix additional Sonar issues
2026-05-12 12:28:00 +00:00
Will Hunt aeaeb55cda Rework Upload internals to use MVVM (#33307)
* Initial reword of upload to MVVM.

* Update tests

* More incremental improvements

* Refactor tests to use helper method for composer uploads.

* Add drag and drop tests

* lint

* Add commentary

* fixup test

* More precise selector

* Retarget uploads

* lint

* fixup

* one more type

* update snap

* Fixup composerUploadFiles

* fix import

* lint

* Copy and paste fixes too

* Add tests for pasting

* Add tests for pasting files.

* Remove redundant fn

* rm comment

* tidy up

* Test cleanup

* More clean up

* another fix

* Use condensed version

* Cleanup tests

* more cleaning

* last bity

* s/throw Error/throw new Error/
2026-05-12 11:30:30 +00:00
Zack 39607799de Refactor view source event to MVVM (#33428)
* Refactor view source event to MVVM

* remove unused variable since movement

* Update view source event screenshots

* Update packages/shared-components/src/room/timeline/event-tile/body/ViewSourceEventView/ViewSourceEventView.tsx

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

* Use view model disposables for source event decryption

* Consolidate source event view model updates

* Fix prettier

* Fix view source expanded class name

* Remove void from source event decryption

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-05-12 11:17:47 +00:00
Zack b19025e578 Refactor MJitsiWidgetEvent to shared view MVVM (#33457)
* Refactor Jitsi widget event to shared view

* Align Jitsi widget view model setters

* Inline Jitsi widget icon color

* Remove unused Jitsi timestamp setter

* Tighten Jitsi widget subtitle type
2026-05-12 09:12:43 +00:00
Zack 67ea6bfa53 Refactor room avatar event to MVVM (#33473)
* Refactor room avatar event to MVVM

* Cover room avatar event factory wrapper

* Fix prettier

* added screenshots
2026-05-12 08:17:33 +00:00
R Midhun Suresh 2933b51fea Call Tile - Render a tile showing that a call was started (#32988)
* Ignore specific directories

Otherwise newly generated screenshots will be ignored.

* Create a CallStartedTileView

This view will render a tile that shows when an EC call was started in
the timeline.

* Add storybook tests

* Add vite tests

* Export the view from shared-components package

* Add a viewmodel for driving the view

* Support rendering the tile in the tile factory

* Fix tile rendering

* Add comment to explain css height

* Use semantic token for gap

* Update snapshot

* Use min-height over height

This will scale the element if the user sets a custom font size.

* Don't show timestamp for call started tile

Timestamp is already shown as a part of the tile content.

* Fix broken tile on bubble layout

The tile should be full-width and not shown within a bubble.

* Fix tests

* Update storybook title
2026-05-11 21:12:51 +00:00
Zack c62acc6634 Refactor MKeyVerificationRequest to shared view MVVM (#33461)
* Refactor key verification request to shared view

* Fix prettier

* add tests to pass coverage
2026-05-11 11:36:07 +00:00
David Baker 7f0dccf855 Fix user menu overlap with macos window controls (#33425)
* Fix user menu overlap with macos window controls

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

* Snapshot

* snapshot
2026-05-08 11:52:51 +00:00
rbondesson a1c1d330e9 Fix msgtype changes from edits not rerendering timeline tiles (#33416)
* Fix msgtype changes from edits not rerendering timeline tiles

* Change approach to view model listeners instead

* Repaint the mounted tile on MatrixEventEvent.Replaced
2026-05-08 09:33:23 +00:00
Robin 1b9c9cb92f Visually indicate on hover that user menu can be clicked (#33408)
* Visually indicate on hover that user menu can be clicked

Seems the cursor: pointer style was lost in d4f419d1b5.

* Update test snapshots
2026-05-08 08:49:01 +00:00
Zack cf9cdbbc86 Refactor Mjolnir body to shared view (#33407)
* Refactor Mjolnir body to shared view

* Update compund css + add snapshot

* Remove from app, and add in shared components

* update css to fix axe fail issue
2026-05-07 13:45:43 +00:00
Zack fa5caa76d9 Refactor hidden body into shared MVVM (#33403)
* Refactor hidden body into shared MVVM

* Snapshots

* Update packages/shared-components/src/room/timeline/event-tile/body/HiddenBodyView/HiddenBodyView.stories.tsx

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

* Update apps/web/src/viewmodels/room/timeline/event-tile/body/HiddenBodyViewModel.ts

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

* Use compound Text in HiddenBodyView

* Update snapshots

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-05-07 10:11:35 +00:00
Zack dfc554aa91 Move unknown body to shared components (#33406)
* Move unknown body to shared components

* added story snapshots
2026-05-06 14:36:34 +00:00