Add persistent inspector sidebar with modular widget system
Proposed changes:
Implements a persistent inspector sidebar for the feed reader that is always visible, similar to Mastodon's UI design. The sidebar displays contextual information and automatically switches between a default view (showing trending tags) and post detail view when items are selected.
Key Changes:
New Components:
- InspectorSidebar: Main container component with extensible widget-based architecture
- TrendingWidget: Displays popular/trending tags using the existing PopularTags component
- NavigationWidget: Quick action links (New Post, Followers, Following, Settings)
- SidebarDescription: Contextual description showing which account's feed is active (site vs user)
Layout Improvements:
- Inspector sidebar is now persistent and always rendered (cannot be closed)
- Dark theme styling matching the left sidebar for visual consistency
- Removed "Feed" page header from stream to provide more content space
- Popular tags moved from left sidebar to inspector (right sidebar)
- Sidebar description added to left sidebar between navigation and filters
Architecture:
- Modular widget system for easy extensibility
- Base widget styles with per-widget overrides
- Clean widget exports through index file
- WordPress naming conventions (lowercase-with-hyphens)
Visual Refinements:
- Consistent horizontal padding (0.75rem) for widget titles and menu items
- Max-width constraint (400px) for widget content
- Smooth transitions on hover states
- Removed border-radius to prevent background artifacts
- Left-aligned text and proper spacing
Other information:
- [x] Have you written new tests for your changes, if applicable? - No new tests required, using existing components
Testing instructions:
- Navigate to the Social Web feed reader page
- Verify the inspector sidebar is visible on the right side with "Quick Actions" and "Trending" sections
- Click on a popular tag in the Trending section and verify it filters the feed
- Click on a feed item in the main content area and verify the inspector switches to post detail view
- Click the close button on the post detail and verify it returns to the default view with widgets
- Click on a Quick Action link and verify it navigates to the correct page
- Switch between site and user actor (if applicable) and verify sidebar description updates in left sidebar
- Verify the "Feed" header is no longer shown in the stream area
- Test responsiveness by resizing browser window
Changelog entry
- [x] Automatically create a changelog entry from the details below.
Changelog Entry Details
Significance
- [ ] Patch
- [x] Minor
- [ ] Major
Type
- [x] Added - for new features
- [ ] Changed - for changes in existing functionality
- [ ] Deprecated - for soon-to-be removed features
- [ ] Removed - for now removed features
- [ ] Fixed - for any bug fixes
- [ ] Security - in case of vulnerabilities
Message
Add persistent inspector sidebar with modular widget system to Social Web feed reader
Yeah, I'm conflicted about it.
Pro:
- It makes the two-column consumption pattern less obvious.
- Less movement when expanding a single post.
Con:
- It adds quite a bit of visual noise.
- It's not a UX pattern used anywhere else in wp-admin.
- Titles of the left and right sidebar are not aligned.
- Sidebars have different widths, paddings.
I think it's a fine experiment but doesn't feel like a slam dunk. Maybe if we gave the right sidebar a fixed width, make it look more like the left one, and open individual posts in the main content area? Not sure it's something I'd spend more time on, though.
I think it's a fine experiment but doesn't feel like a slam dunk.
thanks
It adds quite a bit of visual noise.
If it is about colors, then let's change it. The PR is mainly meant to check a permanent three column layout and make use of the empty default space.
It's not a UX pattern used anywhere else in wp-admin.
I wouldn't see that as an argument against that UI.
Titles of the left and right sidebar are not aligned.
and
Sidebars have different widths, paddings.
See it more as a proof of concept. I wanted to show a working prototype, but I am aware that there is still a lot to improve/align if we want to go that path.
Maybe if we gave the right sidebar a fixed width, make it look more like the left one, and open individual posts in the main content area? Not sure it's something I'd spend more time on, though.
The whole idea of this design was to improve the three column view and to use the free space for something useful. If the individual posts should open in main space, the right sidebar would unnecessarily limit the space we have. What I tried to say: I think we can discuss this in a different context, but a right sidebar is not the main intention of this PR.