UI/UX Improvements and Bug Fixes (#138)

* Improve navigation layout: reduce spacing and move help icons inside 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

* Enhance stop/destroy button hover effects and colors

- 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

* Fix input field alignment in editing mode

- 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

* Improve button styling on available scripts page

- 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

* Reduce footer size by approximately 50%

- 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

* Add tab persistence with localStorage

- 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

* Clean up code: remove unused comments and variables

- Remove unnecessary comments in InstalledScriptsTab
- Clean up unused error variable in installedScripts router
- Minor code cleanup for better readability
This commit is contained in:
Michel Roegl-Brunner
2025-10-14 09:03:30 +02:00
committed by GitHub
parent 892b3ae5df
commit 7454799971
5 changed files with 95 additions and 85 deletions

View File

@@ -12,10 +12,10 @@ export function Footer({ onOpenReleaseNotes }: FooterProps) {
const { data: versionData } = api.version.getCurrentVersion.useQuery();
return (
<footer className="sticky bottom-0 mt-auto border-t border-border bg-muted/30 py-6 backdrop-blur-sm">
<footer className="sticky bottom-0 mt-auto border-t border-border bg-muted/30 py-3 backdrop-blur-sm">
<div className="container mx-auto px-4">
<div className="flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-muted-foreground">
<div className="flex items-center gap-4">
<div className="flex flex-col sm:flex-row items-center justify-between gap-2 text-sm text-muted-foreground">
<div className="flex items-center gap-2">
<span>© 2024 PVE Scripts Local</span>
{versionData?.success && versionData.version && (
<Button
@@ -29,7 +29,7 @@ export function Footer({ onOpenReleaseNotes }: FooterProps) {
)}
</div>
<div className="flex items-center gap-4">
<div className="flex items-center gap-2">
<Button
variant="ghost"
size="sm"