Skip to content

Conversation

@michelroegl-brunner
Copy link
Member

🚀 Features Added

Actions Dropdown Menu

  • Clean Interface: Moved all action buttons except Edit into a dropdown menu
  • Smart Visibility: Dropdown only appears when actions are available
  • Auto-Close: Dropdown closes after clicking any action
  • Color Coding: Start (green), Stop (red), Update (cyan), Shell (gray), Open UI (blue)

Web UI Access (Enhanced)

  • Auto-Detection: Automatically detects Web UI URLs from script installation output
  • IP & Port Tracking: Stores and displays Web UI IP addresses and ports
  • One-Click Access: Click IP:port to open Web UI in new tab
  • Manual Detection: Re-detect IP using hostname -I inside container
  • Port Detection: Uses script metadata to get correct port (e.g., actualbudget:5006)
  • Editable Fields: Manually edit IP and port values as needed

UI Improvements

  • Consistent Styling: All buttons match existing theme with proper hover effects
  • Disabled States: Actions are disabled when container is stopped
  • Responsive Design: Works on both desktop table and mobile card views
  • Accessibility: Full keyboard navigation support via Radix UI

Help Documentation

  • Updated Help Section: Added comprehensive documentation for new features
  • Web UI Guide: Detailed explanation of auto-detection and manual detection
  • Actions Dropdown Guide: Complete overview of button organization and color coding

🔧 Technical Details

  • Created dropdown-menu.tsx component using Radix UI primitives
  • Updated InstalledScriptsTab.tsx and ScriptInstallationCard.tsx
  • Added conditional styling based on container status
  • Enhanced help documentation in HelpModal.tsx
  • Fixed syntax error in dropdown component

🎯 Benefits

  • Cleaner Interface: Reduced button clutter with organized dropdown
  • Better UX: Clear visual feedback with color-coded actions
  • Enhanced Functionality: Easy Web UI access with auto-detection
  • Improved Documentation: Comprehensive help section for new features

🧪 Testing

  • ✅ Desktop table view with actions dropdown
  • ✅ Mobile card view with actions dropdown
  • ✅ Web UI auto-detection during script installation
  • ✅ Manual IP detection via SSH
  • ✅ Conditional Start/Stop button colors
  • ✅ Help section documentation updates

- Add web_ui_ip and web_ui_port columns to installed_scripts table with migration
- Update database CRUD methods to handle new Web UI fields
- Add terminal output parsing to auto-detect Web UI URLs during installation
- Create autoDetectWebUI mutation that runs hostname -I in containers via SSH
- Add Web UI column to desktop table with editable IP and port fields
- Add Open UI button that opens http://ip:port in new tab
- Add Re-detect button for manual IP detection using script metadata
- Update mobile card view with Web UI fields and buttons
- Fix nested button hydration error in ContextualHelpIcon
- Prioritize script metadata interface_port over existing database values
- Use pct exec instead of pct enter for container command execution
- Add comprehensive error handling and user feedback
- Style auto-detect button with muted colors and Re-detect text

Features:
- Automatic Web UI detection during script installation
- Manual IP detection with port lookup from script metadata
- Editable IP and port fields in both desktop and mobile views
- Clickable Web UI links that open in new tabs
- Support for both local and SSH script executions
- Proper port detection from script JSON metadata (e.g., actualbudget:5006)
- Clean UI with subtle button styling and clear text labels
- Add disabled state to Open UI button in desktop table when container is stopped
- Update mobile card Open UI button to be disabled when container is stopped
- Apply consistent styling with Shell and Update buttons
- Prevent users from accessing Web UI when container is not running
- Add cursor-not-allowed styling for disabled clickable IP links
- Change flex layout from space-x-2 to justify-between for consistent button alignment
- Add flex-shrink-0 to prevent IP:port text and buttons from shrinking
- Add ml-2 margin to Re-detect button for proper spacing
- Apply changes to both desktop table and mobile card views
- Buttons now align vertically regardless of IP:port text length
…d update help

- Create dropdown-menu.tsx component using Radix UI primitives
- Move all action buttons except Edit into dropdown menu
- Keep Edit and Save/Cancel buttons always visible
- Add conditional styling: Start (green), Stop (red)
- Apply changes to both desktop table and mobile card views
- Add smart visibility - dropdown only shows when actions available
- Auto-close dropdown after clicking any action
- Style dropdown to match existing button theme
- Fix syntax error in dropdown-menu.tsx component
- Update help section with Web UI Access and Actions Dropdown documentation
- Add detailed explanations of auto-detection, IP/port tracking, and color coding
@michelroegl-brunner michelroegl-brunner requested a review from a team as a code owner October 14, 2025 13:22
- Updated parseWebUIUrl JSDoc return type from Object|null to {ip: string, port: number}|null
- This fixes the TypeScript error where 'ip' property was not recognized on type 'Object'
- Build now completes successfully without errors
@michelroegl-brunner michelroegl-brunner changed the title feat: Add actions dropdown menu with Web UI access and conditional Start/Stop colors feat: Add UI Access button and rearrange the Action Buttons in a Dropdown. Oct 14, 2025
@michelroegl-brunner michelroegl-brunner linked an issue Oct 14, 2025 that may be closed by this pull request
@michelroegl-brunner michelroegl-brunner merged commit ceef5c7 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.

add Button for go to the gui

3 participants