Skip to content

Conversation

noeliaSD
Copy link
Contributor

@noeliaSD noeliaSD commented Aug 7, 2025

Closes #18186

What does the PR do

This PR introduces a refactor of the Activity Center, transitioning it from a popup-based component to a layout-based component. In parallel, it includes improvements to notification components and a small feature enhancement to StatusBetaTag.

📝 NOTE for the reviewer

  • Please disregard the current UI styling. Minor visual adjustments were made for consistency, but the layout does not yet follow the new design guidelines and will be updated in a future steps.
  • Some TODOs are still present in the code. These are non-blocking and can be safely addressed in a follow-up PR.

Key Changes

Refactor: Activity Center Architecture

  • Moved ActivityCenter directory to AppLayouts
    This prepares for its transformation into a layout-based section, reflecting its new architectural role.
    No functional or visual changes introduced at this stage.

  • Converted Activity Center from popup to layout

    • Introduced a new section item in the main navigation bar.
    • Removed all usages of StatusActivityCenterButton, related signals, properties, and logic across layouts.
    • The notification count now updates the badge on the section item directly.
  • Decoupled internal dependencies

    • Removed direct dependency on Chat.RootStore from ActivityCenterNotifications.
    • Removed ActivityCenterStore dependency from individual notification components.
    • Components now receive data via props or higher-level containers for better modularity and testability.
  • Centralized state management

    • Moved ActivityCenterStore instantiation to the root store.
    • Relocated ActivityCenterStore to a new root-level directory to reflect its global, cross-domain nature.

UI & Storybook Improvements

  • Refined layout and spacing for all Activity Center notification delegates.
  • Adjusted text sizes for better readability on various devices.
  • Improved Storybook integration with new interactive controls for easier testing.

Architecture Benefits

  • Better separation of concerns
  • Improved testability of notification components
  • UI consistency across screen sizes

Affected areas

The complete Activity Center feature and related flows

Architecture compliance

Screencapture of the functionality

  • Storybook:
Screen.Recording.2025-08-07.at.22.42.02.mov
  • App:
Screen.Recording.2025-08-07.at.23.01.50.mov

Impact on end user

The location and user experience of the Activity Center notifications will change, as they are now integrated into the main navigation bar rather than displayed as a popup.

How to test

  • Notification rendering
  • Action handling within notification components
  • Badge updates and section navigation
  • Responsive layout behavior on different screen sizes

Risk

There is a moderate risk of introducing regressions across the Activity Center notification feature, particularly in terms of UI consistency and behavior.

@status-im-auto
Copy link
Member

status-im-auto commented Aug 7, 2025

Jenkins Builds

Click to see older builds (93)
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ dd556fd #1 2025-08-07 19:19:11 ~6 min tests/nim 📄log
dd556fd #1 2025-08-07 19:23:55 ~11 min tests/ui 📄log
✔️ dd556fd #1 2025-08-07 19:24:08 ~11 min macos/aarch64 🍎dmg
✔️ dd556fd #1 2025-08-07 19:29:18 ~16 min linux/x86_64 📦tgz
✔️ dd556fd #1 2025-08-07 19:34:32 ~21 min windows/x86_64 💿exe
✖️ dd556fd pr18532 2025-08-07 19:39:55 ~10 min tests/e2e 📊rpt
dd556fd #2 2025-08-07 20:14:06 ~12 min tests/ui 📄log
✔️ dd556fd #1 2025-08-08 08:21:51 ~11 min macos/aarch64 🍎dmg
✔️ dd556fd #1 2025-08-08 08:27:26 ~17 min linux/x86_64 📦tgz
✖️ dd556fd pr18532 2025-08-08 08:51:51 ~24 min tests/e2e 📊rpt
ef62ffb #2 2025-08-08 11:56:41 ~2 min macos/aarch64 📄log
✔️ ef62ffb #2 2025-08-08 12:01:33 ~7 min tests/nim 📄log
✔️ ef62ffb #2 2025-08-08 12:04:23 ~9 min macos/aarch64 🍎dmg
✔️ ef62ffb #3 2025-08-08 12:08:05 ~13 min tests/ui 📄log
✔️ ef62ffb #2 2025-08-08 12:10:04 ~15 min linux/x86_64 📦tgz
✔️ ef62ffb #2 2025-08-08 12:10:29 ~16 min linux/x86_64 📦tgz
✔️ ef62ffb #2 2025-08-08 12:17:05 ~22 min windows/x86_64 💿exe
✖️ ef62ffb pr18532 2025-08-08 12:20:48 ~10 min tests/e2e 📊rpt
✖️ ef62ffb pr18532 2025-08-08 12:21:36 ~11 min tests/e2e 📊rpt
✔️ ef62ffb #2 2025-08-08 13:21:42 ~17 min linux/x86_64 📦tgz
✖️ ef62ffb pr18532 2025-08-08 13:34:34 ~12 min tests/e2e 📊rpt
✔️ 7f36252 #3 2025-08-10 10:24:14 ~7 min tests/nim 📄log
✔️ 7f36252 #3 2025-08-10 10:27:54 ~10 min macos/aarch64 🍎dmg
✔️ 7f36252 #4 2025-08-10 10:29:15 ~12 min tests/ui 📄log
✔️ 7f36252 #3 2025-08-10 10:29:53 ~12 min linux/x86_64 📦tgz
✔️ 7f36252 #3 2025-08-10 10:29:58 ~12 min linux/x86_64 📦tgz
✔️ 7f36252 #1 2025-08-10 10:30:38 ~13 min macos/aarch64 🍎dmg
✔️ 7f36252 #3 2025-08-10 10:38:02 ~20 min windows/x86_64 💿exe
✖️ 7f36252 pr18532 2025-08-10 10:43:41 ~13 min tests/e2e 📊rpt
✖️ 7f36252 pr18532 2025-08-10 10:43:44 ~13 min tests/e2e 📊rpt
✔️ 9645f30 #4 2025-08-10 13:44:21 ~6 min tests/nim 📄log
✔️ 9645f30 #5 2025-08-10 13:50:25 ~12 min tests/ui 📄log
✔️ 9645f30 #4 2025-08-10 13:51:07 ~13 min linux/x86_64 📦tgz
✔️ 9645f30 #4 2025-08-10 13:51:07 ~13 min linux/x86_64 📦tgz
✖️ 9645f30 pr18532 2025-08-10 14:03:00 ~11 min tests/e2e 📊rpt
✖️ 9645f30 pr18532 2025-08-10 14:03:07 ~11 min tests/e2e 📊rpt
✔️ 99f6881 #5 2025-08-10 13:59:35 ~6 min tests/nim 📄log
✔️ 99f6881 #5 2025-08-10 14:05:10 ~11 min macos/aarch64 🍎dmg
✔️ 99f6881 #6 2025-08-10 14:06:10 ~12 min tests/ui 📄log
✔️ 99f6881 #5 2025-08-10 14:06:29 ~13 min linux/x86_64 📦tgz
✔️ 99f6881 #5 2025-08-10 14:06:29 ~13 min linux/x86_64 📦tgz
✔️ 99f6881 #3 2025-08-10 14:12:11 ~18 min macos/aarch64 🍎dmg
✖️ 99f6881 pr18532 2025-08-10 14:18:25 ~11 min tests/e2e 📊rpt
✖️ 99f6881 pr18532 2025-08-10 14:18:41 ~12 min tests/e2e 📊rpt
✔️ 99f6881 #5 2025-08-10 14:27:52 ~34 min windows/x86_64 💿exe
7aebe8c #4 2025-08-10 17:09:48 ~2 min macos/aarch64 📄log
7aebe8c #6 2025-08-10 17:09:48 ~2 min macos/aarch64 📄log
✔️ 7aebe8c #6 2025-08-10 17:14:39 ~7 min tests/nim 📄log
✔️ 7aebe8c #7 2025-08-10 17:19:38 ~12 min tests/ui 📄log
✔️ 7aebe8c #6 2025-08-10 17:20:29 ~12 min linux/x86_64 📦tgz
✔️ 7aebe8c #6 2025-08-10 17:20:34 ~12 min linux/x86_64 📦tgz
✔️ 7aebe8c #6 2025-08-10 17:27:12 ~19 min windows/x86_64 💿exe
✖️ 7aebe8c pr18532 2025-08-10 17:31:24 ~10 min tests/e2e 📊rpt
✖️ 7aebe8c pr18532 2025-08-10 17:31:49 ~11 min tests/e2e 📊rpt
✔️ 2936ddb #7 2025-09-01 11:04:39 ~7 min tests/nim 📄log
✔️ 2936ddb #8 2025-09-01 11:09:41 ~12 min tests/ui 📄log
✔️ 2936ddb #7 2025-09-01 11:10:53 ~13 min linux/x86_64 📦tgz
✔️ 2936ddb #7 2025-09-01 11:13:00 ~15 min macos/aarch64 🍎dmg
✔️ 2936ddb #7 2025-09-01 11:17:03 ~19 min linux/x86_64-nwaku 📦tgz
✔️ 2936ddb #5 2025-09-01 11:18:05 ~20 min macos/aarch64-nwaku 🍎dmg
✖️ 2936ddb pr18532 2025-09-01 11:21:26 ~10 min tests/e2e 📊rpt
✔️ 2936ddb #7 2025-09-01 11:36:21 ~39 min windows/x86_64 💿exe
✔️ ace0daa #8 2025-09-01 12:32:32 ~6 min tests/nim 📄log
✔️ ace0daa #8 2025-09-01 12:37:37 ~12 min linux/x86_64 📦tgz
✔️ ace0daa #9 2025-09-01 12:38:10 ~12 min tests/ui 📄log
✔️ ace0daa #8 2025-09-01 12:39:01 ~13 min macos/aarch64 🍎dmg
✔️ ace0daa #6 2025-09-01 12:44:41 ~19 min macos/aarch64-nwaku 🍎dmg
✔️ ace0daa #8 2025-09-01 12:44:51 ~19 min linux/x86_64-nwaku 📦tgz
✖️ ace0daa pr18532 2025-09-01 12:48:45 ~11 min tests/e2e 📊rpt
✔️ ace0daa #8 2025-09-01 12:57:21 ~31 min windows/x86_64 💿exe
✔️ fd57385 #9 2025-09-01 16:32:05 ~6 min tests/nim 📄log
✔️ fd57385 #10 2025-09-01 16:38:19 ~12 min tests/ui 📄log
✔️ fd57385 #9 2025-09-01 16:39:03 ~13 min macos/aarch64 🍎dmg
✔️ fd57385 #9 2025-09-01 16:39:58 ~14 min linux/x86_64 📦tgz
✔️ fd57385 #7 2025-09-01 16:44:32 ~18 min macos/aarch64-nwaku 🍎dmg
✔️ fd57385 #9 2025-09-01 16:44:43 ~19 min linux/x86_64-nwaku 📦tgz
✔️ fd57385 pr18532 2025-09-01 16:52:24 ~12 min tests/e2e 📊rpt
✔️ fd57385 #9 2025-09-01 17:00:50 ~35 min windows/x86_64 💿exe
✔️ 67939c4 #10 2025-09-02 07:51:59 ~6 min tests/nim 📄log
✔️ 67939c4 #10 2025-09-02 07:58:06 ~12 min linux/x86_64 📦tgz
✔️ 67939c4 #11 2025-09-02 07:58:22 ~12 min tests/ui 📄log
✔️ 67939c4 #10 2025-09-02 07:59:13 ~13 min macos/aarch64 🍎dmg
✔️ 67939c4 #8 2025-09-02 08:04:39 ~18 min macos/aarch64-nwaku 🍎dmg
✔️ 67939c4 #10 2025-09-02 08:05:29 ~19 min linux/x86_64-nwaku 📦tgz
✔️ 67939c4 pr18532 2025-09-02 08:08:58 ~10 min tests/e2e 📊rpt
✔️ 67939c4 #10 2025-09-02 08:24:21 ~38 min windows/x86_64 💿exe
✔️ b129ffb #11 2025-09-02 14:09:11 ~5 min tests/nim 📄log
✔️ b129ffb #11 2025-09-02 14:15:36 ~12 min linux/x86_64 📦tgz
b129ffb #12 2025-09-02 14:16:17 ~12 min tests/ui 📄log
✔️ b129ffb #11 2025-09-02 14:16:39 ~13 min macos/aarch64 🍎dmg
✔️ b129ffb #9 2025-09-02 14:22:08 ~18 min macos/aarch64-nwaku 🍎dmg
✔️ b129ffb #11 2025-09-02 14:22:47 ~19 min linux/x86_64-nwaku 📦tgz
✖️ b129ffb pr18532 2025-09-02 14:27:19 ~11 min tests/e2e 📊rpt
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ 705c2cc #12 2025-09-02 14:38:37 ~5 min tests/nim 📄log
✔️ 705c2cc #12 2025-09-02 14:44:58 ~12 min linux/x86_64 📦tgz
✔️ 705c2cc #13 2025-09-02 14:45:09 ~12 min tests/ui 📄log
✔️ 705c2cc #12 2025-09-02 14:46:12 ~13 min macos/aarch64 🍎dmg
✔️ 705c2cc #12 2025-09-02 14:52:12 ~19 min linux/x86_64-nwaku 📦tgz
✔️ 705c2cc #10 2025-09-02 14:52:19 ~19 min macos/aarch64-nwaku 🍎dmg
✔️ 705c2cc pr18532 2025-09-02 14:56:05 ~11 min tests/e2e 📊rpt
✔️ 705c2cc #12 2025-09-02 15:02:39 ~29 min windows/x86_64 💿exe
✔️ 4aa8106 #13 2025-09-04 10:36:32 ~6 min tests/nim 📄log
✔️ 4aa8106 #14 2025-09-04 10:42:55 ~12 min tests/ui 📄log
✔️ 4aa8106 #14 2025-09-04 10:54:12 ~12 min linux/x86_64 📦tgz
✔️ 4aa8106 #13 2025-09-04 10:55:04 ~24 min windows/x86_64 💿exe
✔️ 4aa8106 #14 2025-09-04 10:55:19 ~13 min macos/aarch64 🍎dmg
✔️ 4aa8106 #12 2025-09-04 11:00:33 ~18 min macos/aarch64-nwaku 🍎dmg
✔️ 4aa8106 #14 2025-09-04 11:04:38 ~22 min linux/x86_64-nwaku 📦tgz
✔️ 4aa8106 pr18532 2025-09-04 11:05:32 ~11 min tests/e2e 📊rpt

@noeliaSD
Copy link
Contributor Author

noeliaSD commented Aug 8, 2025

Pushed rebase!

@anastasiyaig
Copy link
Contributor

i am looking at autotests for this PR , will commit fixes when ready

@Khushboo-dev-cpp
Copy link
Contributor

Khushboo-dev-cpp commented Aug 8, 2025

Screen.Recording.2025-08-08.at.14.54.32.mov
  1. The application toolbar with close/minimize/maximize buttons not visible in this PR?
  2. Also hovering over the items is not working as you can see in the video.
Screenshot 2025-08-08 at 14 59 29 3. Icon missing on this page but see it in the small view? Screenshot 2025-08-08 at 15 14 08 4. The alignment of contact is weird, if this is an existing issue or something you don't want to tackle right now, ignore it

@noeliaSD
Copy link
Contributor Author

noeliaSD commented Aug 8, 2025

Screen.Recording.2025-08-08.at.14.54.32.mov
The application toolbar with close/minimize/maximize buttons not visible in this PR?

Aldo hovering over the items is not working as you can see in the video.

mmmm, I'm on mac os, and you?

Screen.Recording.2025-08-08.at.15.01.35.mov

Copy link
Contributor

@Khushboo-dev-cpp Khushboo-dev-cpp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Massive work!

Love the simplification and getting the nested and nasty embedded Activity Center things outside all the app sections :)

@Khushboo-dev-cpp
Copy link
Contributor

Screen.Recording.2025-08-08.at.14.54.32.mov
The application toolbar with close/minimize/maximize buttons not visible in this PR?
Aldo hovering over the items is not working as you can see in the video.

mmmm, I'm on mac os, and you?

Screen.Recording.2025-08-08.at.15.01.35.mov

me as well, just checkout master and its there
image
but I don't think it can be because of your changes ?

@noeliaSD
Copy link
Contributor Author

noeliaSD commented Sep 2, 2025

While testing these changes, I became doubtful about this solution. It's all about ease of use, at least on desktop:

Reminder: This is just a first step and not the final solution. Here we are only moving from popup to a new section. With the design team we are working on improving navigation, user notifications interaction, actions, etc. There's still a lot more work to do in here.

  • most of the time the right part of the screen remains not used. When reviewing mentions we jump to conversation every time we click one. To continue with mentions we need to go back to notification section.
  • That's an intermediate stage. We will figure it out with the design team how to improve this central panel usage.
  • This navigation to mentions is exactly the same behavior we currently have. When you click on it, the popup is closed and there's an automatic navigation to the chat. Watch this video:
Screen.Recording.2025-09-02.at.14.06.02.mov

Said that, of course, we can improve it. Noted to work on it on next step.

  • currently reviewing process is additionally harder because we lose position on every click:

Noted — we’ll address this in the next iteration. This is essentially a navigation and interaction design issue, and I agree it should be prioritized for improvement.

Other minor issues noticed:

  • placeholder text could be centered

Indeed it was placed completely wrongly. Thanks!
Solved:

Screen.Recording.2025-09-02.at.15.53.18.mov

hover is unpredictable, should work always when mouse is over:

Posted answer here: #18532 (comment)

  • accept/reject buttons doesn't work, only way to do that is via menu/popup

Solved

  • Discover communities button is missing in the left nav bar:

Solved

@noeliaSD
Copy link
Contributor Author

noeliaSD commented Sep 2, 2025

@micieslak @Khushboo-dev-cpp @anastasiyaig I’ve pushed updates addressing your comments, suggestions, and the issues you raised, keeping the changes aligned with the scope of this PR.

Please give it another try and let me know!

@noeliaSD noeliaSD marked this pull request as ready for review September 2, 2025 15:10
@noeliaSD noeliaSD requested review from a team, caybro and alexjba as code owners September 2, 2025 15:10
@noeliaSD noeliaSD requested review from Khushboo-dev-cpp, glitchminer, micieslak and anastasiyaig and removed request for a team and glitchminer September 2, 2025 15:10
@anastasiyaig anastasiyaig linked an issue Sep 3, 2025 that may be closed by this pull request
Copy link
Member

@jrainville jrainville left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Huge work! Just some small questions

Copy link
Contributor

@Khushboo-dev-cpp Khushboo-dev-cpp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM :)

Tested out some of the scenarios as well. Awesome job :)

Copy link
Member

@caybro caybro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work overall!

background: Rectangle {
id: backgroundItem
radius: 6
color: mouse.containsMouse ? Theme.palette.primaryColor3 : Theme.palette.transparent
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this work? I've seen a lot of issues with MouseAreas inside background under Qt6

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mmm, yes.. It works as I explain in here: #18532 (comment)

We need to redo the base notification with the new design and we can take care of the hover as well there. Which type of issues have you spotted under Qt6?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nothing particular, just this MouseArea inside the background pattern

- Applied requested review changes
- Refactored code for clarity
- Minor improvements to consistency and readability
Copy link
Member

@jrainville jrainville left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

@noeliaSD noeliaSD merged commit 235ca08 into master Sep 4, 2025
9 checks passed
@noeliaSD noeliaSD deleted the feat/issue-18186 branch September 4, 2025 18:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fix tests for new activity center [AC - Milestone 1] Define and implement Activity Center Bell visibility when using swipe views
7 participants