Refactor Social Web UI with three-panel layout #2393
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Major architectural changes: - Replaced custom routing with simpler state-based navigation - Implemented three-panel layout (sidebar, stage, inspector) - Created reusable Page and Panel components for consistent UI structure - Organized routes by section (dashboard, followers, following, interactions) Component improvements: - Layout: Dark theme (#1e1e1e) with fullscreen mode support - Sidebar: 300px fixed width with visible menu items on dark background - Stage: Main content area with DataViews tables and action buttons - Inspector: 380px conditional panel for item details TypeScript improvements: - Added explicit action types for Redux store (SetFollowersAction, etc.) - Created store.d.ts for @wordpress/data module augmentation - Fixed React JSX transform configuration (react-jsx mode) - Added missing icon type definitions Styling: - Consolidated styles into style-index.css via style.scss entry point - Added fullscreen body class management with useEffect hook - Used wpds design tokens for consistency with WordPress Design System - Proper margin-based spacing between panels
github-actions
bot
added
the
[Focus] Editor
|
Todos
|
Changed the sidebar header title from 'ActivityPub' to 'Social Web' and updated menu item labels to use translation functions. This improves localization and better reflects the section's purpose.
- Replace classnames with clsx for better class name handling - Restructure store into modular files (actions, selectors, reducer, types) - Replace hardcoded colors with wpds design tokens throughout SCSS - Move WordPress type declarations to project root /types/ - Create route-specific types.ts files for better organization - Add ThemedSurface component for consistent styled surfaces - Refactor Panel component to use ThemedSurface internally - Simplify design-tokens.scss to use wpds tokens directly All styling now uses wpds token names with fallback values for consistent theming.
Import style.scss from the JavaScript entry point to bundle all styles (global styles and component styles) into a single style-index.css file. This simplifies the build output and ensures fullscreen layout styles are properly applied. - Import style.scss in index.tsx to bundle all styles together - Remove editorStyle from block.json since styles are imported directly - Remove inline background style from root element - Clean up debug console.log statements
|
@pfefferle Looks like your PRs are all based on this branch and this PR is safe to merge? |
|
Feel free to merge it! I am still trying to understand everything ;) |
|
and it seems to break quite some things :( |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Proposed changes:
This PR refactors the Social Web UI to use a cleaner three-panel layout architecture.
Architecture:
PageandPanelcomponents for consistent UI structureComponents:
TypeScript improvements:
Styling:
Other information:
N/A - This is a refactoring of the UI structure. All existing functionality remains the same.
Testing instructions:
npm install && npm run buildnpm run build