Commit Graph

83 Commits

Author SHA1 Message Date
Zack 8d076c897d Refactor EventContentBody to shared-components (#31914)
* Init of refactoring of eventcontentbody

* update stories css by copying css from element x to shared components

* Replaced old component EventContentBody with newly created mmvm component EventContentBodyViewModel

* Refactor TextualBody and EditHistoryMessage to properly manage EventContentBodyViewModel

* generated snapshot after vitest

* Update import placement for eslint to pass CI

* Fixed lint warnings

* Update css for codeblock to represent js highlight

* test: add EventContentBodyViewModel snapshot coverage

* fix: pass content ref to EventContentBodyView for link previews

* Fix: return to old code that passed tests

* Added storybook snapshots

* Removal of old component that is being unused

* Update snapshot

* Fix missing enableBigEmoji and shouldShowPillAvatar settings in EventContentBodyViewModel

* update snapshot

* narrow setProps to mutable fields and skip no-op snapshot recomputes

* Update Snapshots

* replace EventContentBodyViewModel setProps with explicit setters and update call sites

* render body in view and keep parser/replacer in snapshot

* Eslint Restruct

* Eslint Restructure

* Removed unused function, moved to shared component

* Remove Unused Module (Moved To Shared Component)

* Disable EventContent-body Test to check weather it fixes CI

* Enable EventContentBody Tests

* Remove EventTest

* Update Include in Vitest

* Added EventContentBody test

* Update Package.json

* Update Lockfile

* Update dependencies

* update lockfile

* ptimize EventContentBodyViewModel to recompute/merge only changed snapshot fields

* Update snapshots

* setEventContent and setStripReply run whenever the existing update block runs

* defined arrow functions for undefined runtime issues that might occur.

* Update test cases

* Update packages/shared-components/src/message-body/EventContentBody/EventContentBodyView.tsx

Co-authored-by: R Midhun Suresh <rmidhunsuresh@gmail.com>

* Update packages/shared-components/src/message-body/EventContentBody/EventContentBodyView.tsx

Co-authored-by: R Midhun Suresh <rmidhunsuresh@gmail.com>

* move big-emoji and pill-avatar setting watchers into EventContentBodyViewModel

* Update packages/shared-components/src/message-body/EventContentBody/index.tsx

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

* Update packages/shared-components/src/message-body/EventContentBody/EventContentBodyView.tsx

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

* Update packages/shared-components/src/message-body/EventContentBody/EventContentBody.test.tsx

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

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

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

* Update packages/shared-components/src/message-body/EventContentBody/EventContentBodyView.tsx

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

* Update packages/shared-components/src/message-body/EventContentBody/EventContentBodyView.tsx

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

* Fix dubblicate variables

* clarify applyReplacerOnString input/replacer params

* Added memo to the view

* Prettier Fix

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

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

* Added compund variables instead of reguler values

* Added boolean default values

* remove redundant setting props from TextualBody and EditHistoryMessage

* Prettier FIx

* replace MatrixClientPeg usage with `client: MatrixClient | null` passed from context

* TextualBody now passes EventContentBodyViewModel `client` from RoomContext.

* Remove redundant as prop from EventContentBody VM usage

* Normalize EventContentBodyViewModel renderer flags to booleans

---------

Co-authored-by: R Midhun Suresh <rmidhunsuresh@gmail.com>
Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-03-09 09:58:05 +00:00
ElementRobot 00dd0c48ba Localazy Download (#32714)
* [create-pull-request] automated change

* Use a dedicated string for public access in settings.

* Fix tests due to copy changes.

* Fix tests due to copy changes.

* Fix tests due to copy changes.

* Fix tests due to copy changes.

* Fix tests due to copy changes.

* Updated visual tests screenshots due to copy changes.

* Updated visual tests screenshots due to copy changes.

---------

Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
Co-authored-by: mxandreas <andreass@element.io>
2026-03-09 09:43:00 +00:00
rbondesson 83d732d60e Refactor className and children to component properties instead och view model snapshots in shared components (#32711)
* Refactor className? to component property in EncryptionEventView

* Refactor extraClassNames to default react className as component property for DecryptionFailureBodyView

* Refactor className to component property for MessageTimestampView

* Refactor className and children to component properties for ReactionsRowButton

* Refactor className to component property for DisambiguatedProfile

* Refactor className to a component property in DateSeparatorView

* Fix for lint errors and EncryptionEventView unsupported icon color

* EncryptionEventView fix for icon color css specificity/order
2026-03-05 08:36:45 +00:00
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 ce9c66ba4c.

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

This reverts commit 4da149e56f.

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

This reverts commit c7134e8532.

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

This reverts commit cff9119324.
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