Skip to content

Conversation

@pfefferle
Copy link
Member

@pfefferle pfefferle commented Nov 26, 2025

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.

Screenshot 2025-11-26 at 13 12 09

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:

  • Have you written new tests for your changes, if applicable? - No new tests required, using existing components

Testing instructions:

  1. Navigate to the Social Web feed reader page
  2. Verify the inspector sidebar is visible on the right side with "Quick Actions" and "Trending" sections
  3. Click on a popular tag in the Trending section and verify it filters the feed
  4. Click on a feed item in the main content area and verify the inspector switches to post detail view
  5. Click the close button on the post detail and verify it returns to the default view with widgets
  6. Click on a Quick Action link and verify it navigates to the correct page
  7. Switch between site and user actor (if applicable) and verify sidebar description updates in left sidebar
  8. Verify the "Feed" header is no longer shown in the stream area
  9. Test responsiveness by resizing browser window

Changelog entry

  • Automatically create a changelog entry from the details below.
Changelog Entry Details

Significance

  • Patch
  • Minor
  • Major

Type

  • 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

obenland and others added 30 commits October 29, 2025 10:37
Various dependencies have been updated to their latest versions in package-lock.json, including @InQuirer, @radix-ui, @types/node, @WordPress, and axios packages. This ensures compatibility, security, and access to new features and bug fixes.
obenland and others added 7 commits November 26, 2025 08:04
Resolved conflicts by:
- Using simpler loading/empty state logic in popular-tags component
- Adding Page wrapper with title/subtitle to feed stage
- Imported Page component in feed stage
- Updated build files to include Page component changes
- Applied inspector sidebar max-width styling
- Updated build files to include Page component changes
- Applied inspector sidebar max-width styling
Replaces the unminified JavaScript output for feed-inspector.js and feed-stage.js with minified versions, reducing file size and improving load performance. No functional code changes; only the build output is affected.
@pfefferle pfefferle force-pushed the add/persistent-inspector-sidebar branch from 0547bf7 to 0a05321 Compare November 26, 2025 15:33
Introduces a popular tags section in the sidebar for the social web interface, allowing users to filter posts by frequently used tags. This enhances content discovery and navigation by tag, in addition to the existing object type filters.
This reverts commit bc94c72, reversing
changes made to 4d7eb21.
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

@obenland
Copy link
Member

obenland commented Dec 3, 2025

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.

@pfefferle
Copy link
Member Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants