feat: UI improvements with modern theme system and component refactoring #128
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
- Add .modern and .modern.dark CSS variable blocks in globals.css - Register 'modern' in ThemeProvider themes list - Use semantic color variables based on Tailwind zinc/gray palette - Set modern as default theme
- Install material-icons package and import outlined.css in globals.css - Redesign PrimarySidebar with top/bottom button layout using Material Icons - Remove project list, create project button, and related query logic - Remove props from PrimarySidebar (currentProjectId, userId no longer needed) - Update layout.tsx to use PrimarySidebar without props - Make modern theme default to dark mode, rename light variant to modern-light
- Modularize PrimarySidebar into sub-components for better maintainability. - Add English JSDoc documentation to PrimarySidebar. - Update Button component variants for consistent styling.
…ed code - Move WORKSPACE_SECTIONS and CONFIG_SECTIONS outside component - Use for type safety - Add getHref helper function for dynamic URL generation - Remove ChevronsUpDown icon and interactive header styles (not yet implemented) - Clean up unused Lucide icon imports - Switch to Material Icons for menu items - Improve layout spacing and styling consistency
- Extract NetworkDialog into standalone component - Extract TerminalTabs into standalone component - Migrate hardcoded colors to modern theme variables - Update toolbar background to use sidebar-background - Update Run App and Network buttons with theme colors - Update terminal tabs with zinc-800/sidebar-background colors - Update TerminalDisplay and XtermTerminal to modern theme palette - Add blue-500 accents for active states and icons
- Move StatusBar from layout to terminal panel (only visible on terminal page) - Update StatusBar background to sidebar-background - Replace Box/Database icons with circular status indicators - Add subtle radial glow effect to status dots - Replace GitHub icon with RefreshCw in RepoStatusIndicator - Apply blue-500 color to sync button icon and text - Fix font size consistency (remove text-sm, inherit text-xs) - Resize icons to 12px for consistency with text - Update terminal container to use flex-1 layout for proper StatusBar positioning
- Replace material-icons font package with react-icons for better size control - Update primary-sidebar.tsx: use MdOutlineGridView and MdOutlineSettings - Update project-sidebar.tsx: add ICON_MAP for dynamic icon rendering - Remove material-icons CSS import from globals.css - Add react-icons v5.5.0, remove material-icons v1.13.14
- Create new SettingsLayout component in route-specific _components folder - Migrate all 6 settings pages: auth, database, environment, github, payment, secrets - Replace hardcoded VSCode colors with theme variables (foreground, muted-foreground, card, border, primary) - Remove redundant nested overflow and flex-1 declarations - Follow Next.js co-location best practice for route-specific components
- Increase Prisma transaction timeout to 20s in project creation API - Update getIngressDomain to replace 'sealos.io' with 'sealos.app'
- Replace centered spinner with inline skeleton screens - Increase max-width from 4xl to 7xl for better content space - Adjust padding to px-8 py-10 pb-20 for better proportions - Increase content spacing from space-y-6 to space-y-8 - Remove redundant JSDoc and JSX comments - Maintain page header visibility during loading state Benefits: - Layout stability during loading (no content jump) - Better user context (header always visible) - Cleaner code following Clean Code principles Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
- Add lib/data/project.ts with cached getProject() using React.cache() - Add lib/data/database.ts with parseConnectionUrl() utility - Extract ReadOnlyField, FeatureCards, ConnectionString components - Replace Lucide icons with Material Icons for consistency - Optimize with parallel session/params fetching via Promise.all()
✅ PR Check Results: PassedBuild Checks
✨ Great work!All checks passed successfully. Your PR is ready for review. Details:
🔗 View Details: |
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.
Overview
This PR introduces a comprehensive UI overhaul with a modern theme system, component refactoring, and improved code architecture.
Changes
🎨 Theme System
globals.cssmaterial-iconspackage toreact-iconsfor better tree-shaking📁 Sidebar Components
PrimarySidebarwith Material IconsProjectSidebarwith module-level config and JSDoc documentation💻 Terminal Components
NetworkDialogandTerminalTabsinto separate componentsStatusBarinto terminal panel⚙️ Settings Pages
SettingsLayoutcomponent with skeleton loadingConfigLayoutcomponent🗄️ Data Layer
lib/data/project.tswith cachedgetProject()using React.cache()lib/data/database.tswithparseConnectionUrl()utilityReadOnlyField,FeatureCards,ConnectionString🐛 Bug Fixes
Stats
Testing