From 41fc459213dc91047b515f83ed4a7ec2c2a48a7d Mon Sep 17 00:00:00 2001
From: Antoine POPINEAU <apognu@users.noreply.github.com>
Date: Wed, 22 Apr 2026 03:43:32 +0200
Subject: [PATCH] feat: history back/forward actions on explorer and modals

Most actions within each page is stateless (show modals) or change the
URL hash. As it is, those are not tracked and using the back button has
no effect.

This commits implements two things:

 - Tracking of the URL hash in the explorer to move from bucket/folders
   on history change.
 - Add a history state when a modal is open, so the back button closes
   the modal.
---
 webui/web/buckets.html  |  6 +++---
 webui/web/explorer.html | 35 +++++++++++++++++++++++------------
 webui/web/js/app.js     | 33 ++++++++++++++++++++++++++++++++-
 webui/web/users.html    |  6 +++---
 4 files changed, 61 insertions(+), 19 deletions(-)

diff --git a/webui/web/buckets.html b/webui/web/buckets.html
index 70dfa275..ab0366e3 100644
--- a/webui/web/buckets.html
+++ b/webui/web/buckets.html
@@ -221,7 +221,7 @@ under the License.
   </div>
 
   <!-- Change Owner Modal -->
-  <div id="owner-modal" class="hidden fixed inset-0 z-50">
+  <div id="owner-modal" class="modal hidden fixed inset-0 z-50">
     <div class="modal-backdrop absolute inset-0" onclick="closeModal('owner-modal')"></div>
     <div class="absolute inset-0 flex items-center justify-center p-4">
       <div class="bg-white rounded-xl shadow-2xl w-full max-w-md relative">
@@ -281,7 +281,7 @@ under the License.
   </div>
 
   <!-- Create Bucket Modal -->
-  <div id="create-bucket-modal" class="hidden fixed inset-0 z-50">
+  <div id="create-bucket-modal" class="modal hidden fixed inset-0 z-50">
     <div class="modal-backdrop absolute inset-0" onclick="closeModal('create-bucket-modal')"></div>
     <div class="absolute inset-0 flex items-center justify-center p-4">
       <div class="bg-white rounded-xl shadow-2xl w-full max-w-md relative">
@@ -353,7 +353,7 @@ under the License.
     let allBuckets = [];
     let allUsers = [];
     let selectedBucket = null;
-
+    
     // ============================================
     // Custom Dropdown Functions
     // ============================================
diff --git a/webui/web/explorer.html b/webui/web/explorer.html
index c06f7bdd..f9807aba 100644
--- a/webui/web/explorer.html
+++ b/webui/web/explorer.html
@@ -344,7 +344,7 @@ under the License.
   </div>
 
   <!-- Object Info Modal -->
-  <div id="info-modal" class="hidden fixed inset-0 z-50">
+  <div id="info-modal" class="modal hidden fixed inset-0 z-50">
     <div class="modal-backdrop absolute inset-0" onclick="closeModal('info-modal')"></div>
     <div class="absolute inset-0 flex items-center justify-center p-4">
       <div class="bg-white rounded-xl shadow-2xl w-full max-w-3xl relative max-h-[90vh] flex flex-col">
@@ -444,7 +444,7 @@ under the License.
   <input type="file" id="file-input" class="hidden" multiple onchange="handleFileSelect(event)">
 
   <!-- Object Versions Modal -->
-  <div id="versions-modal" class="hidden fixed inset-0 z-50">
+  <div id="versions-modal" class="modal hidden fixed inset-0 z-50">
     <div class="modal-backdrop absolute inset-0" onclick="closeModal('versions-modal')"></div>
     <div class="absolute inset-0 flex items-center justify-center p-4">
       <div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl relative max-h-[90vh] flex flex-col">
@@ -478,7 +478,7 @@ under the License.
   </div>
 
   <!-- Delete Confirmation Modal -->
-  <div id="delete-modal" class="hidden fixed inset-0 z-50">
+  <div id="delete-modal" class="modal hidden fixed inset-0 z-50">
     <div class="modal-backdrop absolute inset-0" onclick="closeModal('delete-modal')"></div>
     <div class="absolute inset-0 flex items-center justify-center p-4">
       <div class="bg-white rounded-xl shadow-2xl w-full max-w-md relative">
@@ -504,7 +504,7 @@ under the License.
   </div>
 
   <!-- Create Folder Modal -->
-  <div id="create-folder-modal" class="hidden fixed inset-0 z-50">
+  <div id="create-folder-modal" class="modal hidden fixed inset-0 z-50">
     <div class="modal-backdrop absolute inset-0" onclick="closeModal('create-folder-modal')"></div>
     <div class="absolute inset-0 flex items-center justify-center p-4">
       <div class="bg-white rounded-xl shadow-2xl w-full max-w-md relative">
@@ -534,7 +534,7 @@ under the License.
   </div>
 
   <!-- Create Bucket Modal -->
-  <div id="create-bucket-modal" class="hidden fixed inset-0 z-50">
+  <div id="create-bucket-modal" class="modal hidden fixed inset-0 z-50">
     <div class="modal-backdrop absolute inset-0" onclick="closeModal('create-bucket-modal')"></div>
     <div class="absolute inset-0 flex items-center justify-center p-4">
       <div class="bg-white rounded-xl shadow-2xl w-full max-w-md relative">
@@ -564,7 +564,7 @@ under the License.
   </div>
 
   <!-- Delete Bucket Modal -->
-  <div id="delete-bucket-modal" class="hidden fixed inset-0 z-50">
+  <div id="delete-bucket-modal" class="modal hidden fixed inset-0 z-50">
     <div class="modal-backdrop absolute inset-0" onclick="closeModal('delete-bucket-modal')"></div>
     <div class="absolute inset-0 flex items-center justify-center p-4">
       <div class="bg-white rounded-xl shadow-2xl w-full max-w-md relative">
@@ -598,7 +598,7 @@ under the License.
   </div>
 
   <!-- Bucket Info Modal -->
-  <div id="bucket-info-modal" class="hidden fixed inset-0 z-50">
+  <div id="bucket-info-modal" class="modal hidden fixed inset-0 z-50">
     <div class="modal-backdrop absolute inset-0" onclick="closeModal('bucket-info-modal')"></div>
     <div class="absolute inset-0 flex items-center justify-center p-4">
       <div class="bg-white rounded-xl shadow-2xl w-full max-w-2xl relative max-h-[90vh] overflow-y-auto">
@@ -736,7 +736,7 @@ under the License.
   </div>
 
   <!-- Versioning Modal -->
-  <div id="versioning-modal" class="hidden fixed inset-0 z-50">
+  <div id="versioning-modal" class="modal hidden fixed inset-0 z-50">
     <div class="modal-backdrop absolute inset-0" onclick="closeModal('versioning-modal')"></div>
     <div class="absolute inset-0 flex items-center justify-center p-4">
       <div class="bg-white rounded-xl shadow-2xl w-full max-w-md relative">
@@ -778,7 +778,7 @@ under the License.
   </div>
 
   <!-- Object Lock Modal -->
-  <div id="object-lock-modal" class="hidden fixed inset-0 z-50">
+  <div id="object-lock-modal" class="modal hidden fixed inset-0 z-50">
     <div class="modal-backdrop absolute inset-0" onclick="closeModal('object-lock-modal')"></div>
     <div class="absolute inset-0 flex items-center justify-center p-4">
       <div class="bg-white rounded-xl shadow-2xl w-full max-w-md relative">
@@ -842,7 +842,7 @@ under the License.
   </div>
 
   <!-- Bucket Policy Modal -->
-  <div id="bucket-policy-modal" class="hidden fixed inset-0 z-50">
+  <div id="bucket-policy-modal" class="modal hidden fixed inset-0 z-50">
     <div class="modal-backdrop absolute inset-0" onclick="closeModal('bucket-policy-modal')"></div>
     <div class="absolute inset-0 flex items-center justify-center p-4">
       <div class="bg-white rounded-xl shadow-2xl w-full max-w-5xl relative max-h-[90vh] flex flex-col">
@@ -1014,7 +1014,7 @@ under the License.
   </div>
 
   <!-- Multipart Uploads Modal -->
-  <div id="multipart-uploads-modal" class="hidden fixed inset-0 z-50">
+  <div id="multipart-uploads-modal" class="modal hidden fixed inset-0 z-50">
     <div class="modal-backdrop absolute inset-0" onclick="closeModal('multipart-uploads-modal')"></div>
     <div class="absolute inset-0 flex items-center justify-center p-4">
       <div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl relative max-h-[90vh] flex flex-col">
@@ -1141,6 +1141,9 @@ under the License.
     if (!requireAuth()) {
       // Will redirect to login
     } else {
+      // Clear history state on startup (can happen when reloading with popup open)
+      if (history.state?.modal) history.back();
+      
       initSidebarWithRole();
       updateUserInfo();
       init();
@@ -1164,11 +1167,19 @@ under the License.
             currentPrefix += '/';
           }
         }
+      } else {
+        currentBucket = "";
+        currentPrefix = "";
       }
 
       await loadBuckets();
     }
-
+    
+    // Rerun init() on hash change to allow for back/forward when browsing a bucket.
+    window.addEventListener('hashchange', async () => {
+      await init();
+    });
+    
     // ============================================
     // Logout
     // ============================================
diff --git a/webui/web/js/app.js b/webui/web/js/app.js
index 7e25253f..a4790141 100644
--- a/webui/web/js/app.js
+++ b/webui/web/js/app.js
@@ -129,13 +129,26 @@ function openModal(modalId) {
     // Focus first input
     const firstInput = modal.querySelector('input:not([readonly]), select');
     if (firstInput) setTimeout(() => firstInput.focus(), 100);
+    
+    // Push to history state so the back button can close the modal
+    history.pushState({ modal: true }, '');
   }
 }
 
-function closeModal(modalId) {
+let navigatingBack = false
+
+// Close the currently opened modal, manually popping the modal
+// history state if the modal was closed manually (default). In the
+// case where the modal was closed due to navigating back, the state
+// is already popped and we can skip it.
+function closeModal(modalId, popState = true) {
   const modal = document.getElementById(modalId);
   if (modal) {
     modal.classList.add('hidden');
+    if (popState && history.state?.modal) {
+      navigatingBack = true;
+      history.back();
+    }
   }
 }
 
@@ -145,6 +158,24 @@ function closeAllModals() {
   });
 }
 
+function closeModalsOnNavigation() {
+  Array.from(document.getElementsByClassName('modal')).forEach((modal) => {
+    if (!modal.classList.contains('hidden')) {
+      closeModal(modal.getAttribute('id'), false);
+    }
+  })
+}
+
+// Catch the back button to close the open modal, if any is open.
+window.addEventListener('popstate', (e) => {
+  if (navigatingBack) {
+    navigatingBack = false;
+    return;
+  }
+  
+  closeModalsOnNavigation();
+});
+
 // Close modals on Escape key
 document.addEventListener('keydown', (e) => {
   if (e.key === 'Escape') closeAllModals();
diff --git a/webui/web/users.html b/webui/web/users.html
index 668315be..3f5b6772 100644
--- a/webui/web/users.html
+++ b/webui/web/users.html
@@ -209,7 +209,7 @@ under the License.
   </div>
 
   <!-- Create/Edit User Modal -->
-  <div id="user-modal" class="hidden fixed inset-0 z-50">
+  <div id="user-modal" class="modal hidden fixed inset-0 z-50">
     <div class="modal-backdrop absolute inset-0" onclick="closeModal('user-modal')"></div>
     <div class="absolute inset-0 flex items-center justify-center p-4">
       <div class="bg-white rounded-xl shadow-2xl w-full max-w-lg relative">
@@ -298,7 +298,7 @@ under the License.
   </div>
 
   <!-- Delete Confirmation Modal -->
-  <div id="delete-modal" class="hidden fixed inset-0 z-50">
+  <div id="delete-modal" class="modal hidden fixed inset-0 z-50">
     <div class="modal-backdrop absolute inset-0" onclick="closeModal('delete-modal')"></div>
     <div class="absolute inset-0 flex items-center justify-center p-4">
       <div class="bg-white rounded-xl shadow-2xl w-full max-w-md relative">
@@ -324,7 +324,7 @@ under the License.
   <script>
     let allUsers = [];
     let userToDelete = null;
-
+    
     // ============================================
     // Custom Dropdown Functions
     // ============================================