Skip to content

Conversation

@michelroegl-brunner
Copy link
Member

Summary

This PR includes several UI/UX improvements and bug fixes for the PVE Scripts Local application.

Changes Made

Navigation Improvements

  • Reduced spacing between navigation items for more compact layout
  • Moved help icons inside navigation buttons for better UX
  • Simplified structure by removing unnecessary wrapper divs

Button Styling Enhancements

  • Download button: Made smaller and less colorful with subtle blue theme
  • Action buttons: Updated Clear Selection and Select All Visible to match Settings button styling
  • Stop/Destroy buttons: Enhanced with scaling and shadow hover effects, plus vibrant color coding

Input Field Alignment Fixes

  • Fixed vertical alignment of script name and container ID input fields in editing mode
  • Removed script path line during editing for cleaner interface
  • Consistent styling with proper min-height and flex centering

Footer Improvements

  • Reduced footer size by approximately 50% (py-6 to py-3)
  • Tighter spacing between elements for more compact layout
  • Better screen utilization for main content

Tab Persistence

  • Added localStorage persistence for active tab selection
  • Tab selection survives page reloads and browser sessions
  • SSR compatible with proper browser environment checks

Code Cleanup

  • Removed unnecessary comments and unused variables
  • Improved code readability and maintainability

Testing

  • All functionality tested and working correctly
  • Responsive design maintained across different screen sizes
  • No breaking changes introduced

Screenshots

The UI improvements provide a more polished and professional appearance with better user experience.

…nav buttons

- Reduced horizontal spacing between nav items from sm:space-x-2 lg:space-x-8 to sm:space-x-1
- Moved ContextualHelpIcon components inside Button components for better UX
- Removed unnecessary wrapper divs to create more compact layout
- Help symbols are now part of the clickable nav area
- Added scaling and shadow hover effects to stop/start and destroy buttons
- Enhanced color scheme with high-contrast colors:
  - Stop button: vibrant red (bg-red-600) with red glow shadow
  - Start button: vibrant green (bg-green-600) with green glow shadow
  - Destroy button: dark red (bg-red-800) with intense red glow shadow
- Added colored borders and smooth transitions for better visual feedback
- Improved button visibility and user experience with color-coded actions
- Improved vertical alignment of script name and container ID input fields
- Removed script path line during editing for cleaner interface
- Added consistent min-height and flex centering for both input fields
- Enhanced input styling with better padding and focus states
- Input fields now align perfectly at the same height level
- Made download button smaller and less colorful with subtle blue theme
- Updated Clear Selection and Select All Visible buttons to match Settings button styling
- Changed buttons to outline variant with default size for consistency
- Removed custom border styling to use standard outline appearance
- Improved visual hierarchy and button cohesion across the interface
- Changed vertical padding from py-6 to py-3 (3rem to 1.5rem)
- Reduced gaps between elements from gap-4 to gap-2 throughout
- Made footer more compact while maintaining functionality
- Improved screen space utilization for main content
- Implement localStorage persistence for active tab selection
- Tab selection now survives page reloads and browser sessions
- Added lazy initialization to read saved tab from localStorage
- Added useEffect to automatically save tab changes to localStorage
- Includes SSR safety checks for Next.js compatibility
- Defaults to 'scripts' tab if no saved tab found
- Remove unnecessary comments in InstalledScriptsTab
- Clean up unused error variable in installedScripts router
- Minor code cleanup for better readability
@michelroegl-brunner michelroegl-brunner requested a review from a team as a code owner October 14, 2025 07:02
@michelroegl-brunner michelroegl-brunner merged commit 7454799 into main Oct 14, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Button Size of "visible, clear selected, Downloaded.." edit fitting (installed Scripts)

2 participants