Commit Graph

41384 Commits

Author SHA1 Message Date
R Midhun Suresh
ee37734cfc MVVM - Introduce some helpers for snapshot management (#30398)
* 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
2025-08-06 12:29:32 +00:00
Robin
15f1291cbc Fix widget initialization in React development mode (#30463)
Since the upgrade to React 19, widget initialization (most notably affecting group calls) has been broken in development mode. This is because React now executes all callback refs twice, and the callback ref that receives the widget's iframe was not prepared to deal with that. I've fixed this by creating and attaching the iframe to the DOM in the callback ref, which allows us to properly couple its lifetime to that of the StopGapWidget. I've also added some insurance against strict mode-style races in StopGapWidget (doesn't hurt).
2025-08-06 12:17:00 +00:00
Florian Duros
6fca4d106e Move clock into shared components (#30480)
* refactor: extract `formatSeconds` from `DateUtils`

* refactor: move clock into shared-components

* refactor: update clock imports

* test(e2e): add screenshots
2025-08-05 17:04:55 +00:00
Florian Duros
24f923feac Move number.ts to utils in shared components (#30498)
* refactor: move `number.ts` in shared components

* chore: include ts test file in sonar config
2025-08-05 17:04:45 +00:00
Andy Balaam
c1a163cbc9 Hide recovery key when prompting for verification (#30471)
* Separate security_key_title from security_key_label since they differ in designs

See https://www.figma.com/design/ZodBLtGnKmRTGJo5SGLnH3/ER-137--Excluding-Insecure-Devices?node-id=92-8818&t=02JILBe2n7sx7ljU-1

In parallel with this, I have updated security_key_title in localazy.

* Hide recovery key on entry screen after login
2025-08-05 14:57:40 +00:00
David Baker
6a8493c6eb Update for compatibility with v12 rooms (#30452)
* Update for compatibility with v12 rooms

Stop using powerLevelNorm and reading PL events manually.

To support https://github.com/matrix-org/matrix-js-sdk/pull/4937

* Add test for leave space dialog

* Don't compute stuff if we don't need it

* Use room.client

* Use getSafeUserId

* Remove client arg

* Use getJoinedMembers

and add doc

* Fix tests

* Fix more tests

* Fix other test

* Clarify comment

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

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2025-08-05 11:10:30 +00:00
Florian Duros
814f4a85df fix: tooltip on presence (#30474) 2025-08-04 13:54:38 +00:00
Florian Duros
475504d33b New room list: change icon and label of menu item for to start a DM (#30470)
* feat: change `New message` to `Start chat` and change icon

* feat: update the room list empty states

* test: update existing tests

* test(e2e): update playwright tests
2025-08-04 12:42:05 +00:00
Florian Duros
7faee3d1b7 New room list: add tooltip for presence and room status (#30472)
* feat: add tooltip to room avatar

* test: update snapshots
2025-08-04 11:32:32 +00:00
David Langley
2250f5e6a2 Fix: Clicking on an item in the member list causes it to scroll to the top rather than show the profile view (#30455)
* Fix issue and add test

* Fix MemberTileView

* Add e2e test and comment
2025-08-01 13:16:13 +00:00
David Langley
cc0ece9837 Implement the member list with virtuoso (#29869)
* implement basic scrolling and keyboard navigation

* Update focus style and improve keyboard navigation

* lint

* Use avatar tootltip for the title rather than the whole button

It's more performant and feels less glitchy than the button tooltip moving around when you scroll.

* lint

* Add tooltip for invite buttons active state

As we have for other icon based buttons in the right panel/app

* Fix location of scrollToIndex and add useCallback

* Improve voiceover experience

- As well as stylng cells, set the tabIndex(roving)
- Natively focus the div with .focus() so screen reader actually moves over the cells
- improve labels and roles

* Fix jest tests

* Add aria index/counts and remove repeating "Open" string in label

* update snapshot

* Add the rest of the keyboard navigation and handle the case when the list looses focus.

* lint and update snapshot

* lint

* Only focus first/lastFocsed cell if focus.currentTarget is the overall list.

So it isn't erroneously called during onClick of an item.

* Put back overscan and fix formatting

* Extract ListView out of MemberList

* lint and fix e2e test

* Update screenshot

It looks like it is slightly better center aligned in the new list, as if maybe it was 1 px to high with the old one.

* Fix default overscan value and add ListView tests

* Just leave the avatar as it was

* We removed the tooltip that showed power level. Removing string.

* Use key rather than index to track focus.

* Remove overscan, fix typos, fix scrollToItem logic

* Use listbox role for member list and correct position/count values to account for the separator

* Fix inadvertant scrolling of the timeline when using pageUp/pageDown

* Always set the roving tab index regardless of whether we are actually focused.

Fixes the issue of not being able to shift+t

* Add aria-hidden to items within the option to avoid the SR calling it a group.

Also

* Make sure there is a roving tab set if the last one has been removed from the list.

* Update snapshot
2025-07-31 15:49:53 +00:00
Richard van der Hoff
ab6ef2fa85 Add labs option for history sharing on invite (#30313)
* Add labs option for "share history on invite"

* Set `acceptSharedHistory` when joining a room

* set `shareEncryptedHistory` when sending an invite

* Update src/i18n/strings/en_EN.json

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

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2025-07-31 14:20:37 +00:00
David Baker
c79c8c836b Put the 'decrypting' tooltip back (#30446)
...when downloading encrypted attachments (regressed by https://github.com/element-hq/element-web/pull/30330).

Also adds tests for the tooltips and fix the tests so they don't pollute
mocks / dialogs.
2025-07-31 14:20:33 +00:00
Robin
652e891663 Stop using deprecated Element Call URL parameters (#30422)
These deprecated parameters will be removed very soon (planned for Element Call version 0.15.0) and we no longer have to care about backward compatibility with old versions of Element Call (due to the embedding/bundling work), so now is the right time to migrate.
2025-07-30 22:41:30 +00:00
David Baker
1e15a322a5 Fix downloaded attachments not being decrypted (#30433)
* Fix downloaded attachments not being decrypted

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

* Import order
2025-07-30 12:30:18 +00:00
renovate[bot]
9232a220dc Update dependency filesize to v11 (#30380)
* Update dependency filesize to v11

* Update fileSize types

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-07-29 10:15:11 +00:00
Robin
a23a2c03d3 Allow Element Call to send call notifications (#30404)
* Allow Element Call to send call notifications

Currently Element Web is responsible for sending the call notification event, but this is planned to be changed soon. As of the upcoming Element Call 0.14.0 release, it will request the capability to send call notifications itself, and we should auto-approve this capability.

* Add reaction capability missing from test

Element Call does in fact request this one.
2025-07-27 13:37:10 +00:00
Richard van der Hoff
c2c040dd42 Lifecycle: add a bit more logging (#30414)
... to see what exactly it thinks is wrong with the session

This may be useful in debugging
https://github.com/element-hq/element-web/issues/30337 and
https://github.com/element-hq/element-web/issues/29708. but will likely be
useful in any case.
2025-07-25 16:17:19 +01:00
Richard van der Hoff
fc04ad26ce Support EventShieldReason.MISMATCHED_SENDER (#30403)
The js-sdk now exposes a new event shield reason, which we should handle
correctly.
2025-07-25 09:43:40 +00:00
Florian Duros
b5160c47b3 chore: move i18n.tsx into utils folder (#30400) 2025-07-25 08:14:48 +00:00
Florian Duros
3af8273d6b fix: replace hardcoded string in poll history dialog (#30402) 2025-07-24 16:41:01 +00:00
Florian Duros
81edfece6a fix: replace hardcoded string on qr code back button (#30401) 2025-07-24 15:39:26 +00:00
Florian Duros
ab26004c4c Change unencrypted and public pills to blue (#30399)
* feat: change unencrypted and public pill to blue

* test: update snapshots

* test(e2e): update screenshots
2025-07-24 14:52:59 +00:00
Richard van der Hoff
ffedca3954 Allow for unknown event shield reasons (#30397)
A forthcoming change to the js-sdk will add a new event shield reason. To avoid
a compile-time failure, add a `default` case to the code handling those
reasons.
2025-07-24 13:16:15 +00:00
Florian Duros
7bfb9818f6 Change color of public room icon (#30390)
* feat: change color of public room icon

* test: update room avatar snapshot

* test(e2E): update screenshots
2025-07-23 13:56:26 +00:00
ElementRobot
941835ccf2 [create-pull-request] automated change (#30326)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2025-07-23 08:23:28 +00:00
Florian Duros
1e689ac098 Move Flex & Box component into shared component folder (#30357)
* refactor: move Flex component in shared components

* refactor: update imports

* refactor: remove Flex pcss file

* fix: Flex component css override

* test: update snapshots

* fix: html export

* chore: add css module support to jest

* chore: keep old copyright

* refactor: change `mx_Flex` in `ErrorView` to `mx_ErrorView_flexContainer`

* test: update snapshots

* refactor: move Box component in shared components

* refactor: update import and css override

* test: update snapshots
2025-07-22 16:25:45 +00:00
Timo
cc2ee5ea78 Add toggle to hide empty state in devtools (#30352)
* Add toggle to hide empty state in devtools

* use translated string

* lint

* inverse logic(`hide`->`show`)

* move entry in i18n to correct position
2025-07-22 14:11:16 +00:00
Florian Duros
774e0e8f7b Fix color of icon button with outline (#30361)
* fix: room list header button color

* fix: room member list invite button

* test: update room list search snapshot

* test(e2e): update screenshots
2025-07-22 14:11:13 +00:00
Marc
0a97cbaada MVVM userinfo: split header and verification components (#30214)
* feat: mvvm userinfo split header and verification

* test: add userinfoheader tests

* fix: userHeaderVerificationView verification method
2025-07-21 12:04:50 +00:00
R Midhun Suresh
8a879c7fca Message preview should show tooltip with the full message on hover (#30265)
* Add title attribute for message preview

So that the full message is shown in a tooltip on hover.

* Fix test

* Update src/components/views/rooms/RoomListPanel/RoomListItemView.tsx

Co-authored-by: Florian Duros <florianduros@element.io>

---------

Co-authored-by: Florian Duros <florianduros@element.io>
2025-07-21 11:58:54 +00:00
Will Hunt
bc1effd2a2 Support rendering notification badges on platforms that do their own icon overlays (#30315)
* Support rendering a seperate overlay icon on supported platforms.

* Add required globals.

* i18n-ize

* Add tests

* lint

* lint

* lint

* update copyrights

* Fix test

* lint

* Fixup

* lint

* remove unused string

* fix test
2025-07-17 12:59:17 +00:00
David Baker
3b0c04c2e9 Add SubscriptionViewModel base class (#30297)
* 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>
2025-07-17 12:32:31 +00:00
ioalexander
77cb4b3157 Enhancement: Save image on CTRL+S (#30330)
* Save image on CTRL+S

* fixed cosmetic comments

* fixed test

* refactored out downloading functionality from buttons to useDownloadMedia hook

* ImageView CTRL+S use button component

* added CTRL+S test & lint

* removed forwardRef

* fix lint

* i18n
2025-07-17 09:53:11 +00:00
AlirezaMrtz
3e11a62a3f Add quote functionality to MessageContextMenu (#29893) (#30323)
* Add quote functionality to MessageContextMenu (#29893)

* Remove unused import of getSelectedText from strings utility in EventTile component

* Add space after quoted text in ComposerInsert action

* Add space after quoted text in MessageContextMenu test

* add new line before and after the formated text
2025-07-17 09:45:08 +00:00
Florian Duros
b64e9ed675 Add i18n to storybook (#30268)
* refactor: extract i18n from languageHandler to not import matrix-js-sdk, settings...

* fix: circular deps

* feat: add language selector to storybook

* fix: make visual test works in CI
2025-07-16 18:21:09 +00:00
David Baker
114ad1df0d Fix missing image download button (#30320)
Fixes https://github.com/element-hq/element-web/issues/30319
2025-07-15 15:14:14 +01:00
AlirezaMrtz
93f04f7aaa Prevent default form submission in MemberListView (#30312) 2025-07-14 13:44:03 +00:00
David Baker
4bbcb8bb5d Initial structure for shared component views (#30216)
* 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

* Revert useMemo

as this isn't a hook

* Unused import

* 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

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
Co-authored-by: Florian Duros <florianduros@element.io>
2025-07-14 13:13:02 +00:00
ElementRobot
361d36272e [create-pull-request] automated change (#30314)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2025-07-14 08:02:29 +00:00
Valere Fedronic
2d92b73e5f Widgets: Use the new ClientEvent.ReceivedToDeviceMessage instead of ToDeviceEvent (#30239) 2025-07-10 08:04:29 +00:00
Richard van der Hoff
26d71530f5 DeviceListener: add logging around key backup upload check (#30291)
* DeviceListener: add logging around key backup upload check

... in an attempt to diagnose what is going on with
https://github.com/element-hq/element-web/issues/30270

* fix typescript

* fix lint
2025-07-09 17:31:36 +00:00
renovate[bot]
7f97f46686 Update all non-major dependencies (#30281)
* Update all non-major dependencies

* 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-07-09 11:33:20 +00:00
ElementRobot
287a064127 [create-pull-request] automated change (#30219)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2025-07-09 08:58:44 +00:00
Banbuii
aa2dc8e574 Fix transparent verification checkmark in dark mode (#30235)
* Fix transparent verification checkmark in dark mode

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

* Add white background to E2E Warning Icon

Also adapted the testcases to the new background.
2025-07-07 11:35:03 +00:00
Will Hunt
9f313fcc14 Add support for module message hint allowDownloadingMedia (#30252)
* Add support for allowDownloadingMedia

* Add tests.

* Allow downloading when no event is associated.

* fix lint

* Update module API

* Update lock file too

* force CI
2025-07-07 09:03:46 +00:00
Doug
5dd31685bb Rename the mobile_guide_app_variant config values to be clearer. (#30258)
* Fix the default mobile_guide links.

Whilst the script should update these if it fails these should link to Element X which is now the default app that we link out to from this page.

* Rename the mobile_guide_app_variant values to be clearer.

Also handle invalid config values by defaulting to Element X.

* Rename snapshots to match new app variant identifiers.
2025-07-04 12:27:30 +00:00
Hubert Chathi
9095ebdb1b Avoid using accessSecretStorage to create 4S (#30244)
* remove resetCrossSigning flag, which is no longer in use

* drop unnecessary check for cross-signing

The only place where verifyUser is called already checks that cross-signing is
set up.  (The function name is also incorrect, since it checks for the
cross-signing key, and not for 4S.)

* avoid calling accessSecretStorage to set up cross-signing or 4S

Send the user to the Encryption settings tab instead

* only create secret storage when specifically asked to

* deprecate using accessSecretStorage to create new 4S

* also remove the obsolete snapshot

* add tests

* Tweak comment

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2025-07-03 13:34:05 +00:00
Doug
90f4d34fbb Update the mobile_guide page to the new design and link out to Element X by default. (#30172)
* Reapply "Update the mobile_guide page to the new design. (#30006)" (#30104)

This reverts commit c51823db5e.

* Use Element X as the default mobile_guide_app_variant when omitted.

* Fix a build error on Windows.

Additionally revert "Remove unnecessary <%= require %> usages" and let webpack handle all of the assets (without a manual copy rule).

* Exclude mobile_guide from coverage gate

It has playwright tests

* Revert the re-introduction of <%= require %>

* Fix snapshot tests on mobile_guide.

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2025-07-03 08:28:07 +00:00
Will Hunt
e1fea71c97 Filter settings exported when rageshaking (#30236)
* Submit filtered settings to rageshakes and sentry.

* Add flag to omit some settings from being exported.

* Hide user timezone

* Hide recent searches and media event ids

* Lint

* use better wording

* lint

* Prevent language from being sent

* Add tests to check keys are prevented from being uploaded.

* don't export invite rules

* Update tests
2025-07-02 08:03:31 +00:00