refactor(ui): modal: use hidden class

static/css/components/contextMenu.css

@@ -10,7 +10,7 @@
     padding: 6px;
     min-width: 200px;
     z-index: 2000;
-    display: none;
+    display: block;
     animation: contextMenuIn 0.15s ease-out;
 }
 

static/css/components/modals.css

@@ -126,7 +126,7 @@
     width: 100%;
     height: 100%;
     background-color: var(--color-overlay);
-    display: none;
+    display: flex;
     justify-content: center;
     align-items: center;
     z-index: 3000;

static/css/components/spinner.css

@@ -37,7 +37,7 @@
     text-align: center;
     margin: 20px 0;
     color: var(--color-text-medium);
-    display: none;
+    display: block;
 }
 
 .dropzone-icon {

static/index.html

@@ -216,7 +216,7 @@
                     <span class="breadcrumb-item" data-i18n="breadcrumb.home">Home</span>
                 </div>
 
-                <div class="dropzone" id="dropzone">
+                <div class="dropzone hidden" id="dropzone">
                     <i class="fas fa-cloud-upload-alt dropzone-icon"></i>
                     <p data-i18n="dropzone.drag_files">Drag files here or click to select</p>
                     <input type="file" id="file-input" class="hidden" multiple>

static/js/app/main.js

@@ -663,13 +663,12 @@ function setupEventListeners() {
     // Global events to close context menus and deselect cards
     document.addEventListener('click', (e) => {
         const folderMenu = document.getElementById('folder-context-menu');
-        const fileMenu = document.getElementById('file-context-menu');
-
-        if (folderMenu && folderMenu.style.display === 'block' && !folderMenu.contains(e.target)) {
+        if (folderMenu && !folderMenu.classList.contains('hidden') && !folderMenu.contains(e.target)) {
             ui.closeContextMenu();
         }
 
-        if (fileMenu && fileMenu.style.display === 'block' && !fileMenu.contains(e.target)) {
+        const fileMenu = document.getElementById('file-context-menu');
+        if (fileMenu && !fileMenu.classList.contains('hidden') && !fileMenu.contains(e.target)) {
             ui.closeFileContextMenu();
         }
     });

static/js/app/ui.js

@@ -38,7 +38,7 @@ const ui = {
         // Folder context menu
         if (!document.getElementById('folder-context-menu')) {
             const folderMenu = document.createElement('div');
-            folderMenu.className = 'context-menu';
+            folderMenu.classList.add('context-menu', 'hidden');
             folderMenu.id = 'folder-context-menu';
             folderMenu.innerHTML = `
                 <div class="context-menu-item" id="download-folder-option">
@@ -68,7 +68,7 @@ const ui = {
         // File context menu
         if (!document.getElementById('file-context-menu')) {
             const fileMenu = document.createElement('div');
-            fileMenu.className = 'context-menu';
+            fileMenu.classList.add('context-menu', 'hidden');
             fileMenu.id = 'file-context-menu';
             fileMenu.innerHTML = `
                 <div class="context-menu-item" id="view-file-option">
@@ -426,7 +426,7 @@ const ui = {
                         fileOps.uploadFiles(droppedEntries.map((x) => x.file));
                     }
                     setTimeout(() => {
-                        dropzone.style.display = 'none';
+                        dropzone?.classList.add('hidden');
                     }, 500);
                     return;
                 }
@@ -440,7 +440,7 @@ const ui = {
                 }
             }
             setTimeout(() => {
-                dropzone.style.display = 'none';
+                dropzone?.classList.add('hidden');
             }, 500);
         });
 
@@ -448,8 +448,8 @@ const ui = {
         document.addEventListener('dragover', (e) => {
             e.preventDefault();
             if (e.dataTransfer.types.includes('Files')) {
-                dropzone.style.display = 'block';
-                dropzone.classList.add('active');
+                dropzone?.classList.remove('hidden');
+                dropzone?.classList.add('active');
             }
         });
 
@@ -458,7 +458,7 @@ const ui = {
                 dropzone.classList.remove('active');
                 setTimeout(() => {
                     if (!dropzone.classList.contains('active')) {
-                        dropzone.style.display = 'none';
+                        dropzone?.classList.add('hidden');
                     }
                 }, 100);
             }
@@ -482,7 +482,7 @@ const ui = {
                         fileOps.uploadFiles(droppedEntries.map((x) => x.file));
                     }
                     setTimeout(() => {
-                        dropzone.style.display = 'none';
+                        dropzone?.classList.add('hidden');
                     }, 500);
                     return;
                 }
@@ -497,7 +497,7 @@ const ui = {
             }
 
             setTimeout(() => {
-                dropzone.style.display = 'none';
+                dropzone?.classList.add('hidden');
             }, 500);
         });
     },
@@ -676,7 +676,7 @@ const ui = {
     closeContextMenu() {
         const menu = document.getElementById('folder-context-menu');
         if (menu) {
-            menu.style.display = 'none';
+            menu.classList.add('hidden');
             app.contextMenuTargetFolder = null;
         }
     },
@@ -687,7 +687,7 @@ const ui = {
     closeFileContextMenu() {
         const menu = document.getElementById('file-context-menu');
         if (menu) {
-            menu.style.display = 'none';
+            menu.classList.add('hidden');
             app.contextMenuTargetFile = null;
         }
     },
@@ -1003,7 +1003,7 @@ const ui = {
             }
             menu.style.left = `${e.pageX}px`;
             menu.style.top = `${e.pageY}px`;
-            menu.style.display = 'block';
+            menu?.classList.remove('hidden');
         });
 
         // dragstart
@@ -1469,7 +1469,7 @@ function toggleCardSelection(card, event) {
 function showContextMenuAtElement(triggerElement, menuId) {
     // Hide any open menus first
     document.querySelectorAll('.context-menu').forEach((m) => {
-        m.style.display = 'none';
+        m.classList.add('hidden');
     });
 
     const menu = document.getElementById(menuId);
@@ -1500,7 +1500,7 @@ function showContextMenuAtElement(triggerElement, menuId) {
 
     menu.style.left = `${left}px`;
     menu.style.top = `${top}px`;
-    menu.style.display = 'block';
+    menu.classList.remove('hidden');
 }
 
 /**

static/js/core/modal.js

@@ -8,14 +8,23 @@ import { replaceIconsInElement } from './icons.js';
 
 const Modal = {
     // Modal element references
+    /** @private @type {HTMLElement | null} */
     overlay: null,
+    // FIXME: unused ?
     container: null,
+    /** @private @type {HTMLElement | null} */
     icon: null,
+    /** @private @type {HTMLElement | null} */
     title: null,
+    /** @private @type {HTMLElement | null} */
     label: null,
+    /** @private @type {HTMLElement | null} */
     input: null,
+    /** @private @type {HTMLElement | null} */
     cancelBtn: null,
+    /** @private @type {HTMLElement | null} */
     confirmBtn: null,
+    /** @private @type {HTMLElement | null} */
     closeBtn: null,
 
     // Current callback
@@ -169,7 +178,7 @@ const Modal = {
         if (!this.overlay) return;
 
         // Show overlay
-        this.overlay.style.display = 'flex';
+        this.overlay.classList.remove('hidden');
 
         // Trigger animation
         requestAnimationFrame(() => {
@@ -206,7 +215,7 @@ const Modal = {
         this.overlay.classList.remove('active');
 
         setTimeout(() => {
-            this.overlay.style.display = 'none';
+            this.overlay.classList.add('hidden');
 
             if (!confirmed && this.onCancel) {
                 this.onCancel();