* Fix script viewer to support vm/ and tools/ scripts
- Update ScriptDetailModal to extract scriptName from any path (ct/, vm/, tools/)
- Refactor TextViewer to use actual script paths from install_methods
- Remove hardcoded path assumptions and use dynamic script paths
- Only show Install Script tab for ct/ scripts that have install scripts
- Rename CT Script tab to Script for better clarity
* Fix downloaded scripts count to include vm/ and tools/ scripts
- Update matching logic to use same robust approach as DownloadedScriptsTab
- Add normalized slug matching to handle filename-based slugs vs JSON slugs
- Add multiple fallback matching strategies for better script detection
- Fixes issue where scripts in vm/ and tools/ directories weren't being counted
* Filter categories to only show those with scripts
- Add filter to exclude categories with count 0 from category sidebar
- Only categories with at least one script will be displayed
- Reduces UI clutter by hiding empty categories
* Fix intermittent page reloads from VersionDisplay reconnect logic
- Add guards to prevent reload when not updating
- Use refs to track isUpdating and isNetworkError state in interval callbacks
- Add hasReloadedRef flag to prevent multiple reloads
- Clear reconnect interval when update completes or component unmounts
- Only start reconnect attempts when actually updating
- Prevents false positive reloads when server responds normally
* Fix Next.js HMR WebSocket and static asset handling
- Add WebSocket upgrade detection to only intercept /ws/script-execution
- Pass all other WebSocket upgrades (including HMR) to Next.js handler
- Ensure _next routes and static assets are properly handled by Next.js
- Fixes 400 errors for Next.js HMR WebSocket connections
- Fixes 403 errors for static assets by ensuring proper routing
* Fix WebSocket upgrade handling to properly route Next.js HMR
- Create WebSocketServer with noServer: true to avoid auto-attaching
- Manually handle upgrade events to route /ws/script-execution to our WebSocketServer
- Route all other WebSocket upgrades (including Next.js HMR) to Next.js handler
- This ensures Next.js HMR WebSocket connections are properly handled
- Fixes 400 errors for /_next/webpack-hmr WebSocket connections
* Revert WebSocket handling to simpler approach
- Go back to attaching WebSocketServer directly with path option
- Remove manual upgrade event handling that was causing errors
- The path option should filter to only /ws/script-execution
- Next.js should handle its own HMR WebSocket upgrades naturally
* Fix WebSocket upgrade handling to preserve Next.js HMR handlers
- Save existing upgrade listeners before adding our own
- Call existing listeners for non-matching paths to allow Next.js HMR
- Only handle /ws/script-execution ourselves
- This ensures Next.js can handle its own WebSocket upgrades for HMR
* Fix random page reloads during normal app usage
- Memoize startReconnectAttempts with useCallback to prevent recreation on every render
- Fix useEffect dependency arrays to include memoized function
- Add stricter guards checking refs before starting reconnect attempts
- Ensure reconnect logic only runs when actually updating (not during normal usage)
- Add early return in fallback useEffect to prevent false triggers
- Add ref guards in ResyncButton to prevent multiple simultaneous sync operations
- Only reload after sync if it was user-initiated
* Fix critical bug: prevent reloads from stale updateLogsData.isComplete
- Add isUpdating guard before processing updateLogsData.isComplete
- Reset shouldSubscribe when update completes or fails
- Prevent stale isComplete data from triggering reloads during normal usage
* Add update confirmation modal with changelog display
- Add UpdateConfirmationModal component that shows changelog before update
- Modify getVersionStatus to include release body (changelog) in response
- Update VersionDisplay to show confirmation modal instead of starting update directly
- Users must review changelog and click 'Proceed with Update' to start update
- Ensures users see potential breaking changes before updating
* feat: implement light/dark mode theme system
- Add semantic color CSS variables (success, warning, info, error) for both themes
- Create ThemeProvider with React context and localStorage persistence
- Add ThemeToggle component with sun/moon icons for header region
- Add theme switcher in General Settings modal
- Replace 200+ hardcoded Tailwind colors with CSS variables across 30+ components
- Update layout.tsx to remove forced dark mode
- Keep terminal colors unchanged as requested
- Default to dark mode, with seamless light/dark switching
Components updated:
- High-priority: InstalledScriptsTab, ScriptInstallationCard, LXCSettingsModal, ScriptsGrid
- All remaining component files with hardcoded colors
- UI components: button, toggle, badge variants
- Modal components: ErrorModal, ConfirmationModal, AuthModal, SetupModal
- Form components: ServerForm, FilterBar, CategorySidebar
- Display components: ScriptCard, ScriptCardList, DiffViewer, TextViewer
Theme switchers:
- Header: Small nuanced toggle in top-right
- Settings: Detailed Light/Dark selection in General Settings
* fix: resolve ESLint warnings
- Fix missing dependencies in useCallback and useEffect hooks
- Prefix unused parameter with underscore to satisfy ESLint rules
- Build now completes without warnings
* fix: improve toggle component styling for better visibility
- Use explicit gray colors instead of CSS variables for toggle background
- Ensure proper contrast in both light and dark modes
- Toggle switches now display correctly with proper visual states
* fix: improve toggle visual states for better UX
- Use explicit conditional styling instead of peer classes
- Active toggles now clearly show primary color background
- Inactive toggles show gray background for clear distinction
- Much easier to tell which toggles are on/off at a glance
* fix: improve toggle contrast in dark mode
- Change inactive toggle background from gray-700 to gray-600 for better visibility
- Add darker border color (gray-500) for toggle handle in dark mode
- Toggles now have proper contrast against dark backgrounds
- Both light and dark modes now have clear visual distinction
* fix: resolve dependency loop and improve dropdown styling
- Fix circular dependency in InstalledScriptsTab status check
- Remove fetchContainerStatuses function and inline logic in useEffect
- Make all dropdown menu items grey with consistent hover effects
- Update both ScriptInstallationCard and InstalledScriptsTab dropdowns
- Remove unused useCallback import
- Build now completes without warnings or errors
* fix: restore proper button colors and eliminate dependency loop
- Restore red color for Stop/Destroy buttons and green for Start buttons
- Fix circular dependency by using ref for containerStatusMutation
- Update both InstalledScriptsTab and ScriptInstallationCard dropdowns
- Maintain grey color for other menu items (Update, Shell, Open UI, etc.)
- Build now completes without warnings or dependency loops
* feat: add missing hover utility classes for semantic colors
- Add hover states for success, warning, info, error colors
- Add hover:bg-success/20, hover:bg-error/20, etc. classes
- Add hover:text-success-foreground, hover:text-error-foreground classes
- Start/Stop and Destroy buttons now have proper hover effects
- All dropdown menu items now have consistent hover behavior
* feat: improve status cards with useful LXC container information
- Replace useless 'Successful/Failed/In Progress' cards with meaningful data
- Show 'Running LXC' count in green (actual running containers)
- Show 'Stopped LXC' count in red (actual stopped containers)
- Keep 'Total Installations' for overall count
- Change layout from 4 columns to 3 columns for better spacing
- Status cards now show real-time container states instead of installation status
* style: center content in status cards
- Add text-center class to each individual status card
- Numbers and labels now centered within each card
- Improves visual balance and readability
- All three cards (Total, Running LXC, Stopped LXC) now have centered content
* feat: implement comprehensive help system with contextual icons
- Add HelpModal component with navigation sidebar and 7 help sections
- Add HelpButton component for main header controls
- Add ContextualHelpIcon component for contextual help throughout UI
- Add help icons to all major UI sections:
- Settings modals (Server Settings, General Settings)
- Sync button with update system help
- Tab headers (Available, Downloaded, Installed Scripts)
- FilterBar and CategorySidebar
- Add comprehensive help content covering:
- Server Settings: PVE server management, auth types, color coding
- General Settings: Save filters, GitHub integration, authentication
- Sync Button: Script metadata syncing explanation
- Available Scripts: Browsing, filtering, downloading
- Downloaded Scripts: Local script management and updates
- Installed Scripts: Auto-detection feature (primary focus), manual management
- Update System: Automatic/manual update process, release notes
- Improve VersionDisplay: remove 'Update Available' text, add 'Release Notes:' label
- Make help icons more noticeable with increased size
- Fix dark theme compatibility issues in help modal
* fix: resolve linting errors in HelpModal component
- Remove unused Filter import
- Fix unescaped entities by replacing apostrophes and quotes with HTML entities
- All linting errors resolved
* feat: implement release notes modal system
- Add getAllReleases API endpoint to fetch GitHub releases with notes
- Create ReleaseNotesModal component with localStorage version tracking
- Add sticky Footer component with release notes link
- Make version badge clickable to open release notes
- Auto-show modal after updates when version changes
- Track last seen version in localStorage to prevent repeated shows
- Highlight new version in modal when opened after update
- Add manual access via footer and version badge clicks
* fix: use nullish coalescing operator in ReleaseNotesModal
- Replace logical OR (||) with nullish coalescing (??) operator
- Fixes ESLint prefer-nullish-coalescing rule violation
- Ensures build passes successfully
- Remove ExecutionModeBadge import and usage
- Update filtering logic to use server_name presence instead of execution_mode
- Simplify update script logic by removing mode property
- Update Terminal component call to determine mode based on server presence
- Replace ExecutionModeBadge in table with simple text display
- Maintain backend API compatibility by keeping execution_mode in mutations
- Use nullish coalescing operator (??) for better null handling
* feat: improve button layout and UI organization (#35)
- Reorganize control buttons into a structured container with proper spacing
- Add responsive design for mobile and desktop layouts
- Improve SettingsButton and ResyncButton component structure
- Enhance visual hierarchy with better typography and spacing
- Add background container with shadow and border for better grouping
- Make layout responsive with proper flexbox arrangements
* Add category sidebar and filtering to scripts grid (#36)
* Add category sidebar and filtering to scripts grid
Introduces a CategorySidebar component with icon mapping and category selection. Updates metadata.json to include icons for each category. Enhances ScriptsGrid to support category-based filtering and integrates the sidebar, improving script navigation and discoverability. Also refines ScriptDetailModal layout for better modal presentation.
* Add category metadata to scripts and improve filtering
Introduces category metadata loading and exposes it via new API endpoints. Script cards are now enhanced with category information, allowing for accurate category-based filtering and counting in the ScriptsGrid component. Removes hardcoded category logic and replaces it with dynamic data from metadata.json.
* Add reusable Badge component and refactor badge usage (#37)
Introduces a new Badge component with variants for type, updateable, privileged, status, execution mode, and note. Refactors ScriptCard, ScriptDetailModal, and InstalledScriptsTab to use the new Badge components, improving consistency and maintainability. Also updates DarkModeProvider and layout.tsx for better dark mode handling and fallback.
* Add advanced filtering and sorting to ScriptsGrid (#38)
Introduces a new FilterBar component for ScriptsGrid, enabling filtering by search query, updatable status, script types, and sorting by name or creation date. Updates scripts API to include creation date in card data, improves deduplication and category counting logic, and adds error handling for missing script directories.
* refactore installed scipts tab (#41)
* feat: Add inline editing and manual script entry functionality
- Add inline editing for script names and container IDs in installed scripts table
- Add manual script entry form for pre-installed containers
- Update database and API to support script_name editing
- Improve dark mode hover effects for table rows
- Add form validation and error handling
- Support both local and SSH execution modes for manual entries
* feat: implement installed scripts functionality and clean up test files
- Add installed scripts tab with filtering and execution capabilities
- Update scripts grid with better type safety and error handling
- Remove outdated test files and update test configuration
- Fix TypeScript and ESLint issues in components
- Update .gitattributes for proper line ending handling
* fix: resolve TypeScript error with categoryNames type mismatch
- Fixed categoryNames type from (string | undefined)[] to string[] in scripts router
- Added proper type filtering and assertion in getScriptCardsWithCategories
- Added missing ScriptCard import in scripts router
- Ensures type safety for categoryNames property throughout the application
---------
Co-authored-by: CanbiZ <47820557+MickLesk@users.noreply.github.com>
* feat: improve button layout and UI organization (#35)
- Reorganize control buttons into a structured container with proper spacing
- Add responsive design for mobile and desktop layouts
- Improve SettingsButton and ResyncButton component structure
- Enhance visual hierarchy with better typography and spacing
- Add background container with shadow and border for better grouping
- Make layout responsive with proper flexbox arrangements
* Add category sidebar and filtering to scripts grid (#36)
* Add category sidebar and filtering to scripts grid
Introduces a CategorySidebar component with icon mapping and category selection. Updates metadata.json to include icons for each category. Enhances ScriptsGrid to support category-based filtering and integrates the sidebar, improving script navigation and discoverability. Also refines ScriptDetailModal layout for better modal presentation.
* Add category metadata to scripts and improve filtering
Introduces category metadata loading and exposes it via new API endpoints. Script cards are now enhanced with category information, allowing for accurate category-based filtering and counting in the ScriptsGrid component. Removes hardcoded category logic and replaces it with dynamic data from metadata.json.
* Add reusable Badge component and refactor badge usage (#37)
Introduces a new Badge component with variants for type, updateable, privileged, status, execution mode, and note. Refactors ScriptCard, ScriptDetailModal, and InstalledScriptsTab to use the new Badge components, improving consistency and maintainability. Also updates DarkModeProvider and layout.tsx for better dark mode handling and fallback.
* Add advanced filtering and sorting to ScriptsGrid (#38)
Introduces a new FilterBar component for ScriptsGrid, enabling filtering by search query, updatable status, script types, and sorting by name or creation date. Updates scripts API to include creation date in card data, improves deduplication and category counting logic, and adds error handling for missing script directories.
* feat: Add inline editing and manual script entry functionality
- Add inline editing for script names and container IDs in installed scripts table
- Add manual script entry form for pre-installed containers
- Update database and API to support script_name editing
- Improve dark mode hover effects for table rows
- Add form validation and error handling
- Support both local and SSH execution modes for manual entries
* feat: implement installed scripts functionality and clean up test files
- Add installed scripts tab with filtering and execution capabilities
- Update scripts grid with better type safety and error handling
- Remove outdated test files and update test configuration
- Fix TypeScript and ESLint issues in components
- Update .gitattributes for proper line ending handling
* fix: resolve TypeScript error with categoryNames type mismatch
- Fixed categoryNames type from (string | undefined)[] to string[] in scripts router
- Added proper type filtering and assertion in getScriptCardsWithCategories
- Added missing ScriptCard import in scripts router
- Ensures type safety for categoryNames property throughout the application
---------
Co-authored-by: CanbiZ <47820557+MickLesk@users.noreply.github.com>
* Add dark mode support across UI
Introduces DarkModeProvider and DarkModeToggle components for theme management. Updates all major UI components and pages to support dark mode styling using Tailwind CSS dark variants, improving accessibility and user experience for users preferring dark themes.
* Improve dark mode initialization and modal UI (#32)
Adds a script to layout.tsx to set dark mode before hydration, preventing UI flicker. Refactors DarkModeProvider to initialize theme and dark state after mount. Updates ScriptDetailModal for improved readability, consistent styling, and better handling of script status, install methods, and notes.
- Replace GitHub API calls (390+) with 1 API call + raw URL downloads
- Create GitHubJsonService for efficient JSON file syncing
- Reduce API rate limiting issues by 99.7%
- Add automatic page reload after successful sync
- Update tests to use new service
- Maintain same functionality with better performance
Performance improvement:
- Before: 390+ GitHub API calls (1 per JSON file)
- After: 1 GitHub API call + 389 raw URL downloads
- Raw URLs have no rate limits, making sync much more reliable
- Add JSON_FOLDER environment variable for GitHub repo JSON path
- Create TypeScript types for script JSON structure
- Implement GitHub API service to fetch scripts from repository
- Add tRPC routes for script management (getScriptCards, getAllScripts, getScriptBySlug, resyncScripts)
- Create ScriptCard component for displaying script information
- Create ScriptDetailModal for full script details view
- Create ScriptsGrid component with loading and error states
- Add ResyncButton component for refreshing scripts from upstream
- Update main page with tabbed interface (GitHub Scripts vs Local Scripts)
- Add proper error handling and loading states throughout
