* 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
* 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>
* 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>
* 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
* chore: ignore jest-sonar.xml in gitconfig
* chore: add missing rtl types to shared component
* chore: add `symbol` to `Disposables.trackListener`
* feat: add room list header view to shared components
* fix: change `Space Settings` to `Space settings`
* feat: add room list header view model
* chore: remove old room list header
* chore: update i18n
* test: fix Room-test
* test: update playwright screenshot
* fix: remove extra margin at the top of Sort title in room options
* test: fix room status bar test
* fix: change for correct copyright
* refactor: use `Disposables#track` instead of manually disposing the listener
* refactor: avoid to recompute all the snapshot of `RoomListHeaderViewModel`
* wip
* fix: make header buttons the same size than figma
* test: update shared component snapshots
* test: update shared component screenshots
* test: update EW screenshots
* refactor: move room list search to shared components
* refactor: add view model
* refactor: use view and vm in room list search component
* refactor: use room list id instead of class for landmark navigation
* refactor: remove old room list search css
* test: add screenshots test for room list search view
* test: fix e2e test using class as selector...
* refactor: useCreateAutoDisposedViewModel for audio player
* Update src/viewmodels/audio/AudioPlayerViewModel.ts
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---------
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
* Remove vm related code from element-web/src
* Add and export view model code from package
* Update imports
* Rewrite vm tests using vitest
* Add github action to run vm tests
* Fix lint errors
* Mvoe tests over to jest
* Try fixing code coverage
* Second attempt at fixing code coverage
* fix: avoid to render `AudioPlayerViewModel` when `MAudioBody` is inherited
* fix: avoid `Playback.prepare` to fail when called twice
* fix: add `decoding` to playback type
* refactor: fix circular deps
* refactor: extract `MockedPlayback` from `AudioPlayerViewModel`
* test: add `MAudioBody` basic test
* test: add tests for `MVoiceMessageBody`
* fix: lint
* Introduce disposables to track sub vms and event listeners
* Remove old code
* Use disposable in BaseViewModel
* Update vm so that the listener is tracked through disposable
* No-op on dispose call instead of throwing error
* Throw error in trackListener as well
* Fix audio player vm
* Expose isDisposed through base vm
* Dispose AudioPlayerViewModel
* feat: add `PlayPauseButton` to storybook
* feat: add generic media body
* feat: add seekbar component
* chore: add ViewWrapper to help writing stories with vm
* refactor: move `formatBytes` from `formattingUtils` into shared component
* refactor: add `className` props to `Clock`
* feat: add new audio player component
* test(e2e): add screenshots for new shared components
* feat: add AudioPlayerViewModel
* feat: use new audio player in `MAudioBody`
* refactor: remove old audio player
* test(e2e): update existing tests
* refactor: remove unused `DurationClock`
* refactor: rename `SeekBar` into `LegacySeekBar`
* Introduce snapshot class to track snapshot updates
This avoids the hassle of having to manually call emit.
* Better viewmodel ergonomics
- Rename `SubscriptionViewModel` to `BaseViewModel`. I feel this is
appropriate since that class does more than just manage subscriptions.
- `getSnapshot` is no longer an abstract method. It's simply a method
that returns the current snapshot state. This ensures that getSnapshot
result is cached by default which is required by `useSyncExternalStore`.
- `props` are a property of the base vm class so that actual VMs don't
have to keep creating this property.
* Update `TextualEventViewModel`
* Fix test
* Rename `TextualEvent` to `TextualEventView`
* Fix snapshot object not being merged
* Rename directory to `EventTileView`
* Fix broken snapshot
* Add test for snapshot class
* Very first pass at shared component views
Turn the trivial TextualEvent into a shared component with a separate view
model for element web. Args to view model will probably change to be more
specific and VM typer needs abstracting out into an interface, but should
give the general idea.
* Remove old TextualEvent
* Pass showHiddenEvents
Because we used it anyway, we just cheated by getting it from the context
* Factor out common view model stuff
* Move ViewModel interface into the shared components
* Add tiny wrapper hook
* Move showHiddenEvents into props fully
* Fill in stories / test
* chore: setup storybook
cherry pick edc5e8705674b8708d986910b02b5d2545777fb3
from florianduros/storybook
* Add TextualEvent component to storybook
* Add mock view model & snapshot
* Remove old style stories entry
* Change import
* Change import
* Prettier
* Add paxckage patch to @types/mdx
for React 19 compat
* Pass getSnapshot as getServerSnapshot too
* Maybe make sonar regognise tests as tests
* Typo
* Use storybook reacvt-vite
There's no reason to use the react-webpack plugin just because our app
is stuck on webpack, it just means we have vite as a dependency too.
* Change here too
* Workaround for incomatible types in rollup
https://github.com/rollup/rollup/issues/5199
* Remove webpack styling addon
Not necessary now we're using vite
* Hopefully do screenshot testing...
* need newer node
* quote issues
* Make it an npm script
* colons
* use right port
* Install playwright browsers
* Try without the if
* Oh right, we need the headless shell
* Pass flag to store received screenshots
and upload diffs too
* Update snapshot from received
* Include platform in snapshot / received dir
because font rendering differs between platforms
* Suffix snapshots with platform instead
like we do for playwright
* Remove unnecessary env vars
and better name
* Add some comments
* Prettier
* Fix yarn.lock
* Memoise vm creation
Co-authored-by: Florian Duros <florianduros@element.io>
* Add implements
Co-authored-by: Florian Duros <florianduros@element.io>
* Fix listener interface
* Add implements
Co-authored-by: Florian Duros <florianduros@element.io>
* Fix types
* Fix more types
* Add a superclass that simple view models can extend
to reduce boilerplate
* Revert useMemo
as this isn't a hook
* Unused import
* Actually commit the file the branch is named after
* Add missing playwright step
* Add return type annotation
* Change to add / remove subscription callback
* Change to 'add' rather than 'subs.subscribe'
* Add cache specifier for only shell playwright browsers
* Add copyright headers
* Better comment wording
* Make amit an arrow function
so it can be passed directly as a callback
* Add a test
---------
Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
Co-authored-by: Florian Duros <florianduros@element.io>
