From e23b40e0cbcf85af7407e5e0da706e6ccee44d94 Mon Sep 17 00:00:00 2001
From: Patrick Balsiger <frupii@gmail.com>
Date: Tue, 26 Aug 2025 17:34:05 +0200
Subject: [PATCH] feat: improve firmware upload section

---
 public/index.html |  44 +++++----
 public/script.js  |   6 +-
 public/styles.css | 231 ++++++++++++++++++++++++----------------------
 3 files changed, 146 insertions(+), 135 deletions(-)

diff --git a/public/index.html b/public/index.html
index 1226a5c..c71c866 100644
--- a/public/index.html
+++ b/public/index.html
@@ -69,8 +69,24 @@
                             <div class="action-group">
                                 <h3>🚀 Firmware Update</h3>
                                 <div class="firmware-upload-compact">
-                                    <div class="upload-target-row">
-                                        <div class="upload-section">
+                                    <div class="compact-upload-row">
+                                        <div class="file-upload-area">
+                                            <div class="target-options">
+                                                <label class="target-option">
+                                                    <input type="radio" name="target-type" value="all" checked>
+                                                    <span class="radio-custom"></span>
+                                                    <span class="target-label">All Nodes</span>
+                                                </label>
+                                                <label class="target-option specific-node-option">
+                                                    <input type="radio" name="target-type" value="specific">
+                                                    <span class="radio-custom"></span>
+                                                    <span class="target-label">Specific Node</span>
+                                                    <select id="specific-node-select" class="node-select">
+                                                        <option value="">Select a node...</option>
+                                                    </select>
+                                                </label>
+                                            </div>
+                                            
                                             <div class="file-input-wrapper">
                                                 <input type="file" id="global-firmware-file" accept=".bin,.hex" style="display: none;">
                                                 <button class="upload-btn-compact" onclick="document.getElementById('global-firmware-file').click()">
@@ -80,28 +96,10 @@
                                             </div>
                                         </div>
                                         
-                                        <div class="target-section">
-                                            <div class="target-options">
-                                                <label class="target-option">
-                                                    <input type="radio" name="target-type" value="all" checked>
-                                                    <span class="radio-custom"></span>
-                                                    <span class="target-label">All Nodes</span>
-                                                </label>
-                                                <label class="target-option">
-                                                    <input type="radio" name="target-type" value="specific">
-                                                    <span class="radio-custom"></span>
-                                                    <span class="target-label">Specific Node</span>
-                                                </label>
-                                            </div>
-                                            <select id="specific-node-select" class="node-select" style="display: none;">
-                                                <option value="">Select a node...</option>
-                                            </select>
-                                        </div>
+                                        <button class="deploy-btn" id="deploy-btn" disabled>
+                                            🚀 Deploy
+                                        </button>
                                     </div>
-                                    
-                                    <button class="deploy-btn" id="deploy-btn" disabled>
-                                        🚀 Deploy Firmware
-                                    </button>
                                 </div>
                             </div>
                         </div>
diff --git a/public/script.js b/public/script.js
index 13cda91..d827206 100644
--- a/public/script.js
+++ b/public/script.js
@@ -715,10 +715,12 @@ function setupFirmwareView() {
     targetRadios.forEach(radio => {
         radio.addEventListener('change', () => {
             if (radio.value === 'specific') {
-                specificNodeSelect.style.display = 'block';
+                specificNodeSelect.style.visibility = 'visible';
+                specificNodeSelect.style.opacity = '1';
                 populateNodeSelect();
             } else {
-                specificNodeSelect.style.display = 'none';
+                specificNodeSelect.style.visibility = 'hidden';
+                specificNodeSelect.style.opacity = '0';
             }
             updateDeployButton();
         });
diff --git a/public/styles.css b/public/styles.css
index 4c5a2e6..47e4fad 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -718,7 +718,7 @@ p {
     backdrop-filter: blur(15px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
     border: 1px solid rgba(255, 255, 255, 0.08);
-    padding: 0.75rem;
+    padding: 0.5rem;
     margin-bottom: 1rem;
     position: relative;
     overflow: hidden;
@@ -740,14 +740,14 @@ p {
 .firmware-actions {
     display: grid;
     grid-template-columns: 1fr;
-    gap: 1rem;
-    margin-bottom: 1.5rem;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
 }
 
 .action-group {
     background: rgba(0, 0, 0, 0.2);
     border-radius: 12px;
-    padding: 1rem;
+    padding: 0.75rem;
     border: 1px solid rgba(255, 255, 255, 0.06);
     position: relative;
     overflow: hidden;
@@ -755,8 +755,8 @@ p {
 
 .action-group h3 {
     color: #ffffff;
-    margin-bottom: 1rem;
-    font-size: 1.1rem;
+    margin-bottom: 0.75rem;
+    font-size: 1rem;
     font-weight: 600;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
@@ -765,80 +765,50 @@ p {
 .firmware-upload-compact {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
-}
-
-.upload-target-row {
-    display: flex;
-    gap: 1rem;
-    align-items: stretch;
-    position: relative;
-}
-
-.upload-target-row::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 1px;
-    height: 60%;
-    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.1), transparent);
-    pointer-events: none;
-}
-
-.upload-section {
-    flex: 1;
-    display: flex;
-    align-items: center;
     gap: 0.75rem;
-    padding: 1rem;
+}
+
+.compact-upload-row {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    padding: 0.75rem;
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     transition: all 0.3s ease;
-    min-height: 80px;
 }
 
-.upload-section:hover {
+.compact-upload-row:hover {
     background: rgba(255, 255, 255, 0.05);
     border-color: rgba(255, 255, 255, 0.15);
 }
 
-.target-section {
-    flex: 1;
+.file-upload-area {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
-    padding: 1rem;
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 8px;
-    transition: all 0.3s ease;
-    min-height: 80px;
-    justify-content: center;
-}
-
-.target-section:hover {
-    background: rgba(255, 255, 255, 0.05);
-    border-color: rgba(255, 255, 255, 0.15);
+    flex: 1;
+    min-width: 0;
 }
 
 .file-input-wrapper {
     display: flex;
     align-items: center;
-    gap: 1rem;
+    gap: 0.75rem;
     flex: 1;
+    min-width: 0;
+    margin-top: 0.25rem;
 }
 
 .upload-btn-compact {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: #ffffff;
-    padding: 0.5rem 1rem;
+    padding: 0.4rem 0.8rem;
     border-radius: 6px;
     cursor: pointer;
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     font-weight: 500;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     white-space: nowrap;
@@ -852,13 +822,17 @@ p {
 
 .file-info {
     color: rgba(255, 255, 255, 0.7);
-    font-size: 0.85rem;
+    font-size: 0.8rem;
     font-style: italic;
     transition: all 0.3s ease;
-    padding: 0.3rem 0.5rem;
+    padding: 0.25rem 0.5rem;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 4px;
     border: 1px solid transparent;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 200px;
 }
 
 .file-info.has-file {
@@ -871,7 +845,9 @@ p {
 
 .target-options {
     display: flex;
-    gap: 1rem;
+    gap: 0.75rem;
+    justify-content: flex-start;
+    align-items: center;
 }
 
 .target-option {
@@ -884,6 +860,18 @@ p {
     transition: all 0.2s ease;
 }
 
+.specific-node-option {
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.specific-node-option .node-select {
+    margin-left: 0.5rem;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
 .target-option:hover {
     background: rgba(255, 255, 255, 0.05);
 }
@@ -934,7 +922,7 @@ p {
 
 .target-label {
     color: rgba(255, 255, 255, 0.9);
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     font-weight: 500;
 }
 
@@ -942,12 +930,12 @@ p {
     background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%);
     border: 1px solid rgba(255, 255, 255, 0.3);
     color: #ffffff;
-    padding: 0.5rem 0.75rem;
+    padding: 0.3rem 0.5rem;
     border-radius: 6px;
-    font-size: 0.9rem;
+    font-size: 0.8rem;
     transition: all 0.2s ease;
     cursor: pointer;
-    min-width: 160px;
+    min-width: 120px;
     font-weight: 500;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
 }
@@ -997,16 +985,16 @@ p {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     border: none;
     color: #ffffff;
-    padding: 0.75rem 1.5rem;
-    border-radius: 8px;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
     cursor: pointer;
-    font-size: 0.95rem;
+    font-size: 0.9rem;
     font-weight: 600;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    align-self: center;
-    min-width: 160px;
+    min-width: 100px;
     position: relative;
     overflow: hidden;
+    white-space: nowrap;
 }
 
 .deploy-btn::before {
@@ -1046,29 +1034,23 @@ p {
 /* Responsive design for smaller screens */
 @media (max-width: 768px) {
     .firmware-actions {
-        gap: 1rem;
+        gap: 0.75rem;
     }
     
     .action-group {
-        padding: 1rem;
+        padding: 0.75rem;
     }
     
-    .upload-target-row {
+    .compact-upload-row {
         flex-direction: column;
-        gap: 1rem;
+        gap: 0.75rem;
+        padding: 0.75rem;
     }
     
-    .upload-target-row::after {
-        display: none;
-    }
-    
-    .upload-section {
-        flex: none;
+    .file-upload-area {
         flex-direction: column;
         align-items: stretch;
-        gap: 0.75rem;
-        padding: 1rem;
-        min-height: auto;
+        gap: 0.5rem;
     }
     
     .file-input-wrapper {
@@ -1079,33 +1061,55 @@ p {
     
     .upload-btn-compact {
         width: 100%;
-        padding: 0.75rem;
-        font-size: 0.9rem;
-    }
-    
-    .target-section {
-        flex: none;
-        padding: 1rem;
-        min-height: auto;
+        padding: 0.5rem 0.75rem;
+        font-size: 0.85rem;
     }
     
     .target-options {
-        justify-content: center;
+        justify-content: flex-start;
         gap: 0.75rem;
+        flex-wrap: wrap;
+        align-items: center;
     }
     
-    .node-select {
+    .target-option {
+        padding: 0.2rem 0.4rem;
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        gap: 0.3rem;
+    }
+    
+    .target-label {
+        font-size: 0.8rem;
+        white-space: nowrap;
+    }
+    
+    .specific-node-option {
+        flex-direction: row;
+        align-items: center;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+    }
+    
+    .specific-node-option .node-select {
+        margin-left: 0;
         min-width: auto;
-        width: 100%;
-        padding: 0.5rem 0.75rem;
-        font-size: 0.9rem;
+        width: auto;
+        padding: 0.4rem 0.6rem;
+        visibility: visible;
+        opacity: 1;
+        font-size: 0.8rem;
+        flex: 1;
+        min-width: 120px;
+        max-width: 200px;
     }
     
     .deploy-btn {
-        min-width: auto;
-        width: 100%;
-        padding: 1rem 1.5rem;
-        font-size: 1rem;
+        padding: 0.5rem 1rem;
+        font-size: 0.85rem;
+        min-width: 120px;
     }
     
     .file-info {
@@ -1114,35 +1118,32 @@ p {
         font-size: 0.85rem;
     }
     
-    .target-label {
-        font-size: 0.9rem;
-    }
-    
     .radio-custom {
         width: 16px;
         height: 16px;
     }
-} 
+}
 
 /* Extra small screens */
 @media (max-width: 480px) {
     .action-group {
-        padding: 0.75rem;
+        padding: 0.5rem;
     }
     
-    .upload-section,
-    .target-section {
-        padding: 0.75rem;
+    .compact-upload-row {
+        padding: 0.5rem;
+        gap: 0.5rem;
     }
     
     .upload-btn-compact {
-        padding: 0.6rem;
-        font-size: 0.85rem;
+        padding: 0.5rem 0.75rem;
+        font-size: 0.8rem;
     }
     
     .deploy-btn {
-        padding: 0.75rem 1.25rem;
-        font-size: 0.95rem;
+        padding: 0.5rem 0.75rem;
+        font-size: 0.8rem;
+        min-width: 100px;
     }
     
     .file-info {
@@ -1151,7 +1152,7 @@ p {
     }
     
     .target-label {
-        font-size: 0.85rem;
+        font-size: 0.8rem;
     }
     
     .radio-custom {
@@ -1160,8 +1161,17 @@ p {
     }
     
     .node-select {
-        padding: 0.4rem 0.6rem;
-        font-size: 0.85rem;
+        padding: 0.3rem 0.5rem;
+        font-size: 0.8rem;
+        min-width: 100px;
+    }
+    
+    .target-options {
+        gap: 0.75rem;
+    }
+    
+    .target-option {
+        padding: 0.2rem 0.4rem;
     }
 } 
 
@@ -1450,4 +1460,5 @@ p {
     .results-actions {
         flex-direction: column;
     }
+} 
 } 
\ No newline at end of file