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 #103] [MERGED] feat: Server Color Coding System #190

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

📋 Pull Request Information

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

Base: main ← Head: feature/server-color-coding

📝 Commits (10+)

  • bf858f0 feat: implement server color coding feature
  • 674839d fix: resolve TypeScript errors in color coding implementation
  • 5680b5a feat: add color-coded dropdown for server selection
  • dd92ed3 fix: generate new execution ID for each script run
  • 774a176 fix: improve whiptail handling and execution ID generation
  • 2abdaed fix: revert problematic whiptail changes that broke terminal display
  • 28d0841 fix: remove remaining inWhiptailSession reference
  • 2cd25eb debug: add console logging to terminal message handling
  • 679afa8 fix: prevent WebSocket reconnection loop
  • 9673bcd fix: prevent WebSocket reconnection on second script run

📊 Changes

15 files changed (+421 additions, -64 deletions)

View changed files

➕ src/app/_components/ColorCodedDropdown.tsx (+123 -0)
📝 src/app/_components/ExecutionModeModal.tsx (+14 -17)
📝 src/app/_components/GeneralSettingsModal.tsx (+49 -0)
📝 src/app/_components/InstalledScriptsTab.tsx (+15 -3)
📝 src/app/_components/ScriptInstallationCard.tsx (+15 -4)
📝 src/app/_components/ServerForm.tsx (+40 -2)
📝 src/app/_components/ServerList.tsx (+10 -1)
📝 src/app/_components/Terminal.tsx (+15 -25)
📝 src/app/api/servers/[id]/route.ts (+3 -2)
📝 src/app/api/servers/route.ts (+3 -2)
➕ src/app/api/settings/color-coding/route.ts (+75 -0)
📝 src/env.js (+4 -0)
➕ src/lib/colorUtils.ts (+35 -0)
📝 src/server/database.js (+18 -8)
📝 src/types/server.ts (+2 -0)

📄 Description

🎨 Server Color Coding Feature

This PR implements a comprehensive server color coding system that allows users to visually distinguish between different servers throughout the application.

✨ Features Added

🎛️ General Settings

  • Toggle Control: Added server color coding enable/disable toggle in General Settings
  • Environment Storage: Setting saved in file as
  • API Endpoint: New route for managing the setting

🎨 Server Management

  • Color Picker: Added color selection in server settings modal (only visible when color coding is enabled)
  • Database Schema: Added [\e[m] column to servers table with migration support
  • Default Color: Servers get a default blue color () when created

🖥️ UI Color Application

  • Server Cards: Left border colored with server color
  • Installed Scripts Table:
    • Each row has colored left border
    • Server name displayed with background color and readable text
    • Fixed "Local" display issue (now shows "-" for null server names)
  • Script Installation Cards: Colored borders and server name backgrounds
  • Execution Modal: Custom color-coded dropdown for server selection

🔧 Technical Improvements

  • Color Utils: New function for readable text on colored backgrounds
  • Custom Dropdown: Created component for enhanced server selection
  • Type Safety: Updated TypeScript interfaces to include color field
  • Database Migration: Automatic migration for existing databases

🐛 Bug Fixes

  • Terminal Stability: Fixed WebSocket reconnection loops that caused blank terminal screens
  • Script Execution: Resolved "script already running" errors on subsequent runs
  • Execution ID Management: Proper unique execution ID generation for each script run
  • SSH Preselection: Execution modal now preselects SSH mode by default

🎯 User Experience

  • Visual Distinction: Easy identification of different servers at a glance
  • Consistent Theming: Color coding applied consistently across all server references
  • Accessibility: Automatic contrast calculation ensures readable text
  • Optional Feature: Can be disabled if not needed

🧪 Testing

  • ✅ Color coding toggle works correctly
  • ✅ Server color picker functions properly
  • ✅ Colors applied consistently across UI
  • ✅ Terminal execution stable for multiple runs
  • ✅ Database migration handles existing data
  • ✅ TypeScript compilation clean

📝 Database Changes

  • Added [\e[m] column to table
  • Migration script handles existing databases
  • Backward compatible with existing server data

This feature significantly improves the user experience by providing visual server identification throughout the application while maintaining full backward compatibility.

🔄 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/103 **Author:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Created:** 10/10/2025 **Status:** ✅ Merged **Merged:** 10/10/2025 **Merged by:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Base:** `main` ← **Head:** `feature/server-color-coding` --- ### 📝 Commits (10+) - [`bf858f0`](https://github.com/community-scripts/ProxmoxVE-Local/commit/bf858f0a68db4dfef9073065cd9e18421c511e20) feat: implement server color coding feature - [`674839d`](https://github.com/community-scripts/ProxmoxVE-Local/commit/674839ddf6c2108751a718ee7990a9afd90a8a82) fix: resolve TypeScript errors in color coding implementation - [`5680b5a`](https://github.com/community-scripts/ProxmoxVE-Local/commit/5680b5a2b0177f7d5874adff5a61cac27f163609) feat: add color-coded dropdown for server selection - [`dd92ed3`](https://github.com/community-scripts/ProxmoxVE-Local/commit/dd92ed3d2e8a1a6de24acd0b5afe7ee715241c7b) fix: generate new execution ID for each script run - [`774a176`](https://github.com/community-scripts/ProxmoxVE-Local/commit/774a176eed1da82df1efee206602923940422d66) fix: improve whiptail handling and execution ID generation - [`2abdaed`](https://github.com/community-scripts/ProxmoxVE-Local/commit/2abdaedf22f7f3a412fad4b6aa1759a607ad16eb) fix: revert problematic whiptail changes that broke terminal display - [`28d0841`](https://github.com/community-scripts/ProxmoxVE-Local/commit/28d08412cd6d56b074458cdda18b5c2fcdaafe05) fix: remove remaining inWhiptailSession reference - [`2cd25eb`](https://github.com/community-scripts/ProxmoxVE-Local/commit/2cd25eb4d55953979e45b3935600a9b62476914a) debug: add console logging to terminal message handling - [`679afa8`](https://github.com/community-scripts/ProxmoxVE-Local/commit/679afa82ae12551d76b0471d9d74a88426ca43a7) fix: prevent WebSocket reconnection loop - [`9673bcd`](https://github.com/community-scripts/ProxmoxVE-Local/commit/9673bcd181be0a96c0f1bb7fac5972cbdbbeff03) fix: prevent WebSocket reconnection on second script run ### 📊 Changes **15 files changed** (+421 additions, -64 deletions) <details> <summary>View changed files</summary> ➕ `src/app/_components/ColorCodedDropdown.tsx` (+123 -0) 📝 `src/app/_components/ExecutionModeModal.tsx` (+14 -17) 📝 `src/app/_components/GeneralSettingsModal.tsx` (+49 -0) 📝 `src/app/_components/InstalledScriptsTab.tsx` (+15 -3) 📝 `src/app/_components/ScriptInstallationCard.tsx` (+15 -4) 📝 `src/app/_components/ServerForm.tsx` (+40 -2) 📝 `src/app/_components/ServerList.tsx` (+10 -1) 📝 `src/app/_components/Terminal.tsx` (+15 -25) 📝 `src/app/api/servers/[id]/route.ts` (+3 -2) 📝 `src/app/api/servers/route.ts` (+3 -2) ➕ `src/app/api/settings/color-coding/route.ts` (+75 -0) 📝 `src/env.js` (+4 -0) ➕ `src/lib/colorUtils.ts` (+35 -0) 📝 `src/server/database.js` (+18 -8) 📝 `src/types/server.ts` (+2 -0) </details> ### 📄 Description ## 🎨 Server Color Coding Feature This PR implements a comprehensive server color coding system that allows users to visually distinguish between different servers throughout the application. ### ✨ Features Added #### 🎛️ General Settings - **Toggle Control**: Added server color coding enable/disable toggle in General Settings - **Environment Storage**: Setting saved in file as - **API Endpoint**: New route for managing the setting #### 🎨 Server Management - **Color Picker**: Added color selection in server settings modal (only visible when color coding is enabled) - **Database Schema**: Added \[\e[m\] column to servers table with migration support - **Default Color**: Servers get a default blue color () when created #### 🖥️ UI Color Application - **Server Cards**: Left border colored with server color - **Installed Scripts Table**: - Each row has colored left border - Server name displayed with background color and readable text - Fixed "Local" display issue (now shows "-" for null server names) - **Script Installation Cards**: Colored borders and server name backgrounds - **Execution Modal**: Custom color-coded dropdown for server selection #### 🔧 Technical Improvements - **Color Utils**: New function for readable text on colored backgrounds - **Custom Dropdown**: Created component for enhanced server selection - **Type Safety**: Updated TypeScript interfaces to include color field - **Database Migration**: Automatic migration for existing databases ### 🐛 Bug Fixes - **Terminal Stability**: Fixed WebSocket reconnection loops that caused blank terminal screens - **Script Execution**: Resolved "script already running" errors on subsequent runs - **Execution ID Management**: Proper unique execution ID generation for each script run - **SSH Preselection**: Execution modal now preselects SSH mode by default ### 🎯 User Experience - **Visual Distinction**: Easy identification of different servers at a glance - **Consistent Theming**: Color coding applied consistently across all server references - **Accessibility**: Automatic contrast calculation ensures readable text - **Optional Feature**: Can be disabled if not needed ### 🧪 Testing - ✅ Color coding toggle works correctly - ✅ Server color picker functions properly - ✅ Colors applied consistently across UI - ✅ Terminal execution stable for multiple runs - ✅ Database migration handles existing data - ✅ TypeScript compilation clean ### 📝 Database Changes - Added \[\e[m\] column to table - Migration script handles existing databases - Backward compatible with existing server data This feature significantly improves the user experience by providing visual server identification throughout the application while maintaining full backward compatibility. --- <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:26 -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#190
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?