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

Implements a Mastodon-style persistent inspector that shows contextual information when no post is selected. The inspector now always appears and displays:

- Welcome message for first-time users
- Trending tags section (reuses PopularTags component)
- Dark theme matching the left sidebar

Changes:
- Created InspectorDefault component with dark theme styling
- Modified FeedInspector to route between default and post detail views
- Updated Layout to always render inspector (no longer conditional)
- Inspector accepts nullable id prop to show default view

The inspector smoothly transitions between the default trending view and post detail view when users select items from their feed.
Changes:
- Removed card boxes from default inspector for cleaner appearance
- Moved popular tags exclusively to right inspector sidebar
- Removed Feed page header to give more space to content
- Updated inspector default view with flat design and better spacing

The inspector now has a simpler, cleaner look matching Mastodon's style with sections instead of boxed cards. Popular tags only appear in the right sidebar where they're more contextually relevant.
Changes:
- Created SidebarDescription component from PR #2535
- Displays contextual description based on active actor (site vs user)
- Integrated SidebarDescription into inspector default view
- Fixed popular tags alignment to left with justify-content: flex-start
- Added styles for sidebar description in inspector context

The inspector now shows a dynamic description that changes based on whether viewing as the site or as a user. Popular tags are properly left-aligned for better readability.
Changes:
- Limited inspector sections to max-width 400px for better readability
- Removed border-radius from popular tags menu items (prevented background artifacts)
- Removed horizontal padding from popular tags (now padding: 0.5rem 0)
- Moved SidebarDescription from inspector to left sidebar (matches PR #2535)
- Removed Welcome section from inspector, keeping only Trending tags

The inspector now has a cleaner, simpler look with just trending tags, while the contextual description appears in the left sidebar where it's more visible and consistent with the original design.
Created a well-structured, modular, and extensible inspector sidebar architecture following WordPress naming conventions:

Structure:
- InspectorSidebar: Main container component (src/social-web/components/inspector-sidebar/)
- Widgets system: Modular widgets that can be easily added/removed
  - TrendingWidget: Displays popular tags
  - Widget index for clean exports

Benefits:
- Easy to add new widgets (WhoToFollowWidget, SuggestedPostsWidget, etc.)
- Clear separation of concerns
- WordPress naming convention (lowercase-with-hyphens)
- Reusable widget base styles
- Simple WIDGETS array for managing what's displayed

Files:
- Created: inspector-sidebar/ component structure
- Created: widgets/ subdirectory with trending-widget
- Removed: inspector-default.tsx/scss (legacy)
- Updated: inspector.tsx to use InspectorSidebar

The sidebar is now a proper component with an extensible widget system instead of a monolithic view.
Changes:
- Added padding: 0 0.75rem to widget titles for consistent alignment
- Re-added padding: 0.5rem 0.75rem to menu items (popular tags links)

Both headers and links now have matching horizontal padding for better visual alignment and clickability.
- Add explicit padding reset to popular tags container
- Update active state to use neutral hover color for consistency
- Add padding to title element for alignment
@github-actions github-actions bot added the [Focus] Editor Changes to the ActivityPub experience in the block editor label Nov 26, 2025
- Create NavigationWidget component with quick action links
- Add links to: New Post, Followers, Following, Settings
- Position as first widget in inspector sidebar
- Style buttons with dark theme matching existing design
- Use WordPress Button component with secondary variant
- Replace Button components with MenuItem for consistency
- Use MenuGroup wrapper matching trending widget pattern
- Simplify styling to match other menu items
- Remove button-specific styles (borders, secondary variant)
- Maintain hover effects and proper spacing
- Update navigation and trending widget link colors to match left sidebar
- Use inverted secondary color (#e0e0e0) instead of primary
- Replace solid backgrounds with semi-transparent overlays
- Disable transitions to prevent glow/blinking effects
- Add proper focus states for keyboard navigation
- Update hover/active states with transparent white overlays
- Maintain selected state styling for trending tags
- Apply consistent padding (0.5rem 0.75rem) to menu items in both widgets
- Ensures visual alignment between Quick Actions and Trending sections
- Matches horizontal padding with widget titles
- Move all common menu item styles to base inspector-sidebar/style.scss
- Remove duplicate CSS from individual widget files
- Add explicit border removal (!important) for both menu groups and items
- Navigation widget now has minimal widget-specific styles
- Trending widget only keeps selected state overrides
- Both widgets now share identical base styling from parent

This ensures consistent appearance and eliminates border bottom artifacts.
- Create widgets/style.scss for all widget-specific styles
- Move trending widget styles to shared widgets stylesheet
- Remove widget-specific CSS imports from individual components
- Import styles once from widgets/index.ts
- Remove inspector-sidebar widget styles (now in widgets/style.scss)

This provides better organization with all widget styles in one place.
Minified RTL CSS files for extra-fields, follow-me, followers, and reactions blocks to improve load performance. Updated asset version hashes in related PHP files to reflect the new builds.
@pfefferle pfefferle force-pushed the add/persistent-inspector-sidebar branch from 086cfe5 to a79200a Compare November 26, 2025 11:49
@pfefferle pfefferle self-assigned this Nov 26, 2025
pfefferle and others added 7 commits November 26, 2025 13:12
Replaces hardcoded widths for stage and inspector panels with CSS variables (--sw-stage-width and --sw-inspector-width) for improved flexibility and maintainability. Updates related styles and removes the 'Popular Tags' heading from the popular tags component.
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.
Copilot finished reviewing on behalf of pfefferle November 27, 2025 13:48
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

Labels

[Focus] Editor Changes to the ActivityPub experience in the block editor

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants