SVI/ProxmoxVE-Local
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE-Local.git synced 2026-03-31 06:23:54 -04:00
Code Issues 56 Packages Projects Releases 7 Wiki Activity

[PR #146] [MERGED] feat: Add UI Access button and rearrange the Action Buttons in a Dropdown. #214

New Issue
Closed
opened 2025-11-20 04:13:33 -05:00 by saavagebueno · 0 comments
saavagebueno commented 2025-11-20 04:13:33 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/community-scripts/ProxmoxVE-Local/pull/146
Author: @michelroegl-brunner
Created: 10/14/2025
Status: ✅ Merged
Merged: 10/14/2025
Merged by: @michelroegl-brunner

Base: main ← Head: feat/open_script_ui

📝 Commits (6)

  • e3b9cee feat: Add Web UI IP:Port tracking and access functionality
  • 77f3bcb feat: Disable Open UI button when container is stopped
  • cfc664b feat: Align Re-detect buttons consistently in Web UI column
  • 64a3142 feat: Add actions dropdown menu with conditional Start/Stop colors and update help
  • 3e8ba6a Fix TypeScript build error in server.js
  • 0ab76b8 Merge branch 'main' into feat/open_script_ui

📊 Changes

11 files changed (+1608 additions, -139 deletions)

View changed files

📝 package-lock.json (+679 -1)
📝 package.json (+1 -0)
📝 server.js (+73 -0)
📝 src/app/_components/ContextualHelpIcon.tsx (+3 -6)
📝 src/app/_components/HelpModal.tsx (+41 -1)
📝 src/app/_components/InstalledScriptsTab.tsx (+227 -63)
📝 src/app/_components/ScriptInstallationCard.tsx (+166 -60)
📝 src/app/_components/ui/button.tsx (+4 -0)
➕ src/app/_components/ui/dropdown-menu.tsx (+198 -0)
📝 src/server/api/routers/installedScripts.ts (+178 -2)
📝 src/server/database.js (+38 -6)

📄 Description

🚀 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

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/community-scripts/ProxmoxVE-Local/pull/146 **Author:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Created:** 10/14/2025 **Status:** ✅ Merged **Merged:** 10/14/2025 **Merged by:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Base:** `main` ← **Head:** `feat/open_script_ui` --- ### 📝 Commits (6) - [`e3b9cee`](https://github.com/community-scripts/ProxmoxVE-Local/commit/e3b9cee5bcde0995b15d14d46cdafa9278dba53c) feat: Add Web UI IP:Port tracking and access functionality - [`77f3bcb`](https://github.com/community-scripts/ProxmoxVE-Local/commit/77f3bcb5d2d3b9d8ad24a537aefe8cbecf803338) feat: Disable Open UI button when container is stopped - [`cfc664b`](https://github.com/community-scripts/ProxmoxVE-Local/commit/cfc664b9a61fdcbd4b183e0d2804465b9dad4120) feat: Align Re-detect buttons consistently in Web UI column - [`64a3142`](https://github.com/community-scripts/ProxmoxVE-Local/commit/64a3142dc84720f386d9f310e46a26f1264ed1be) feat: Add actions dropdown menu with conditional Start/Stop colors and update help - [`3e8ba6a`](https://github.com/community-scripts/ProxmoxVE-Local/commit/3e8ba6a9bf693c189c8e7b16ba9d6ef307f0edf5) Fix TypeScript build error in server.js - [`0ab76b8`](https://github.com/community-scripts/ProxmoxVE-Local/commit/0ab76b883abba811ba24e035b06a30d4b1cc1289) Merge branch 'main' into feat/open_script_ui ### 📊 Changes **11 files changed** (+1608 additions, -139 deletions) <details> <summary>View changed files</summary> 📝 `package-lock.json` (+679 -1) 📝 `package.json` (+1 -0) 📝 `server.js` (+73 -0) 📝 `src/app/_components/ContextualHelpIcon.tsx` (+3 -6) 📝 `src/app/_components/HelpModal.tsx` (+41 -1) 📝 `src/app/_components/InstalledScriptsTab.tsx` (+227 -63) 📝 `src/app/_components/ScriptInstallationCard.tsx` (+166 -60) 📝 `src/app/_components/ui/button.tsx` (+4 -0) ➕ `src/app/_components/ui/dropdown-menu.tsx` (+198 -0) 📝 `src/server/api/routers/installedScripts.ts` (+178 -2) 📝 `src/server/database.js` (+38 -6) </details> ### 📄 Description ## 🚀 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 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
saavagebueno added the pull-request label 2025-11-20 04:13:33 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
enhancement
enhancement
feature
in progress
pull-request
Mirrored from GitHub Pull Request
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
saavagebueno
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: SVI/ProxmoxVE-Local#214
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?