Add (popular) tags (sidebar) with filtering #2512
Open
+457
−38
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This adds a button-based filter to the feed that allows users to filter posts by ActivityPub object type (Article, Note, etc.). Changes: - Add ap_object_type field to FeedPost interface - Add apObjectType parameter to useFeed hook with REST API integration - Create TypeFilter component using WordPress ButtonGroup - Integrate TypeFilter into feed stage with localStorage persistence - Filter buttons appear in DataViews header aligned to the right The selected filter is persisted to localStorage so it's remembered across sessions.
Replace custom TypeFilter component with native DataViews filtering system. Changes: - Remove custom TypeFilter ButtonGroup component - Add ap_object_type as a DataView filter field with 'isAny' operator - Extract filter values from view.filters instead of separate state - Remove localStorage persistence code (DataViews handles this internally) - Taxonomy terms populate filter dropdown automatically This integrates the type filter into DataViews' native filtering UI, providing: - Consistent UX with other DataViews filters - Built-in persistence through WordPress views system - Better accessibility and keyboard navigation - Automatic filter state management
github-actions
bot
added
[Feature] Collections
[Feature] REST API
[Feature] WP Admin
[Focus] Editor
Copilot finished reviewing on behalf of
pfefferle
November 20, 2025 17:14
This commit adds a tag cloud component to the sidebar that displays trending tags and allows filtering the feed by clicking tags. Changes: - Add TagCloud component with dark theme styling - Integrate tag filtering in FeedStage with DataViews - Add tag handler registration pattern through Layout - Support ap_tag parameter in useFeed hook - Add ap_tag field to FeedPost type
pfefferle
force-pushed
the
add/trending-tags-sidebar
branch
from
adc0831 to
afe04af
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a comprehensive Social Web interface for ActivityPub, adding a new React-based admin dashboard with tag-based filtering and feed management capabilities. The implementation includes a three-panel layout with sidebar navigation, main feed view, and detail inspector panel.
Key Changes:
- Adds TypeScript-based React application with WordPress DataViews integration
- Implements tag cloud component for filtering feed by trending hashtags (top 5)
- Integrates new REST API endpoints for actor management (follow, unfollow, block)
Reviewed Changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
webpack.config.js |
Custom webpack config for chunk placement and social-web vendor bundling |
src/social-web/types.ts |
Core TypeScript type definitions including FeedPost with ap_tag field |
src/social-web/components/tag-cloud/index.tsx |
Tag cloud component fetching top 5 trending tags |
src/social-web/components/sidebar/index.tsx |
Sidebar with navigation and conditional tag cloud rendering |
src/social-web/components/layout/index.tsx |
Main layout coordinating tag handler registration between components |
src/social-web/routes/feed/stage.tsx |
Feed view with tag filtering using DataViews isAny operator |
src/social-web/hooks/use-feed.ts |
Feed hook with apTag parameter support |
includes/class-post-types.php |
REST API field registration and query filtering for tags |
includes/rest/admin/class-actions-controller.php |
New REST controller for follower management actions |
includes/wp-admin/class-social-web.php |
Admin page setup with script enqueuing |
package.json |
WordPress dependencies including DataViews and commands packages |
tests/phpunit/** |
Updated test fixtures with attributedTo field |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Introduces a filter for ActivityPub object types in the feed-stage.js component. Fetches available object types and allows filtering posts by type, updating the feed query and UI accordingly.
Introduces support for filtering ActivityPub feed posts by tags. Updates the feed-stage.js logic to include tag taxonomy, tag filter UI, and query handling for tags, enabling users to refine feed results based on selected tags.
pfefferle
changed the title
- Display hashtags from ap_tag taxonomy in inspector - Click hashtag to filter feed and close inspector - Add styling for hashtag buttons with hover states - Pass tag click handler from Layout to inspector
Automatically show the filter panel when a tag is selected from trending tags or hashtag buttons, making it clear to users that a filter is active.
The feed stage now fetches and displays the selected tag in the filter dropdown even if it is not among the trending tags. This improves the tag filter UX by ensuring the selected tag is always visible and selectable.
The tag click handler is now registered only when the selectedTagId or registerTagHandler changes, preventing unnecessary re-registrations. This improves performance and avoids potential issues with handler updates.
When adding a new tag filter, the feed now resets to page 1 and opens filters as needed. Also, the tag handler registration effect now correctly depends on the tag click handler to ensure updates when the handler changes.
Member
|
I like the idea of exploring ways to customize views with pre-selected filters. For example we could recreate something like Ghost's division of short and longform content that way, with menu items in the sidebar, like you showcase here. At this point I'm not sure I'd add a list of tags into the sidebar just yet if we want to keep the experience basic. It takes up quite a bit of real estate and I wouldn't be surprised if it made it harder for us to add "regular" menu items in the future. Maybe it could be something to consider if we made the Feed menu item a drilldown item? |
Member
Author
|
This PR adds a general hashtag switcher/filter (see also the hashtag list in the inspector) and I thought this might be a nice addon to reduce the whitespace. this does not have to stay, there speaks nothing against optimizing over time. And it gives the reader a bit more of the social media feeling: 
|
- Create objectTypeField component with getElements pattern - Create tagField component (renamed from "Trending Tags" to "Popular Tags") - Remove inline field definitions from stage.tsx - Remove inline taxonomy data fetching - Clean up unused imports and code - Follow consistent pattern across both filter fields
Merged latest changes from add/reader branch with resolved conflicts: - object-type/index.tsx: Merged comprehensive translations from add/reader - use-feed.ts: Combined filters pattern supporting both ap_object_type and ap_tag - types.ts: Added ap_tag field to FeedPost interface - stage.tsx: Kept refactored version with field components - Build files regenerated after conflict resolution The merge maintains the cleaner field component architecture while incorporating translation improvements and filter support from add/reader.
- Renamed component from TrendingTags to PopularTags - Updated all references in sidebar component - Renamed CSS classes from trending-tags to popular-tags - Updated component comments and translations - Moved directory from trending-tags to popular-tags This aligns the component name with the user-facing label "Popular Tags" used in the sidebar.
pfefferle
force-pushed
the
add/trending-tags-sidebar
branch
2 times, most recently
from
b4cd25c to
d91a5dc
Compare
Add explicit background-color to sidebar to prevent WordPress common.css from applying white background override. The sidebar was relying on its parent's background color, but WordPress admin styles were overriding it with white.
pfefferle
force-pushed
the
add/trending-tags-sidebar
branch
from
d91a5dc to
1a21523
Compare
- Pass view.filters to useFeed hook instead of individual filter values - Change tag field operator from 'is' to 'isAny' for proper filtering - Remove unused apObjectTypeFilter extraction in stage.tsx This ensures clicking a tag in the sidebar properly filters the feed and the filter is correctly reflected in the DataViews filter UI.
Replace template string concatenation with clsx library for cleaner and more maintainable conditional className handling in the tag button's is-selected state.
Use more descriptive name that better reflects the function's purpose of updating the tag filter state rather than just handling a click.
Remove per_page: 100 from comments and tags queries as they're not needed. Comments will use the default limit, and tags query already uses include parameter to fetch specific tag IDs.
Change label from 'Popular Tags' to 'Tag' to match the pattern of objectTypeField which uses 'Type', keeping the implementation consistent across similar filter fields.
Restore filter change detection and page reset logic in updateFeedView from the add/reader branch. This centralizes the filter handling logic and ensures all filter updates (including tags) properly reset to page 1. - Add filter change detection via JSON comparison - Centralize page reset logic in updateFeedView - Simplify updateTagFilter to use updateFeedView instead of updateView - Add view.filters to updateFeedView dependencies
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 20 out of 20 changed files in this pull request and generated 6 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
Adds aria-label and aria-pressed attributes to the popular tags filter buttons in the sidebar for better accessibility. Also updates feed-stage.js to ensure feed updates when filters change.
11 tasks
obenland
reviewed
Nov 21, 2025
| } ); | ||
| prevActiveActorId.current = activeActorId; | ||
| }, | ||
| [ view, updateFeedView ] |
Member
There was a problem hiding this comment.
Is there anything here that could be combined with the Type filter?
Co-authored-by: Konstantin Obenland <[email protected]>
Co-authored-by: Konstantin Obenland <[email protected]>
Co-authored-by: Konstantin Obenland <[email protected]>
Replaces button elements with anchor links for popular tags in the sidebar, improving accessibility and semantic markup. Updates related styles and event handling to match the new structure.
Updated feed-inspector and feed-stage to handle tag filtering and selection via store actions and selectors, removing the need to pass onTagClick between components. This improves state management and consistency for tag-based filtering in the ActivityPub social web interface.
Mocks for @wordpress/views, @wordpress/data, and the local store were added to inspector.test.tsx to isolate tests from external modules and prevent loading unnecessary dependencies.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Changes
TagClouddisplays top 100 trending tags in sidebarisAnyoperatoruseFeednow acceptsapTagparameter for REST API filteringap_tagfield toFeedPostinterfaceTechnical Details
useEntityRecordsto fetch ap_tag taxonomy termsTest Plan
Screenshots