Pop out of Threads Activity Centre #12136

florianduros · 2024-01-11T16:23:55Z

Checklist

Tests written for new code (and old code if feasible)
Linter and other CI checks pass
Sign-off given on the changes (see CONTRIBUTING.md)

Closes https://github.com/element-hq/wat-internal/issues/144
Figma design

This PR introduces a new way to interact with thread notifications. Following the previous PR #12137 which has added the labs flag and split the unread counts between thread and the main timeline. The threads unreads are now listed in the new Threads Activity Centre (TAC) which is located on the bottom left of Element Web, in the Spaces panel.

The TAC can be opened by clicking on the thread icon in the Spaces Panel:

The dot color on the thread icon depicts the level of the unread in a thread. (Red for mention, green for a message...)
It's merging all the level of all thread unreads. So if one thread has a mention, the icon will be red
According to the user notification settings

The TAC is a pop out:

All the rooms with thread unreads are listed
Sorted by unread levels (red > green > black/white)
A click on a room in the TAC, opens the room and the thread panel

Examples

Opening the TAC

Clicking on the room test in the TAC

Opening the thread with a mention in the room test and opening again the TAC. Both the TAC icon button and the room indicator have been updated to reflect the new state of the thread unreads

Included PRs

Here's what your changelog entry will look like:

✨ Features

Pop out of Threads Activity Centre (#12136). Fixes element-hq/wat-internal#144. Contributed by @florianduros.

…ds/pop-out-panel

…ds/pop-out-panel # Conflicts: # src/i18n/strings/en_EN.json

florianduros · 2024-02-07T10:44:47Z

playwright/e2e/spaces/threads-activity-centre/index.ts

+ * Provides utilities that build on the ability to find messages, e.g. replyTo,
+ * which finds a message and then constructs a reply to it.
+ */
+export class MessageBuilder {


This is basically a lighter version of the read-receipt MessageBuilder.
Copy paste, added mention in thread and removed all the unused parts.

andybalaam

Looks good. I especially like the Playwright tests.

2 tiny comment fixes.

src/Unread.ts

* Add `Thread Activity centre` labs flag * Rename translation string * WIP Thread Activity Centre * Update supportedLevels * css lint * i18n lint * Fix labs subsection test * Update Threads Activity Centre label * Rename Thread Activity Centre to Threads Activity Centre * Use compound `MenuItem` instead of custom button * Color thread icon when hovered * Make the pop-up scrollable and add a max height * Remove Math.random in key * Remove unused class * Change add comments on `mx_ThreadsActivityRows` and `mx_ThreadsActivityRow` * Make threads activity centre labs flag split out unread counts Just shows notif & unread counts for main thread if the TAC is enabled. * Fix tests * Simpler fix * Open thread panel when thread clicke in Threads Activity Centre Hopefully this is a sensible enough way. The panel will stay open of course (ie. if you go to a different room & come back), but that's the nature of the right panel. * Dynamic state of room * Add doc * Use the StatelessNotificationBadge component in ThreadsActivityCentre and re-use the existing NotificationLevel * Remove unused style * Add room sorting * Fix `ThreadsActivityRow` props doc * Pass in & cache the status of the TAC labs flag * Pass includeThreads as setting to doesRoomHaveUnreadMessages too * Fix tests * Add analytics to the TAC (#12179) * Update TAC label (#12186) * Add `IndicatorIcon` to the TAC button (#12182) Add `IndicatorIcon` to the TAC button * Threads don't have activity if the room is muted This makes it match the computation in determineUnreadState. Ideally this logic should all be in one place. * Re-use doesRoomHaveUnreadThreads for useRoomThreadNotifications This incorporates the logic of not showing unread dots if the room is muted * Add TAC description in labs (#12197) * Fox position & size of dot on the tac button IndicatorIcon doesn't like having the size of its icon adjusted and we probably shouldn't do it anyway: better to specify to the component what size we want it. * TAC: Utils tests (#12200) * Add tests for `doesRoomHaveUnreadThreads` * Add tests for `getThreadNotificationLevel` * Add test for the ThreadsActivityCentre component * Add snapshot test * Fix narrow hover background on TAC button Make the button 32x32 (and the inner icon 24x24) * Add caption for empty TAC * s/tac/threads_activity_centre/ * Fix i18n & add tests * Add playwright tests for the TAC (#12227) * Fox comments --------- Co-authored-by: David Baker <dbkr@users.noreply.github.com>

@robintown

Changes in [1.11.59](https://github.com/element-hq/element-web/releases/tag/v1.11.59) (2024-02-27) ================================================================================================== ## 🦖 Deprecations * Enable custom themes to theme Compound ([#12240](matrix-org/matrix-react-sdk#12240)). Contributed by @robintown. * Remove welcome bot `welcome_user_id` support ([#12153](matrix-org/matrix-react-sdk#12153)). Contributed by @t3chguy. ## ✨ Features * Ignore activity in TAC ([#12269](matrix-org/matrix-react-sdk#12269)). Contributed by @florianduros. * Use browser's font size instead of hardcoded `16px` as root font size ([#12246](matrix-org/matrix-react-sdk#12246)). Contributed by @florianduros. * Revert "Use Compound primary colors for most actions" ([#12264](matrix-org/matrix-react-sdk#12264)). Contributed by @florianduros. * Revert "Refine menu, toast, and popover colors" ([#12263](matrix-org/matrix-react-sdk#12263)). Contributed by @florianduros. * Fix Native OIDC for Element Desktop ([#12253](matrix-org/matrix-react-sdk#12253)). Contributed by @t3chguy. * Improve client metadata used for OIDC dynamic registration ([#12257](matrix-org/matrix-react-sdk#12257)). Contributed by @t3chguy. * Refine menu, toast, and popover colors ([#12247](matrix-org/matrix-react-sdk#12247)). Contributed by @robintown. * Call the AsJson forms of import and exportRoomKeys ([#12233](matrix-org/matrix-react-sdk#12233)). Contributed by @andybalaam. * Use Compound primary colors for most actions ([#12241](matrix-org/matrix-react-sdk#12241)). Contributed by @robintown. * Enable redirected media by default ([#12142](matrix-org/matrix-react-sdk#12142)). Contributed by @turt2live. * Reduce TAC width by `16px` ([#12239](matrix-org/matrix-react-sdk#12239)). Contributed by @florianduros. * Pop out of Threads Activity Centre ([#12136](matrix-org/matrix-react-sdk#12136)). Contributed by @florianduros. * Use new semantic tokens for username colors ([#12209](matrix-org/matrix-react-sdk#12209)). Contributed by @robintown. ## 🐛 Bug Fixes * [Backport staging] Fix spurious session corruption error ([#12287](matrix-org/matrix-react-sdk#12287)). Contributed by @RiotRobot. * Fix the space panel getting bigger when gaining a scroll bar ([#12267](matrix-org/matrix-react-sdk#12267)). Contributed by @dbkr. * Fix gradients spacings on the space panel ([#12262](matrix-org/matrix-react-sdk#12262)). Contributed by @dbkr. * Remove hardcoded `Element` in tac labs description ([#12266](matrix-org/matrix-react-sdk#12266)). Contributed by @florianduros. * Fix branding in "migrating crypto" message ([#12265](matrix-org/matrix-react-sdk#12265)). Contributed by @richvdh. * Use h1 as first heading in dialogs ([#12250](matrix-org/matrix-react-sdk#12250)). Contributed by @dbkr. * Fix forced lowercase username in login/registration flows ([#9329](matrix-org/matrix-react-sdk#9329)). Contributed by @vrifox. * Update the TAC indicator on event decryption ([#12243](matrix-org/matrix-react-sdk#12243)). Contributed by @dbkr. * Fix OIDC delegated auth account url check ([#12242](matrix-org/matrix-react-sdk#12242)). Contributed by @t3chguy. * New Header edgecase fixes: Close lobby button not shown, disable join button in various places, more... ([#12235](matrix-org/matrix-react-sdk#12235)). Contributed by @toger5. * Fix TAC button alignment when expanded ([#12238](matrix-org/matrix-react-sdk#12238)). Contributed by @florianduros. * Fix tooltip behaviour in TAC ([#12236](matrix-org/matrix-react-sdk#12236)). Contributed by @florianduros. Changes in [1.11.58](https://github.com/element-hq/element-web/releases/tag/v1.11.58) (2024-02-13) ================================================================================================== ## ✨ Features * 🦀 🔒 **The flag to enable the Rust crypto implementation is now set to `true` by default. This means that without any additional configuration every new login will use the new cryptography implementation.** * Add Element call related functionality to new room header ([#12091](matrix-org/matrix-react-sdk#12091)). Contributed by @toger5. * Add labs flag for Threads Activity Centre ([#12137](matrix-org/matrix-react-sdk#12137)). Contributed by @florianduros. * Refactor element call lobby + skip lobby ([#12057](matrix-org/matrix-react-sdk#12057)). Contributed by @toger5. * Hide the "Message" button in the sidebar if the CreateRooms components should not be shown ([#9271](matrix-org/matrix-react-sdk#9271)). Contributed by @dhenneke. * Add notification dots to thread summary icons ([#12146](matrix-org/matrix-react-sdk#12146)). Contributed by @dbkr. ## 🐛 Bug Fixes * [Backport staging] Fix the StorageManger detecting a false positive consistency check when manually migrating to rust from labs ([#12230](matrix-org/matrix-react-sdk#12230)). Contributed by @RiotRobot. * Fix logout can take ages ([#12191](matrix-org/matrix-react-sdk#12191)). Contributed by @BillCarsonFr. * Fix `Mark all as read` in settings ([#12205](matrix-org/matrix-react-sdk#12205)). Contributed by @florianduros. * Fix default thread notification of the new RoomHeader ([#12194](matrix-org/matrix-react-sdk#12194)). Contributed by @florianduros. * Fix display of room notification debug info ([#12183](matrix-org/matrix-react-sdk#12183)). Contributed by @dbkr.

florianduros added 4 commits January 3, 2024 14:53

Add Thread Activity centre labs flag

b317093

Rename translation string

a07196b

WIP Thread Activity Centre

8f633bd

Merge branch 'develop' into florianduros/threads/pop-out-panel

c241a1a

florianduros added the T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements label Jan 11, 2024

Merge branch 'develop' into florianduros/threads/labs-flag

927eeb6

github-actions bot deployed to Netlify January 11, 2024 16:27 View deployment

github-actions bot deployed to EndToEndTests January 11, 2024 19:42 View deployment

florianduros and others added 5 commits January 12, 2024 14:49

Update supportedLevels

007c4f5

Merge branch 'develop' into florianduros/threads/labs-flag

7f9a9d9

Merge branch 'florianduros/threads/labs-flag' into florianduros/threa…

2d40d2c

…ds/pop-out-panel

css lint

f04f591

i18n lint

6115607

florianduros force-pushed the florianduros/threads/pop-out-panel branch from a02e9c3 to 6115607 Compare January 12, 2024 13:58

github-actions bot deployed to Netlify January 12, 2024 14:03 View deployment

florianduros added 2 commits January 12, 2024 15:08

Fix labs subsection test

c83559b

Merge branch 'florianduros/threads/labs-flag' into florianduros/threa…

531e10a

…ds/pop-out-panel

github-actions bot deployed to Netlify January 12, 2024 14:13 View deployment

github-actions bot deployed to EndToEndTests January 12, 2024 14:33 View deployment

florianduros changed the title ~~Thread Activity Centre~~ Threads Activity Centre Jan 15, 2024

florianduros and others added 4 commits January 15, 2024 15:38

Update Threads Activity Centre label

b226a08

Merge branch 'florianduros/threads/labs-flag' into florianduros/threa…

94ace6f

…ds/pop-out-panel # Conflicts: # src/i18n/strings/en_EN.json

Merge branch 'develop' into florianduros/threads/labs-flag

3734924

Rename Thread Activity Centre to Threads Activity Centre

aefe979

github-actions bot deployed to Netlify January 15, 2024 14:55 View deployment

florianduros force-pushed the florianduros/threads/pop-out-panel branch from fdf3843 to aefe979 Compare January 15, 2024 14:55

github-actions bot deployed to Netlify January 15, 2024 14:59 View deployment

Merge branch 'develop' into florianduros/threads/pop-out-panel

b7f43af

github-actions bot deployed to Netlify January 15, 2024 15:09 View deployment

github-actions bot deployed to EndToEndTests January 15, 2024 15:28 View deployment

github-actions bot deployed to Netlify February 6, 2024 13:20 View deployment

github-actions bot deployed to EndToEndTests February 6, 2024 13:36 View deployment

florianduros mentioned this pull request Feb 6, 2024

Fix Menu focus after closing element-hq/compound-web#147

Merged

Merge branch 'develop' into florianduros/threads/pop-out-panel

c97e9e9

florianduros assigned dbkr and florianduros Feb 7, 2024

github-actions bot deployed to Netlify February 7, 2024 09:49 View deployment

github-actions bot deployed to EndToEndTests February 7, 2024 10:05 View deployment

Add playwright tests for the TAC (#12227)

2ad891b

github-actions bot deployed to Netlify February 7, 2024 10:28 View deployment

florianduros marked this pull request as ready for review February 7, 2024 10:39

florianduros requested review from a team as code owners February 7, 2024 10:39

florianduros requested review from dbkr and robintown February 7, 2024 10:39

github-actions bot deployed to EndToEndTests February 7, 2024 10:44 View deployment

florianduros commented Feb 7, 2024

View reviewed changes

dbkr approved these changes Feb 7, 2024

View reviewed changes

andybalaam approved these changes Feb 7, 2024

View reviewed changes

src/Unread.ts Outdated Show resolved Hide resolved

src/Unread.ts Outdated Show resolved Hide resolved

Fox comments

d8d7217

florianduros enabled auto-merge February 7, 2024 13:30

github-actions bot deployed to Netlify February 7, 2024 13:32 View deployment

github-actions bot deployed to EndToEndTests February 7, 2024 13:49 View deployment

florianduros added this pull request to the merge queue Feb 7, 2024

Merged via the queue into develop with commit a498706 Feb 7, 2024
22 checks passed

florianduros deleted the florianduros/threads/pop-out-panel branch February 7, 2024 14:10

estellecomment mentioned this pull request Mar 19, 2024

Upgrade : 1.11.59 - 1.11.60 - 1.11.61 tchapgouv/tchap-web-v4#939

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pop out of Threads Activity Centre #12136

Pop out of Threads Activity Centre #12136

florianduros commented Jan 11, 2024 •

edited by github-actions bot

Loading

florianduros Feb 7, 2024

andybalaam left a comment

Pop out of Threads Activity Centre #12136

Pop out of Threads Activity Centre #12136

Conversation

florianduros commented Jan 11, 2024 • edited by github-actions bot Loading

Checklist

Examples

Included PRs

✨ Features

florianduros Feb 7, 2024

Choose a reason for hiding this comment

andybalaam left a comment

Choose a reason for hiding this comment

florianduros commented Jan 11, 2024 •

edited by github-actions bot

Loading