* 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
* Experimental custom status
* Screenshot
* snapshots
* Update button label and fix test
* 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
* Test for custom status
* 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
* Add option to hide quick reactions (and preview) bar
* Fix test
to use emoji not in the quick reactions bar
* Apply button types to new version
* Add comment
* Disable screenshot
as per comment
* Fix hover / background / border styles
* Screenshot
* Don't use the reactions row because it's gone now
* Fix spacing in user status dropdown
Updates to renderItem based Dropdown, allowing the item in the dropdown
to be customised.
Requires https://github.com/element-hq/compound-web/pull/538 (and
will be required to update to the version of compound it gets
released in).
* Update to new compound
* snapshots
* Fix tests
---------
Co-authored-by: Will Hunt <2072976+Half-Shot@users.noreply.github.com>
Co-authored-by: David Langley <davidl@element.io>
* 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
* Experimental custom status
* Screenshot
* snapshots
* Update button label and fix test
* 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
* Test for custom status
* 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
* Add option to hide quick reactions (and preview) bar
* Fix test
to use emoji not in the quick reactions bar
* Apply button types to new version
* Add comment
* Disable screenshot
as per comment
* Fix hover / background / border styles
* Screenshot
* Don't use the reactions row because it's gone now
* Trim overly verbose comment
---------
Co-authored-by: Will Hunt <2072976+Half-Shot@users.noreply.github.com>
Co-authored-by: David Langley <davidl@element.io>
* 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
The separator has to tell a click apart from a drag, because dragging it
also ends in a click, and it did so by treating any pointer movement at all
between press and release as a drag. A pointer rarely holds perfectly
still, least of all on a trackpad, so clicking the separator to open the
room list often did nothing and had to be tried again.
Movement is now measured from where the pointer went down and only counts
as a drag past a few pixels, which means the handlers need the pointer
position and the separator passes its events through to get it. Movement
with nothing held down is ignored too: those events fire on hover, and one
of them used to spend the click that came after it.
Tests: a click that wanders a couple of pixels still opens the panel, as
does one that follows moving across the separator, while a real drag is
still no click.
Co-authored-by: R Midhun Suresh <hi@midhun.dev>
* 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>
* Refactor Mjolnir body to use render-only view model actions
* Extracted isMjolnirBodyAllowed from MessageEvent
* Converted the new test file to vitest
* fixed collpased url preview logo aspect ratio for chrome because chromium doesnt understand that aspect ratio means aspect ratio
* updated pngs
* update snapshot
* 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
* Fetches link previews for all links in message (instead of just the first one)
* message url component to display preview for multiple urls
* Revert visible behaviour back to only showing one URL preview
While fetching all link previews in the text message.
* Moved URL preview VM to MessageComposer
* Added com.beeper.linkpreviews to messages sent with the markdown compositor
* MSC 4452 implemented for the older (markdown) composer
* claude told me to use logger instead of console
* Previews generated with snapshot instead of vm
* moved attachPreviews to a separate file
* added attach URL previews to rich text editor
* don't let attachUrlPreviews block clearning the composer
* fixed linter errors
* moved url preview behind labs feature gate
* passed linters
* moved lab feature checking to where attach preview is used
* claude wrote some unit tests for url previewing
* fixed linter errors
* added feature to labs.md
* fixed linter errors
* fixed oxfmt error
* set previews to none if all previews failed
* resolved PR reviews besides the ones that requires a larger code change
* moved url preview VM creation to message composer
* removed delay when clearing composer url preview on message send
* Collpased URL previews in timeline
* CSS for collapsed URL previews
* fixed typo thing?
* update class for this component
* remove dead code from css
* minor changes to stop using globals everywhere
* moved debouncing responsibility to urlpreviewVM
* minor lint fixes
* added comment
* remove composer content from the state of urlpreview, moved it to the vm
* urlpreviewwrapper depends on the vm only
* added comments
* edited the comment
* one slow preview no longer blocks up the current batch of previews from loading
* show failed and loading url previews
* collapsed urlpreview styles to match the expanded preview
* css formtting
* composer url preview summary bar
* prefer site icon
* Revert "Merge branch 'url-preview-loading-indicator' into collapsed-url-previews"
This reverts commit b7a1ccb0e74661458e16c128814ba1939bdf400e, reversing
changes made to 1340b216407cf9af95741174819f97a144c13bb3.
* updated shared-components Punit test snapshots
* updated snapshots
* wait for tall image to load before capturing snapshot (claude wrote this)
* try remove requestanimation frame
* use semantic tokens instead of specifying hard values in some places
* Update packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx
Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
* changed css so previews looks less horrendous on different front sizes, particularly very small font sizes
* updated unit test snapshots
* regenerated playwright story screenshots
---------
Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
* 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
* Conform to oxlint rule jsx-a11y/role-has-required-aria-props
* Conform to oxlint rule jsx-a11y/role-supports-aria-props
* Conform to oxlint rule jsx-a11y/interactive-supports-focus
* Conform to oxlint rule jsx-a11y/click-events-have-key-events
* Update snapshots
* Add user status to autocomplete suggestion
* Add test for PillCompletion titleIcon
* Convert to vitest
* Add test for UserStatusIcon
* Switch the user status icon view to be a view model based component
* Screenshots
* Add .catch
* Add test for UserProvider
* Upgrade to TypeScript 7
for massive tsc speed gains
Those on WebStorm will want to upgrade to EAP to reap the benefits of the new TSGo compiler
Some things (module-api & shared-components) which utilise unplugin-dts (and api-extractor) need to hold a copy of ts6 for its conventional lib format and API. TS7 ships with no API until TS7.1.
Other things which use eslint also need ts6 for typescript-eslint.
Some type changes were necessary as TS7 caught some issues.
* Add knip exception
* Fix bad merge
* Fetches link previews for all links in message (instead of just the first one)
* message url component to display preview for multiple urls
* Revert visible behaviour back to only showing one URL preview
While fetching all link previews in the text message.
* Moved URL preview VM to MessageComposer
* Added com.beeper.linkpreviews to messages sent with the markdown compositor
* MSC 4452 implemented for the older (markdown) composer
* claude told me to use logger instead of console
* Previews generated with snapshot instead of vm
* moved attachPreviews to a separate file
* added attach URL previews to rich text editor
* don't let attachUrlPreviews block clearning the composer
* fixed linter errors
* moved url preview behind labs feature gate
* passed linters
* moved lab feature checking to where attach preview is used
* claude wrote some unit tests for url previewing
* fixed linter errors
* added feature to labs.md
* fixed linter errors
* fixed oxfmt error
* set previews to none if all previews failed
* resolved PR reviews besides the ones that requires a larger code change
* moved url preview VM creation to message composer
* removed delay when clearing composer url preview on message send
* minor changes to stop using globals everywhere
* moved debouncing responsibility to urlpreviewVM
* minor lint fixes
* added comment
* remove composer content from the state of urlpreview, moved it to the vm
* urlpreviewwrapper depends on the vm only
* added comments
* edited the comment
* updated snapshots
* claude fixed tests
* enable feature for tests that requires MSC4095
* updated snapshot
* Add a common view snapshot type
This will contain the common snapshot values used by both dm ongoing
call tile view and room ongoing call tile view.
* Implement the common join button component
* Implement the call icon component
* Implement the common container component
* Support single digit minutes in existing clock component
* Implement the view for duration component
* Add static profile pics to be used in storybook tests
* Implement view for member avatar component
* Implement view for face pile component
* Implement RoomOngoingCallTileView
* Implement DmOngoingCallTileView
* Support the new tiles in RootTileView
* Export all the views
* Update all the screenshots
* Add a comment about the 10px margin
* Add comments to explain css heights and widths
* Add user status in user info right panel card
Adds a very simple view component to do so, which will be reused
in the DM room header.
Also comment the other status view so the difference is clear.
* Add screenshot
* Add test
* Rename snapshot
* 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
* Center long user ids in the user menu
The span itself was centered but the text wasn't centered in the span
so long user IDs would be left justified once they wrapped onto two
lines.
* Update screenshot
* Snapshot
ZackandGitHub
rbondessonandGitHub
SiriusandGitHub
Florian DurosandGitHub
