improve(ui): dialog: add escape key on shared dialog + perfer hidden class

static/css/components/dialogs.css

@@ -27,7 +27,7 @@
     width: 100%;
     height: 100%;
     background-color: var(--color-overlay-light);
-    display: none;
+    display: flex;
     align-items: center;
     justify-content: center;
     z-index: 3000;
@@ -106,7 +106,7 @@
     width: 100%;
     height: 100%;
     background-color: var(--color-overlay-light);
-    display: none;
+    display: flex;
     justify-content: center;
     align-items: center;
     z-index: 3000;
@@ -205,7 +205,7 @@
     width: 100%;
     height: 100%;
     background-color: var(--color-overlay-light);
-    display: none;
+    display: flex;
     justify-content: center;
     align-items: center;
     z-index: 3000;
@@ -512,7 +512,7 @@
     width: 100%;
     height: 100%;
     background-color: var(--color-overlay-light);
-    display: none;
+    display: flex;
     align-items: center;
     justify-content: center;
     z-index: 4000;
@@ -593,7 +593,7 @@
     width: 100%;
     height: 100%;
     background-color: var(--color-overlay);
-    display: none;
+    display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;

static/js/app/ui.js

@@ -111,7 +111,7 @@ const ui = {
         // Rename dialog — modern
         if (!document.getElementById('rename-dialog')) {
             const renameDialog = document.createElement('div');
-            renameDialog.className = 'rename-dialog';
+            renameDialog.classList.add('rename-dialog', 'hidden');
             renameDialog.id = 'rename-dialog';
             renameDialog.innerHTML = `
                 <div class="rename-dialog-content">
@@ -134,7 +134,7 @@ const ui = {
         // Move dialog — modern with navigation
         if (!document.getElementById('move-file-dialog')) {
             const moveDialog = document.createElement('div');
-            moveDialog.className = 'rename-dialog';
+            moveDialog.classList.add('rename-dialog', 'hidden');
             moveDialog.id = 'move-file-dialog';
             moveDialog.innerHTML = `
                 <div class="rename-dialog-content">
@@ -161,7 +161,7 @@ const ui = {
         // Share dialog
         if (!document.getElementById('share-dialog')) {
             const shareDialog = document.createElement('div');
-            shareDialog.className = 'share-dialog';
+            shareDialog.classList.add('share-dialog', 'hidden');
             shareDialog.id = 'share-dialog';
             shareDialog.innerHTML = `
                 <div class="share-dialog-content">
@@ -252,12 +252,20 @@ const ui = {
                 const shareUrl = document.getElementById('generated-share-url').value;
                 contextMenus.showEmailNotificationDialog(shareUrl);
             });
+
+            // FIXME make generic function (close all dialog / etc)
+            document.addEventListener('keydown', (e) => {
+                const dialog = document.getElementById('share-dialog');
+                if (e.key === 'Escape' && !dialog?.classList.contains('hidden')) {
+                    contextMenus.closeShareDialog();
+                }
+            });
         }
 
         // Notification dialog
         if (!document.getElementById('notification-dialog')) {
             const notificationDialog = document.createElement('div');
-            notificationDialog.className = 'share-dialog';
+            notificationDialog.classList.add('share-dialog', 'hidden');
             notificationDialog.id = 'notification-dialog';
             notificationDialog.innerHTML = `
                 <div class="share-dialog-content">
@@ -299,7 +307,7 @@ const ui = {
         // Playlist selection dialog
         if (!document.getElementById('playlist-dialog')) {
             const playlistDialog = document.createElement('div');
-            playlistDialog.className = 'share-dialog';
+            playlistDialog.classList.add('share-dialog', 'hidden');
             playlistDialog.id = 'playlist-dialog';
             playlistDialog.innerHTML = `
                 <div class="share-dialog-content">

static/js/features/files/contextMenus.js

@@ -294,7 +294,7 @@ const contextMenus = {
         // Each handler checks its own state, so multiple dialogs can be closed with multiple Escape presses
         if (!_moveDialogEscapeHandler) {
             _moveDialogEscapeHandler = (e) => {
-                if (e.key === 'Escape' && moveFileDialog.style.display === 'flex') {
+                if (e.key === 'Escape' && !moveFileDialog?.classList.contains('hidden')) {
                     this.closeMoveDialog();
                 }
             };
@@ -383,7 +383,7 @@ const contextMenus = {
         // Update header text
         const headerSpan = renameDialog.querySelector('.rename-dialog-header span');
         if (headerSpan) headerSpan.textContent = i18n ? i18n.t('dialogs.rename_folder') : 'Rename folder';
-        renameDialog.style.display = 'flex';
+        renameDialog?.classList.remove('hidden');
         renameInput.focus();
         renameInput.select();
     },
@@ -403,7 +403,7 @@ const contextMenus = {
         // Update header text
         const headerSpan = renameDialog.querySelector('.rename-dialog-header span');
         if (headerSpan) headerSpan.textContent = i18n ? i18n.t('dialogs.rename_file') : 'Rename file';
-        renameDialog.style.display = 'flex';
+        renameDialog?.classList.remove('hidden');
         renameInput.focus();
         renameInput.select();
     },
@@ -412,7 +412,7 @@ const contextMenus = {
      * Close rename dialog
      */
     closeRenameDialog() {
-        document.getElementById('rename-dialog').style.display = 'none';
+        document.getElementById('rename-dialog')?.classList.add('hidden');
         app.contextMenuTargetFolder = null;
         app.renameTarget = null;
     },
@@ -478,14 +478,14 @@ const contextMenus = {
         await this.loadMoveDialogFolders(startFolderId);
 
         // Show dialog
-        document.getElementById('move-file-dialog').style.display = 'flex';
+        document.getElementById('move-file-dialog')?.classList.remove('hidden');
     },
 
     /**
      * Close move dialog
      */
     closeMoveDialog() {
-        document.getElementById('move-file-dialog').style.display = 'none';
+        document.getElementById('move-file-dialog')?.classList.add('hidden');
         app.contextMenuTargetFile = null;
         app.contextMenuTargetFolder = null;
     },
@@ -924,7 +924,7 @@ const contextMenus = {
             if (newShareSection) newShareSection.classList.add('hidden');
 
             // Show dialog
-            shareDialog.style.display = 'flex';
+            shareDialog.classList.remove('hidden');
             console.log('Share dialog opened for', itemType, item.name);
         } catch (error) {
             console.error('Error opening share dialog:', error);
@@ -1021,7 +1021,7 @@ const contextMenus = {
         app.notificationShareUrl = shareUrl;
 
         // Show dialog
-        document.getElementById('notification-dialog').style.display = 'flex';
+        document.getElementById('notification-dialog')?.classList.remove('hidden');
     },
 
     /**
@@ -1046,7 +1046,7 @@ const contextMenus = {
 
         try {
             fileSharing.sendShareNotification(shareUrl, email, message);
-            document.getElementById('notification-dialog').style.display = 'none';
+            document.getElementById('notification-dialog')?.classList.add('hidden');
         } catch (error) {
             console.error('Error sending notification:', error);
             ui.showNotification('Error', 'Could not send notification');
@@ -1058,7 +1058,7 @@ const contextMenus = {
      */
     closeShareDialog() {
         const dialog = document.getElementById('share-dialog');
-        if (dialog) dialog.style.display = 'none';
+        if (dialog) dialog.classList.add('hidden');
         app.shareDialogItem = null;
         app.shareDialogItemType = null;
     },
@@ -1067,7 +1067,7 @@ const contextMenus = {
      * Close notification dialog
      */
     closeNotificationDialog() {
-        document.getElementById('notification-dialog').style.display = 'none';
+        document.getElementById('notification-dialog')?.classList.add('hidden');
         app.notificationShareUrl = null;
     },
 
@@ -1100,7 +1100,7 @@ const contextMenus = {
         if (addBtn) addBtn.disabled = true;
 
         // Show dialog
-        dialog.style.display = 'flex';
+        dialog.classList.remove('hidden');
         requestAnimationFrame(() => dialog.classList.add('active'));
 
         // Load playlists
@@ -1199,7 +1199,7 @@ const contextMenus = {
         if (dialog) {
             dialog.classList.remove('active');
             setTimeout(() => {
-                dialog.style.display = 'none';
+                dialog.classList.add('hidden');
             }, 200);
         }
         app.playlistDialogFiles = null;