16 Commits

Author SHA1 Message Date
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
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
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
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
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
Florian Duros
1025d60001
Avoid excessive re-render when setting same reference/value in snapshot (#32918)
* perf: avoid excessive re-render when setting same value in snapshot

* test: update tests
2026-03-25 15:23:11 +00:00
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
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
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
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
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
Michael Telatynski
91a3cb03c1
mv element.io @types __mocks__/ debian docker module_system/ playwright res src test webapp Dockerfile .dockerignore .eslintignore .stylelintrc.cjs babel.config.cjs recorder-worklet-loader.cjs .modernizr.json components.json config.json config.sample.json package.json project.json tsconfig.json tsconfig.module_system.json jest.config.ts playwright.config.ts webpack.config.ts build_config.sample.yaml apps/web/
mkdir apps/web/scripts
mv scripts/{cleanup.sh,ci_package.sh,copy-res.ts,deploy.py,package.sh} apps/web/scripts

And a couple of gitignore tweaks

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-02-24 15:43:58 +00:00