Commit Graph

72 Commits

Author SHA1 Message Date
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
Zack b5711264dd Move hidden media placeholder to shared components (#33404)
* Move hidden media placeholder to shared components

* Add Snapshots

* Remove legacy hidden media mx class
2026-05-06 11:23:14 +00:00
Will Hunt d4f419d1b5 Refactor and redesign user menu (#32812)
* Initial quick settings menu

* Total refactor

* Quick design fixes.

* Refactor to use a view model.

* Remove unused strings

* Apply label

* Refactor naming

* Fixup most tests

* Remove specific theming for old user menu

* prettier

* Lots of cleanup

* Allow overriding the menu classes

* update snap

* Oops translations

* tidy

* Cleanup guest flows.

* Copyrights

* Remove unused classname

* Match guest view to designs

* Add guest screenshots

* Update guests

* snapshot

* Cleanup

* fix import

* Update tests

* More sceenshot fixes

* update collapsed

* move statements to prevent flake

* update snap

* Kick it along

* Click the room list

* Fiddle with the room video list.

* More screenshot adjustments

* fix imports

* fix another import

* Update snaps

* update snaps

* Fix snap flakes

* Refactor to move actions to view component, and callbacks to Actions

* Cleanup

* Cleanup

* Cleanup

* invert auth

* More bits

* fix

* Change md buttons to sm

* Try to assemble the snapshot component of the house of cards

* Consistent newlines between tests

* Update snapshot

Not sure why this was like this, this seems consistet for a logged in user

* Update snapshot

again these seem sensible for a guest

* Remove test

I don't really understand why the thing it asserts matters, so I'm removing
it for now.

* Update snapshot

* screenshot

* Don't show profile picture for guests

I'm not really sure what it meant for this interface to have a
property with a default value, so I've removed it and added the
property to the view model.

* Show avatar in story

* update snapshots for showAvatar

* Update screenshots

& hopefully make hover consistent in one

* Use outline home icon

---------

Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2026-05-06 08:34:36 +00:00
Florian Duros c2e5aa7adc Room list: add collapse/expand all sections (#33318)
* chore: update compound design tokens

* feat(sc): add collapse/expand button to room list header

* feat: add new events to broadcast section state

* feat(vm): add expand/collpase event to room list events

* test: add e2e tests

* chore: fix company name in copyright

* chore: use two differant actions for collapse/expand

* Update apps/web/src/viewmodels/room-list/RoomListHeaderViewModel.ts

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

* test: fix existing tests

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2026-04-30 14:32:43 +00:00
Will Hunt 4bee845010 Show user status in timeline (#32991)
* Use other branch

* All the changes that got lost

* Fix merge

* Ensure emoji can only be one character long

* Fixup labs feature

* Remove redundant check

* Update snapshot

* update snapshot

* add snapshot

* unpin

* fix pnpm lock

* undo pn[m lockfile changes altogether

as we shouldn't actually need any afaik

* update snpahot for changed IDs

* Snapshot update

* Snapshot update

* There is now another section

* more snapshots

* more snapshot

* More snapshots

* oh come on snapshots

* actual snapshot update

* Fix sonar issues

* just update the thing manually

* [screams internally]

* Update snapshot

* test for useUserStatus

* Make useUserStatus actually truncate

* Split out slash command to its own file

& add test

* Remove irrelevant comment

* doc

* Comment on non-obvious error message

---------

Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2026-04-29 08:14:22 +00:00
Zack 4e9655dc6b Phase 2 : Refactor TextualBody to MVVM and remove legacy component (#33165)
* Refactor TextualBody to MVVM and remove legacy component

* Update snapshot + fix eslint warning

* update css to fix playwright tests failure

* return i18n into the MVVM

* Update snapshots

* Update tests to reflect the css changes

* Update snapshot

* Update css to correct letter-spacing

* Update css to fix playwright issues.

* Preserve inline emote sender rendering in TextualBodyView

* Update snapshot to reflect html change

* Update back to span instead of button, the default button css fails tests

* Extract TextualBodyFactory from MBodyFactory

* Update snapshot

* Update HTML snapshot to pass tests

* Update Snapshots

* Added several tests for coverage

* Remove double checks, merge function already checks.

* Remove unessecery comment

* revert to button

* Update snapshots because of the revert

* added Math.min() to simplify ternary expressions.

* Update playwright screenshots for accessibility

* Update playwright screenshots

* Update css to fix playwright fail

* Update screenshot + snapshots

* Add comments to props
2026-04-28 07:07:19 +00:00
Robin 03b730db58 Update toast styles, improve incoming call notifications (#33043)
* Update design of incoming call notifications

* Make toast show avatars of group call participants

* Further expand test coverage for call notifications

* Update screenshots

* Update screenshots

* Delete unused variables

* Upgrade Element Call to v0.19.2

For the new group call intents.

* Consolidate some branches

* Apply Compound spacing variables a little more

* Fix lints

* Exclude Element Call assets from being re-minified to fix build
2026-04-27 14:37:42 +00:00
Will Hunt 4a14e203a5 Slight adjustments to URL Preview text sizing (#33282)
* Remove CSS specification of fonts

* Reduce font size

* Remove margin

* Update snaps
2026-04-24 14:23:35 +00:00
Michael Telatynski 1a6b0e22a1 Add CI to detect stale vis screenshots (#33274)
* Add CI to detect stale vis screenshots

* Remove already installed `tree` command

* Remove workaround for vis silently adding missing screenshots in CI

* Fix stale screenshot detection

* Test that CI doesn't silently create new screenshots

* Discard changes to packages/shared-components/src/room/composer/Banner/Banner.stories.tsx

* Delete stale snapshots
2026-04-23 09:24:31 +00:00
Michael Telatynski 8f9953f419 Fix flaky test src/room/composer/Banner/Banner.stories.tsx > With Avatar Image (#33275)
* Fix flaky test `src/room/composer/Banner/Banner.stories.tsx > With Avatar Image`

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

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

* Fix styling

* Iterate

* Update snapshot
2026-04-23 08:26:48 +00:00
Florian Duros f4c62abbcd Room list: assign room to custom section (#33238)
* feat(sc): add new toast type for room list

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

* feat(rls): expose util functions

* feat: allows to tag room with custom sections

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

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

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

* test(e2e): update existing screenshots

* chore: fix lint after merge

* chore: remove outline in test
2026-04-22 19:50:54 +00:00
Will Hunt 9df7182c0c Redesign link previews (#33061)
* Commit design update

* Add figma links

* Check in other changes

* revert accidental change

* Iterative update

* linting n test fiddles

* linting

* Cleanup

* update snaps

* Move URL previews to new home

* Fix paths

* compress img

* Add back all the stories

* Improved rendering

* Fixup

* Update previews again

* lint

* update stories

* Update snaps again

* More screenshots

* Also these

* Update snaps

* include site name

* Update snaps again

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

* update snaps again

* Update snaps

* remove mistaken playwright cfg

* update pw snaps

* update snap

* update previews

* Update with new designs

* Update screenshots
2026-04-22 13:23:24 +00:00
Florian Duros d7f5546294 Room list: add custom section creation in SC (#33138)
* feat: add way to create custom section in SC

* feat: disable custom section in vms

* chore: include design tokens icons in vitest config

* test: update screenshot

* chore: use one react import
2026-04-16 13:14:10 +00:00
Zack d4aea25600 Phase 1 Refactor MImageBody to shared component (#33093)
* Phase 1 Refactor MImageBody to shared component

* blurhash package added into shared components

* Added image snapshots

* Correct the GIF label css design

* Update snapshot for GIF

* crop image correctly

* Update snapshot to reflect updates

* typo fix

* update css to compund variables

* Added tsdoc to function

* Fix inaccurate css and text values in stories

* use const enum instead

* Add i18n to shared components + added string

* Correct css comment information

* Update lockfile
2026-04-16 08:59:32 +00:00
Zack 80cf9e5b4a Shared Components Restructure, Cherry Picked | Room Shell Structure (#32917)
* refactor(shared-components): move composer and right-panel tree

* refactor: cleanup remaining structure leftovers

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

* Correct Path
2026-04-14 13:20:15 +00:00
Zack f615968835 Refactoring readMarkerForEvent into ReadMarkerView in shared-components (#32777)
* Refactoring readMarkerForEvent  into ReadMarketView in shared-components

* Use shared ReadMarkerView in MessagePanel

* Rename ReadMarkerView to ReadMarker

* Fix Prettier

* Update snapshots screenshots

* Use plain props for ReadMarker

* Fix Prettier

* Move ReadMarker into room timeline

* Replace ReadMarker nested ternary

* Update snapshot
2026-04-14 11:56:52 +00:00
Zack a7cd6eac31 Shared Components Restructure, Cherry Picked | Restructure Room-List Tree (#32915)
* refactor(shared-components): restructure room-list tree

* refactor(web): rename room-list parent viewmodel

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

* fix(room-list): address review feedback

* Fix Prettier

* Move AvatarWithDetails from avatar folder to core

* Update stories title to reflect correct path

* Fix AvatarWithDetails barrel export path

* Remove stale DateSeparatorView barrel export

* Move AvatarWithDetails visual baseline

* Shorten shared-components visual snapshot paths

* Revert "Shorten shared-components visual snapshot paths"

This reverts commit 91880ff5fb10408aa0091175b53ce3c86c6975a9.

* Move room list notification decoration files up a level
2026-04-14 08:51:36 +00:00
Zack 1721b69017 Move TextualBody to shared components (#32868)
* Init, refactoring and movement of TextualBody to shared components, adding stories, test and view

* migrate TextualBody to shared view + app viewmodel

* Update snapshots + prettier fix

* Fix Prettier

* added new tests to make coverage happy

* add comment to attachbodyRef function

* Fix: Remove event onkeydown and remove hardcoded mx css

* Update enums to const enums

* added comment on css to explain 9px

* Update comment

* Correcting comment, pushed too fast..

* Update Css To Fix (edited)

* Update snapshot to reflect css changes

* Fix emote into one liner

* Update snapshot
2026-04-09 11:36:24 +00:00
Zack d197fb4e30 Refactor and Move TileErrorBoundary to Shared Components (#32793)
* creation of stories and view in shared-components

* migrate EventTile error fallback to shared TileErrorView MVVM

* Fix lint errors and unused import

* Update tests because of the refactoring

* Update snapshots + stories

* removal of mxEvent since it never changes in timeline

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

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

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

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

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

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

* docs: add TileErrorView tsdoc

* docs: add TileErrorViewModel tsdoc

* docs: add view source label tsdoc

* refactor: move tile error layout into vm

* docs: add TileErrorView story view docs

* docs: move tile error story list wrapper

* refactor: remove unused tile error event setter

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

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

* docs: add tsdoc for event tile error fallback props

* refactor: rely on snapshot merge no-op checks

* remove unessecery if statment

* test: restore EventTile mocks in afterEach

* test(shared-components): move TileErrorView baselines

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-04-08 09:05:31 +00:00
Zack 11fd669c26 Move shared message body views into event-tile layout (#33015)
* Move shared message body views into event-tile layout

* Move shared message body visual baselines
2026-04-07 06:38:24 +00:00
Florian Duros 46bff1f9e6 Room list: add activity marker to sections (#33024)
* feat: add unread status to section view

* feat: add unread tracking in room list section

* feat: populate rooms into section header vm

* test: add units for unread in section view model

* test(e2e): add unread tests
2026-04-06 19:05:45 +00:00
Michael Telatynski 2d3e2fcb70 Remove global h2 css rule in favour of heading styles/components (#32969)
* Remove global h2 css rule in favour of heading styles/components

* Use Compound Heading in shared-components

and forbid hX elements

* Use Compound Heading in settings

add back margin to some legacy headings

* Tweak some headings

* Update screenshots

* Update screenshots

* Update snapshots

* Tweak .gitignore

* Update snapshots

* Iterate

* Update screenshots

* Update screenshots

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

* Adding tooltips for menu items and correct i18n strings

* Layout changes

* Renaming some properties

* Rename property

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

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

* Cleaner interface between view and view model

* Refactor view properties and replace Menu and MenuItem

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

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

* Added unit and playwright tests and documented the view

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

* Remove unused components and unnecessary css

* Remove unused language tags

* Fix for handling join-rules correctly

* Prettier

* Add handling of stale view model in async calls

* Prettier

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

* Missing variables used for linting

* Fix for showing ActionBarView when using keyboard for navigation

* Handle visibility on context menu closing

* ThreadPanel uses the ActionBarView so restore css rule

* Fix for visibility of the ActionBarView in Thread panel

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

* Add roving index to function as a toolbar

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

* Fix SonarCloud issues

* Fix for SonarCloud issue

* Merge fix

* Rename mx_LegacyActionBar to mx_ThreadActionBar

* Added documentation and simplified join rules

* Generalize the ActionBarView and move logic to view model

* Add the four new buttons to the ActionBarView

* Update view model and tests to use the updated ActionBarView

* Refactor element-web to use ActionBarView

* Clean up styling in element-web

* Clean up and updating snaps and screenshots

* Added unit-tests for better coverage

* Moving ActionBarView to the correct folder in shared components

* Update snaps in element-web

* Better documentation in stories

* Merge fixes

* Updates after review comments

* Review comment fixes

* Added documentation to view models and updated snaps

* Hide button had the wrong label

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

* fix prettier and other warnings

* move video message body to shared view + app viewmodel

* Fix prettier warnings and masking spinner for tests

* stabilize VideoBodyView screenshots with local media asset

* Disable spinner from changing image all the time

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

* Update prettier fix

* Update snapshot

* Add tests to cover different states of Video

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

* Update snapshot

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

* adde documentation snippets

* refactor: move m.video rendering into body factory

* docs: add tsdoc for video body view model

* docs: add thumbnail tsdoc for video body view model

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

* docs: add dimensions tsdoc for video body view model

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

* docs: add tsdoc for video body view state

* refactor: replace video body view state enum

* refactor: remove duplicate video body state init

* refactor: drop unused video body view state attribute

* Fix Prettier

* Update snapshot screenshot

* test: restore video story screenshot mask

* chore: refresh PR head

* Add mask to screenshot to pass CI tests

* test: narrow video story mask hook

* Fix easy Sonar warnings in video body components

* Move shared message body views into event-tile layout

* Move shared message body visual baselines

* Revert unrelated shared message body moves
2026-04-01 09:48:22 +00:00
Florian Duros 0f515f581e Room list: add default sections (#32785)
* feat: add sections to RLSV3

* feat: add sections in vms

* feat: add room list section labs flag

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

* feat: hide favourites and low priority filters

* fix: crash when changing filter

* feat: support sticky room in sections

* test: update SC snapshot

* test: update SC screenshot

* test: update RLS tests

* test: add tests to RoomListSectionHeaderViewModel

* test: fix existing test in RoomListViewModel

* test: add sections tests for RoomListViewModel

* test: add e2e tests for sections

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

* fix: typo in `roomSkipList`

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

* chore: put back comment about `roomIndexInSection`

* chore: add missing `readonly`

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

* refactor(web): move room timeline viewmodels

* Prettier FIx

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

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

* test(shared-components): drop stale timeline baseline paths
2026-03-30 15:15:21 +00:00
Zack e8701f5a06 Shared Components Restructure, Cherry Picked | Core (#32914)
* refactor(shared-components): move core primitives under core

* refactor(shared-components): restore i18n strings path

* fix(shared-components): repair typedoc story imports

* fix(shared-components): align newer imports with core paths

* test(shared-components): add core visual baselines

* refactor(shared-components): move virtualized list to core root
2026-03-27 19:58:56 +00:00
Robin 5a074e637a Fix room list often showing the wrong icons for calls (#32881)
* Give rooms with calls a proper accessible description

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

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

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

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

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

* Make room list items react to changes in call type

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

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

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

* Ignore the Vitest attachments directory
2026-03-26 10:28:48 +00:00
Zack 4f3a1a2cc6 Refactor and Move RedactedBodyView To Shared Components (#32772)
* refactoring and creation of shared-components for reductedBodyView

* move redacted message rendering to shared MVVM view

* Update snapshots + fix lint errors

* Remove MatrixClientPeg and use reguler react matrix client context

* Stop resyncing redacted body view models with mxEvent

* Fix redacted_because test fixtures for stricter event typing

* Simplify redacted body client access

* Watch timestamp setting in redacted body view model

* Refactor redacted and decryption failure body factories into MBodyFactory

* Prettier Fix

* Refactor FileBody into same pattern for consitancy
2026-03-24 10:02:07 +00:00
R Midhun Suresh 99e6ede9f1 Implement collapsible panels for the new room list (#32742)
* Add `react-resizable-panels` library

* Implement a custom SeparatorView

* Add a `LeftResizablePanelView`

* Add a custom `GroupView`

* Export everything from shared-components

* Make it possible to track width/collapse state through settings

* Add a view model to drive the views

* Render views without disrupting the old room list

* Fix lint error

* Disable user interaction on collapsed panel

* Prevent widgets fron hijacking pointer events

* Expand to full width on separator click

* Separator should be shown when focused via keyboard

* Update tests

* Use data-attribute for hover

* Write stories for SeperatorView

* Write vite tests for SeparatorView

* Write tests for LeftResizablePanelView

* More tests

* Fix lint errors

* Fix flakey border on the roomlst

* Fix storybook axe violation

* Update snapshots

* Fix playwright tests

* Fix sonarcloud issues

* Use translated string

* Add better js-doc comments

* Rename `ResizerSnapshot` to `ResizerViewSnapshot`

* Externalize react-resizable-panels

* Link figma designs to stories

* Write playwright tests

* Update screenshots

* Fix lint errors

* Update more screenshots

* Update more screenshots

* Fix flaky toast test

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

Co-authored-by: Andy Balaam <andy.balaam@matrix.org>

* Fix indentation

---------

Co-authored-by: Andy Balaam <andy.balaam@matrix.org>
2026-03-23 13:33:32 +00:00
ElementRobot 8a38a2fe4a Localazy Download (#32808)
* [create-pull-request] automated change

* test: update SC tests

* test: update SC screenshots

* test: update EW snapshots

* test: update EW tests

* test: update EW e2e tests

---------

Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-03-18 15:53:28 +00:00
Florian Duros 136bb78c15 Tidy up snapshot, actions and vm names according to MVVM doc (#32819)
* chore: rename snapshot, actions and vm according to MVVM doc

* doc: add naming conventions

* chore: fix UrlGroupView naming, folders and children

* chore: remove `Example` column

* refactor: rename `UrlPreviewGroupViewPreview` into `UrlPreview`
2026-03-17 14:20:52 +00:00
Florian Duros ee5d2609df Room list: add sections to shared components (#32735)
* feat: add section header

* refactor: remove index and role related to list box from RoomListItemView

* feat: add wrapper to RoomListItemView to handle different accessiblity pattern

* feat: add section support to VirtualizedRoomListView

* feat: add sections support to RoomListView

* test: add screenshot for sections header

* test: add/update screenshots for sections

* feat: force flat list on view model

This is an intermediary step before implementing sections in the vm. We
force the flat list but we use the underneath the view supporting
sections.

* test: update RoomListViewModel test

* test: fix breaking test

* chore: rename `getSectionViewModel` to `getSectionHeaderViewModel`

* chore: add missing `RoomListItemAccessibilityWrapper` export

* chore: merge `react` imports

* chore: simplify and add comment to `getItemKey` and `getHeaderKey`

* chore add comments to `getItemComponent` variants

* chore: fix typo in example doc
2026-03-16 16:40:12 +00:00
Will Hunt 3b4027846d Port URL Preview components to MVVM (#32525)
* Port over linkifyJS to shared-components.

* Drop rubbish

* update lock

* quickfix test

* drop group id

* Modernize tests

* Remove stories that aren't in use.

* Complete working version

* Add copyright

* tidy up

* update lock

* Update snaps

* update snap

* undo change

* remove unused

* More test updates

* fix typo

* fix margin on preview

* move margin block

* snapupdate

* prettier

* Port url preview logic to a view model.

* More fiddling with VM logic

* Note to self

* Refactor away into a shared component.

* Even more lovely lovely code that makes it look prettier

* translation cleanup

* Even more stuff that I need to fix yay

* Remove .last-run.json

* Update snaps

* Ensure we set showUrlPreview

* Cleanup tests

* lint + add png support

* Add a label

* Cleanup

* Add snaps

* Update snaps

* update playwright

* Refactors

* update snap

* Add missing snap

* Remove editing code (we check this in a better way in componentDidUpdate)

* Add README

* fix the one unused import

* Style shuffling

* Update vis tests

* Finally fix the tooltip

* Remove unused prop

* Add some padding

* fix lint issue

* Design improvements

* new screens

* Update snaps

* Fix CSS specificity

* Remove stale screenshot

* Rename function to match reality

* Port viewmodel tests to snapshots

* finish documenting types

* Stop being dangerous

* Use Linkify+decode for description

* Remove ability for VM to do linkifying.

* Port over linkifyJS to shared-components.

* Drop rubbish

* update lock

* quickfix test

* drop group id

* Modernize tests

* Remove stories that aren't in use.

* Complete working version

* Add copyright

* tidy up

* update lock

* Update snaps

* update snap

* undo change

* remove unused

* More test updates

* fix typo

* fix margin on preview

* move margin block

* snapupdate

* prettier

* cleanup a test mistake

* Fixup sonar issues

* Don't expose linkifyjs to applications, just provide helper functions.

* Add story for documentation.

* remove $

* Use a const

* typo

* cleanup var name

* remove console line

* Changes checkpoint

* Convert to context

* Revert unrelated change.

* more cleanup

* Add a test to cover ignoring incoming data elements

* Make tests happy

* Update tests for LinkedText

* Underlines!

* fix lock

* remove unused linkify packages

* import move

* Remove mod to remove underline

* undo

* fix snap

* another snapshot fix

* More cleanup

* Tidy up based on review.

* fix story

* Pass in args

* update snap

* cleanup

* use source image

* oops

* remove client peg

* Remove unused state

* tidy up code

* Ensure we update the preview when the event content may have changed.

* s/global/globalThis/

* Ensure we don't stretch images

* Update screenshots

* Cleanup
2026-03-16 10:05:34 +00:00
rbondesson d791e3fe8a Refactor MFileBody using MVVM and move to shared-components (#32730)
* Refactor MFileBody using MVVM and move to shared component

* Simplyfing rendering properties

* Create a first version of view model for the component

* Simplifying component properties and make it possible to override module css using data-* attributes

* Create a MBodyFactory in element-web and use it to render MFileBodyView from MessageEvent

* Use <MediaBody instead of <button to support legacy rendering

* Updated styling and comments

* Refactoring className from snapshot to component property

* Rename MFileBody* to FileBody*

* Rename MFileBody* to FileBody*

* Refactoring render branches to allow for displaying nothing

* Fix styling issues

* Fix lint errors

* Fix for css selectors in playwright tests

* Remove the MFileBody component and change all callers to use MBodyFactory:FileBodyView

* Remove unused strings in element-web

* Revert to render text in story iframes

* Fix for prettier error

* Fix playwright test css selectors

* Apply legacy styling in element-web

* Add legacy styling for mx_MFileBody

* Restore file

* Change from <div to <button

* Calculate span width ad update screenshots

* Remove width calculation and update snapshots

* Fix for letter-spacing and better content in story

* Updated playwright screenshots

* Updated snapshots

* Fixing Sonar errors/warnings

* Removed extra parentheses

* Changes after review

* Change border-radius to px and updated snapshots

* Fix typo in description

* And another typo fix

* Changes after review
2026-03-16 08:47:23 +00:00
Florian Duros 40a322ac05 Room list: add a grouped virtualized list to shared components (#32566)
* refactor: extract most of the logic from the virtualized list

The VirtualizedList component is renamed FlatVirtualizedList and most of
the logic is extracted. In order to prepare the introduction of the
GroupedVirtualizedList which will share most of the behaviour.

* refactor: use `FlatVirtualizedList` instead of `VirtualizedList`

* feat: add grouped virtualized list to shared components

* feat: add accessiblity helps for virtualized list

* test: use one test suite for the two virtualized lists

* test: update storybook screenshots

* feat: add keyboard navigation on header

* test: make a11y test pass

* chore: delete old screenshot

* doc: a11y docs to list stories

* chore: fix copyright
2026-03-13 09:53:09 +00:00
Will Hunt c02db4ebb8 Port over linkifyJS to shared-components. (#32731)
* Port over linkifyJS to shared-components.

* Drop rubbish

* update lock

* quickfix test

* drop group id

* Modernize tests

* Remove stories that aren't in use.

* Complete working version

* Add copyright

* tidy up

* update lock

* Update snaps

* update snap

* undo change

* remove unused

* More test updates

* fix typo

* fix margin on preview

* move margin block

* snapupdate

* prettier

* cleanup a test mistake

* Fixup sonar issues

* Don't expose linkifyjs to applications, just provide helper functions.

* Add story for documentation.

* remove $

* Use a const

* typo

* cleanup var name

* remove console line

* Changes checkpoint

* Convert to context

* Revert unrelated change.

* more cleanup

* Add a test to cover ignoring incoming data elements

* Make tests happy

* Update tests for LinkedText

* Underlines!

* fix lock

* remove unused linkify packages

* import move

* Remove mod to remove underline

* undo

* fix snap

* another snapshot fix

* Tidy up based on review.

* fix story

* Pass in args
2026-03-12 15:54:01 +00:00
Zack 9fa8b34ebe Move PinnedMessageBadge To Shared Components (#32768)
* refactor: move pinned message badge into shared-components

* Update lint errors

* Fix for Vitest issue with CI on shared components

* Update related to the pr comments and requests

* Prettier Fix

* Update, remove view since it was just moved and not actually MVVMed

* Removed view suffix since it was only moved and not mvvmed

* Update snapshots

* Removal of unused screenshots

* Added Image that we need
2026-03-12 13:34:45 +00:00
Timo 6d99678ade Redesign widget pip and move into shared component (#32654)
* redesign widget pip and move into shared component

* fix onBackClick handler

* fix ci

* Update README.md prepare -> prepack

* add vm tests

* Update WidgetPipView.stories.tsx

* fix tests

* playwright tests

* fix test id

* remove unused files (reappeared after rebase)

* update storybook screenshot tests

* update playwright tests

* adjust padding

* review

* comment and docstring corrections

* fix imports and `this.props`

* fix double `complementary` item

* add WidgetPipView tests and revmoe `setViewingRoom` from
WidgetPipViewModelInterface.

* add doc sting to `setViewingRoom`

* Update RoomStatusBarView.test.tsx

* fix copyright

* Update RoomView-test.tsx.snap

* revert accidental Copyright year changes

* update snapshot RoomView-test
2026-03-10 16:59:51 +00:00
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
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
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
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
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
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 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