Commit Graph

11 Commits

Author SHA1 Message Date
Michel Roegl-Brunner
24afce49a3 feat: Multi-select script download with progress tracking (#121)
* feat: Add multi-select script download with progress tracking

- Add checkbox selection to script cards (both card and list views)
- Implement individual script downloads with real-time progress
- Add progress bar with visual indicators (✓ success, ✗ failed, ⟳ in-progress)
- Add batch download buttons (Download Selected, Download All Filtered)
- Add user-friendly error messages with specific guidance
- Add persistent progress bar with manual dismiss option
- Clear selection when switching between card/list views
- Update card download status immediately after completion

Features:
- Multi-select with checkboxes on script cards
- Real-time progress tracking during downloads
- Detailed error reporting with actionable messages
- Visual progress indicators for each script
- Batch download functionality for selected or filtered scripts
- Persistent progress bar until manually dismissed
- Automatic card status updates after download completion

* fix: Resolve ESLint errors

- Replace logical OR operators (||) with nullish coalescing (??) for safer null/undefined handling
- Replace for loop with for-of loop for better iteration
- Remove unused variable 'results'
- Fix all TypeScript ESLint warnings and errors

* fix: Resolve TypeScript error in loadMultipleScripts

- Use type guard to check for 'error' property before accessing
- Fix 'Property error does not exist' TypeScript error
- Ensure safe access to error property in result object
2025-10-13 14:17:11 +02:00
Michel Roegl-Brunner
c12c96cfb9 UI Fixes: Button Styling and Tab Navigation Improvements (#119)
* Fix server column alignment in installed scripts table

- Add text-left class to server column td element
- Add inline-block class to server name span element
- Ensures server column content aligns with header like other columns

* Fix UpdateableBadge overflow on smaller screens

- Add flex-wrap and gap classes to badge containers in ScriptCard and ScriptCardList
- Prevents badges from overflowing card boundaries on narrow screens
- Maintains proper spacing with gap-1/gap-2 for wrapped elements
- Improves responsive design for mobile and laptop screens

* Enhance action buttons with blueish theme and hover animations

- Update Edit, Update, Delete, Save, and Cancel buttons with color-coded themes
- Edit: Blue theme (bg-blue-50, text-blue-700)
- Update: Cyan theme (bg-cyan-50, text-cyan-700)
- Delete: Red theme (bg-red-50, text-red-700)
- Save: Green theme (bg-green-50, text-green-700)
- Cancel: Gray theme (bg-gray-50, text-gray-700)
- Add hover effects: scale-105, shadow-md, color transitions
- Apply consistent styling to both table and mobile card views
- Disabled buttons prevent scale animation and show proper cursor states

* Tone down button colors for better dark theme compatibility

- Replace bright flashbang colors with subtle dark theme variants
- Use 900-level colors with 20% opacity for backgrounds
- Use 300-level colors for text with 200-level on hover
- Use 700-level colors with 50% opacity for borders
- Maintain color coding but with much more subtle appearance
- Better contrast and readability against dark backgrounds
- No more flashbang effect! 😅

* Refactor button styling with semantic variants for uniform appearance

- Add semantic button variants: edit, update, delete, save, cancel
- Each variant has consistent dark theme colors and hover effects
- Remove custom className overrides from all button instances
- Centralize styling in Button component for maintainability
- All action buttons now use semantic variants instead of custom classes
- Much cleaner code and consistent styling across the application

* Remove rounded bottom border from active tab

- Add rounded-t-md rounded-b-none classes to active tab styling
- Creates flat bottom edge that connects seamlessly with content below
- Applied to all three tabs: Available Scripts, Downloaded Scripts, Installed Scripts
- Maintains rounded top corners for visual appeal while removing bottom rounding

* Apply flat bottom edge to tab hover states

- Add hover:rounded-t-md hover:rounded-b-none to inactive tab hover states
- Ensures consistent flat bottom edge on both active and hover states
- Creates uniform visual behavior across all tab interactions
- Maintains rounded top corners while removing bottom rounding on hover
2025-10-13 13:14:11 +02:00
Michel Roegl-Brunner
b366a33f07 Remove execution_mode dependencies from InstalledScriptsTab (#50)
- 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
2025-10-07 09:59:10 +02:00
Michel Roegl-Brunner
e09c1bbf5d Merge development into main (#42)
* 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>
2025-10-06 16:24:19 +02:00
Michel Roegl-Brunner
a05185db1b Revert "feat: Add inline editing and manual script entry functionality (#39)" (#40)
This reverts commit a410aeacf7.
2025-10-06 16:21:49 +02:00
Michel Roegl-Brunner
a410aeacf7 feat: Add inline editing and manual script entry functionality (#39)
* 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>
2025-10-06 16:20:07 +02:00
CanbiZ
ec20e0322a Add dark mode support across UI (#33)
* 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.
2025-10-06 13:35:53 +02:00
Michel Roegl-Brunner
a053275d70 Remove debug console.log statements from WebSocket handler
- Removed verbose debug output from WebSocket connection logs
- Removed script execution debug messages
- Removed input handling debug logs
- Kept important error logging and server startup messages
- WebSocket functionality remains fully intact
2025-09-11 10:38:31 +02:00
Michel Roegl-Brunner
57293b9e59 Fix script execution issues and improve container creation
- Fixed syntax errors in build.func (duplicate export, unmatched quotes)
- Fixed color variable initialization by calling load_functions in core.func
- Replaced undefined function calls (post_to_api, post_update_to_api) with echo statements
- Fixed install script execution by copying scripts into container first
- Made create_lxc.sh executable
- Improved error handling and script sourcing
- Added missing core functions and tools
- Enhanced script downloader and local script management
2025-09-10 16:26:29 +02:00
Michel Roegl-Brunner
78144d2641 fix: Add defensive programming and error handling to ScriptCard and ScriptsGrid
- Add null checks for script properties to prevent undefined errors
- Add proper key props to prevent React warnings
- Add validation for script objects before rendering
- Improve error handling for missing or malformed data
2025-09-10 14:49:19 +02:00
Michel Roegl-Brunner
996fce1e11 feat: Add GitHub script list functionality with cards and modal
- 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
2025-09-10 14:37:37 +02:00