WIP: Reader UI

[obenland]

DEVELOPMENT BRANCH — Let's open new PRs against this branch for changes.

Proposed changes:

This PR introduces a comprehensive Reader UI for the ActivityPub plugin, providing a modern interface for users to view and interact with their ActivityPub feed.

Core Features

Social Web Page

• New admin page at /wp-admin/admin.php?page=activitypub-social-web
• Full-screen React application using WordPress DataViews
• Three-panel layout: Sidebar, Stage (feed), and Inspector (detail view)
• Responsive design with mobile-first approach

Feed Management

• Display ActivityPub posts in a scrollable feed view
• Smart content field that adapts based on post type (content, excerpt, or metadata)
• Object type filtering (Articles, Notes, Images, Events, Videos, etc.)
• Popular hashtag filtering with top 5 tags displayed in sidebar
• Clear visual states when filters return no results
• Gallery flex layout styles for media-rich posts

Object Type Support

• Taxonomy-based object type filtering (ap_object_type)
• Icon-based type indicators matching WordPress standards
• Automatic hiding of filter when only one type exists
• Support for: Article, Note, Image, Event, Video, Audio, Document, Page, Place

Hashtag Filtering

• Popular tags sidebar widget showing top 5 tags by post count
• Click to filter feed by tag
• Visual toggle state for active filters
• Automatic navigation to feed view on mobile after filter selection

Post Inspector

• Full post detail view in right panel
• Display post content, metadata, author information
• Support for comments and reactions from ActivityPub network
• Clickable hashtags for filtering
• Downscaled 32px site icons for better performance

UI Components

• Actor switcher for multi-actor support
• Site hub header with navigation
• Themed surfaces matching WordPress admin design system
• Lazy-loaded route components for better performance
• Settings link to main ActivityPub settings page

Technical Implementation

Architecture

• React 18 with TypeScript
• WordPress DataViews for data presentation
• @wordpress/data for state management
• @wordpress/views for view persistence
• Custom store for Social Web state (active actor, filters)

Data Layer

• REST API integration for ActivityPub posts
• Custom post type: ap_post
• Taxonomies: ap_tag, ap_object_type
• Entity records using @wordpress/core-data

Performance

• Code splitting with lazy loading
• Optimized image loading
• Efficient re-rendering with React hooks
• View state persistence across sessions

Accessibility

• Keyboard navigation support
• ARIA labels for interactive elements
• Screen reader friendly component structure
• Focus management in modal interactions

Recent Updates

• Add @wordpress/views dependency for view persistence
• Clear feed display when filters return no results
• Prevent loading indicators for empty filter sections
• Hide object type filter when only one type exists
• Remove excerpt field in favor of smart content field
• Add object type filtering to sidebar
• Add popular tags sidebar with filtering
• Downscale site icon images to 32px
• Add gallery flex layout styles for feed content
• Update WP version check for block support

Other information:

• New UI components have been tested manually
• Automated tests for new components needed
• Build process verified and working

Testing instructions:

1. Ensure you have ActivityPub posts in your site (follow some ActivityPub actors or create test ap_post entries)
2. Navigate to WP Admin > ActivityPub > Social Web
3. Verify the three-panel layout displays correctly
4. Test object type filtering:
   • Click different object types in sidebar (Article, Note, Image, etc.)
   • Verify feed updates to show only posts of that type
   • Check that filter is hidden if only one object type exists
5. Test hashtag filtering:
   • Click on a popular tag in the sidebar
   • Verify feed filters to show only posts with that tag
   • Click the same tag again to clear the filter
6. Test post inspector:
   • Click a post in the feed
   • Verify inspector panel opens with full post details
   • Test clickable hashtags in inspector
   • Close inspector and verify state returns to feed
7. Test mobile responsiveness:
   • Resize browser to mobile width (< 782px)
   • Verify sidebar shows first, then stage, then inspector as you navigate
8. Test actor switching:
   • If you have multiple actors, use the actor switcher
   • Verify feed updates for the selected actor
9. Verify empty states:
   • Apply a filter that returns no results
   • Check that appropriate empty state message displays
10. Test performance:
    • Check that site icons are 32px (not full size)
    • Verify lazy loading of route components

Changelog entry

No changelog entry required for development branch (will be added when merged to trunk).