-
Notifications
You must be signed in to change notification settings - Fork 83
Add persistent inspector sidebar with modular widget system #2543
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: add/reader
Are you sure you want to change the base?
Conversation
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
- 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.
086cfe5 to
a79200a
Compare
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.
0547bf7 to
0a05321
Compare
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.
There was a problem hiding this 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.
|
Yeah, I'm conflicted about it. Pro:
Con:
I think it's a fine experiment but doesn't feel like a slam dunk. |
thanks
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.
I wouldn't see that as an argument against that UI.
and
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.
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. |
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:
Layout Improvements:
Architecture:
Visual Refinements:
Other information:
Testing instructions:
Changelog entry
Changelog Entry Details
Significance
Type
Message
Add persistent inspector sidebar with modular widget system to Social Web feed reader