* 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
* 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`
* 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
* 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
* 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
* 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
* 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
* 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
* 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
* 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
* Remove babel
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Remove duplicated patch-package dep
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Switch to @fetch-mock/vitest
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update tests to import & call vitest functions
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update test-utils imports
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update unit test snapshots
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Switch from jest->vitest for unit tests
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update visual test screenshots
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Switch from test-runner->vitest for visual tests
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update README
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update CI for shared-components unit & visual tests
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update yarn.lock
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update README
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix storybook trying to import vitest
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix css modules leaking between storybook tests
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Tweak screenshot update script to accept args
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---------
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* 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
* Do not alter text-decoration if an <a> tag is a Link.
* Update screenshots
* update compound web to 8.3.4
* Update snaps
* Update alllllll the snaps
* update 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...
Robin