* Refactor NotificationBadge to shared MVVM
* Added snapshot images
* Replace legacy NotificationBadge with adapter
* Fix Eslint
* Use regular NotificationBadge prop names
* Remove legacy NotificationBadge selectors
* Update TAC badge Playwright selectors
* Rename NotificationBadgeAdapter to NotificationBadge
Addresses review feedback: the component is the app-facing badge, not an
adapter, so name it NotificationBadge.
* Make NotificationBadgeView isClickable a required boolean
Addresses review feedback: there is no semantic difference between
`isClickable: false` and `isClickable: undefined` (both render the
non-interactive variant), so the field should be a plain boolean. The
view model always provides it.
* Drop redundant comparison guards in NotificationBadge view model setters
Addresses review feedback: Snapshot.merge already compares each field
with Object.is and only emits when something actually changed, so the
manual equality guards in each setter were redundant. Recompute the
snapshot unconditionally and let merge dedupe.
* Resolve notification badge labels inside NotificationBadgeView
Addresses review feedback: static UI labels belong in the view, not the
snapshot. The view now resolves the knock and unsent-message strings via
useI18n, and the snapshot exposes a showUnsentTooltip boolean instead of
a prebuilt tooltipLabel (and drops knockLabel entirely). Adds the
room|knock_sent and notifications|message_didnt_send keys to the
shared-components i18n catalogue so they resolve in tests and storybook.
* Remove unused translation because of shared components movement
* Fix typescript issue
* Fix lint issue
* Remove unused notification badge count setting
* Pass notification badge class names explicitly
* Exploration of a virtuoso-powered emoji picker
moved to shared components
Fable generated
* fix pnpm lock
* format & fix some lint issues
* wrong import
* fix lint warning
* Fix off-by-one
and remove manual overflow adjustment: let's leave the default unless
it turns out to be necessary. Emoji should not take that long to load.
* Convert to functional component
* WIP: change to one big virtuoso scroller
* Change to use virtuoso's own onRangeChanged
and santitise category data and how it's passed around
* Convert Tabs to functional component
and put the focusing behaviour back with it just keeping track of
refs by itself.
* Absorb two line config file into main component
* Actually add the config to the main file
* Convert emoji to functional
Also make selected always defined and use useCallback.
* QuickReactions to functional component
* Non-default exports & doc
* Search to functional component
* Well it seems to work just fine now
* Use ref prop
* fix lockfile AGAIN
* lint
* Remove default export
* Remove some mx_ classnames and fix the inputRef
to make the arrow keys in the search box work (well, work as much as
they ever did).
* Remove last of the mx_ id / classnames
(except the one in the test)
* Use useMemo to memoize
* No need to export props interface (I think?)
and fix comment now we don't do the mutation stuff anymore
* Fix test
* Fix axe violations & add screenshots
* Avoid comparing dom snapshots in test
* Allow more before or after, just compare order of the ones present in both.
* Switch existing usages to new emoji picker
and kill the old one with fire
* Unused stuff
* Remove i18n strings
* Fix some tests
* Update screenshots
* Fix test
by removing the last of the weird memoized-but-mutated data structure
* Move the string somewhere more sensible than 'a11y'
* i18n lint
* Give the emojis IDs so aria-activedescendant works
* Fix more tests
* Add a small wrapper emoji picker component
This lets us easily memoize the recent emojis when the emoji picker is opened.
Also it saves a bit of boilerplate.
* Remove old emojipicker css
* Typos
Co-authored-by: David Langley <davidl@element.io>
* Use compound constants
* Rethemendex
* Use catalog version for emojibase
* Add comments
* More comments
* Fix comment
* More comments
* more comments (and make them uniform)
* More comments
* Fix pnpm lock again
* Another comment
* Apply button types to new version
* Add comment
* Disable screenshot
as per comment
---------
Co-authored-by: Will Hunt <2072976+Half-Shot@users.noreply.github.com>
Co-authored-by: David Langley <davidl@element.io>
* Make apps/web/playwright comply with strict mode
Otherwise it sometimes fails to compile matrix-js-sdk as strict mode & noImplicitAny both impact how overloads are asserted
* Iterate
* Add new setting to store section state
* Store section state in device settings
* Wire up section header view model and new section functions
* Update room list vm tests
* Add e2e test on section state persistence
* Use more intuitive syntax for SectionExpansionState
* Formatting
* Fix chats section staying expanded
* Add CHAT section case in e2e test
* Add functionality to UIStore
- Make it possible to query if the window is currently being resized
- Emit WidthIncreased/WidthDecreased events
* Change resize behaviour of panel
So that the panel does not become smaller when the window is resized.
This is consistent with the old room-list design.
* Introduce a `CollapseHandler` object
This should be used by the collapse behaviours to collapse/expand the
panel. There's a good reason to not have the behaviours depend directly
on the react-resizable-panels API methods: We dont want the collapse/expand
calls to conflict with each other. See the comments in the code for more
information.
* Introduce a base class for collapse behaviour logic
Behaviours should extend this class to describe when the panel should
automatically collapse and expand.
* Add the window resize collapse behaviour
* Create a central file from which to export all behaviours
* Add a class to orchestrate the collapse behaviours
ResizerViewModel will only have a dependency on this class.
* Collapse panel on app start if necessary
For eg, if the app is started with a small window width, the panel should be
collapsed.
* Wire auto collapse code into the viewmodel
* Write jest tests
* Fix e2e tests
* Fix lint error
* Fix e2e test failures
* Expand the panel before taking screenshot
Fixes incorrect narrow screenshots in RTE.spec.ts and CIDER.spec.ts
* Make comments consistent
* Move tests from jest to vitest
* Fix lint errors
* Improve comment
* Remove variable
* Remove mock
* Fix comment formatting
* Make the text copy button use IconButton
This obviously should be a shared component, but design is looking at
what it will actually look like long term, so until then, let's at
least make it use compound's IconButton so it gets the hover background
state, and sort out the padding & margins.
Requires https://github.com/element-hq/compound-web/pull/528
* snapshots & add aria-label
* more snapshots
* Remove unnecessary width & height
update other screenshots with expected changes
* One more screenshot
* This really shouldn't be necessary: see what test fails
* Fix test to look in screen for the labels
Because the labels from the tooltip don't go in the container, they
get added to the dom at the top level in a floaty bit.
* update snapshots again
* Fix button size
and also add comment to the other place where we fudge the padding
* Update snapshots
* Align to center
* Screenshots
* Add user status to dm room header
Also bumps the gap on the room header items to 8px because that's
what the designs have and I'm assuming it applies to everything, not
just the user status: pending design confirmation.
* Turns out the icons did have 8px gap
but via 4px of padding for reasons I can't discern
* Adjust spacing to 1.5x
as requested by design
* add tests
* Update screenshots
* add test for user status updating
* Add back Favourites and Low Priority filter into shared components
* Wireup RoomList.showSections and filters in room list vm
* Add e2e test for filters and showSection setting
* Adapt OAuth2 implementation to Matrix Spec v1.18
* Handle more cases of oidc->oauth
* Fix test
* Fix read back of oauth2 context
* Iterate
* Fix tests
* Discard changes to apps/web/playwright/e2e/settings/account-user-settings-tab.spec.ts
* Fix test
* Fix test
* Fix test
* Potential fix for pull request finding 'Unused variable, import, function or class'
Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>
* Iterate
* Iterate
* Fix test
---------
Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>
* Change `feature_group_calls` to default to true.
Change state to Beta
* Add `enableLegacyCallsVoip` (clarify: Audio settings relate to Legacy)
Change `element_call.use_exclusively` to just be the default of
`enableLegacyCallsVoip`.
Allow disabling in Legacy in the settings. (overwrite `use_exclusivly`
via `enableLegacyCallsVoip`)
Rename `Voice & Video` to `Legacy Voice & Video`
* improvements
- settings title update to only show legacy when appropriate
- hide menu all together if use_exclusivly is chosen
* simplify by removing the feature_group_calls flag
* smaller cleanup
* fix tests and cleanup
* clarify settings (disable) in config.md
* add back EC relevant settings in room settings dialog
* update screenshots (now default to EC enabled (not disabled)
-> show voice and video tab in room settings
* update screenshots
* always show option to control voice messages input
* lint
* fix test
* disable -> enabled And only have on mic dropdown
* update config.md
* Back to `disabled` (on by default/no config)
* remove element call hint from voice-video settings
* Update apps/web/src/i18n/strings/en_EN.json
Co-authored-by: Robin <robin@robin.town>
* Update apps/web/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx
Co-authored-by: Robin <robin@robin.town>
* review
* cleanup element call url setting (its deprecated/not used anymore)
* clarify, that also jisti will be enabled/disabled by legacy settings
flag
* remove double section
* remove unn exassary element_call configurations
* Update en_EN.json
* Update VoiceUserSettingsTab.tsx
* Make tests use new defaults (enable element call)
* Default events power levels
* format
* review "Enable Legacy voice/video calls" label
* more radical usage of defaults in element_call config.json's
* Update config.json
* Update en_EN.json
* Update RoomSettingsDialog-test.tsx.snap
* Update useRoomCall.tsx
* fix imports
* Update request permission promp to latest designs:
https://www.figma.com/design/aOEkaJtaBmPy058V7uoqVr/Element-Call-Updates---2026?node-id=45-12591&t=7takL39icZwt9YjL-0
* Update config.json.d.ts
* fix usage of `Element` in i18n
* Update General-room-settings-tab-should-be-rendered-properly-1-linux.png
---------
Co-authored-by: Robin <robin@robin.town>
* Add new settings to enable/disable the sections
* Add `RoomList.showSections` settings to preference user settings
* Hide sections ui in room list header
- Hide the collapse/expand button and the *new section* entry in the
menu.
- Display the *start chat* button instead of the compose menu when the
only action available is to create a DM
* Hide sections ui in context menu of room item
* Listen to show section settings in room list item vm
* Listen to show sections setting in room list header vm
* Put all the rooms inside the chat section when sections are disabled
When the chat section is the only section, the room list is in "flat
list mode". Putting all the rooms inside the chat section.
The section filters (aka custom section, favourites etc) are not passed
to the skip list.
* Update preferences settings screenshot
* Add e2e test for RoomList.showSections toggle
* Hide "Chat moved" toast when a room is tagged when RoomList.showSections is disabled
* First stage
1. Make avatar BIGGER!
2. Move status button out to its own component so we can reuse it
* Working version
but using context menu rather than dropdown menu which almost looks
right but not quite.
* Commit the set status view component
* Change to use dropdown with custom trigger
* Show full set status component in user menu
and styling tweaks
* In user menu, clicking takes you to settings
* Add the view model
* oxfmt
because apparently mine had decided to go away
* Fix type import
* Pass set status viewmodel in story
* Bump compound-web
for customisable dropdown
* Snapshot
* Add explicit aria label
as combobox role things don't just inherit from their inner text
* snapshot again
* Only show user status if feature flag enabled
* Make status btton view not a button
because it doesn't need to be. Also rename accordingly.
* Screenshots
* Disable in settings if feature flag off
* Snapshot
* Snapshot again
* Update screenshots
including room settings one which wasn't really supposed to change
although the avatar now takes up the space it's in - leaving it for
design to check.
* Fix size & positioning of the status button
* Update screenshots
* Screenshots
* Test for SetStatusViewModel
* Update set status view on status change
* Use a link component for the status button
which has built in hover state
* Float the status button in a 28px container
vs making it actually 28px min height
* Separate user menu profile into two sections
With 8px gap between things in the two sections and 12px gap between
sections (ie. in practice, 12px gap between the status control and username).
* Screenshot
* Screenshots
* Pass set status view model in the state
rather than as an extra prop. Fixes it in the story too.
* Pass ownprofilestore into the viewmodel
* Don't use snapshot for testing the view model
Avoids getting all the random stuff from the sub VM in the snapshot
and better to test what we care about anyway.
* don't mention the bad word
* Here too
* Don't show user status for guests
* Update guest story to remove user status
* start voice call in pip
* Update jest.config.ts
* fix "join" button to use correct intent
* Add regression test for join button
* Update RoomHeader-test.tsx
* fmt
* Add playwright test
* Fix expected intent on "join" button press
* Add additional pip check to exising:
`should be able to join a ${callType} call in progress` test
* Update RoomHeader-test.tsx
* Device dehydration tests: use common util for recovery setup
We have a utility method for setting up the recovery key, so let's use it.
* Factor out shared method for creating encrypted rooms
* Playwright test for device dehydration
Add a playwright test to check that this stuff actually works.
* Factor out `verifyAfterLogin` as a separate function
* Playwright test for dehydrated devices with MAS
ZackandGitHub
Prince PanchaniandGitHub
hayyaksiandGitHub
Michael TelatynskiandGitHub
Florian DurosandGitHub
R Midhun SureshandGitHub
mxandreasandGitHub
Richard van der HoffandGitHub