Notes: Add a "Resolved" divider above resolved notes

[adamsilverstein]

What?

Adds a centered Resolved divider above the resolved notes in the "All notes" sidebar, so a note's status is easy to scan at a glance.

Fixes #72752.

This reimplements @Mamaduka's proof of concept from #72990 on the refactored collab-sidebar structure (the original PR's comments.js no longer exists), and follows the design @jasmussen marked up on the issue.

Why?

When the notes panel is open it shows unresolved, orphaned, and resolved notes in one continuous list with no visual break. There's no clear signal for where the "still needs attention" notes end and the "done" notes begin.

How?

• notes.js: in the "All notes" view, find the first resolved note (status approved with a still-present block) and render a Resolved divider directly above it. The floating view lists unresolved notes only, so it gets no divider.
• hooks.js: orphaned notes (whose associated block was deleted) now sort with the active notes above the divider rather than at the very bottom, since they may still need attention. This matches the feedback on Notes: Add status divider when listing all notes #72990 to keep orphaned notes grouped with the unresolved ones.
• style.scss: the new __status-separator reuses the existing __more-reply-separator line treatment, with a small muted, uppercase label.

Scope is intentionally minimal, the consensus subset that both @jasmussen and @desrosj signed off on. It leaves the broader questions (a separate "Detached" section for orphaned notes, or badges) for a follow-up.

Testing Instructions

1. Create a post and add notes to a few different blocks.
2. Open the All notes sidebar (top bar).
3. Resolve one of the notes.
4. Confirm a centered Resolved divider appears above the resolved note, separating it from the still-active notes.
5. Reopen the note and confirm the divider disappears when nothing is resolved.

Testing Instructions for Keyboard

Same as above; the divider is decorative and does not change tree navigation.

Screenshots or screencast

Original block deleted for one note (see tagging)

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: jeffpaul <jeffpaul@git.wordpress.org>
Co-authored-by: desrosj <desrosj@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Size Change: +152 B (0%)

Total Size: 7.68 MB

📦 View Changed

Filename	Size	Change
build/scripts/editor/index.min.js	493 kB	+103 B (+0.02%)
build/styles/editor/style-rtl.css	31 kB	+13 B (+0.04%)
build/styles/editor/style-rtl.min.css	26.3 kB	+11 B (+0.04%)
build/styles/editor/style.css	31 kB	+13 B (+0.04%)
build/styles/editor/style.min.css	26.2 kB	+12 B (+0.05%)

_{compressed-size-action}

[github-actions]

Flaky tests detected in a81dd9c.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/29010962973
📝 Reported issues:

• [Flaky Test] activate block theme when live previewing in edit mode #77712 in /test/e2e/specs/site-editor/activate-theme.spec.js

[adamsilverstein]

I added some screenshots to the description. I realized reviewing this that we only need to account for orphaned notes. deleted notes are removed entirely and do not show in the Notes sidebar at all. I believe thats the expected behavior. cc: @jasmussen @Mamaduka

[adamsilverstein]

cc: @fcoveram for design feedback

[jeffpaul]

Its not immediately clear if the resolved notes are the ones above or below the marker line, so perhaps some additional context could help there? "Resolved Notes below"? "⌄ Resolved ⌄"?

[adamsilverstein]

Its not immediately clear if the resolved notes are the ones above or below the marker line, so perhaps some additional context could help there? "Resolved Notes below"? "⌄ Resolved ⌄"?

I like the idea of making it clearer that the divider does now, although I'm not sure about the arrows. maybe we could add a header at the top of the list that is "Unresolved" - I feel like part of what is odd about the divider is its a header for the list of items, but the top section doesn't have a matching header.

Note: the original design sketch was from #71957 (comment)

[jeffpaul]

Yeah, adding an "Unresolved" or "Open" (whatever term makes sense) would probably resolve my concern here; good call @adamsilverstein

[Mamaduka]

I think it's a nice, quick win until we introduce a filter or something similar.

I've pushed some changes to the e2e tests, and, aside from my other note, everything is working as expected.

[Mamaduka]

Do we need to add a context for this translation string?

I've also experimented with using the Text component with a small heading style. Here is the result:

Screenshot

[jasmussen]

I like the "Text" version above 👍 👍

[jasmussen]

@adamsilverstein @Mamaduka if we use the Text version, can we avoid some of the CSS?

In principle this PR is great, looks fantastic, happy to ship. I mostly want to avoid as much CSS as we possibly can, as a general rule of thumb, in favor of components whose intrinsic styles propogate. It's not a no-go, it's certainly necessary at times, just sharing the notion.

[Mamaduka]

We'll need custom CSS to add a little space between the text and the separator line. Rest can be removed.

I think padding can also be inlined if we really want to be fully custom CSS-free, but I haven't tested it.

[Mamaduka]

Okay, managed to fully remove this CSS, thanks to some modern CSS and Claude. Here's summary:

Pseudo-element cleanup (::before/::after on both separators):

• Removed display: block and width: 100% (both redundant under flex). Kept flex: 1, height: 1px, background-color: $gray-300.

Removed the .editor-collab-sidebar-panel__status-separator p rule entirely:

• padding: 0 $grid-unit-10 → now the Stack's gap prop (token-based).
• margin: 0 and font-weight: 600 → now handled by the Text component.

[jasmussen]

Lovely work, I'm a fan, looks good, works in my testing. I left a few notes, nothing blocking.

[adamsilverstein]

Do we need to add a context for this translation string?

I assume you mean so its clear a note has been resolved? maybe not its in a notes file...

Lets merge as is and we can add this later if suggested.