refactor(empty-list): simplify empty list, will now work on list view

static/css/base/reset.css

@@ -21,4 +21,4 @@ html[dir='rtl'] .fa-sign-out-alt {
 	transform: rotate(180deg);
 }
 /* Utility: hide elements without inline style="" (CSP-safe) */
-.hidden { display: none; }
+.hidden { display: none !important; }

static/index.html

@@ -276,6 +276,12 @@
                     </div>
                     <!-- Files will be populated here in list view -->
                 </div>
+
+                <div class="empty-state hidden" id="empty-files-state">
+                    <i class="fas fa-folder-open empty-state-icon"></i>
+                    <p data-i18n="files.no_files"></p>
+                    <p data-i18n="files.empty_hint"></p>
+                </div>
             </div>
         </div>
     </div>

static/js/app/filesView.js

@@ -237,15 +237,9 @@ async function loadFiles(options = { insertHistory: true}) {
         const fileList = Array.isArray(listing.files) ? listing.files : [];
 
         if (folderList.length === 0 && fileList.length === 0) {
-            const emptyState = document.createElement('div');
+            window.showEmptyList(true);
-            emptyState.className = 'empty-state';
-            emptyState.innerHTML = `
-                <i class="fas fa-folder-open empty-state-icon"></i>
-                <p>${_t('files.no_files')}</p>
-                <p>${_t('files.empty_hint')}</p>
-            `;
-            elements.filesGrid.appendChild(emptyState);
         } else {
+            window.showEmptyList(false);
             window.ui.renderFolders(folderList);
             window.ui.renderFiles(fileList);
         }

static/js/app/navigation.js

@@ -174,6 +174,9 @@ function switchToSharedSection() {
     if (filesGrid) filesGrid.classList.add('hidden');
     if (filesListView) filesListView.classList.add('hidden');
 
+    //hide by default empty list
+    window.showEmptyList(false);
+    
     // Show shared view
     if (window.sharedView) {
         window.sharedView.init();
@@ -198,6 +201,9 @@ function switchToFilesSection() {
     if (filesListView) filesListView.style.display = window.app.currentView === 'list' ? 'flex' : 'none';
     if (filesListView) filesListView.classList.toggle('hidden', window.app.currentView !== 'list');
 
+    //hide by default empty list
+    window.showEmptyList(false);
+
     // Reset to home folder and update breadcrumb
     window.app.currentPath = window.app.userHomeFolderId || '';
     window.app.breadcrumbPath = [];
@@ -222,6 +228,9 @@ function switchToFavoritesSection() {
     if (filesGrid) filesGrid.classList.toggle('hidden', window.app.currentView !== 'grid');
     if (filesListView) filesListView.style.display = window.app.currentView === 'list' ? 'flex' : 'none';
     if (filesListView) filesListView.classList.toggle('hidden', window.app.currentView !== 'list');
+    
+    //hide by default empty list
+    window.showEmptyList(false);
 
     if (window.favorites) {
         window.favorites.displayFavorites();
@@ -256,6 +265,9 @@ function switchToRecentFilesSection() {
     if (filesListView) filesListView.style.display = window.app.currentView === 'list' ? 'flex' : 'none';
     if (filesListView) filesListView.classList.toggle('hidden', window.app.currentView !== 'list');
 
+    //hide by default empty list
+    window.showEmptyList(false);
+
     if (window.recent) {
         window.recent.displayRecentFiles();
     } else {
@@ -288,6 +300,9 @@ function switchToPhotosSection() {
     if (filesGrid) { filesGrid.style.display = 'none'; filesGrid.classList.add('hidden'); }
     if (filesListView) { filesListView.style.display = 'none'; filesListView.classList.add('hidden'); }
 
+    //hide by default empty list
+    window.showEmptyList(false);
+
     // Show photos view
     if (window.photosView) {
         window.photosView.show();
@@ -309,6 +324,9 @@ function switchToTrashSection() {
 
     setActionsBarMode('trash');
 
+    //hide by default empty list
+    window.showEmptyList(false);
+
     // Load trash items
     window.loadTrashItems();
 

static/js/app/ui.js

@@ -1493,10 +1493,21 @@ if (document.readyState === 'loading') {
     initRubberBandSelection();
 }
 
+/**
+ * 
+ * @param {boolean} show 
+ */
+function showEmptyList(show) {
+    const emptyArea=document.getElementById("empty-files-state");
+    emptyArea.classList.toggle("hidden", !show);
+}
+
 // Expose helpers globally
 window.toggleCardSelection = toggleCardSelection;
 window.showContextMenuAtElement = showContextMenuAtElement;
 window.initRubberBandSelection = initRubberBandSelection;
+window.showEmptyList = showEmptyList;
+
 
 /**
  * Show a modern confirm dialog (replaces native confirm())