80 Commits

Author SHA1 Message Date
Florian Duros
3cfba323f6
Room list: avoid excessive re-renders on room list store update or filter change (#32663)
* perf(room list): clear room list item vm only when changing space

Clearing all the item vms at every room list change is causing massive
re-render of all the room list items. References to the vms are already
removed when out of view (see RoomListViewMode.updateVisibleRooms) and
handled by GC.

* perf(room list): avoid to re-render filters at every room list update

RoomListView re-renders on update but the filters (children) don't need
to.

Add a memo to avoid excessive-rerenders.

* chore: add `keepIfSame` to do diff on vm objects

* perf(room list): avoid to create new filter ids and keys when the room list is updated

The filterKeys are passed in the virtuoso context so it should reduce
internal computing

The filter ids array has always the same value, there is no point to
create a new instance.

* test(room list): remove no longer relevant test

* test(room list): add new test to ensure that room list item vms are preserved
2026-03-02 17:50:56 +00:00
Zack
fe84501e95
Move ReactionRow To Shared Components MVVM (#32634)
* Init shared component structure

* Storybook implementation

* Add snapshots of storybook examples

* ViewModel Creation + Implementation In EventTile.tsx

* Prettier

* Update HTML snapshot

* Add onhover pointer on bottons

* Added compound web tooltip

* Removed possible of undefined on label

* Update snapshots

* Update setters to use merge instead of updating full snapshot

* adapt view model test for setters change

* Actions should be passed to viewmodel fix

* replace ReactionsRowWrapper forceRender with explicit reaction state

* Update snapshot
2026-03-02 13:59:04 +00:00
rbondesson
11030ae68d
Refactor DateSeparator using MVVM and move to shared-components (#32482)
* Refactor DateSeparator using MVVM and move to shared-components

* Add a few more stories, tests and screenshots

* Use the shared component and viewmodel in element-web

* Renaming custom content property an updating snapshots

* Fix lint errors and update snapshot after merge

* Change lifecycle handling for DateSeparatoreViewModel in components where manual handling is preferrable over wrapper component.

* Move context menu from viewmodel to shared components - step 1

* Create a jump to date picker component in shared components

* Add tests for coverage and fix layout issues and roving indexes

* Make element-web use the new component

* Simplify context menu and adjusting tests

* The HTMLExport now render shared components and need a I18nContext.Provider

* Updating unit tests for context menu

* Changed to {translate: _t} to let scripts pick up translations

* Fix lint issue and updating screenshots after merge

* Update snaps for element web components

* Renaming MVVM view components with suffix View.

* Fixing problem with input date calendar icon and system dark theme

* Changed the rendering of the menu and added a separate button component

* Handle input control with useRef in onKeyDown

* Updating DateSeparator snapshots on unit tests

* Updating layout after compound Menu got a className property

* Move files to new subfolder after merge

* Updated snapshot after merge

* Updating lock file

* Updates to styling from PR review

* Updates to focus/blur functionality

* Fixed tabbing and export documentation to stories

* Updated snapshots

---------

Co-authored-by: Zack <zazi21@student.bth.se>
2026-03-02 12:18:51 +00:00
ElementRobot
2f7c92c70d
[create-pull-request] automated change (#32676)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2026-03-02 06:42:01 +00:00
Will Hunt
f82a3ef1bb
Update critical gradient for room status bar (#32575)
* Update critical gradient for room status bar

As per design request, this has been updated to be much more subtle
https://github.com/element-hq/compound-design-tokens/pull/232

* update shared-component

* Cleanup

* Update snaps

* description fix color

* More cleanup

* Use the correct border color

* new snaps

* fix border, button placement, fonts etc

* update lock

* Update status bar

* Update playwright snaps

* Update snap icon

* Update other banners

* update snap

* fixup
2026-02-26 15:10:54 +00:00
ElementRobot
3a6ac6e227
Localazy Download (#32625)
* [create-pull-request] automated change

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2026-02-26 12:08:36 +00:00
Florian Duros
62c57023f4
Room list: avoid header overflowing when too long (#32645)
* fix(room list): make ellipsis works on room list title

Regression due to https://github.com/element-hq/element-web/pull/32421

* test(room list): add non regression test
2026-02-26 12:03:13 +00:00
Florian Duros
dd1db8c14b
Room list: center focus outline of room list item (#32637)
* fix: in room list item, replace bottom padding by top and bottom

Outline focus is not aligned when only using a padding bottom. Replace
by a padding-top and a padding-bottom.

The padding top is not added on the first item and the padding bottom
neither on the last item

* test: update snapshot

* test: update storybook screenshot

* test: update screenshot

* chore: use css var instead of duplicating the logic

* chore: add new stories for first and last item case

* test: add new screenshots following the new stories
2026-02-25 19:45:22 +00:00
Florian Duros
9590d22abe
chore: avoid story with custom font size to affect of room list item stories in docs page (#32612) 2026-02-25 13:28:21 +00:00
Zack
e26cbba541
Refactor Reactions Row Button to shared-components (#31993)
* Refactoring of ReactionRowButton to shared component MVVM

* Removal of old component and creation of unit tests

* Update

* Update tests

* Update tests to mimic VM

* Update Lint Spacing

* Added onKeyDown to follow wcag rules

* Remove Unused code

* Update screenshots

* Removal of unessecery test and story

* Update snapshot

* Refactor reactions row VMs to granular setters and merge cheap snapshot updates

* Elist Fix

* Revert ReactionRowButtonToolTip Test

* Fix ReactionsRowButtonViewModel tooltip sync to use tooltip setProps

* Add dedicated ReactionsRowButtonViewModel unit tests for setters, tooltip sync, and click actions

* Better Wording On Functions

* Update snapshot

* Update packages/shared-components/src/message-body/ReactionsRowButton/ReactionsRowButtonView.tsx

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

* use native button and tighten view model

* Update Snapshots + small fixes on reactionrow

* Removal of Null on viewmodel and adapting ReactionRow

* Update test and removal of unused test since me MVVMD ReactionRowButton

* align assertions with refactored update behavior

* FIx issue with classNames component

* Update snapshot

* Removal of old test snapshot

* Update Snapshot

* Implement Css + Snapshot Updates

* Update Snapshot and css to match old component style

* restore MatrixClientContext fallback in ReactionsRow for export/test rendering

* restore client fallback in ReactionsRow to preserve export rendering

* Remove Unused Pcss FIle

* Update Css

* Update misstake always having button default to disabled render

* Remove unsimiler css to original component

* Update Snapshot to reflect css adjustments

* Update css

* Update font to compund

* Update css to reflect old component

* Update css to compund

* Update Snapshot and css

* Update css

* Update HTML snapshot

* Update css

* Update Css

* Update snapshots

* Update HTML snapshot

* Update css + snapshot

* Update HTML snapshot

* Removal of mx css

* Update snapshot based on css removal

* Update Html snapshot

* Apply suggestion from @florianduros

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

* remove setContext from ReactionsRowButtonViewModel

* Update packages/shared-components/src/message-body/ReactionsRowButton/ReactionsRowButtonView.tsx

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

* add tooltipVm to ReactionsRowButtonViewSnapshot

* added compound token variables

* remove className from content and count inner elements

* use useMatrixClientContext() directly for ReactionsRowButtonViewModel

* Update snapshots

* Update snapshot + fix Typescript error on test file

* Removal of line-height in css

* Added line-height back and removed font: inherit;

* derive ReactionsRowButton className/ariaLabel types from HTML button attrs

* Update packages/shared-components/src/message-body/ReactionsRowButton/ReactionsRowButtonView.tsx

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

* Update src/viewmodels/message-body/ReactionsRowButtonViewModel.ts

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

* Update src/viewmodels/message-body/ReactionsRowButtonViewModel.ts

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

* Update test/viewmodels/message-body/ReactionsRowButtonViewModel-test.tsx

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

* Update snapshots and lint issues

* Update model to respond to changes

* Update aria label on view

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-02-25 11:18:03 +00:00
Florian Duros
9c050c58b7
Enforce usage of CSF3 story in storybook (#32610)
* chore: enforce usage of CSF3 story by eslint

* chore: migrate remaining stories to CSF3
2026-02-23 17:14:25 +00:00
Florian Duros
6d870c3935
Room list: fix keyboard navigation (#32585)
* feat: add visual feedback of selection in `VirtualizedList` story

* fix: keyboard navigation when focused element is no longer in the dom

* fix: selection delay when the list is scrolled

* fix: room list item scroll issue

Avoid to use margin https://virtuoso.dev/react-virtuoso/#caveats

* test: add tests

* test(e2e): update snapshots

* test: update room list item screenshot
2026-02-23 16:27:07 +00:00
Florian Duros
b08cf5fdaa
Fix documentation of view component in storybook and migrate to CSF3 format (#32604)
* chore: add a way to keep story doc in wrapper

* chore: use `withViewDocs`

* doc: update SC readme

* doc: update copyright
2026-02-23 16:03:49 +00:00
Michael Telatynski
77670eb369
Add lint rule to protect against this access on unbound methods (#32578)
* Add Actions to ViewModel utility types and specify `this: void` signature

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add https://typescript-eslint.io/rules/unbound-method/ linter to shared-components

also fix stray lint config which doesn't apply to SC

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add https://typescript-eslint.io/rules/unbound-method/ linter to element-web

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix genuine issues identified by the linter

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Specify this:void on i18napi

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update Module API

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add comment for MapToVoidThis

Added utility type to map VM actions to unbound functions.

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-02-23 15:37:58 +00:00
Florian Duros
f4acc4b0bc
Room list: remove bold effect on selected room (#32593)
* feat(room list): remove bold effect on room name when selected

* test(room list): update snapshots

* test(room list): update e2e tests

* test: update screenshhit
2026-02-23 13:13:07 +00:00
Florian Duros
62523b2bf1
Storybook: clear font size in room list item story (#32594)
* chore: clean added font size in room list item story

* test: fix screenshot
2026-02-23 09:14:38 +00:00
ElementRobot
c8b971ea72
[create-pull-request] automated change (#32600)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2026-02-23 06:47:37 +00:00
rbondesson
ca3bc30f90
Refactor MessageTimestamp using MVVM and move to shared-components (#31988)
* Create a MessageTimestampView in shared components

* Switching to use shared component and view model in element-web

* Add .mx_MessageTimestamp tp _common.pcss since it is used extensively in element-web

* Added comments to view model

* Updating after Add options for consistent screenshots

* Moved rendering of late icon to EventTile

* Update shared component snaps

* Added I18nContext.Provider to Modal.tsx and HtmlExport.tsx to make them work with shared components

* Avoid circular dependencies for ModuleApi

* Adjust role and wire handlers in view model

* Change to role="link"

* Revert I18nContext.Provider changes

* Updated snapshot

* Provide I18nContext for shared-components used inside dialogs and html-export rendered in a separate root.

* Add patch for react-sdk-module-api to shared components

* Add setProps to MessageTimeViewModel and useEffect on wrappers

* Added more tests to improve coverage

* Changes after PR review

* Use specific setters in the viewmodel more relating to the business logic.

* Remove unused CSS properties

* New snapshot after merge

* Removed aria-hidden logic and display tooltips in stories

* Remove await for toolitp in HasInhibitTooltip story

* Add screenshots with visible tooltips

* Fixes after merge and review comments

* Updated snapshots for unit tests

* Removed one test since tooltips are not rendered to snapshots
2026-02-20 09:29:26 +00:00
ElementRobot
87ae8a1a45
[create-pull-request] automated change (#32586)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2026-02-20 08:49:33 +00:00
Florian Duros
e8d97a9b5a
Room list: make room list item scales with large font size (#32523)
* fix(sc): make room list item scale with large font

* fix: align room avatar view when using large font

* test(sc): add story for large font

* test(sc): update snapshots

* test(sc): add story with zoom
2026-02-18 18:14:43 +00:00
rbondesson
5417fce489
Refactor EncryptionEvent using MVVM and move to shared-components (#32531)
* Refactor EncryptionEvent using MVVM and move to shared-components

* Added viewmodel and unit tests for bothe viewmodel and component.

* Added test for custom-class

* Update EventTileFactory and RoomView to use the new component

* Clean up unused language strings from element-web

* Changed how the view model is created

* Make sure the initial snapshot mimics the previous component

* Optimizing viewmodel initial snapshot and update

* Updated playwright screenshots
2026-02-18 06:28:34 +00:00
Florian Duros
55cc7ba597
Room list: update the visuals in order to have better contrast (#32421)
* fix(sc): use correct icon size for room list icons

* feat(sc): implement new selection and hover design for room list item

* feat(sc): set room list item height

* chore(sc): add story for long room and message preview

* fix(sc): use correct letter-spacing for room list item

* feat(sc): use new padding for room list filters

* feat(sc): update room list header style

* test(sc): update unit tests

* test(sc): update visual tests

* test: update playwright screenshots

* doc: update figma link in item story

* test: fix sliding sync test

The notification pop up was at the top of the room list filters (less
top padding) and it was unable to click on the People filter.

* chore: fix `VirtuaalizedRoomListView` comment

* test: update playwright screenshot

* fix(sc): add ellipsis on room name
2026-02-17 09:58:16 +00:00
ElementRobot
d0b53a6a6c
[create-pull-request] automated change (#32516)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2026-02-16 06:47:20 +00:00
Zack
7e05552325
Refactor DisambiguatedProfile to shared-components (#31835)
* Refactoring of DisambiguatedProfile into shared components

* correct values and refactoring

* Add username color classes to Storybook and clean up DisambiguatedProfile stories

* Refactor DisambiguatedProfileView to use class component and enhance props structure

* Refactor DisambiguatedProfile components to use member object and enhance props structure

* Update copyright year to 2026 and adjust the tests to fit the correct memberinfro interface

* Add DisambiguatedProfileViewModel class

* Refactor DisambiguatedProfileViewModel to use member object and the rest of the props

* Refactor SenderProfile to use DisambiguatedProfileViewModel and update DisambiguatedProfile styles

* Refactor DisambiguatedProfileView to enhance  interface documentation

* Refactor DisambiguatedProfileView to use CSS modules for styling

* Updated css + tests to fit the new changes

* Update of the test snap to fit the current tests

* Adjusted RoomMemberTitleView and SenderProfile to use the new viewmodel, removed the old component.

* Implemented new viewmodel test for DisambiguatedProfileViewModel

* Update copyright text

* update css class names

* update to correct snapshot after css name changes.

* Apply suggestion from @florianduros

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

* Moved logic to viewmodel instead of having it in the view. Removed unessecery functions and css.

* removed unessecery file that I copied from root folder, this is no longed needed as I use the root file instead in the viewmodel

* Better Formatting

* Fix issues after merging develop

* FIxed issues with eslint

* Added Visible, non-interactive elements with click handlers must have at least one keyboard listener from eslint docs

* Updated snapshot the fit the latest update with eslint button requirment

* Update snapshot screens for new tests.

* Update tests to reflect snapshots

* Update snapshot due of outdated CSS module classes

* Add useEffect to call setProps on the DisambiguatedProfileViewModel
when props change, ensuring the view updates with the correct display
name. Update LayoutSwitcher snapshot for new CSS classes.

* Fix Playwright editing tests by adding exact match for Edit button selector
The DisambiguatedProfile refactoring added role="button" to the component,
causing the selector { name: "Edit" } to match both the user "Edith" and
the actual Edit button.

* Fix ForwardDialog location tests for async hook rendering The SenderProfile component now uses hooks that trigger async state updates.

* Fix SenderProfile useEffect to only update changeable props

* Added letter spacing

* Added ClassName prop

* Update snapshot

* Update letter-spacing

* Update snapshot screenshots

* Update Snapshots

* Update snapshot

* Removal of letter spacing to test CI

* Apply suggestion from @florianduros

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

* Added closing brackets + added back letter-spacing

* Update snapshots

* Update snapshot

* Update span to correctly apply to the CI tests, it wasn't possible to use classname as a prop

* Update snapshot

* Added comment to explain the span classNames

* DisambiguatedProfileViewModel.setProps to runtime-changing props

* replace DisambiguatedProfileViewModel setProps with explicit setters and update call sites

* Update Setters

* Prettier FIx

* Update Setters

* update DisambiguatedProfileViewModel setters and tests

* Update SenderProfile to show connect display name

* clone snapshot in setters to trigger reactive updates

* use snapshot.merge in DisambiguatedProfileViewModel setters

* emove duplicated logic in DisambiguatedProfileViewModel

* Change snapshot name

* Update viewmodel

* Updated Tests

* typo

* Update src/viewmodels/profile/DisambiguatedProfileViewModel.ts

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

* Removal of unused function

* Update snapshots

* Update tests to pass coverage

* Update Eslint

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-02-11 15:31:06 +00:00
Will Hunt
7f31cf196f
Fix Status Bar being unreadable when the user overrides the default OS light/dark theme. (#32442)
* Remove --cpd-color-gradient-critical-linear

* update package

* update snap
2026-02-11 13:28:17 +00:00
Michael Telatynski
ffd4270051
Switch from yarn classic to pnpm (#31971)
* Switch shared-components from yarn classic to pnpm

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch element-web from yarn classic to pnpm

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch CI to pnpm

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update docs & comments

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Hold back postcss to match yarn.lock & use workspace protocol

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak CI

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Rid the world of `$(res)`

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to type=module

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix module import

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Make knip happy

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update playwright imports

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Make docker build happy

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove stale params

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix badly formatted logging

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to lodash-es

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Make jest happier

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch element-web to ESM

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update testcontainers imports

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix modernizr cjs

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix modernizr cjs ignore files

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Move modernizr sonar exclusion to exclude everything

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update playwright tests for esm compat

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add pnpm-link utility

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Test matrix-web-i18n

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Discard changes to src/vector/index.ts

* Update playwright-common

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Use catalogs

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve pnpm-link script

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Use pnpm import to regenerate lockfile from yarn.lock

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-02-11 10:35:29 +00:00
Florian Duros
753e94f165
Use act from @test-utils in SC (#32432)
* test: use `act` from `@test-utils` in SC

* chore: add rules to enforce use of act from `@test-utils`
2026-02-10 11:10:56 +00:00
Florian Duros
1b76f2b72c
Put view prefix to room list item file and folder (#32418)
* chore: put `view` prefix to room list item file and folder

* chore: add missing `storybook-static` in gitignore

* test: update visual tests
2026-02-10 09:49:08 +00:00
ElementRobot
de8ed98b53
[create-pull-request] automated change (#31991)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2026-02-09 06:52:38 +00:00
Florian Duros
abdb307279
Publish shared components storybook (#31907)
* doc: add typedoc generation for shared component

* ci: add SC doc publish

* ci: push doc on changes on develop

* ci: fix working directory

* doc: add typedoc generation into storybook

* doc: build i18n files for storybook static sites

* ci: change workflow to deploy storybook

* chore: exclude non-ui tests from vitest visual tests

* chore: try to fix error in CI

* doc: fix broken link in README

* doc: add typedoc missing export plugin

Add https://github.com/Gerrit0/typedoc-plugin-missing-exports to avoid
to have to explicit export all the types which are not used outside SC

* doc: add mapping to external docs

* fix: remove shebang
2026-02-06 10:01:42 +00:00
ElementRobot
56d9a5d93e
[create-pull-request] automated change (#31981)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2026-02-06 09:05:31 +00:00
David Langley
6da1412de8
Migrate the room list view to shared components (#31921)
* Add NotificationDecoration component

Add the NotificationDecoration component to shared-components.
This is a leaf component that renders notification badges and indicators
for rooms/items including mentions, unread counts, call indicators, etc.

* Add RoomListItem component

Add the RoomListItem component to shared-components.
Includes context menu, hover menu, notification menu, and more options menu.

* Add RoomListPrimaryFilters component

Add filter chips component for filtering the room list by
unread, people, rooms, favourites, mentions, invites, and low priority.

* Update VirtualizedList component

Update VirtualizedList to support the room list virtualization requirements.

* Add RoomList component

Add RoomList component that renders a virtualized list of room items.
Includes story mocks for testing.

* Add RoomListView component

Add RoomListView component that composes RoomList with filters,
empty states, and loading skeleton.

* Export room-list components from shared-components

Add exports for RoomListView, RoomListItem, RoomListPrimaryFilters, and RoomList.
Include i18n strings for room list components.

* Add RoomListItemViewModel

Add view model for individual room list items.
Manages per-room subscriptions and updates only when specific room data changes.

* Add RoomListViewViewModel

Add view model for the room list view.
Manages room list state, filtering, keyboard navigation, and child view models.

* Integrate shared components into RoomListView

Update RoomListView to use the new ViewModels and shared components.
Includes i18n string updates for element-web.

* Remove old room list implementation

Remove old ViewModels, hooks, and view components that are now
replaced by the shared-components implementation.

* Update sliding-sync playwright test

Update test expectations for new room list implementation.

* Add figma links

* Move viewModels to the right folder

* Rename to RoomListEmptyStateView

* Update VirtualizedRoomListView naming

* Update screenshots and snapshots

* Move viewmodel tests to the right location and fix some imports

* lint

* Use unknown as an Opaque type rather than any. It discourages property access within shared components and can still be cast back in EW.

* Update screenshots for new shared component rendering params

* Make room order tests deterministic
2026-02-05 21:05:14 +00:00
renovate[bot]
6dba71a453
Update dependency @playwright/test to v1.58.1 (#31957)
* Update dependency @playwright/test to v1.58.1

* Update snapshots & screenshots

* Another screenshot

* Un-focus room tile and scroll it into view

possibly some change in what ends up focused after a popup disappears

* uncomment the screenshots

* Correct screenshot

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2026-02-05 16:41:48 +00:00
Zack
c647c8ee3d
Refactor Timeline Seperator (#31937)
* Refactor TimelineSeparator to shared-components package

  • New TimelineSeparator component in packages/shared-components/
  • Updated MessagePanel.tsx to import from shared-components

* Fix copyright text

* Timeline Unit Tests + Timeline Snapshot Tests

* Imported correct timeline seperator

* Update snapshots because of css update

* Apply suggestion from @florianduros

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

* Created className prop

* Removal of element x unused css

* Update snapshot because of Flex

* Update snapshots because of Flex

* Update css to correct values and compund name

* Added letter spacing to timelineseperator

* rremoval of letter spacing

* added align center to flex to apply correct css changes

* Update snapshots to reflect new css changes

* Update snapshots to reflect css changes

* Added letter-spacing to timeline seperator

* Update snapshots after css update

* update snapshots

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-02-04 13:25:36 +00:00
Florian Duros
877ab183d9
refactor: move Clock from class component to functional component (#31964) 2026-02-04 11:15:06 +00:00
ElementRobot
ae013686f5
[create-pull-request] automated change (#31968)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2026-02-04 06:43:01 +00:00
rbondesson
a1be203683
Move EventTileBubble to shared components (#31911)
* Move EventTileBubble to shared components as is

* Added documentation and updated stories and unit tests

* Move 'global' element web css to _common.pcss

* Adding playwright snapshots

* Updated comments

* Added legacy mx_MessageTimestamp class and updated snapshots

* Regenerate snapshots with correct hash

* Changes to css and removed timestamp from properties after review.

* Update screenshot for room-list and fix flaky CI playwright test.

* Blur the play button before matching screenshots

* Changed to button focused instead of blur for consistancy

* Stabilize play button appearance in CI (disabled due to decoding)

* Force play button appearance in CI (disabled due to decoding)

* Add comments on playwright test changes.
Change from React.RefObject<any> to Ref<HTMLDivElement> in EncryptionEvent.tsx

* Update playwright/e2e/composer/CIDER.spec.ts

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

* Update playwright/e2e/composer/CIDER.spec.ts

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

* Update playwright/e2e/crypto/toasts.spec.ts

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

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2026-02-03 14:37:57 +00:00
Richard van der Hoff
af55def428
Add badge for history visibiltity to room info panel (#31927)
* Add `HistoryVisibilityBadge` shared component

* Add `historyVisibility` to `RoomSummaryCardViewModel`

* Add a history visibility badge to the room info panel

* Allow roominfo panel badges to wrap

Now that we have an extra one, it's quite likely we'll have to spill onto more
lines.

* update screenshots

* Set icons in badges to be 16px

Having discussed this with the design team, the icons in badges should be 16px, not 13px,
at default font size settings.

* Add stories for all history visibility states

* fix incorrect use of useRoomState

* fix snapshots

* more snapshot updates

* Update screenshots
2026-02-03 12:50:00 +00:00
ElementRobot
0053bedc38
[create-pull-request] automated change (#31935)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2026-02-02 06:49:46 +00:00
rbondesson
25d24d478f
Refactor DecryptionFailureBody using MVVM and move to shared-components (#31829)
* Refactor DecryptionFailureBody to MVVM and moving it to shared components

* Added unit test for DecryptionFailureBodyViewModel

* Removing the dependency to matrix.js-sdk from the shared component

* Kepp class mx_EventTile_content for tile layout

* Required changes after rebase

* Updates after PR review requests

* Clean up unused translation tags in element-web

* Added missing unit tests to improve coverage

* Additional unit tests to improve test coverage

* Removing obsolete tests from the snap

* Only listen to verification state changes in the wrapper components and also limit the view model to only allow updates in verification state.

* Updates after review requests

* Updated and added missing playwright snapshots

* Bettter structure on view model

---------

Co-authored-by: Florian Duros <florianduros@element.io>
Co-authored-by: Zack <zazi21@student.bth.se>
2026-01-30 12:44:23 +00:00
Zack
62c7fe5408
Refactor ReactionsRowButtonTooltip to shared-components (#31866)
* Setting up structure for the init refactoring of ReactionsRowButtonTooltip

* implemented example to follow for refactoring to MVVM

* Refactoring of ReactionsRowButtonTooltipView

* updated reactionrowbutton to use our new viewmodel and removed unessecery comments

* Updated children from reactnode to propswithchildren

* removal of children on the vm have it as a props

* implemented constructor into reactionrowbutton to use vm to viewmodel

* Removal of old component

* Added ViewModel Tests for new viewmodel

* Fix issues after merging develop

* Updated import placement for eslint failure CI

* Add tests for ReactionsRowButton ViewModel integration and click handlers to pass coverage

* Added more tests to cover all conditions

* Pass MatrixClient as prop instead of using global; replace expect(true).toBe(true) with not.toThrow()

* Added new snapshot to reflect modifications on tests

* Update images to fit the CI tests

* Optimize reactions tooltip viewmodel updates

* Removal of module.css for reactionbuttontooltip, we dont need it since we dont use any css

* Fixed snapshots to show the tooltip by introducing a boolean to set open to true in Storybook.

* Update snapshots

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2026-01-30 11:53:57 +00:00
ElementRobot
8cef5df140
[create-pull-request] automated change (#31918)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2026-01-30 06:40:43 +00:00
Michael Telatynski
e07e26cae5
Fix emoji verification responsive layout (#31899)
* Extract SasEmoji to shared-components

and improve responsive layout

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add baseline screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix e2e test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add SasEmoji snapshot test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add figma link

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve doc

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add new dir to crypto-web-reviewers codeowners as per ask

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-01-29 17:40:04 +00:00
ElementRobot
b31527261d
[create-pull-request] automated change (#31862)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2026-01-29 10:57:38 +00:00
Marc
8bb1cb5e63
MVVM WidgetContextMenu component to shared component (#31190)
* Create WidgetContextMenu component in shared-components

* Modify WidgetMenuContext call (apptile, extensioncard, widgetcard), test and stories

* Correctly use new widgetcontextmenu component

* WidgetContextMenuViewModel unit test

* Lint and add comments

* Finalize widgetcontextmenuviewmodel test

* fix lint errors

* Fix test error

* Update playwright screenshots

* add userWidget in widgetcontexstmenu props

* Fix some a11y issues on playwright

* fix linter error widget card

* Use new i18n way for share component widget context menu

* Add i18n context provider for widget context menu

* chore: lint and update snapshot widgetcontextmenu
2026-01-29 10:22:47 +00:00
Skye Elliot
d0c60e6ee4
Remove "history may be shared" banner. (#31881)
* Revert "Update algorithm for history visible banner. (#31577)"

This reverts commit ce9c66ba4c25f3de5ceca5d244591d8aa1183ce8.

* Revert "Update prop type & documentation for HistoryVisibleBanner and VM. (#31545)"

This reverts commit 4da149e56f5a593daf05ed9a84eea7da11d800e9.

* Revert "Prevent history visible banner from displaying in threads. (#31535)"

This reverts commit c7134e85324878f06da3936ccad09655876cad0d.

* Revert "Implement UI for history visibility acknowledgement. (#31156)"

This reverts commit cff9119324dced2ab570201d159ea0c8169344c2.
2026-01-27 11:28:33 +00:00
David Langley
d6f11d828b
Migrate ListView to shared components (#31860)
* Migrate ListView to shared components

* Add stories

* lint

* Update name of component

* Use compound spacing

* lint

* VirtualizedList

* Simplify story

* Add git diff check before uploading artifacts

* Fix git diff workaround for vis

* Ignore coverage report in .gitignore

Add coverage report to .gitignore

* Add screenshot test

* Fix package and lock files

* clear unneeded lock file changes

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2026-01-26 17:58:46 +00:00
Florian Duros
3fc3653809
refactor: move vm hooks into view model folder (#31832) 2026-01-22 17:28:14 +00:00
Michael Telatynski
35fca4d339
Switch shared-components from jest & test-runner to vitest (#31800)
* Remove babel

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove duplicated patch-package dep

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to @fetch-mock/vitest

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests to import & call vitest functions

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update test-utils imports

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update unit test snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from jest->vitest for unit tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update visual test screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from test-runner->vitest for visual tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update README

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update CI for shared-components unit & visual tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update yarn.lock

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update README

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix storybook trying to import vitest

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix css modules leaking between storybook tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak screenshot update script to accept args

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-01-22 14:17:36 +00:00
R Midhun Suresh
d6d647f56d
Unread Sorting - Add option for sorting in OptionsMenuView (#31754)
* Add new sort option

* Support new sorting algorithm in vm

* Add option item for unread sorter

* Add tests
2026-01-22 09:56:47 +00:00