Add support for browser back/forward

integ_tests/test_scenes.py

@@ -126,3 +126,24 @@ def test_navigation_refresh_button(
     page.click('#logoutview a[data-name="refresh"]')
     # It shows LoadingScene briefly then back to CollectionsScene
     expect(page.locator("#collectionsscene")).to_be_visible()
+
+
+def test_navigation_browser_history(
+    context: BrowserContext, page: Page, radicale_server: str, config: Config
+) -> None:
+    login(page, radicale_server, config, context=context)
+    expect(page.locator("#collectionsscene")).to_be_visible()
+
+    # Navigate forward inside the SPA to CreateEditCollectionScene
+    page.click('a[data-name="new"]')
+    expect(page.locator("#createcollectionscene")).to_be_visible()
+
+    # Emulate browser Back button
+    page.go_back()
+    expect(page.locator("#createcollectionscene")).to_be_hidden()
+    expect(page.locator("#collectionsscene")).to_be_visible()
+
+    # Emulate browser Forward button
+    page.go_forward()
+    expect(page.locator("#collectionsscene")).to_be_hidden()
+    expect(page.locator("#createcollectionscene")).to_be_visible()

radicale/web/internal_data/js/scenes/CollectionsScene.js

@@ -290,5 +290,6 @@ export class CollectionsScene {
         };
         this.release = function () {
         };
+        this.is_transient = function () { return false; };
     }
 }

radicale/web/internal_data/js/scenes/CreateEditCollectionScene.js

@@ -211,6 +211,7 @@ export class CreateEditCollectionScene {
             submit_btn.onclick = null;
             cancel_btn.onclick = null;
         };
+        this.is_transient = function () { return false; };
         this.release = function () {
             if (create_edit_req !== null) {
                 create_edit_req.abort();

radicale/web/internal_data/js/scenes/CreateEditShareScene.js

@@ -365,5 +365,6 @@ export class CreateEditShareScene {
 
         this.release = function () {
         };
+        this.is_transient = function () { return false; };
     }
 }

radicale/web/internal_data/js/scenes/DeleteConfirmationScene.js

@@ -134,6 +134,7 @@ export class DeleteConfirmationScene {
             cancel_btn.onclick = null;
             delete_btn.onclick = null;
         };
+        this.is_transient = function () { return false; };
         this.release = function () {
             if (delete_req !== null) {
                 delete_req.abort();

radicale/web/internal_data/js/scenes/IncomingSharingScene.js

@@ -157,6 +157,7 @@ export class IncomingSharingScene {
             error_handler.clearError();
         };
 
+        this.is_transient = function () { return false; };
         this.release = function () {
             error_handler.clearError();
             nodes.forEach(function (node) {

radicale/web/internal_data/js/scenes/LoadingScene.js

@@ -36,4 +36,5 @@ export class LoadingScene {
         this.html_scene.classList.add("hidden");
     }
     release() { }
+    is_transient() { return true; }
 }

radicale/web/internal_data/js/scenes/LoginScene.js

@@ -183,6 +183,7 @@ export class LoginScene {
             html_scene.classList.add("hidden");
             form.onsubmit = null;
         };
+        this.is_transient = function () { return false; };
         this.release = function () {
             // cancel pending requests
             if (principal_req !== null) {

radicale/web/internal_data/js/scenes/ShareCollectionScene.js

@@ -126,6 +126,7 @@ export class ShareCollectionScene {
     };
     this.release = function () {
     };
+    this.is_transient = function () { return false; };
   }
 }
 

radicale/web/internal_data/js/scenes/UploadCollectionScene.js

@@ -227,6 +227,7 @@ export class UploadCollectionScene {
             });
             nodes = null;
         };
+        this.is_transient = function () { return false; };
         this.release = function () {
             if (upload_req !== null) {
                 upload_req.abort();

radicale/web/internal_data/js/scenes/scene_manager.js

@@ -36,6 +36,11 @@ export class Scene {
      * Scene is removed from scene stack.
      */
     release() { }
+    /**
+     * Whether the scene should be excluded from browser history.
+     * @returns boolean
+     */
+    is_transient() { return false; }
 }
 
 
@@ -44,6 +49,87 @@ export class Scene {
  */
 let scene_stack = [];
 
+/** @type {Array<Array<Scene>>} */
+let history_array = [];
+let current_history_index = -1;
+let is_navigating_history = false;
+
+function record_history() {
+    if (is_navigating_history) return;
+
+    let current_scene = scene_stack.length > 0 ? scene_stack[scene_stack.length - 1] : null;
+    if (current_scene && current_scene.is_transient && current_scene.is_transient()) {
+        return;
+    }
+
+    // Compare with current history to avoid duplicates
+    if (history_array.length > 0 && current_history_index >= 0) {
+        let last_stack = history_array[current_history_index];
+        if (last_stack && last_stack.length === scene_stack.length) {
+            let is_identical = true;
+            for (let i = 0; i < scene_stack.length; i++) {
+                if (last_stack[i] !== scene_stack[i]) {
+                    is_identical = false;
+                    break;
+                }
+            }
+            if (is_identical) return;
+        }
+    }
+
+    history_array.splice(current_history_index + 1);
+    history_array.push(scene_stack.slice());
+    current_history_index++;
+
+    // Check if this is the first history entry we are recording
+    if (typeof window !== "undefined" && window.history) {
+        if (current_history_index === 0) {
+            history.replaceState({ history_index: current_history_index }, '');
+        } else {
+            history.pushState({ history_index: current_history_index }, '');
+        }
+    }
+}
+
+if (typeof window !== "undefined" && window.history) {
+    if (!history.state || typeof history.state.history_index !== "number") {
+        current_history_index = -1;
+    } else {
+        // If there's an existing state but we just loaded, we don't have the history_array memory.
+        // We'll reset it. The user will be redirected to the root if they go back out of bounds.
+        current_history_index = -1;
+    }
+
+    window.addEventListener("popstate", (event) => {
+        if (!event.state || typeof event.state.history_index !== "number") return;
+        let new_index = event.state.history_index;
+
+        if (new_index >= 0 && new_index < history_array.length) {
+            is_navigating_history = true;
+            try {
+                let new_stack = history_array[new_index];
+
+                if (scene_stack.length > 0) {
+                    scene_stack[scene_stack.length - 1].hide();
+                }
+
+                scene_stack = new_stack.slice();
+
+                if (scene_stack.length > 0) {
+                    scene_stack[scene_stack.length - 1].show();
+                }
+
+                current_history_index = new_index;
+            } finally {
+                is_navigating_history = false;
+            }
+        } else {
+            // Out of bounds (e.g., from a previous session after a reload)
+            window.location.reload();
+        }
+    });
+}
+
 /**
  * Push scene onto stack.
  * @param {Scene} scene
@@ -54,6 +140,7 @@ export function push_scene(scene) {
     }
     scene_stack.push(scene);
     scene.show();
+    record_history();
 }
 
 /**
@@ -80,6 +167,7 @@ export function replace_scene(scene) {
     }
     scene_stack.push(scene);
     scene.show();
+    record_history();
 }
 
 /**
@@ -94,6 +182,7 @@ export function pop_scene() {
     if (scene_stack.length >= 1) {
         scene_stack[scene_stack.length - 1].show();
     }
+    record_history();
 }
 
 /**
@@ -112,6 +201,7 @@ export function pop_to_parent() {
     if (scene_stack.length >= 1) {
         scene_stack[scene_stack.length - 1].show();
     }
+    record_history();
 }
 
 /**
@@ -131,6 +221,7 @@ export function pop_to_root() {
     if (scene_stack.length === 1) {
         scene_stack[0].show(); // Ensure the root scene is visible
     }
+    record_history();
 }
 
 /**