UI: Dynamic window titles including URL

integ_tests/test_basic_operation.py

@@ -19,6 +19,7 @@ Integration test for basic operations
 """
 
 import pathlib
+import re
 from typing import Any, Generator
 
 import pytest
@@ -44,7 +45,7 @@ def test_index_html_loads(page: Page, radicale_server: str, config: Config) -> N
     console_msgs: list[str] = []
     page.on("console", lambda msg: console_msgs.append(msg.text))
     page.goto(radicale_server)
-    expect(page).to_have_title("Radicale Web Interface")
+    expect(page).to_have_title(re.compile("Radicale Web Interface - .* - Login"))
     # There should be no errors on the console, except for the expected 401/403 from auto-login check
     errors = [
         msg

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

@@ -312,4 +312,10 @@ export class CollectionsScene {
     }
 
     is_transient() { return false; }
+
+    title_object() {
+        if (this._principal_collection.displayname && this._principal_collection.displayname.length > 0)
+            return this._principal_collection.displayname;
+        else return this._user;
+    }
 }

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

@@ -22,6 +22,7 @@
 import { create_collection, edit_collection } from "../api/api.js";
 import { COLOR_RE } from "../constants.js";
 import { Collection, CollectionType } from "../models/collection.js";
+import { extract_title } from "../utils/collection_utils.js";
 import { collectionsCache } from "../utils/collections_cache.js";
 import { ErrorHandler } from "../utils/error.js";
 import { FormValidator, validate_color, validate_href } from "../utils/form_validator.js";
@@ -224,4 +225,9 @@ export class CreateEditCollectionScene {
             this._create_edit_req = null;
         }
     }
+
+    title_object() {
+        return extract_title(this._collection);
+    }
+
 }

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

@@ -21,6 +21,7 @@
 
 import { Share, add_share_by_map, add_share_by_token, get_property_key, update_share_by_map, update_share_by_token } from "../api/sharing.js";
 import { CollectionType, Permission } from "../models/collection.js";
+import { extract_title } from "../utils/collection_utils.js";
 import { collectionsCache } from "../utils/collections_cache.js";
 import { ErrorHandler } from "../utils/error.js";
 import { FormValidator, validate_href, validate_non_empty, validate_not_empty_or_equals } from "../utils/form_validator.js";
@@ -416,4 +417,9 @@ export class CreateEditShareScene {
     }
 
     is_transient() { return false; }
+
+    title_object() {
+        return extract_title(this._collection);
+    }
+
 }

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

@@ -153,4 +153,6 @@ export class DeleteConfirmationScene {
             this._delete_req = null;
         }
     }
+
+    title_object() { return ""; }
 }

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

@@ -24,8 +24,8 @@ import { collectionsCache } from "../utils/collections_cache.js";
 import { ErrorHandler } from "../utils/error.js";
 import { get_element, get_element_by_id } from "../utils/misc.js";
 import { displayPermissionsOrConversion } from "../utils/permissions.js";
-import { Scene, pop_scene } from "./scene_manager.js";
 import { UrlTextHandler } from "../utils/url_text.js";
+import { Scene, pop_scene } from "./scene_manager.js";
 
 /**
  * @implements {Scene}
@@ -166,4 +166,6 @@ export class IncomingSharingScene {
         });
         this._nodes = [];
     }
+
+    title_object() { return ""; }
 }

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

@@ -37,4 +37,5 @@ export class LoadingScene {
     }
     release() { }
     is_transient() { return true; }
+    title_object() { return "Loading..."}
 }

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

@@ -196,4 +196,7 @@ export class LoginScene {
         }
         this._remove_logout();
     }
+
+    title_object() { return "Login" }
+
 }

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

@@ -25,6 +25,7 @@ import {
   reload_sharing_list,
 } from "../api/sharing.js";
 import { Collection, Permission } from "../models/collection.js";
+import { extract_title } from "../utils/collection_utils.js";
 
 import { ErrorHandler } from "../utils/error.js";
 import { get_element, get_element_by_id } from "../utils/misc.js";
@@ -126,6 +127,11 @@ export class ShareCollectionScene {
   }
 
   is_transient() { return false; }
+
+  title_object() {
+    return extract_title(this._collection);
+  }
+
 }
 
 /**

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

@@ -241,4 +241,6 @@ export class UploadCollectionScene {
             this._upload_req = null;
         }
     }
+
+    title_object() { return ""; }
 }

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

@@ -19,6 +19,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { SERVER } from "../constants.js";
+
 /**
  * @interface
  */
@@ -41,6 +43,9 @@ export class Scene {
      * @returns boolean
      */
     is_transient() { return false; }
+
+    /** @returns str */
+    title_object() { return ""; }
 }
 
 
@@ -54,6 +59,18 @@ let history_array = [];
 let current_history_index = -1;
 let is_navigating_history = false;
 
+function update_window_title() {
+    let title_parts = ["Radicale Web Interface", SERVER];
+
+    if (scene_stack.length > 0) {
+        let title = scene_stack[scene_stack.length - 1].title_object();
+        if (title) {
+            title_parts.push(title);
+        }
+    }
+    document.title = title_parts.join(" - ");
+}
+
 function record_history() {
     if (is_navigating_history) return;
 
@@ -120,6 +137,7 @@ if (typeof window !== "undefined" && window.history) {
                 }
 
                 current_history_index = new_index;
+                update_window_title();
             } finally {
                 is_navigating_history = false;
             }
@@ -141,6 +159,7 @@ export function push_scene(scene) {
     scene_stack.push(scene);
     scene.show();
     record_history();
+    update_window_title();
 }
 
 /**
@@ -154,6 +173,7 @@ function pop_and_release() {
     if (scene) {
         scene.release();
     }
+    update_window_title();
 }
 
 /**
@@ -168,6 +188,7 @@ export function replace_scene(scene) {
     scene_stack.push(scene);
     scene.show();
     record_history();
+    update_window_title();
 }
 
 /**
@@ -183,6 +204,7 @@ export function pop_scene() {
         scene_stack[scene_stack.length - 1].show();
     }
     record_history();
+    update_window_title();
 }
 
 /**
@@ -202,6 +224,7 @@ export function pop_to_parent() {
         scene_stack[scene_stack.length - 1].show();
     }
     record_history();
+    update_window_title();
 }
 
 /**
@@ -222,6 +245,7 @@ export function pop_to_root() {
         scene_stack[0].show(); // Ensure the root scene is visible
     }
     record_history();
+    update_window_title();
 }
 
 /**

radicale/web/internal_data/js/utils/collection_utils.js

@@ -0,0 +1,31 @@
+/**
+ * This file is part of Radicale Server - Calendar Server
+ * Copyright © 2017-2024 Unrud <unrud@outlook.com>
+ * Copyright © 2023-2024 Matthew Hana <matthew.hana@gmail.com>
+ * Copyright © 2024-2025 Peter Bieringer <pb@bieringer.de>
+ * Copyright © 2026-2026 Max Berger <max@berger.name>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/**
+ * @param {import("../models/collection.js").Collection} collection
+ * @returns str
+ */
+export function extract_title(collection) {
+    if (collection.displayname && collection.displayname.length > 0) {
+        return collection.displayname;
+    } else
+        return collection.href;
+}