From 5b821a7eab2854316b1bd621bf917a8e57d4bacd Mon Sep 17 00:00:00 2001
From: Edouard Vanbelle <opensource@edouard.vanbelle.fr>
Date: Fri, 3 Apr 2026 00:28:53 +0200
Subject: [PATCH] refactor(empty-list): simplify empty list, will now work on
 list view

---
 static/css/base/reset.css   |  2 +-
 static/index.html           |  6 ++++++
 static/js/app/filesView.js  | 10 ++--------
 static/js/app/navigation.js | 18 ++++++++++++++++++
 static/js/app/ui.js         | 11 +++++++++++
 5 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/static/css/base/reset.css b/static/css/base/reset.css
index 227c2a59..9617291f 100644
--- a/static/css/base/reset.css
+++ b/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; }
\ No newline at end of file
+.hidden { display: none !important; }
diff --git a/static/index.html b/static/index.html
index a7e957c4..04e3de44 100644
--- a/static/index.html
+++ b/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>
diff --git a/static/js/app/filesView.js b/static/js/app/filesView.js
index 882cdd47..f34e2bcd 100644
--- a/static/js/app/filesView.js
+++ b/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');
-            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);
+            window.showEmptyList(true);
         } else {
+            window.showEmptyList(false);
             window.ui.renderFolders(folderList);
             window.ui.renderFiles(fileList);
         }
diff --git a/static/js/app/navigation.js b/static/js/app/navigation.js
index dca8e261..3b519658 100644
--- a/static/js/app/navigation.js
+++ b/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();
 
diff --git a/static/js/app/ui.js b/static/js/app/ui.js
index 1ab842f0..37bf9a93 100644
--- a/static/js/app/ui.js
+++ b/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())