Skip to content

Add persistent inspector sidebar with modular widget system#2543

Draft
pfefferle wants to merge 93 commits intotrunkfrom
add/persistent-inspector-sidebar
Draft

Add persistent inspector sidebar with modular widget system#2543
pfefferle wants to merge 93 commits intotrunkfrom
add/persistent-inspector-sidebar

Conversation

@pfefferle
Copy link
Copy Markdown
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.
Port the inspector sidebar components into src/app/ to align with
trunk's naming convention. Delete src/social-web/ and its build
artifacts since src/app/ is the canonical location.
The @wordpress/views package uses __dangerousOptInToUnstableAPIsOnlyForCoreModules
which blocks non-core consumers. Replace it with a local hook using only public
APIs so the Social Web page works without the Gutenberg plugin.

Also wire up the persistent inspector sidebar with quick actions and trending
widgets, shown when no post is selected.
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