36 Commits

Author SHA1 Message Date
rbondesson
b0ee6f5323
Add CSS cascade layers for Compound, shared components, and app/web styles (#33302)
* Layer Compound and shared component CSS

* Layer app theme CSS

* Remove !important flags from ActionBarView

* Remove unnecessary !important statements from shared components

* Avoid dead code errors for *.pcss just because layer is specified after @import url

* Remove unnecessary !important styling

* Override Banner defaults in RoomStatusBarView

* Updated snaps

* Updated snaps

* Fix styling of media body in app/web

* Fix styling for Compound anchors

* Fix styling issues in app/web

* More styling fixes

* Fix a problem extracting css for HTMLExport

* Revert changes

* Fix for theme styling

* Add test to improve coverage

* Prettier

* Fix styling issues

* Add data-kind attribute to avoid global styling override

* Update screenshot that now is correct

* Revert data-kind attribute

* Handle LinkPreview styling in .pcss

* Fix flaky test: Avoid racing the lazy-loaded ManageEventIndexDialog

* Take care of review comments

* Updated snaps

* Updated snaps again after merge

* Remove !important from RoomStatusBar
2026-04-30 11:54:49 +00:00
Michael Telatynski
aeefdfd751
Remove duplicated UI in appearance settings (#33336)
* Remove duplicated UI

This setting is available on the same tab in a higher up section already

* Update screenshot
2026-04-29 15:53:00 +00:00
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
Robin
03b730db58
Update toast styles, improve incoming call notifications (#33043)
* Update design of incoming call notifications

* Make toast show avatars of group call participants

* Further expand test coverage for call notifications

* Update screenshots

* Update screenshots

* Delete unused variables

* Upgrade Element Call to v0.19.2

For the new group call intents.

* Consolidate some branches

* Apply Compound spacing variables a little more

* Fix lints

* Exclude Element Call assets from being re-minified to fix build
2026-04-27 14:37:42 +00:00
Will Hunt
4a14e203a5
Slight adjustments to URL Preview text sizing (#33282)
* Remove CSS specification of fonts

* Reduce font size

* Remove margin

* Update snaps
2026-04-24 14:23:35 +00:00
Richard van der Hoff
c4638d1773
Promote "Share encrypted history" from labs (#33281)
* Promote "Share encrypted history" from labs

* fix lint

* Update labs.md

* update snapshots

* Update unit tests

* update playwright screenshot
2026-04-23 16:04:09 +00:00
Richard van der Hoff
cd515444a8
Confirm before inviting unknown users to a DM/room (#33171)
* InviteDialog: factor out startDmOrSendInvites

Factor out the logic of calling `startDm` or `inviteUsers` to a helper
function. We're going to need to call this from a second location soon, so this
is useful groundwork.

* Add `UnknownIdentityUsersWarningDialog`

* Add unit tests

* Update playwright tests

* Convert if/else to switch statement

* Convert helper functions to React components

* Factor out "onRemove" callback

* Add clarifying comment
2026-04-22 20:05:31 +00:00
Florian Duros
f4c62abbcd
Room list: assign room to custom section (#33238)
* feat(sc): add new toast type for room list

* feat(sc): add section entries in room list item menu

* feat(rls): expose util functions

* feat: allows to tag room with custom sections

* feat(vm): add new Chat moved toast to room list vm

* feat(vm): add section selection to room list item vm

* feat(e2e): add tests for adding room in a custom section

* test(e2e): update existing screenshots

* chore: fix lint after merge

* chore: remove outline in test
2026-04-22 19:50:54 +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
Michael Telatynski
30f442208a
Fix React hydration issues (#32958)
* Add more playwright axe tests to settings dialogs

* Add utility to jest setupTests to detect React hydration errors

* Iterate jest utility

* Fix axe issue heading-order

* Fix div-in-p issues

* Fix setupTests.ts

* Fix heading order

* Make types happier

* Fix hydration issues of thead containing text nodes

* Update tests

* Fix form-in-form React hydration issues

* Fix li-in-li React hydration issues

* Fix checked in form without onChange React hydration issue

* Fix styling bleeding from _common.pcss

* Update snapshots

* Fix more remaining issues

* Remove _common.pcss h2 rule altogether

* Fix test

* Update snapshots

* Iterate

* Iterate

* Update snapshots

* Simplify diff

* Test

* Update screenshots

* Update screenshot
2026-04-16 13:35:40 +00:00
Florian Duros
d7f5546294
Room list: add custom section creation in SC (#33138)
* feat: add way to create custom section in SC

* feat: disable custom section in vms

* chore: include design tokens icons in vitest config

* test: update screenshot

* chore: use one react import
2026-04-16 13:14:10 +00:00
Florian Duros
23b11aaf86
Update compound web and compound design tokens (#33120)
* chore: update compound web and compound design tokens

* test: update SC snapshots

* test: update EW snapshots

* test: update EW screenshots
2026-04-13 15:40:24 +00:00
Andy Balaam
273a891b7b
Update Exclude Insecure Devices date to October 2026 (#33117) 2026-04-13 13:03:53 +00:00
Richard van der Hoff
eef8cad229
Update to compound-web 9.0.1 (#33095)
* Update to compound-web 9.0.1

There are a couple of breaking changes in v9, leading to the changes in
`BugReportDialog` and `EncryptionCard`.

Most of these updates, however, are snapshot updates, due to changes in the CSS
class names in compound web (which happens due to updates in the CSS content in
those classes; `postcss-modules` generates class names based on the hash of the
CSS).

* update playwright screenshots
2026-04-13 10:16:34 +00:00
Will Hunt
b4d0c21abf
Update URL Preview settings (#32992)
* Remove ability for url previews to be set per-room

* Add ability to enable E2EE URL Previews globally

* Remove old migration

* Cleanup

* Remove room account handler

* update snap

* screenshot updated

* Add a test
2026-04-09 12:32:50 +00:00
renovate[bot]
1dcc19b4b6
Update playwright (#33060)
* Update playwright

* Update snapshots

* Update types

* Update snapshot

* Update playwright-common

* Remove stale screenshots

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2026-04-07 16:16:57 +00:00
R Midhun Suresh
edea3fffdf
Collapsible Left Panel - Ensure that panels have non-fractional widths (#33052)
* Expand panel to full width

* Write tests

* Resize to nearest whole number if necessary

* Update screenshots

* Early return when resizing to whole width

* Update screenshot
2026-04-07 15:44:51 +00:00
Michael Telatynski
6c1dc7051f
Accessibility improvements in settings (#32968)
* Add more playwright axe tests to settings dialogs

* Fix axe issue heading-order

* Fix heading order

* Iterate

* Update snapshots

* Iterate

* Update snapshots

* Iterate

* Update screenshot

* Iterate

* Iterate

* Update snapshot
2026-04-07 15:17:59 +00:00
Michael Telatynski
2d3e2fcb70
Remove global h2 css rule in favour of heading styles/components (#32969)
* Remove global h2 css rule in favour of heading styles/components

* Use Compound Heading in shared-components

and forbid hX elements

* Use Compound Heading in settings

add back margin to some legacy headings

* Tweak some headings

* Update screenshots

* Update screenshots

* Update snapshots

* Tweak .gitignore

* Update snapshots

* Iterate

* Update screenshots

* Update screenshots

* Update screenshot
2026-04-02 16:13:17 +00:00
Florian Duros
0f515f581e
Room list: add default sections (#32785)
* feat: add sections to RLSV3

* feat: add sections in vms

* feat: add room list section labs flag

* fix: wrong margin for room list item when in sections

* feat: hide favourites and low priority filters

* fix: crash when changing filter

* feat: support sticky room in sections

* test: update SC snapshot

* test: update SC screenshot

* test: update RLS tests

* test: add tests to RoomListSectionHeaderViewModel

* test: fix existing test in RoomListViewModel

* test: add sections tests for RoomListViewModel

* test: add e2e tests for sections

* fix: incorrect selected room when expanding/collasping a section

* fix: typo in `roomSkipList`

* feat: use one skip list with all filters instead of one list by tag

* chore: put back comment about `roomIndexInSection`

* chore: add missing `readonly`

* chore: add doc about possible undefined value for room item vm
2026-03-31 18:43:32 +00:00
Florian Duros
b3299dfbb3
Fix icon size of badges in right panel (#32952)
* fix: icon size of badges in right panel

* test: update snapshot

* test: update screenshot
2026-03-26 20:29:21 +00:00
R Midhun Suresh
99e6ede9f1
Implement collapsible panels for the new room list (#32742)
* Add `react-resizable-panels` library

* Implement a custom SeparatorView

* Add a `LeftResizablePanelView`

* Add a custom `GroupView`

* Export everything from shared-components

* Make it possible to track width/collapse state through settings

* Add a view model to drive the views

* Render views without disrupting the old room list

* Fix lint error

* Disable user interaction on collapsed panel

* Prevent widgets fron hijacking pointer events

* Expand to full width on separator click

* Separator should be shown when focused via keyboard

* Update tests

* Use data-attribute for hover

* Write stories for SeperatorView

* Write vite tests for SeparatorView

* Write tests for LeftResizablePanelView

* More tests

* Fix lint errors

* Fix flakey border on the roomlst

* Fix storybook axe violation

* Update snapshots

* Fix playwright tests

* Fix sonarcloud issues

* Use translated string

* Add better js-doc comments

* Rename `ResizerSnapshot` to `ResizerViewSnapshot`

* Externalize react-resizable-panels

* Link figma designs to stories

* Write playwright tests

* Update screenshots

* Fix lint errors

* Update more screenshots

* Update more screenshots

* Fix flaky toast test

* Update apps/web/playwright/e2e/crypto/toasts.spec.ts

Co-authored-by: Andy Balaam <andy.balaam@matrix.org>

* Fix indentation

---------

Co-authored-by: Andy Balaam <andy.balaam@matrix.org>
2026-03-23 13:33:32 +00:00
Andy Balaam
29c24f1f89
Provide the Learn More link for verify_toast_description (#32857)
* Provide the Learn More link for verify_toast_description

* Screenshot test for verify this device toast
2026-03-19 13:54:06 +00:00
ElementRobot
8a38a2fe4a
Localazy Download (#32808)
* [create-pull-request] automated change

* test: update SC tests

* test: update SC screenshots

* test: update EW snapshots

* test: update EW tests

* test: update EW e2e tests

---------

Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-03-18 15:53:28 +00:00
Andy Balaam
2128c1884c
Hide the names of banned users behind a spoiler tag (attempt 2) (#32636) 2026-03-18 10:47:16 +00:00
Andy Balaam
cace9d918f
Screenshot and snapshot tests for event list summaries (#32788)
* Playwright tests for the event list summary

* Add snapshots for event summary tests
2026-03-16 12:16:56 +00:00
Valere Fedronic
3e88689d69
feat: Devtool for sticky events MSC4354 (#32741)
* feat: Devtool for sticky events MSC4354

* Update devtool snapshot to add sticky state devtool

* Update devtool playwright screenshot

* review: Use UserFriendlyError instead or Error

* review: fix docs

* review: remove css in js, remove js hover tracking

* review: use keyboard enums

* add a check to see if homeserver supports sticky events

* fixup: prettier

* review: No static inline styles

* review: use cpd spacing / border / color values

* cleanup keyboard code

* Fix unsupported alert look

* review: proper useState usage (no | null)

* review: useAsyncMemo instead of useEffect

* review: use useTypedEventEmitterState

* fix: better support for empty string event type

* review: remove redundant expired state
2026-03-16 10:54:16 +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
Michael Telatynski
095b407dae
Realign MessageActionBar to Figma designs (#32722)
* Realign MessageActionBar to Figma designs

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

* Iterate style based on review

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

* Move tooltips to above MAB

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

* Update event bubble tile style

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

* Update screenshots

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

* Update apps/web/res/css/views/messages/_MessageActionBar.pcss

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

* Iterate

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

* Update screenshot

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Florian Duros <florianduros@element.io>
2026-03-09 10:29:15 +00:00
ElementRobot
00dd0c48ba
Localazy Download (#32714)
* [create-pull-request] automated change

* Use a dedicated string for public access in settings.

* Fix tests due to copy changes.

* Fix tests due to copy changes.

* Fix tests due to copy changes.

* Fix tests due to copy changes.

* Fix tests due to copy changes.

* Updated visual tests screenshots due to copy changes.

* Updated visual tests screenshots due to copy changes.

---------

Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
Co-authored-by: mxandreas <andreass@element.io>
2026-03-09 09:43:00 +00:00
Will Hunt
b523237395
Playwright tests for linkification (#32737)
* Add linkification tests for messages / topic.

* Add test for permalinks

* Migrate permalink test

* fixup test

* Fix tests
2026-03-06 13:02:31 +00:00
renovate[bot]
699a8759c5
Update ghcr.io/element-hq/synapse:develop Docker digest to b256d74 (#32695)
* Update ghcr.io/element-hq/synapse:develop Docker digest to b256d74

* Update screenshot due to new API availability on Synapse

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>
2026-03-03 19:42:09 +00:00
Will Hunt
f82a3ef1bb
Update critical gradient for room status bar (#32575)
* Update critical gradient for room status bar

As per design request, this has been updated to be much more subtle
https://github.com/element-hq/compound-design-tokens/pull/232

* update shared-component

* Cleanup

* Update snaps

* description fix color

* More cleanup

* Use the correct border color

* new snaps

* fix border, button placement, fonts etc

* update lock

* Update status bar

* Update playwright snaps

* Update snap icon

* Update other banners

* update snap

* fixup
2026-02-26 15:10:54 +00:00
Florian Duros
dd1db8c14b
Room list: center focus outline of room list item (#32637)
* 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
2026-02-25 19:45:22 +00:00
David Baker
db3af8e653
Fix misaligned cross in complete security dialog (#32614)
* Fix misaligned cross in complete security dialog

* It's not a dialog

* Need to wait for login to finish

* Add screenshot

* Move snapshot to thr right place
2026-02-25 13:00:25 +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