Merge pull request #2099 from maxberger/master

Misc UI Improvements

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

integ_tests/test_sharing.py

@@ -54,7 +54,7 @@ def test_create_and_delete_share_by_key(
     ).to_have_count(0)
 
     page.click('button[data-name="sharebytoken"]')
-    page.click('#newshare button[data-name="submit"]')
+    page.click('#createeditsharescene button[data-name="submit"]')
     expect(
         page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden)")
     ).to_have_count(1)
@@ -63,6 +63,16 @@ def test_create_and_delete_share_by_key(
             "tr[data-name='sharetokenrowtemplate']:not(.hidden) span[data-name='ro']"
         )
     ).to_be_visible()
+    expect(
+        page.locator(
+            "tr[data-name='sharetokenrowtemplate']:not(.hidden) span[data-name='rw']"
+        )
+    ).to_be_hidden()
+    expect(
+        page.locator(
+            "tr[data-name='sharetokenrowtemplate']:not(.hidden) span[data-name='conversion']"
+        )
+    ).to_be_hidden()
     page.click('tr:not(.hidden) button[data-name="delete"]', strict=True)
     page.click('#deleteconfirmationscene button[data-name="delete"]')
     expect(
@@ -70,7 +80,7 @@ def test_create_and_delete_share_by_key(
     ).to_have_count(0)
     page.click('button[data-name="sharebytoken"]')
     page.click('label[for="newshare_attr_permissions_rw"]')
-    page.click('#newshare button[data-name="submit"]')
+    page.click('#createeditsharescene button[data-name="submit"]')
     expect(
         page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden)")
     ).to_have_count(1)
@@ -79,6 +89,16 @@ def test_create_and_delete_share_by_key(
             "tr[data-name='sharetokenrowtemplate']:not(.hidden) span[data-name='rw']"
         )
     ).to_be_visible()
+    expect(
+        page.locator(
+            "tr[data-name='sharetokenrowtemplate']:not(.hidden) span[data-name='ro']"
+        )
+    ).to_be_hidden()
+    expect(
+        page.locator(
+            "tr[data-name='sharetokenrowtemplate']:not(.hidden) span[data-name='conversion']"
+        )
+    ).to_be_hidden()
     page.click('tr:not(.hidden) button[data-name="delete"]', strict=True)
     page.click('#deleteconfirmationscene button[data-name="delete"]')
     expect(
@@ -101,7 +121,7 @@ def test_create_and_delete_share_by_map(
     page.click('button[data-name="sharebymap"]')
     page.locator('input[data-name="shareuser"]').fill("max")
     page.locator('input[data-name="sharehref"]').fill("1234")
-    page.click('#newshare button[data-name="submit"]')
+    page.click('#createeditsharescene button[data-name="submit"]')
     expect(
         page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden)")
     ).to_have_count(1)
@@ -119,7 +139,7 @@ def test_create_and_delete_share_by_map(
     page.click('label[for="newshare_attr_permissions_rw"]')
     page.locator('input[data-name="shareuser"]').fill("max")
     page.locator('input[data-name="sharehref"]').fill("1234")
-    page.click('#newshare button[data-name="submit"]')
+    page.click('#createeditsharescene button[data-name="submit"]')
     expect(
         page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden)")
     ).to_have_count(1)
@@ -184,7 +204,7 @@ def test_share_with_property_overrides(
     page.click('label[for="newshare_attr_color_enabled"]')
     page.locator('input[data-name="color_override"]').fill("#00ff00")
 
-    page.click('#newshare button[data-name="submit"]')
+    page.click('#createeditsharescene button[data-name="submit"]')
 
     # Verify the share was created
     expect(
@@ -229,7 +249,7 @@ def test_share_journal_no_overrides(
     expect(page.locator('input[data-name="color_override_enabled"]')).to_be_hidden()
 
     # Create the share
-    page.click('#newshare button[data-name="submit"]')
+    page.click('#createeditsharescene button[data-name="submit"]')
 
     # Verify the share was created
     expect(
@@ -247,7 +267,7 @@ def test_edit_share_by_token(
 
     # Create RO share
     page.click('button[data-name="sharebytoken"]')
-    page.click('#newshare button[data-name="submit"]')
+    page.click('#createeditsharescene button[data-name="submit"]')
     expect(
         page.locator(
             "tr[data-name='sharetokenrowtemplate']:not(.hidden) span[data-name='ro']"
@@ -256,9 +276,9 @@ def test_edit_share_by_token(
 
     # Edit to RW
     page.click('tr:not(.hidden) button[data-name="edit"]')
-    expect(page.locator("#newshare h1")).to_have_text("Edit Share")
+    expect(page.locator("#createeditsharescene h1")).to_have_text("Edit Share")
     page.click('label[for="newshare_attr_permissions_rw"]')
-    page.click('#newshare button[data-name="submit"]')
+    page.click('#createeditsharescene button[data-name="submit"]')
 
     # Verify RW
     expect(
@@ -280,7 +300,7 @@ def test_edit_share_by_map(
     page.click('button[data-name="sharebymap"]')
     page.locator('input[data-name="shareuser"]').fill("max")
     page.locator('input[data-name="sharehref"]').fill("mapped")
-    page.click('#newshare button[data-name="submit"]')
+    page.click('#createeditsharescene button[data-name="submit"]')
     expect(
         page.locator(
             "tr[data-name='sharemaprowtemplate']:not(.hidden) span[data-name='ro']"
@@ -289,14 +309,14 @@ def test_edit_share_by_map(
 
     # Edit map share
     page.click('tr:not(.hidden) button[data-name="edit"]')
-    expect(page.locator("#newshare h1")).to_have_text("Edit Share")
+    expect(page.locator("#createeditsharescene h1")).to_have_text("Edit Share")
     expect(page.locator('input[data-name="shareuser"]')).to_be_disabled()
     expect(page.locator('input[data-name="sharehref"]')).to_be_disabled()
 
     # Change permissions and enabled status
     page.click('label[for="newshare_attr_permissions_rw"]')
-    page.uncheck('#newshare input[data-name="enabled"]')
+    page.uncheck('#createeditsharescene input[data-name="enabled"]')
-    page.click('#newshare button[data-name="submit"]')
+    page.click('#createeditsharescene button[data-name="submit"]')
 
     # Verify changes
     expect(
@@ -307,8 +327,10 @@ def test_edit_share_by_map(
     # If disabled, it might not show up or show differently, but our current UI doesn't visually distinguish enabled/disabled in the list yet
     # Let's verify by re-opening edit scene
     page.click('tr:not(.hidden) button[data-name="edit"]')
-    expect(page.locator('#newshare input[data-name="enabled"]')).not_to_be_checked()
+    expect(
-    page.click('#newshare button[data-name="cancel"]')
+        page.locator('#createeditsharescene input[data-name="enabled"]')
+    ).not_to_be_checked()
+    page.click('#createeditsharescene button[data-name="cancel"]')
 
 
 def test_share_by_map_validation(
@@ -324,21 +346,21 @@ def test_share_by_map_validation(
     # Try empty user
     page.locator('input[data-name="shareuser"]').fill("")
     page.locator('input[data-name="sharehref"]').fill("1234")
-    page.click('#newshare button[data-name="submit"]')
+    page.click('#createeditsharescene button[data-name="submit"]')
-    expect(page.locator('#newshare [data-name="error"]:not(.hidden)')).to_contain_text(
+    expect(
-        "Share User is empty"
+        page.locator('#createeditsharescene [data-name="error"]:not(.hidden)')
-    )
+    ).to_contain_text("Share User is empty")
 
     # Try logged in user
     page.locator('input[data-name="shareuser"]').fill("admin")
-    page.click('#newshare button[data-name="submit"]')
+    page.click('#createeditsharescene button[data-name="submit"]')
-    expect(page.locator('#newshare [data-name="error"]:not(.hidden)')).to_contain_text(
+    expect(
-        "Share User cannot be admin"
+        page.locator('#createeditsharescene [data-name="error"]:not(.hidden)')
-    )
+    ).to_contain_text("Share User cannot be admin")
 
     # Valid user
     page.locator('input[data-name="shareuser"]').fill("max")
-    page.click('#newshare button[data-name="submit"]')
+    page.click('#createeditsharescene button[data-name="submit"]')
 
     # Verify success
     expect(
@@ -377,7 +399,7 @@ def test_create_and_delete_share_by_bday(
     expect(page.locator("input#newshare_attr_permissions_ro")).to_be_disabled()
     expect(page.locator("input#newshare_attr_permissions_rw")).to_be_disabled()
 
-    page.click('#newshare button[data-name="submit"]')
+    page.click('#createeditsharescene button[data-name="submit"]')
     expect(
         page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden)")
     ).to_have_count(1)
@@ -388,6 +410,11 @@ def test_create_and_delete_share_by_bday(
             "tr[data-name='sharemaprowtemplate']:not(.hidden) span[data-name='ro']"
         )
     ).to_be_hidden()
+    expect(
+        page.locator(
+            "tr[data-name='sharemaprowtemplate']:not(.hidden) span[data-name='rw']"
+        )
+    ).to_be_hidden()
 
     # Instead, there should be the conversion icon
     expect(
@@ -438,7 +465,7 @@ def test_bday_section_hidden_for_calendar(
     expect(page.locator("#sharecollectionscene")).to_be_visible()
     page.click('button[data-name="sharebymap"]')
     expect(page.locator("details[data-name='conversions']")).to_be_hidden()
-    page.click('#newshare button[data-name="cancel"]')
+    page.click('#createeditsharescene button[data-name="cancel"]')
 
 
 def test_bday_section_visible_for_addressbook(
@@ -462,7 +489,7 @@ def test_bday_section_visible_for_addressbook(
     expect(page.locator("#sharecollectionscene")).to_be_visible()
     page.click('button[data-name="sharebymap"]')
     expect(page.locator("details[data-name='conversions']")).to_be_visible()
-    page.click('#newshare button[data-name="cancel"]')
+    page.click('#createeditsharescene button[data-name="cancel"]')
 
 
 @pytest.fixture

integ_tests/test_sharing_login.py

@@ -47,7 +47,7 @@ def test_incoming_shares(page: Page, radicale_server: str, permissions: str) ->
     page.locator('input[data-name="sharehref"]').fill("mapped")
     if permissions == "rw":
         page.check("#newshare_attr_permissions_rw")
-    page.click('#newshare button[data-name="submit"]')
+    page.click('#createeditsharescene button[data-name="submit"]')
     expect(
         page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden)")
     ).to_have_count(1)

radicale/web/internal_data/index.html

@@ -149,8 +149,8 @@
 
     <section id="sharecollectionscene" class="container hidden">
       <h1>Sharing</h1>
-      <p>Manage sharing for collection <span class="title" data-name="title">title</span>
+      <p>Manage sharing for collection <span class="title" data-name="title">title</span></p>
-      </p>
+      <p data-name="description"></p>
       <div data-name="sharebytoken">
         <details open>
           <summary>By Token</summary>
@@ -257,8 +257,10 @@
       <span class="error hidden" data-name="error"></span>
     </section>
 
-    <section id="newshare" class="container hidden">
+    <section id="createeditsharescene" class="container hidden">
       <h1>New Share</h1>
+      <p class="title" data-name="title"></p>
+      <p data-name="description"></p>
       <form>
         <details open data-name="sharemapfields" class="hidden">
           <summary>Map Target</summary>

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, update_title_and_description } 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";
@@ -47,7 +48,9 @@ export class CreateEditShareScene {
         this._edit = !!share;
         this._pathMapped = collection.href;
 
-        this._html_scene = get_element_by_id("newshare");
+        this._html_scene = get_element_by_id("createeditsharescene");
+        this._title = get_element(this._html_scene, "[data-name=title]");
+        this._description = get_element(this._html_scene, "[data-name=description]");
         this._form = /** @type {HTMLFormElement} */ (get_element(this._html_scene, "form"));
         this._sharemapfields = get_element(this._html_scene, "[data-name=sharemapfields]");
         this._shareuser_input = /** @type {HTMLInputElement} */ (get_element(this._html_scene, "[data-name=shareuser]"));
@@ -404,6 +407,8 @@ export class CreateEditShareScene {
             this._errorHandler.clearError();
         }
         this._on_permissions_change();
+
+        update_title_and_description(this._collection, this._title, this._description);
     }
 
     hide() {
@@ -416,4 +421,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,7 +25,9 @@ import {
   reload_sharing_list,
 } from "../api/sharing.js";
 import { Collection, Permission } from "../models/collection.js";
+import { extract_title } from "../utils/collection_utils.js";
 
+import { update_title_and_description } from "../utils/collection_utils.js";
 import { ErrorHandler } from "../utils/error.js";
 import { get_element, get_element_by_id } from "../utils/misc.js";
 import { displayPermissionsOrConversion } from "../utils/permissions.js";
@@ -59,6 +61,7 @@ export class ShareCollectionScene {
     this._errorHandler = new ErrorHandler(this._error_form);
 
     this._title = get_element(this._html_scene, "[data-name=title]");
+    this._description = get_element(this._html_scene, "[data-name=description]");
   }
 
   _oncancel() {
@@ -113,7 +116,7 @@ export class ShareCollectionScene {
       if (this._share_by_map_div) this._share_by_map_div.classList.add("hidden");
     }
 
-    this._title.textContent = this._collection.displayname || this._collection.href;
+    update_title_and_description(this._collection, this._title, this._description);
     update_share_list(this._user, this._password, this._collection, this._errorHandler);
   }
 
@@ -126,6 +129,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,49 @@
+/**
+ * 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;
+}
+
+/**
+ * @param {import("../models/collection.js").Collection} collection
+ * @param {HTMLElement} title_element
+ * @param {HTMLElement} description_element
+ */
+export function update_title_and_description(
+    collection,
+    title_element,
+    description_element) {
+    title_element.textContent = collection.displayname || collection.href;
+    if (collection.description && collection.description.length > 0) {
+        description_element.classList.remove("hidden");
+        description_element.textContent = collection.description;
+    } else {
+        description_element.classList.add("hidden");
+    }
+}

radicale/web/internal_data/js/utils/permissions.js

@@ -35,18 +35,16 @@ export function displayPermissionsOrConversion(conversion, permissions, node) {
     rwElement.classList.add("hidden");
   } else {
     permissions = (permissions || "").toLowerCase();
-    if (permissions === "rw") {
+    if (permissions.includes('w')) {
       rwElement.classList.remove("hidden");
       rwElement.setAttribute("title", "Read and write");
       roElement.classList.add("hidden");
       conversionElement.classList.add("hidden");
-    } else if (permissions === "r") {
+    } else {
       roElement.classList.remove("hidden");
       roElement.setAttribute("title", "Read-only");
       rwElement.classList.add("hidden");
       conversionElement.classList.add("hidden");
-    } else {
-      console.warn("Unknown permissions", permissions);
     }
   }
 }