Notification Settings: Enable to configure notification settings by site

[gabrielcaires]

Close CML-849

Proposed Changes

• Show list of sites
• Enable search sites
• Enable configuration of different stream channels: Web, Email, and device Notifications.
• Enable the application of the same settings to all sites (by stream channel)

Testing Instructions

[I recommend testing it running in your local env and using a non-A8C to not mess with your notification settings)

• Go to /v2/me/notifications/sites
• In another tab, open the legacy version (https://wordpress.com/me/notifications)
• Search a site on both versions
• Change at least one option by tab on the new version (Web/Email/Devices)
• [New Version] After you see a notification confirming the change was saved, check if the changes are applied to the old version
• Use the Apply to all settings (Pay attention to not mess with your configurations)
• Check if all other sites follow the same configuration you applied in the previous step.

Screenshots

Regular (First site doesnt have site name)

No site found

Opened site

[matticbot]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-158076

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-158076&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-158076&env=a8c-for-agencies

[gabrielcaires]

@lucasmendes-design Do you think we should show a modal warning the users if they click on the "Apply to all sites" without reading it? I got myself doing it, thinking it was a regular save button.

[lucasmendes-design]

I got myself doing it, thinking it was a regular save button.

I think it's because we're very used to clicking on the save button, and since we don't have a pattern, adding a modal can help with this. Here is a suggestion:

[fushar]

@lucasmendes-design do we have design for this page? In the current form, the UI and interactions in this page looks a bit off compared to the rest of HD pages 🤔

[fushar]

We now have guidelines re: snackbar copy, please take a look 😄

[lucasmendes-design]

do we have design for this page? In the current form, the UI and interactions in this page looks a bit off compared to the rest of HD pages 🤔

What do you mean? @fushar

The latest is here:
cTJYw7IO5DvX7XclXAmzJd-fi-672_16921

[lucasmendes-design]

The previous iteration is here:
cTJYw7IO5DvX7XclXAmzJd-fi-1_4

But we needed to move away from this since @gabrielcaires was giving some feedback regarding the UI and how our current components work.

[fushar]

What do you mean? @fushar

The latest is here:
cTJYw7IO5DvX7XclXAmzJd-fi-672_16921

Oops, I missed that, sorry!

My feedback is that for a12s who have hundreds of sites, that page will:

• be blank for a few seconds without any loading indicator (to load the site list)
• will be super long because it shows all site cards without pagination

[lucasmendes-design]

My feedback is that for a12s who have hundreds of sites, that page will:
be blank for a few seconds without any loading indicator (to load the site list)
will be super long because it shows all site cards without pagination

It's fair feedback. For users who have multiple sites, they can search for a website using the search input. The pagination, though, is a good solution to make this page faster. Is it possible to add?

Also, this scenario you just described is very rare for real users.

[gabrielcaires]

It's fair feedback. For users who have multiple sites, they can search for a website using the search input. The pagination, though, is a good solution to make this page faster. Is it possible to add?

@lucasmendes-design and @fushar

We can add a skeleton to be displayed while the list of sites is still loading; it is easy to implement.

Regarding the pagination, I suggest moving it to the next iteration, considering it is an edge case that will require building backend changes to support pagination and search (the search is happening directly on the frontend).

My concern is that the project is already ahead of the expected target date, so it is better to increase the scope only when we have a critical case.

[gabrielcaires]

I think it's because we're very used to clicking on the save button, and since we don't have a pattern, adding a modal can help with this. Here is a suggestion:

@lucasmendes-design Modal applied, thanks

[gabrielcaires]

I updated the PR with an initial loading stat. We can improve it if we want further PRs (just to not block this one)
@lucasmendes-design and @fushar

I used the same spinner we are using on the /site table.

CleanShot.2025-10-01.at.16.55.33.mp4

[fushar]

We can add a skeleton to be displayed while the list of sites is still loading; it is easy to implement.

Regarding the pagination, I suggest moving it to the next iteration, considering it is an edge case that will require building backend changes to support pagination and search (the search is happening directly on the frontend).

Fair points. Agree to both points.

The code looks good. I left a small comment. 👍

[fushar]

I don't think this is actually being used.

[gabrielcaires]

Removed, thanks!

[lucasmendes-design]

I used the same spinner we are using on the /site table.

Do we use them across the product? I thought we would remove it.

[StevenDufresne]

This will need to be accessible.

Some issues:

• Button needs an aria-label.
• Need to communicate aria-expanded state.
• Need to connect the button to the content.

[gabrielcaires]

Good point! I will do it in the next PR because this one is already too big.

[StevenDufresne]

Sounds good! Maybe consider moving this to the component folder as well. I know working on the performance tab, I was looking for something with this functionality.

[gabrielcaires]

Do we use them across the product? I thought we would remove it.

@lucasmendes-design Yes, it is used across multiple components on the new hosting dashboard screen. It may be difficult to see because we have an aggressive cache strategy, but you can view it more clearly if you delete this record from your developer tools > Application > LocalStorage and reload the page.