Commit Graph
67 Commits
Author SHA1 Message Date
ZackandGitHub 48bd69a8b6 Fix video body interaction in Chrome (#34160) 2026-07-07 10:10:41 +00:00
Will HuntandGitHub be91d19e31 Add URL preview above message composer (#33964)
* Modify LinkPreview to export shared atomics

* Implement MessageComposerUrlPreviewView

* Create UrlPreviewFetcher utility function

* Modify view models

* Implement in composer

* Support running tests in dom-less vitest environment

* Add a playwright test

* hide another one

* fmt

* cleanup

* test rte too

* fixup

* Add back docstring

* cleanup

* off by one

* remove description check

* Cleanup hacks

* Remove another hack

* cleanup

* one more

* fixup window here too

* whoops type

* Rename to be cleaeer

* Trim URLs first

* fix bug
2026-06-30 16:58:03 +00:00
Will HuntandGitHub 6ce24e2668 Improve link preview look and feel (#33981)
* Update link previews to match design

* Preview updates

* snap update for pw

* Retain tall image snap

* Move icon to the right.

* cleanup

* Fix bubbles

* resnappening
2026-06-29 18:50:20 +00:00
David LangleyandGitHub ed768f69e1 Fix ImageReplyBodyView test flake (#33974)
* Fix aspect ratio in ImageReplyBodyView story

* De-flake blurhash story via per-story failureThreshold

Revert the aspectRatio change (it produced byte-identical blurhash output,
so it did not address the flake, and only churned the with-banner baseline)
and instead allow a small per-story failureThreshold on LoadingWithBlurhash.
The blurhash <canvas> rasterizes to one of two ~33px-apart variants per run;
this tolerates that benign jitter while keeping the strict 3px elsewhere.
2026-06-26 14:09:53 +00:00
ZackandGitHub 9df1a616a1 Phase 1: Add shared MImageReplyBody view (#33517)
* Add shared image reply body view

* Added storybook screens

* Fix Prettier

* Add image reply body view coverage

* Show image reply banner in visual story

* fix annotation issue with stories

* stop blurhush from reanimating to pass CI image diff
2026-06-03 08:08:21 +00:00
ZackandGitHub 1c04814c2b Refactor EventPreview to shared MVVM (#33646)
* Refactor EventPreview to shared MVVM

* Fix EventPreviewView export formatting

* Snapshots images for stories

* Deduplicate event preview formatting

* Handle event preview update failures

* Coalesce event preview updates

* Wait for event preview test expectations
2026-06-02 08:36:28 +00:00
rbondessonandGitHub fc23fcad47 Make shared-components tiles render identically outside Element Web - #4 (#33622)
* Use shared MessageTimestampView in edit history

* Move timestamp typography into shared component

* Updated snapshots

* Update comments after clean up

* Fixed sonar issue and added tests for improved coverage

* Fix Prettier issue

* Fix font-size on timestamps and toolbar button sizing

* Updated snapshots

* Updated Storybook screenshots

* Updated screenshots

* Clean up app/web unused/redundant styling for disambiguated profile

* Fix merge error

* Fixes after merge

* Fixes after merge
2026-06-01 05:47:59 +00:00
ZackandGitHub 92383e3f50 Removing the wierd blue border color when focused + adjusted the bord… (#33630)
* Removing the wierd blue border color when focused + adjusted the border to show when squeezed at the end of border

* Update snapshots

* Update edited code block screenshot
2026-05-29 09:00:23 +00:00
rbondessonandGitHub 8aa5c175ad Fix story book title (#33644) 2026-05-28 11:28:00 +00:00
ZackandGitHub 3bb9cb2234 Refactor ThreadSummary to MVVM (#33603)
* Refactor ThreadSummary to MVVM

* Stories Snapshot images

* Add ThreadSummary ViewModel coverage

* Fix ThreadSummary preview avatar rendering

* Remove ThreadSummary classnames helper

* Fix Prettier

* Match ThreadMessagePreview typography

* Move folder to correct path and fix storybook path

* Catch ThreadSummary preview refresh errors

* Update snapshot images + fix prettier

* Fix ThreadSummary classNames import

* Update Images

* Remove wrong path
2026-05-28 08:57:55 +00:00
34c388f760 Refactor E2eMessageSharedIcon to MVVM (#33544)
* Refactor E2eMessageSharedIcon to MVVM

* FIx Prettier and i18n

* Fix prettier

* Remove legacy E2eMessageSharedIcon component

* Cover E2eMessageSharedIcon MVVM updates

* Fix prettier

* Update apps/web/src/components/views/rooms/EventTile.tsx

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* Skip unknown E2E shared icon visual

* Track E2E shared icon listener disposal

* Remove E2E shared icon room state guard

* Remove E2E shared icon client resync

* Use built-in disposables for shared icon VM

* Update shared icon VM without React key

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-05-28 08:01:39 +00:00
ZackandGitHub 384db1faaf Move E2ePadlock icon colors to CSS module (#33577)
* Move E2ePadlock icon colors to CSS module

* update react id labelling

* Update E2eMessageSharedIcon snapshots
2026-05-26 07:13:15 +00:00
rbondessonandGitHub 7285293b7b Make shared-components tiles render identically outside Element Web - # 3 (#33529)
* Clean up unused app/web styling for ReactionsRow

* Align shared Storybook theme root with app/web

* Move PlayPauseButton styling into shared component

* Use closest compound icon color for all crypto events in both app/web and Storybook

* Updated snapshot

* Experimental strict color matching threshold for playwright

* Experimental color matching threshold for playwright

* Revert color matching threshold for playwright to the default value

* Updated screenshots after matching icon size in audio player with other media body components

* Changed icon color for crypto events accroding to recommendation from the design team

* Use --cpd-color-icon-primary for all crypto events

* Updated snapshots and screenshots after icon color changes

* Updated app/web snapshots and screenshots
2026-05-22 16:00:38 +00:00
rbondessonandGitHub 80024991aa Stabilise React useId values in DOM snapshots in element-web (#33579)
* Stabilise React useId values in DOM snapshots - app/web

* Stabilise React useId values in DOM snapshots - shared components

* Update additional snapshots

* Added comments and changed replace pattern to 'react-use-id-N'
2026-05-21 13:30:05 +01:00
ZackandGitHub 223a861535 Move E2ePadlock to shared components (#33538)
* Move E2ePadlock to shared components

* Add storybook images

* Move translation to shared components

* Fix E2ePadlock story accessibility

* Update E2eMessageSharedIcon test for padlock role
2026-05-20 13:20:17 +00:00
Will HuntandGitHub 02b6520f09 Module API for adding new file upload mechanisms (#33355)
* Initial reword of upload to MVVM.

* Update tests

* More incremental improvements

* Refactor tests to use helper method for composer uploads.

* Add drag and drop tests

* lint

* Add commentary

* fixup test

* More precise selector

* Retarget uploads

* lint

* fixup

* one more type

* update snap

* Fixup composerUploadFiles

* fix import

* lint

* Copy and paste fixes too

* Add tests for pasting

* Add tests for pasting files.

* Remove redundant fn

* rm comment

* tidy up

* Test cleanup

* More clean up

* another fix

* Begin fleshing out

* Park changes

* More stuff

* Use condensed version

* Cleanup tests

* more cleaning

* last bity

* Add a test for the composer

* Park up changes

* Rewrite Measured to be a functional component

* Add tests to cover narrow viewports

* lint

* breakpoint is optional

* Cleanup

* Support narrow mode

* fixup

* begone

* Provide default value

* add label

* fixup test

* update copyright

* cleanup

* Be a bit more lazy with FileDropTarget

* remove a debug statement

* Fixup

* fix two snaps

* Update screenshot

* and the other one

* Update snaps

* unfake CIDER

* update screens again

* remove extra test

* Undo accidental snapshots

* Bit of tidyup

* fixup

* even more tidyup

* may drag and drop file

* tidy up again

* snap snap snap

* Use load to make sonarQube happy

* Bunch of refactors

* More cleanup

* cleanup debug code

* tweaks

* remove a test we no longer need

* make it happy

* fix import

* fixup

* Update snaps

* typo

* one off

* Add tests

* lint

* remove only

* Reduce screenshot scope

* fix snapshot usage

* cleanup
2026-05-18 21:41:38 +00:00
rbondessonandGitHub 297ad9bb8d Make shared-components tiles render identically outside Element Web - # 2 (#33485)
* Adding correct layout/density attributes to unit tests

* Move app/web styling to FileBodyView

* Unify styling for MediaBody wrapped components

* Fix prettier issues

* Update app/web snapshots

* Wrap file download and audio loading states in MediaBody

* Revert the MediaBody for download buttons.

* Revert changes for MediaBody wrappers

* Updated snaphots for MediaBody components
2026-05-18 05:59:03 +00:00
R Midhun SureshandGitHub 435acf1ba7 Call Tile - Support declined call tile (#33371)
* Extract shared types and css

* Add CallDeclinedTileView

* Add storybook and view tests

* Support declined event in view model

* Render declined view from tile factory

* Update snapshots

* Add 10px padding to top and bottom

* Distinguish between call declined by us and other users

* Support `isCallDeclinedByUs` in view model

* Update tests

* Add better comments

* Rename getInitial to generateSnapshot
2026-05-14 14:12:05 +00:00
RobinandGitHub c4c32b8334 Make it possible to scroll overflowing hidden events again (#33481)
* Make it possible to scroll overflowing hidden events again

* Make hidden events scrollable without any CSS hacks
2026-05-13 13:30:11 +00:00
ZackandGitHub 8400f56004 Fix edited reply quote collapse (#33487)
* Fix edited reply quote collapse

* Add regression test for edited reply quotes
2026-05-13 10:23:56 +00:00
1e7c9f672a Phase 2 Refactor MImageBody to MVVM and remove legacy component (#33212)
* MVVMing of MImageBody and removing legacy component + css

* Fix Prettier

* update small image to large image in test

* Update test

* Preserve MImageBody legacy class names

* Click image in custom component download test

* Update snapshots

* Update MBodyFactory snapshots

* Added new tests to pass coverage

* Fix prettier

* Remove legacy import that was removed

* Add MImageReplayBody test for coverage

* Remove legacy MImageBody selectors from image view

* Update image body selectors in Playwright tests

* Keep file panel image body spacing compact

* Update apps/web/src/viewmodels/message-body/ImageBodyViewModel.ts

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* added documentation to component

* Fix hidden media placeholder import

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-05-13 06:03:43 +00:00
39607799de Refactor view source event to MVVM (#33428)
* Refactor view source event to MVVM

* remove unused variable since movement

* Update view source event screenshots

* Update packages/shared-components/src/room/timeline/event-tile/body/ViewSourceEventView/ViewSourceEventView.tsx

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* Use view model disposables for source event decryption

* Consolidate source event view model updates

* Fix prettier

* Fix view source expanded class name

* Remove void from source event decryption

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-05-12 11:17:47 +00:00
ZackandGitHub b19025e578 Refactor MJitsiWidgetEvent to shared view MVVM (#33457)
* Refactor Jitsi widget event to shared view

* Align Jitsi widget view model setters

* Inline Jitsi widget icon color

* Remove unused Jitsi timestamp setter

* Tighten Jitsi widget subtitle type
2026-05-12 09:12:43 +00:00
ZackandGitHub 67ea6bfa53 Refactor room avatar event to MVVM (#33473)
* Refactor room avatar event to MVVM

* Cover room avatar event factory wrapper

* Fix prettier

* added screenshots
2026-05-12 08:17:33 +00:00
R Midhun SureshandGitHub 2933b51fea Call Tile - Render a tile showing that a call was started (#32988)
* Ignore specific directories

Otherwise newly generated screenshots will be ignored.

* Create a CallStartedTileView

This view will render a tile that shows when an EC call was started in
the timeline.

* Add storybook tests

* Add vite tests

* Export the view from shared-components package

* Add a viewmodel for driving the view

* Support rendering the tile in the tile factory

* Fix tile rendering

* Add comment to explain css height

* Use semantic token for gap

* Update snapshot

* Use min-height over height

This will scale the element if the user sets a custom font size.

* Don't show timestamp for call started tile

Timestamp is already shown as a part of the tile content.

* Fix broken tile on bubble layout

The tile should be full-width and not shown within a bubble.

* Fix tests

* Update storybook title
2026-05-11 21:12:51 +00:00
ZackandGitHub c62acc6634 Refactor MKeyVerificationRequest to shared view MVVM (#33461)
* Refactor key verification request to shared view

* Fix prettier

* add tests to pass coverage
2026-05-11 11:36:07 +00:00
rbondessonandGitHub eb08257b77 Make shared-components tiles render identically outside Element Web - # 1 (#33418)
* Apply event presentation attributes to timeline previews and errors

* Make TextualEventView render the same in web and storybook

* Make TileErrorView render the same in app/web and storybook

* Updated snapshots

* Make it possible to view shared components with default app/web base styling.

* Adjust styling and add underline to pass tests

* Fix Sonar issue

* Rename base css to root css

* Handle font styling correctly
2026-05-11 11:06:11 +00:00
ZackandGitHub cf9cdbbc86 Refactor Mjolnir body to shared view (#33407)
* Refactor Mjolnir body to shared view

* Update compund css + add snapshot

* Remove from app, and add in shared components

* update css to fix axe fail issue
2026-05-07 13:45:43 +00:00
fa5caa76d9 Refactor hidden body into shared MVVM (#33403)
* Refactor hidden body into shared MVVM

* Snapshots

* Update packages/shared-components/src/room/timeline/event-tile/body/HiddenBodyView/HiddenBodyView.stories.tsx

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* Update apps/web/src/viewmodels/room/timeline/event-tile/body/HiddenBodyViewModel.ts

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* Use compound Text in HiddenBodyView

* Update snapshots

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-05-07 10:11:35 +00:00
ZackandGitHub dfc554aa91 Move unknown body to shared components (#33406)
* Move unknown body to shared components

* added story snapshots
2026-05-06 14:36:34 +00:00
ZackandGitHub b5711264dd Move hidden media placeholder to shared components (#33404)
* Move hidden media placeholder to shared components

* Add Snapshots

* Remove legacy hidden media mx class
2026-05-06 11:23:14 +00:00
rbondessonandGitHub 1f71a3a3fe Make shared components aware of layout and density settings (#33368)
* Add shared event presentation context

* Add app-web event presentation mapper

* Wire event presentation provider into app timelines

* Add Storybook controls for event layout and density

* Wire compact density through app/web event presentation provider

* Use event presentation density for URL previews

* Move TileErrorView layout to event presentation context

* Minor fix and updated snapshot

* Updated snapshots for url preview group

* Prettier fix

* Restore removed story to fix missing playwright test

* Updates after review comments

* Fix prettier issue
2026-05-06 05:30:46 +00:00
rbondessonandGitHub 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
4bee845010 Show user status in timeline (#32991)
* Use other branch

* All the changes that got lost

* Fix merge

* Ensure emoji can only be one character long

* Fixup labs feature

* Remove redundant check

* Update snapshot

* update snapshot

* add snapshot

* unpin

* fix pnpm lock

* undo pn[m lockfile changes altogether

as we shouldn't actually need any afaik

* update snpahot for changed IDs

* Snapshot update

* Snapshot update

* There is now another section

* more snapshots

* more snapshot

* More snapshots

* oh come on snapshots

* actual snapshot update

* Fix sonar issues

* just update the thing manually

* [screams internally]

* Update snapshot

* test for useUserStatus

* Make useUserStatus actually truncate

* Split out slash command to its own file

& add test

* Remove irrelevant comment

* doc

* Comment on non-obvious error message

---------

Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2026-04-29 08:14:22 +00:00
ZackandGitHub 1dd5748d6f Update shared-components story titles to match component paths (#33157)
* Align shared-components Storybook titles with their current paths.

* Rechange the structure for better navigation on storybook

* Update Placement of RoomlistToast to correct catagory

* Update for easier reading

* Adding space for better reading.

* Add spacing for Timeline Event

* add spacing to timeline meta for better reading

* add spacing for better reading for timeline reaction

* Fix wrong placement of Imagebody

* Final Update of structure of shared components

* Update storybook for urlpreviewgroupview
2026-04-28 09:55:48 +00:00
ZackandGitHub 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
Will HuntandGitHub 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
Will HuntandGitHub 6c7c90c15d Stabilize MImage/MVideoBodyView snapshots (#33289)
* Stabilize MImage/MVideoBodyView snapshots

* add to global

* Use vite/client for imports

* fixup
2026-04-24 09:34:15 +00:00
renovate[bot]GitHubrenovate[bot] <29139614+renovate[bot]@users.noreply.github.com>David Baker
c02b970d35 Update dependency @vector-im/compound-web to v9.2.1 (#33270)
* Update dependency @vector-im/compound-web to v9.2.1

* Update button sizes

* More button size updates

* Another button size

* Button size

* Snapshot updates

* Snapshots

* More sm/md

* More button size updates

* snapshot

* and one more from merging develop

* More snapshots

* Phantom typing

* yep, more snapshots

* More snapshots

* More snapshots

* Last ones?

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2026-04-23 12:18:56 +00:00
rbondessonandGitHub bb4a7e9613 Move RovingTabIndex to shared component and use it in ActionBarView (#33263)
* Create a new shared component and a wrapper in app/web

* Move unit tests and add new for better coverage

* Refactor ActionBarView to use the RovingTabIndexProvider

* Clean up the interface and adjust callers

* Added documentation and renamed type for better readabililty

* Reverting the clean up of IContext

* Fix Sonar issues

* More Sonar issus fixed
2026-04-23 09:33:32 +00:00
Michael TelatynskiandGitHub 8f9953f419 Fix flaky test src/room/composer/Banner/Banner.stories.tsx > With Avatar Image (#33275)
* Fix flaky test `src/room/composer/Banner/Banner.stories.tsx > With Avatar Image`

it was previously loading an external (slow) image which was random (!) by design

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

* Fix styling

* Iterate

* Update snapshot
2026-04-23 08:26:48 +00:00
Will HuntandGitHub 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
Richard van der HoffandGitHub e58e803368 Update to compound 9.2.0 (#33173)
* Upgrade to compound 9.2.0

... to pick up the export of PageHeader

* update snapshots

* update shared-components snapshots

* More snapshot updates

* update snapshot

* GHA: Show disk usage on failure
2026-04-17 15:51:43 +00:00
ZackandGitHub d4aea25600 Phase 1 Refactor MImageBody to shared component (#33093)
* Phase 1 Refactor MImageBody to shared component

* blurhash package added into shared components

* Added image snapshots

* Correct the GIF label css design

* Update snapshot for GIF

* crop image correctly

* Update snapshot to reflect updates

* typo fix

* update css to compund variables

* Added tsdoc to function

* Fix inaccurate css and text values in stories

* use const enum instead

* Add i18n to shared components + added string

* Correct css comment information

* Update lockfile
2026-04-16 08:59:32 +00:00
ZackandGitHub 80cf9e5b4a Shared Components Restructure, Cherry Picked | Room Shell Structure (#32917)
* refactor(shared-components): move composer and right-panel tree

* refactor: cleanup remaining structure leftovers

* test(shared-components): add room shell visual baselines

* Correct Path
2026-04-14 13:20:15 +00:00
ZackandGitHub f615968835 Refactoring readMarkerForEvent into ReadMarkerView in shared-components (#32777)
* Refactoring readMarkerForEvent  into ReadMarketView in shared-components

* Use shared ReadMarkerView in MessagePanel

* Rename ReadMarkerView to ReadMarker

* Fix Prettier

* Update snapshots screenshots

* Use plain props for ReadMarker

* Fix Prettier

* Move ReadMarker into room timeline

* Replace ReadMarker nested ternary

* Update snapshot
2026-04-14 11:56:52 +00:00
ZackandGitHub 1670015ef7 Fix missing Storybook autodocs descriptions for shared components (#33135) 2026-04-14 09:53:29 +00:00
Florian DurosandGitHub 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
ZackandGitHub 9e47271afe Fix CSS module name collisions in shared-components Vitest (#33116) 2026-04-13 13:34:23 +00:00
Will HuntandGitHub 17efc81f0b remove disabled on retry room status bar (#33113) 2026-04-13 09:51:55 +00:00