[PR #50] [MERGED] refactor: Unified all UI colors, added reusable components. Removed Lightmode #175

New issue

Closed

opened 2026-02-26 12:40:30 +03:00 by kerem · 0 comments

kerem commented

2026-02-26 12:40:30 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/community-scripts/ProxmoxVE-Local/pull/50
Author: @michelroegl-brunner
Created: 10/7/2025
Status: ✅ Merged
Merged: 10/7/2025
Merged by: @michelroegl-brunner

Base: main ← Head: refactor/unify_ui

📝 Commits (1)

7d5211d Remove execution_mode dependencies from InstalledScriptsTab

📊 Changes

31 files changed (+1117 additions, -849 deletions)

View changed files

📝 package-lock.json (+68 -0)
📝 package.json (+4 -0)
➕ scripts/ct/2fauth.sh (+82 -0)
➕ scripts/install/2fauth-install.sh (+105 -0)
📝 scripts/json/undefined.json (+84 -84)
📝 scripts/json/zigbee2mqtt.json (+1 -1)
📝 src/app/_components/Badge.tsx (+18 -18)
📝 src/app/_components/CategorySidebar.tsx (+34 -34)
➖ src/app/_components/DarkModeProvider.tsx (+0 -86)
➖ src/app/_components/DarkModeToggle.tsx (+0 -66)
📝 src/app/_components/DiffViewer.tsx (+26 -26)
📝 src/app/_components/ExecutionModeModal.tsx (+35 -33)
📝 src/app/_components/FilterBar.tsx (+50 -37)
📝 src/app/_components/InstalledScriptsTab.tsx (+94 -100)
➖ src/app/_components/ProxmoxCheck.tsx (+0 -85)
📝 src/app/_components/ResyncButton.tsx (+12 -13)
📝 src/app/_components/ScriptCard.tsx (+7 -7)
📝 src/app/_components/ScriptDetailModal.tsx (+70 -63)
📝 src/app/_components/ScriptsGrid.tsx (+24 -19)
📝 src/app/_components/ServerForm.tsx (+25 -22)

...and 11 more files

📄 Description

Summary

This PR implements a comprehensive UI refactoring that removes execution_mode dependencies, aligns components with the new Button component, removes dark mode functionality, and standardizes colors using globals.css.

Major Changes Made

Execution Mode Refactoring

✅ Removed ExecutionModeBadge import and usage
✅ Updated filtering logic to use server_name presence instead of execution_mode
✅ Simplified update script logic by removing mode property
✅ Updated Terminal component call to determine mode based on server presence
✅ Replaced ExecutionModeBadge in table with simple text display
✅ Maintained backend API compatibility by keeping execution_mode in mutations
✅ Used nullish coalescing operator (??) for better null handling

UI Component Alignment

✅ Aligned all components with the new unified Button component
✅ Replaced custom button implementations with standardized Button component
✅ Ensured consistent button styling across all components

Dark Mode Removal

✅ Removed DarkModeProvider component
✅ Removed DarkModeToggle component
✅ Cleaned up dark mode related state management
✅ Simplified theme handling

Color Standardization

✅ Removed all hardcoded colors in favor of CSS variables from globals.css
✅ Updated components to use semantic color tokens
✅ Ensured consistent color scheme across the application
✅ Improved maintainability through centralized color management

Additional Improvements

✅ Added new UI components (ui/button.tsx, lib/utils.ts)
✅ Removed unused components (ProxmoxCheck.tsx)
✅ Updated package dependencies
✅ Enhanced TypeScript configuration

Technical Details

The refactoring simplifies the codebase by:

Automatically determining execution mode based on server presence
Using a unified design system with consistent components
Centralizing color management through CSS variables
Removing unnecessary complexity from theme switching

Files Changed

31 files modified with 1,117 additions and 849 deletions
New components: ui/button.tsx, lib/utils.ts
Removed components: DarkModeProvider.tsx, DarkModeToggle.tsx, ProxmoxCheck.tsx
Updated: All major UI components for consistency

Testing

All linting errors resolved
Components render correctly with new design system
Filtering works as expected
Update functionality works for both local and SSH modes
Add script functionality works correctly
Color scheme is consistent across all components
Button components work uniformly throughout the app

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/community-scripts/ProxmoxVE-Local/pull/50 **Author:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Created:** 10/7/2025 **Status:** ✅ Merged **Merged:** 10/7/2025 **Merged by:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Base:** `main` ← **Head:** `refactor/unify_ui` --- ### 📝 Commits (1) - [`7d5211d`](https://github.com/community-scripts/ProxmoxVE-Local/commit/7d5211deb6c368998302c50ca435e7e7e3102693) Remove execution_mode dependencies from InstalledScriptsTab ### 📊 Changes **31 files changed** (+1117 additions, -849 deletions) <details> <summary>View changed files</summary> 📝 `package-lock.json` (+68 -0) 📝 `package.json` (+4 -0) ➕ `scripts/ct/2fauth.sh` (+82 -0) ➕ `scripts/install/2fauth-install.sh` (+105 -0) 📝 `scripts/json/undefined.json` (+84 -84) 📝 `scripts/json/zigbee2mqtt.json` (+1 -1) 📝 `src/app/_components/Badge.tsx` (+18 -18) 📝 `src/app/_components/CategorySidebar.tsx` (+34 -34) ➖ `src/app/_components/DarkModeProvider.tsx` (+0 -86) ➖ `src/app/_components/DarkModeToggle.tsx` (+0 -66) 📝 `src/app/_components/DiffViewer.tsx` (+26 -26) 📝 `src/app/_components/ExecutionModeModal.tsx` (+35 -33) 📝 `src/app/_components/FilterBar.tsx` (+50 -37) 📝 `src/app/_components/InstalledScriptsTab.tsx` (+94 -100) ➖ `src/app/_components/ProxmoxCheck.tsx` (+0 -85) 📝 `src/app/_components/ResyncButton.tsx` (+12 -13) 📝 `src/app/_components/ScriptCard.tsx` (+7 -7) 📝 `src/app/_components/ScriptDetailModal.tsx` (+70 -63) 📝 `src/app/_components/ScriptsGrid.tsx` (+24 -19) 📝 `src/app/_components/ServerForm.tsx` (+25 -22) _...and 11 more files_ </details> ### 📄 Description ## Summary This PR implements a comprehensive UI refactoring that removes execution_mode dependencies, aligns components with the new Button component, removes dark mode functionality, and standardizes colors using globals.css. ## Major Changes Made ### Execution Mode Refactoring - ✅ Removed ExecutionModeBadge import and usage - ✅ Updated filtering logic to use server_name presence instead of execution_mode - ✅ Simplified update script logic by removing mode property - ✅ Updated Terminal component call to determine mode based on server presence - ✅ Replaced ExecutionModeBadge in table with simple text display - ✅ Maintained backend API compatibility by keeping execution_mode in mutations - ✅ Used nullish coalescing operator (??) for better null handling ### UI Component Alignment - ✅ Aligned all components with the new unified Button component - ✅ Replaced custom button implementations with standardized Button component - ✅ Ensured consistent button styling across all components ### Dark Mode Removal - ✅ Removed DarkModeProvider component - ✅ Removed DarkModeToggle component - ✅ Cleaned up dark mode related state management - ✅ Simplified theme handling ### Color Standardization - ✅ Removed all hardcoded colors in favor of CSS variables from globals.css - ✅ Updated components to use semantic color tokens - ✅ Ensured consistent color scheme across the application - ✅ Improved maintainability through centralized color management ### Additional Improvements - ✅ Added new UI components (ui/button.tsx, lib/utils.ts) - ✅ Removed unused components (ProxmoxCheck.tsx) - ✅ Updated package dependencies - ✅ Enhanced TypeScript configuration ## Technical Details The refactoring simplifies the codebase by: - Automatically determining execution mode based on server presence - Using a unified design system with consistent components - Centralizing color management through CSS variables - Removing unnecessary complexity from theme switching ## Files Changed - 31 files modified with 1,117 additions and 849 deletions - New components: ui/button.tsx, lib/utils.ts - Removed components: DarkModeProvider.tsx, DarkModeToggle.tsx, ProxmoxCheck.tsx - Updated: All major UI components for consistency ## Testing - [x] All linting errors resolved - [x] Components render correctly with new design system - [x] Filtering works as expected - [x] Update functionality works for both local and SSH modes - [x] Add script functionality works correctly - [x] Color scheme is consistent across all components - [x] Button components work uniformly throughout the app --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>