Commit Graph

86 Commits

Author SHA1 Message Date
David Langley
c67cec3f56 Merge branch 'develop' into langleyd/roomListLoadingState 2025-04-14 17:26:28 +01:00
David Langley
57f5832a63 Update snapshots and add loading test 2025-04-14 16:12:21 +01:00
Florian Duros
07d5a72f26 New room list: video room and video call decoration (#29693)
* feat: add video call and EC call to room list item vm

* feat: add video call notification decoration to notification decoration component

* feat: add video call support to room list item view

* feat: add new RoomAvatarView component

* feat: deprecate `DecoratedRoomAvatar`

* feat: use `RoomAvatarView` in room list item

* feat: allow custom class for `RoomAvatar`

* test: update notification decoration

* test: update room list item view

* test: update room list snapshot

* test: add tests for room avatar vm

* test: add tests for room avatar view

* test(e2e): update snapshots

* fix: video room creation rights

* test: e2e add test for public and video room
2025-04-14 09:27:43 +00:00
Florian Duros
f39f3d2164 New room list: minor visual fixes (#29723)
* fix: use correct color for room list header

* fix: use error solid icon

* fix: rename Unread as Unreads

* test: update jest snapshots

* test(e2e): update screenshots

* test: fix test
2025-04-14 07:45:32 +00:00
David Langley
c6b1a09b55 add loading state to view model and spinner to room list vieqw 2025-04-11 17:57:17 +01:00
renovate[bot]
e1b2e3a101 Update react monorepo to v19 (major) (#28914)
* Update react monorepo to v19

* Import JSX explicitly for React 19 compatibility

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update usages of refs for React 19 compatibility

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update react imports

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Avoid legacy contexts as much as possible

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Avoid deprecated React symbols

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Stash

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update usages of refs for React 19 compatibility

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch pillify to use a html-react-parser approach rather than DOM muddling

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate react html parsing

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate react html parsing

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate html parsing

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Memoize the EventContentBody component

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate html parsing

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Simplify

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Discard changes to src/Linkify.tsx

* Discard changes to src/components/views/messages/TextualBody.tsx

* Discard changes to src/settings/handlers/AbstractLocalStorageSettingsHandler.ts

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Prepare for React 19 upgrade

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove stale comment

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2025-04-09 19:03:09 +00:00
Will Hunt
8fc6638d6e Allow reporting a room when rejecting an invite. (#29570)
* Add report room dialog button/dialog.

* Update copy

* fixup tests / lint

* Fix title in test.

* update snapshot

* Add unit tests for dialog

* lint

* First pass at adding a report room on invite.

* Use a single line input field for reason to avoid bumping the layout.

* Fixups

* Embed reason to make it clear on grouping

* Revert accidental commit

* lint

* Add some playwright tests.

* tweaks

* Make ignored users list more accessible.

* i18n

* Fix sliding sync test.

* Add unit test

* Even more unit tests.

* move test

* Update to match designs.

* remove console statements

* fix css

* tidy up

* improve comments

* fix css

* updates
2025-04-08 09:08:00 +00:00
Florian Duros
d337106eed New room list: fix multiple visual issues (#29673)
* fix(room list item): add bold when there is a notification

* fix(room list item menu): fix color of check icon

* fix(menu): remove chevron

* chore: update @vector-im/compound-web

* test(room list): update tests

* test(e2e): update snapshots
2025-04-04 07:45:45 +00:00
Florian Duros
817d7b78b8 New room list: add notification options menu (#29639)
* feat: add `utils.hasAccessToNotificationMenu`

* feat(room list item view model): use `hasAccessToNotificationMenu` to compute `showHoverMenu`

* feat(room list item menu view model): add notification options menu attributes

* feat(room list item menu view): add notification options

* test: add tests for `utils.hasAccessToNotificationMenu`

* test(room list item view model): add test for `showHoverMenu`

* test(room list item menu view model): add tests for new attributes

* test(room list item menu view): add tests for notification options menu

* chore: update i18n

* test(e2e): update screenshots

* test(e2e): add tests for notification options menu
2025-04-02 12:30:27 +00:00
Florian Duros
82d93695a2 Update @vector-im/compound-web (#29641)
* chore: update `@vector-im/compound-web`

* test: update snapshots
2025-04-02 10:09:18 +00:00
Florian Duros
6ae11dab52 New room list: fix spacing and padding (#29607)
* fix(menu): reduce gap between button and button size

* fix(notification decoration): increase gap between icons

* fix(room list item): different right padding depending on the menu, notification decoration and the regular case

* test: update snapshots

* test(e2e): update snapshots
2025-03-28 10:21:31 +00:00
Michael Telatynski
fac982811c Update usages of refs for React 19 compatibility (#29536)
* Update usages of refs for React 19 compatibility

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Simplify

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2025-03-28 10:07:41 +00:00
Michael Telatynski
05df321f34 Import JSX explicitly for React 19 compatibility (#29535)
* Import JSX explicitly for React 19 compatibility

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fixup

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fixup

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2025-03-27 10:43:58 +00:00
Michael Telatynski
3f47487472 Switch away from nesting React trees and mangling the DOM (#29586)
* Switch away from nesting React trees and mangling the DOM

By parsing HTML events and manipulating the AST before passing it to React

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Use MatrixClientContext in Pill now that we are in the main React tree

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add missing import

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Break import cycles

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Minimise

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Docs

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2025-03-26 20:25:03 +00:00
Florian Duros
bbd798ef36 New room list: add notification decoration (#29552)
* chore: update @compound-web

* feat(notification decoration): add NotificationDecoration component

* feat(room list item): get notification state in view model

* feat(room list item): use notification decoration in RoomListItemView

* test(notification decoration): add tests

* test(room list item view model): add a11yLabel tests

* test(room list item): update tests

* test(e2e): add decoration tests
2025-03-26 13:32:02 +00:00
ElementRobot
e5d37a324d Localazy Download (#29577)
* [create-pull-request] automated change

* Fix playwright tests

* Update tests to reflect string changes

---------

Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
Co-authored-by: R Midhun Suresh <hi@midhun.dev>
Co-authored-by: Andy Balaam <andy.balaam@matrix.org>
2025-03-24 12:02:20 +00:00
Michael Telatynski
a6ae04bcde Update react imports (#29538)
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2025-03-19 10:39:52 +00:00
Florian Duros
3587161a2c New room list: add selection decoration (#29531)
* fix(room list): remove 1px extra padding

* feat(room list): add selection decoration to room list item and scroll list to this element

* test(room list item): add is selected test

* test(room list): update snapshot

* test(e2e): add test to keep the room list item visible

* test(e2e): update snapshots
2025-03-19 08:39:12 +00:00
R Midhun Suresh
839329b52a RoomListViewModel: Track the index of the active room in the list (#29519)
* Introduce a hook to track active room

This hook simply keeps a state which tracks the index of the active room
in the list of rooms passed through props. This index will be recomputed
if the active rooms changes or if the list itself changed.

* Use hook in the view model

* Write tests

* Fix broken tests
2025-03-18 12:49:10 +00:00
Florian Duros
7de54a385e New room list: add empty state (#29512)
* refactor: extract room creation and right verification

* refactor: update `RoomListHeaderViewModel` to use utils

* feat(room list filter): add filter key to `PrimaryFilter` model

* feat(room list filter): return active primary filter

* feat(room list): add create room action and rights verification

* test: update room list tests

* feat(empty room list): add empty room list

* test(empty room list): add empty room list tests

* feat(room list): use empty room list in `RoomListView`

* test(room list panel): update tests

* test(e2e): add e2e tests for empty room list

* test(e2e): update room list header snapshot
2025-03-18 10:02:33 +00:00
R Midhun Suresh
d88776e2dc RoomListViewModel: Add functionality to toggle message preview setting (#29511)
* Add setting for showing message previews

* Add hook to track and toggle message preview

* Use hook in view model

* Add tests

* Fix tests

* Fix lint

* Fix typo
2025-03-17 15:07:14 +00:00
Florian Duros
f3dbe81ef4 New room list: add more options menu on room list item (#29445)
* refactor(room list item): rename `RoomListCell` into `RoomListItemView`

* refactor(room list item): move open room action to new room list item view model

* feat(hover menu): add `hasAccessToOptionsMenu`

* feat(hover menu): add to `RoomListItemViewModel` the condition to display or not the hover menu

* feat(hover menu): add view model for the hover menu

* feat(hover menu): add hover menu view

* feat(hover menu): add hover menu to room list item

* feat(hover menu): update i18n

* test(view model list item): update test and add test to `showHoverMenu`

* test(room list): update snapshot

* test(room list item menu): add tests for view model

* test(room list item menu): add tests for view

* test(room list item): add tests

* test(e2e): add tests for more options menu

* chore: update compound web

* test(e2e): fix typo
2025-03-14 16:22:45 +00:00
Florian Duros
ceba762caf New room list: fix compose menu action in space (#29500)
* fix(room list header): in view model, can create room in space if user has the right. Display the compose menu if the user can create room or video room

* fix(room list header): can create directly chat if compose menu is disabled

* test(room list header): add tests for view model

* test(room list header): update tests of view

* test(room list header): update list test
2025-03-14 16:12:30 +00:00
R Midhun Suresh
9fb52e984c RoomListViewModel: Provide a way to resort the room list and track the active sort method (#29499)
* Add a hook that deals with the sorting behaviour

Hook will provide a function to sort the list and also provides a state
which tracks the currently active sort option.

* Use hook in vm

* Write test for the vm

* Fix broken view tests
2025-03-14 15:10:34 +00:00
Florian Duros
20d8abf7c2 New room list: add primary filters (#29481)
* feat(room filter): add component for the primary filters

* feat(room filter): add filter component to room list view

* test(room filter): add tests to primary filters

* test: update snapshots

* test(e2e): update snapshots

* test(e2e): add tests for primary filters

* refactor: change aria-label of primary filters
2025-03-13 17:29:57 +00:00
Tulir Asokan
fda658182a Implement MSC4142: Remove unintentional intentional mentions in replies (#28209)
* Implement MSC4142: Remove unintentional intentional mentions in replies

* Fix comment
2025-03-13 16:00:54 +00:00
Florian Duros
917d53a56f Add wrap props to flex component (#29480)
* feat(flex): add wrap props to flex component

* test: update snapshot
2025-03-13 13:32:48 +00:00
R Midhun Suresh
3f3fba99eb RoomListViewModel: Support secondary filters in the view model (#29465)
* Support secondary filters in the view model

* Write view model tests

* Fix RoomList test

* Add more comments
2025-03-11 13:29:55 +00:00
R Midhun Suresh
fd91e78152 RoomListViewModel: Support primary filters in the view model (#29454)
* Track available filters and expose this info from the vm

- Adds a separate hook that tracks the filtered rooms and the available
  filters.
- When secondary filters are added, some of the primary filters will be
  selectively hidden. So track this info in the vm.

* Write tests

* Fix typescript error

* Fix translation

* Explain what a primary filter is
2025-03-10 13:23:38 +00:00
Florian Duros
90cc44b340 New room list: basic flat list (#29368)
* chore: make the room list panel a flexbox

* feat(new room list): add `RoomListCell` component

* feat(new room list): add virtualized `RoomList` component

* feat(new room list): add `RoomListView` component

* feat(new room list): use `RoomListView` in `RoomListPanel`

* test(new room list): add test for room cell

* test(new room list): update room list panel tests

* test(new room list): add test to virtualized room list

* test(e2e): add room list tests

* test(e2e): update room panel tests
2025-03-06 10:01:55 +00:00
Robin
aa996010b4 Show error screens in group calls (#29254)
* Avoid destroying calls until they are hidden from the UI

We often want calls to exist even when no more participants are left in the MatrixRTC session. So, we should avoid destroying calls as long as they're being presented in the UI; this means that the user has an intent to either join the call or continue looking at an error screen, and we shouldn't interrupt that interaction.

The RoomViewStore is now what takes care of creating and destroying calls, rather than the CallView. In general it seems kinda impossible to safely create and destroy model objects from React lifecycle hooks, so moving this responsibility to a store seemed appropriate and resolves existing issues with calls in React strict mode.

* Wait for a close action before closing a call

This creates a distinction between the user hanging up and the widget being ready to close, which is useful for allowing Element Call to show error screens when disconnected from the call, for example.

* Don't expect a 'close' action in video rooms

These use the returnToLobby option and are expected to remain visible when the user leaves the call.
2025-03-05 20:41:26 +00:00
Richard van der Hoff
4b02520453 Remove redundant UserIdentityWarning test (#29403)
* Remove redundant `UserIdentityWarning` test

Since the refactoring in https://github.com/element-hq/element-web/pull/29067,
this test is redundant.

It is also flaky and hard to understand. Time for it to die.

* delint
2025-03-03 15:28:46 +00:00
R Midhun Suresh
2da21248bb Room List - Implement a minimal view model (#29357)
* Implement enough of the new store to get a list of rooms

* Make it possible to swap sorting algorithm

* Don't attach to window object

We don't want the store to be created if the labs flag is off

* Remove the store class

Probably best to include this PR with the minimal vm implmentation

* Create a new room list store that wraps around the skip list

* Create a minimal view model

* Fix CI

* Add some basic tests for the store

* Write more tests

* Add some jsdoc comments

* Add more documentation

* Add more docs
2025-03-03 11:12:00 +00:00
Florian Duros
7db909a47d new room list: keep space name in one line in header (#29369)
* fix(new room list): keep space name in one line in header

* test(new room list): update tests
2025-02-28 08:34:06 +00:00
Florian Duros
0997e0a747 refactor: rename RoomListView as RoomListPanel (#29361) 2025-02-26 11:14:04 +00:00
Florian Duros
f95218e2b7 New room list: add space menu in room header (#29352)
* feat(new room list): add space menu in view model

* test(new room list): add space menu in view model

* feat(new room list): add space menu in room list header

* chore: update i18n

* test(new room list): add tests for space menu

* test(new room list): update room list tests

* test(e2e): add tests for space menu
2025-02-25 14:06:01 +00:00
Florian Duros
43efd911c7 New room list: add dial to search section (#29359)
* feat(new room list): add dial to new room list

* test(new room list): test dial button

* test(new room list): update room list test
2025-02-25 11:03:29 +00:00
Florian Duros
efc6149a8b Update @vector-im/compound-design-tokens & @vector-im/compound-web (#29307)
* chore: update `@vector-im/compound-design-tokens` & `@vector-im/compound-web` to last version

* chore: use `error-solid` icon instead of `error`

* chore: update jest snapshot

* fix: `AccessibleButton` lint
2025-02-24 17:08:12 +00:00
Florian Duros
fb57924350 First step to add header to new room list (#29320)
* feat: create new header

* test: add tests to view model

* test: add tests to view

* feat: add header to new room list

* test(e2e): update RoomListView snapshot

* test(e2e): add tests for room list header

* refactor: minor code improvement
2025-02-20 15:40:19 +00:00
Florian Duros
28ed506fe1 refactor: rename RoomListHeader as LegacyRoomListHeader (#29308) 2025-02-19 14:06:01 +00:00
Florian D
2abd5342c2 New room list: add search section (#29251)
* feat(new room list): move `RoomListView` to its own folder and add styling

* feat(new room list): add search section

* test(new room list): add tests for `RoomListSearch`

* test(new room list): add tests for `RoomListView`

* test(e2e): add method to close notification toast to `ElementAppPage`

* test(e2e): add tests for the search section

* test(e2e): add tests for the room list view

* refactor: use Flex component

* fix: loop icon size in search button

* refactor: remove `focus_room_filter` listener
2025-02-13 15:49:09 +00:00
R Midhun Suresh
03a5ee1c5b New Room List: Create new labs flag (#29239)
* Create new labs flag

* Render empty room list view

* Reload on flag change

* Rename RoomList.tsx to LegacyRoomList.tsx

and rename NewRoomListView.tsx to RoomListView.tsx

* Update labs.md
2025-02-12 12:14:18 +00:00
renovate[bot]
4a381c2a10 Update all non-major dependencies (#29194)
* Update all non-major dependencies

* Delint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Prettier

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2025-02-05 13:25:06 +00:00
Valere
d3a6f34881 feat(crypto): Support verification violation composer banner (#29067)
* feat(crypto): Support verification violation composer banner

* refactor UserIdentityWarning by using now a ViewModel

fixup: logger import

fixup: test lint type problems

fix test having an unexpected verification violation

fixup sonarcubes warnings

* review: comments on types and inline some const

* review: Quick refactor, better handling of action on button click

* review: Small updates, remove commented code
2025-01-31 15:05:32 +00:00
ElementRobot
dcce9c70dc Localazy Download (#29149)
* [create-pull-request] automated change

* Fix test

---------

Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
Co-authored-by: R Midhun Suresh <hi@midhun.dev>
2025-01-31 12:30:53 +00:00
R Midhun Suresh
f29ce94dd4 Style room header icons and facepile for toggled state (#28968)
* Fix tiny typo in existing code

* Create a hook that uses the right panel store

So that we track changes to the right panel phases

* Create a context that wraps the previous hook we created

We do this so that we can get by using a single event listener i.e we
only need to call `useCurrentPhase` in the provider as opposed to
calling it in each header icon.

* Create a hook that tells you if a panel is open or not

* Create component that wraps Icon

and adds a class name when the corresponding panel is open

* Style room header icons for when they are toggled

* Style face pile for toggle state

* Fix broken CI

* Give directory a better name

* Update year in license

* Use a stronger type
2025-01-27 15:05:46 +00:00
R Midhun Suresh
76485cfb17 Allow navigating through the memberlist using up/down keys (#28949)
* Allow flex component to take child containers props

So that we can set attributes on the container

* Use Up/Down arrow keys to navigate through the list

* Update snapshot
2025-01-27 15:05:28 +00:00
R Midhun Suresh
e1e4d26154 More memberlist changes (#29069)
* Remove parenthesis from Invited user label

* Ensure adequate margin

* Truncate user id with ellipsis

* Fix tests
2025-01-22 13:31:47 +00:00
R Midhun Suresh
1644169ff3 Implement changes to memberlist from feedback (#29029)
* Add a separator between joined and invited members

* Fix user label in tile having wrong color

* Changes to member tiles

- ThreePidInviteTile now contains an user label showing "(Invited)" and
  an email icon.
- RoomMemberTile now includes an icon similar to above.
- Refactors a bunch of code to make this change sensible.

* Remove redundant css code

* Fix tests

* Update src/components/viewmodels/memberlist/MemberListViewModel.tsx

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

* Update year in license

* Fix lint error

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2025-01-21 11:01:32 +00:00
R Midhun Suresh
ebef0d353e Implement new memberlist design with MVVM architecture (#28874)
* Add new e2e icon for the member tile

* Add new presence icon for member tile

* Implement new member tile

* Implement memberlist view model

* Implement new memberlist header view

* Support the new memberlist in Diasambiguated profile

1. Use MemberInfo instead of RoomMember
2. CSS changes to reflect the new design

* Implement new memberlist view

* Add and use a new overflow component

We used the EntityTile component as a pretend overflow tile in some
places. This new lighter component is added so  that we can remove the
complex EntityTile component.

* Remove old code

* Add/remove css files from _components.pcss

* Increase minimum width as per design

* Actually use the new memberlist view

* Fix broken jest tests

* Add jest tests

* Playwright: Make it possible to disable presence

* Add playwright tests

* Fix lint error

* Undo translation changes that must be done via localazy

* Update license header

* Use waitFor instead of setTimeout

* Remove comment

* Switch over from template to container hs

* Revert unintended change

* Move config to top level
2025-01-08 17:15:06 +00:00