Repository navigation
Add search and filters to the All Notes sidebar - #84060
adamsilverstein wants to merge 10 commits into
Conversation
A long list of notes is hard to scan. Add a search field plus status and author filters above the thread list so a thread can be found quickly. The selected thread stays visible so opening a note from the canvas still works while a filter is active. Claude-Session: https://claude.ai/code/session_01VQpfAuMvYyYfwPAmcavDSk
adamsilverstein
added
[Type] Enhancement
🤖 PR meta 🤖🎉 PropsIf you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. Updated as activity occurs, without notifying anyone named here. Add the 📦 Bundle sizeSize Change: +1.23 kB (+0.01%) Total Size: 8.52 MB 📦 View Changed
⚡ PerformanceShow the resultsClient side metrics exclude the server response time. front-end-block-theme
front-end-classic-theme
media-processing
media-upload
post-editor
site-editor
🏁 Flaky testsSome 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. As a user I want to set button hover background color and see it applied on the frontend (Site Editor v2) in
|
…lter # Conflicts: # packages/editor/src/components/collab-sidebar/index.jsx # packages/editor/src/components/collab-sidebar/notes.jsx
Deleting the last thread by the filtered author left the list stuck on "No notes found", and the Author control was hidden once only one author remained. Drop an author filter whose author has no notes left, and keep the control visible while an author filter is active. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VQpfAuMvYyYfwPAmcavDSk
adamsilverstein
changed the title
|
Thanks for the PR! I do have one suggestion, in the future there might be more controls to filter comments in panel (eg. just show orphan comments) and the section can get a bit crowded. What if the filter options are moved inside a collapsible section with a toggle button besides the search bar? Screen.Recording.2026-10-07.at.5.00.52.PM.movAnother nit: When a filter is applied that no nots matching the criteria are found, the fallback message is "No notes found." 
Will it be better if the fallback is something along the lines of "No notes found matching given criteria." so its more apparent, in case the user loses track of filters being applied as currently there's no strong indicator that they're seeing a filtered view? |
Thanks for testing that @yashjawale
I like the suggestion of a filter icon to access filters, this is a very common pattern on the web and makes more room for the search bar which is likely the main tool people want to use. I'll give it a try! cc: @jasmussen @fcoveram for design feedback.
I feel like it's fairly obvious what the message means here, but I'll look into it further and see how we handle empty results in other places in core. |
…lter # Conflicts: # packages/editor/src/components/collab-sidebar/index.jsx # packages/editor/src/components/collab-sidebar/notes.jsx
Gives the search field the full row and leaves room for more filters later, as suggested in review. The toggle shows how many filters are applied so a filtered list is obvious while the panel is closed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016fENxDcG7csgCLvJSZUMnL
|
@yashjawale I gave the filter toggle a try, here is where it landed - let me know what you think! Claude made the change and described it here:
|
|
Thanks! That's amazing. The count badge also helps indicate that filters are active, that takes care of second point too. 🚀 |
| border-radius: var(--wpds-border-radius-lg); | ||
| font-size: 11px; | ||
| outline: var(--wpds-border-width-focus) solid var(--wpds-color-background-surface-neutral-strong); | ||
| color: var(--wpds-color-foreground-interactive-neutral-strong); |
There was a problem hiding this comment.
Using the brand variation of color token instead of neutral will match better with the brand token being used for the background.
| color: var(--wpds-color-foreground-interactive-neutral-strong); | |
| color: var(--wpds-color-foreground-interactive-brand-strong); |
| ? sprintf( | ||
| /* translators: %d: Number of filters applied. */ | ||
| _n( | ||
| 'Filter (%d applied)', | ||
| 'Filter (%d applied)', | ||
| panelFilterCount | ||
| ), | ||
| panelFilterCount | ||
| ) |
There was a problem hiding this comment.
Noticed that here _n() returns same strings for both singular/plural cases.
Different strings may be used in context of other languages so perhaps _n is right for this.
There was a problem hiding this comment.
Oh, interesting! I'm guessing in some languages the %d applied part could be different, but I'm not suret about that. I'll ask Claude to research it further. Thanks for raising.
There was a problem hiding this comment.
Following up on this one, _n() is the correct choice here.
Claude looked into how other languages handle this, findings below:
_n()exists so each locale can supply its own plural forms. The English strings only seed the source, so identical singular and plural text is fine. Many languages have more than two forms, and the participle agrees with the count:
- Polish has three forms (1, 2-4, 5+), eg. "zastosowany", "zastosowane", "zastosowanych".
- Russian and Ukrainian also have three; Arabic has six.
- With a plain
__(), translators get a single string and can't match the number.Core does the same thing. The plugin list table status links pass identical strings, eg.
_n( 'Active <span class="count">(%s)</span>', 'Active <span class="count">(%s)</span>', $count ): https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-admin/includes/class-wp-plugins-list-table.phpThe translator comment (
%d: Number of filters applied.) already gives the needed context, so no change here.
|
Took this for a spin and it's working really well! The only thing I noticed as a gotcha is that if you have a collapsed notes thread and you filter by an author, it's not immediately clear where that author's comment is. It might make sense to automatically expand when searching as a result. Screen.Recording.2026-10-08.at.11.39.59.AM.mov |
Ah good suggestion, thanks to testing and the feedback @annezazu - I'll work on that! |
…lter # Conflicts: # packages/editor/src/components/collab-sidebar/index.jsx
The badge sits on the brand-strong background, so pair it with the matching brand-strong foreground token rather than the neutral one. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KsbeGRZoTeN4LyueWAEwPr
A search or author filter can match a reply hidden behind the "N more replies" button, leaving no visible sign of why the thread matched. Show every reply while either filter is active. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KsbeGRZoTeN4LyueWAEwPr
|
@annezazu this is in now, thanks for the suggestion! Claude made the change, summary below:
|
This branch has not been deployed
3 participants
Search and filters for the "All notes" sidebar, so a thread can be found in a long list.
Fixes #84058
Claude wrote this one up after building it:
Screencast
notes-sidebar-filter-84060.mp4
AI Use
Claude Code drafted both the code and this description while I steered. I will review and test.
🤖 Generated with Claude Code
https://claude.ai/code/session_01VQpfAuMvYyYfwPAmcavDSk