From e148a92f5d9de94f0e0d6bcbec27f7e5a36be9bc Mon Sep 17 00:00:00 2001
From: Edouard Vanbelle <opensource@edouard.vanbelle.fr>
Date: Sat, 25 Apr 2026 00:50:09 +0200
Subject: [PATCH] refactor(ui): use hidden class for upload + menu

---
 static/css/components/spinner.css          |  2 +-
 static/css/components/uploadDropdown.css   |  6 +-----
 static/index.html                          |  2 +-
 static/js/app/main.js                      | 18 +++++++++---------
 static/js/app/uiNotifications.js           |  6 +++---
 static/js/features/files/fileOperations.js | 16 ++++++++--------
 6 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/static/css/components/spinner.css b/static/css/components/spinner.css
index 32732436..bda1e292 100644
--- a/static/css/components/spinner.css
+++ b/static/css/components/spinner.css
@@ -53,7 +53,7 @@
 .upload-progress {
     margin-top: 15px;
     width: 100%;
-    display: none;
+    display: block;
 }
 
 .progress-bar {
diff --git a/static/css/components/uploadDropdown.css b/static/css/components/uploadDropdown.css
index 4ef378ef..3ed39e9d 100644
--- a/static/css/components/uploadDropdown.css
+++ b/static/css/components/uploadDropdown.css
@@ -11,7 +11,7 @@
 }
 
 .upload-dropdown-menu {
-    display: none;
+    display: block;
     position: absolute;
     top: calc(100% + 6px);
     left: 0;
@@ -25,10 +25,6 @@
     animation: dropdownFadeIn 0.15s ease-out;
 }
 
-.upload-dropdown-menu.show {
-    display: block;
-}
-
 @keyframes dropdownFadeIn {
     from {
         opacity: 0;
diff --git a/static/index.html b/static/index.html
index c4f6e75e..e229745c 100644
--- a/static/index.html
+++ b/static/index.html
@@ -221,7 +221,7 @@
                     <p data-i18n="dropzone.drag_files">Drag files here or click to select</p>
                     <input type="file" id="file-input" class="hidden" multiple>
                     <input type="file" id="folder-input" class="hidden" webkitdirectory directory multiple>
-                    <div class="upload-progress">
+                    <div class="upload-progress hidden">
                         <div class="progress-bar">
                             <div class="progress-fill"></div>
                         </div>
diff --git a/static/js/app/main.js b/static/js/app/main.js
index 43fd02a8..0170c140 100644
--- a/static/js/app/main.js
+++ b/static/js/app/main.js
@@ -89,7 +89,7 @@ const ACTIONS_BAR_TEMPLATES = {
                     <span data-i18n="actions.upload">Upload</span>
                     <i class="fas fa-caret-down icon-ml"></i>
                 </button>
-                <div class="upload-dropdown-menu" id="upload-dropdown-menu">
+                <div class="upload-dropdown-menu hidden" id="upload-dropdown-menu">
                     <button class="upload-dropdown-item" id="upload-files-btn">
                         <i class="fas fa-file"></i>
                         <span data-i18n="actions.upload_files">Upload files</span>
@@ -187,14 +187,14 @@ function setupActionsBarDelegation() {
             case 'upload-files-btn': {
                 e.stopPropagation();
                 const menu = document.getElementById('upload-dropdown-menu');
-                if (menu) menu.classList.remove('show');
+                if (menu) menu.classList.add('hidden');
                 if (elements.fileInput) elements.fileInput.click();
                 break;
             }
             case 'upload-folder-btn': {
                 e.stopPropagation();
                 const menu = document.getElementById('upload-dropdown-menu');
-                if (menu) menu.classList.remove('show');
+                if (menu) menu.classList.add('hidden');
                 const folderInput = document.getElementById('folder-input');
                 if (folderInput) folderInput.click();
                 break;
@@ -456,13 +456,13 @@ function setupUploadDropdown() {
         'click',
         (e) => {
             e.stopPropagation();
-            const isOpen = menu.classList.contains('show');
+            const isOpen = !menu.classList.contains('hidden');
             // Close any other open dropdowns
-            document.querySelectorAll('.upload-dropdown-menu.show').forEach((m) => {
-                m.classList.remove('show');
+            document.querySelectorAll('.upload-dropdown-menu').forEach((m) => {
+                m.classList.add('hidden');
             });
             if (!isOpen) {
-                menu.classList.add('show');
+                menu.classList.remove('hidden');
             }
         },
         { signal }
@@ -475,8 +475,8 @@ function setupUploadDropdown() {
     }
     uploadDropdownDocumentClickHandler = (e) => {
         if (e.target.closest('#upload-dropdown')) return;
-        document.querySelectorAll('.upload-dropdown-menu.show').forEach((m) => {
-            m.classList.remove('show');
+        document.querySelectorAll('.upload-dropdown-menu').forEach((m) => {
+            m.classList.add('hidden');
         });
     };
     document.addEventListener('click', uploadDropdownDocumentClickHandler);
diff --git a/static/js/app/uiNotifications.js b/static/js/app/uiNotifications.js
index 70473ddc..e59ca92f 100644
--- a/static/js/app/uiNotifications.js
+++ b/static/js/app/uiNotifications.js
@@ -41,7 +41,7 @@ const uiNotifications = {
         let notification = document.querySelector('.notification');
         if (!notification) {
             notification = document.createElement('div');
-            notification.className = 'notification';
+            notification.classList.add('notification', 'hidden');
             notification.innerHTML = `
                 <div class="notification-title">${title}</div>
                 <div class="notification-message">${message}</div>
@@ -52,10 +52,10 @@ const uiNotifications = {
             notification.querySelector('.notification-message').textContent = message;
         }
 
-        notification.style.display = 'block';
+        notification.classList.remove('hidden');
 
         setTimeout(() => {
-            notification.style.display = 'none';
+            notification.classList.add('hidden');
         }, 5000);
     }
 };
diff --git a/static/js/features/files/fileOperations.js b/static/js/features/files/fileOperations.js
index 868d73f3..9f85102a 100644
--- a/static/js/features/files/fileOperations.js
+++ b/static/js/features/files/fileOperations.js
@@ -289,7 +289,7 @@ const fileOps = {
             const progressBar = document.querySelector('.progress-fill');
             const uploadProgressDiv = document.querySelector('.upload-progress');
             if (uploadProgressDiv) {
-                uploadProgressDiv.style.display = 'block';
+                uploadProgressDiv.classList.remove('hidden');
             }
             if (progressBar) {
                 progressBar.style.width = '0%';
@@ -322,7 +322,7 @@ const fileOps = {
             }
 
             if (totalFiles === 0) {
-                if (uploadProgressDiv) uploadProgressDiv.style.display = 'none';
+                if (uploadProgressDiv) uploadProgressDiv.classList.add('hidden');
                 this._isUploading = false;
                 return;
             }
@@ -412,8 +412,8 @@ const fileOps = {
             }
 
             const dropzone = document.getElementById('dropzone');
-            if (dropzone) dropzone.style.display = 'none';
-            if (uploadProgressDiv) uploadProgressDiv.style.display = 'none';
+            if (dropzone) dropzone.classList.add('hidden');
+            if (uploadProgressDiv) uploadProgressDiv.classList.add('hidden');
         } finally {
             this._isUploading = false;
         }
@@ -450,7 +450,7 @@ const fileOps = {
         const progressBar = document.querySelector('.progress-fill');
         const uploadProgressDiv = document.querySelector('.upload-progress');
         if (uploadProgressDiv) {
-            uploadProgressDiv.style.display = 'block';
+            uploadProgressDiv.classList.remove('hidden');
         }
         if (progressBar) {
             progressBar.style.width = '0%';
@@ -468,7 +468,7 @@ const fileOps = {
 
             const totalFiles = validEntries.length;
             if (totalFiles === 0) {
-                if (uploadProgressDiv) uploadProgressDiv.style.display = 'none';
+                if (uploadProgressDiv) uploadProgressDiv.classList.add('hidden');
                 return;
             }
 
@@ -678,8 +678,8 @@ const fileOps = {
             }
 
             const dropzone = document.getElementById('dropzone');
-            if (dropzone) dropzone.style.display = 'none';
-            if (uploadProgressDiv) uploadProgressDiv.style.display = 'none';
+            if (dropzone) dropzone.classList.add('hidden');
+            if (uploadProgressDiv) uploadProgressDiv.classList.add('hidden');
         } finally {
             this._isUploading = false;
         }