Merge pull request #2121 from maxberger/master

UI: Move incoming shared to the end and allow property overrides

integ_tests/test_collection_sorting.py

@@ -0,0 +1,117 @@
+# This file is part of Radicale - CalDAV and CardDAV server
+# Copyright © 2026-2026 Max Berger <max@berger.name>
+#
+# This library 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 library 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 Radicale.  If not, see <http://www.gnu.org/licenses/>.
+
+
+"""
+Test for checking if the collections are sorted correctly.
+"""
+
+import pathlib
+import re
+from typing import Any, Generator
+
+import pytest
+from playwright.sync_api import Page, expect
+
+from integ_tests.common import SHARING_HTPASSWD, login, start_radicale_server
+
+
+@pytest.fixture
+def radicale_server(tmp_path: pathlib.Path) -> Generator[str, Any, None]:
+    yield from start_radicale_server(tmp_path, SHARING_HTPASSWD)
+
+
+def create_named_collection(page: Page, name: str) -> None:
+    page.click('.fabcontainer a[data-name="new"]')
+    page.fill('#createcollectionscene input[data-name="displayname"]', name)
+    page.click('#createcollectionscene button[data-name="submit"]')
+    expect(page.locator("#createcollectionscene")).to_be_hidden()
+
+
+def test_collection_sorting(page: Page, radicale_server: str) -> None:
+    config = SHARING_HTPASSWD
+
+    # 1. Admin logs in and creates "Z" and "A"
+    login(page, radicale_server, config)
+    create_named_collection(page, "Z")
+    create_named_collection(page, "A")
+
+    # 2. Admin shares "M" to "max"
+    create_named_collection(page, "M")
+    article_m = page.locator("article:not(.hidden)").filter(
+        has=page.locator("[data-name='title']", has_text="M")
+    )
+    article_m.hover()
+    article_m.locator("a[data-name='share']").click(force=True)
+
+    page.click('button[data-name="sharebymap"]')
+    page.locator('input[data-name="shareuser"]').fill(config.user_username)
+    page.locator('input[data-name="sharehref"]').fill("m-shared")
+    page.click('#createeditsharescene button[data-name="submit"]')
+    page.click('#sharecollectionscene button[data-name="cancel"]')
+
+    # 3. Admin logs out
+    page.click('a[data-name="logout"]')
+
+    # 4. Max logs in
+    page.fill('#loginscene input[data-name="user"]', config.user_username)
+    page.fill('#loginscene input[data-name="password"]', "userpassword")
+    page.click('button:has-text("Next")')
+
+    # 5. Max creates his own "B" and "Y"
+    create_named_collection(page, "Y")
+    create_named_collection(page, "B")
+
+    # 6. Max enables the shared collection "M"
+    page.click('a[data-name="incomingshares"]')
+    row = page.locator("tr[data-name='incomingsharerowtemplate']:not(.hidden)")
+    expect(row.locator("input[data-name='pathortoken']")).to_have_value(
+        re.compile("m-shared")
+    )
+    row.locator("input[data-name='enabled']").check()
+    row.locator("input[data-name='shown']").check()
+    page.click('#incomingsharingscene button[data-name="close"]')
+
+    # 7. Verify the order
+    # Expected: "B", "Y" (Owned), then "M" (Shared)
+    # Wait for articles to be rendered
+    expect(page.locator("article:not(.hidden) [data-name='title']")).to_have_count(3)
+
+    titles = page.locator(
+        "article:not(.hidden) [data-name='title']"
+    ).all_text_contents()
+    titles = [t.strip() for t in titles if t.strip()]
+
+    assert titles == ["B", "Y", "M"], f"Expected order ['B', 'Y', 'M'], got {titles}"
+
+    # 8. Max creates "A"
+    create_named_collection(page, "A")
+
+    # Wait for articles to be rendered (now 4)
+    expect(page.locator("article:not(.hidden) [data-name='title']")).to_have_count(4)
+
+    titles = page.locator(
+        "article:not(.hidden) [data-name='title']"
+    ).all_text_contents()
+    titles = [t.strip() for t in titles if t.strip()]
+
+    # Expected: "A", "B", "Y", then "M"
+    assert titles == [
+        "A",
+        "B",
+        "Y",
+        "M",
+    ], f"Expected order ['A', 'B', 'Y', 'M'], got {titles}"

integ_tests/test_shared_collection_edit.py

@@ -0,0 +1,100 @@
+# This file is part of Radicale - CalDAV and CardDAV server
+# Copyright © 2026-2026 Max Berger <max@berger.name>
+#
+# This library 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 library 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 Radicale.  If not, see <http://www.gnu.org/licenses/>.
+
+"""
+Integration tests for editing properties of a shared collection.
+"""
+
+import pathlib
+import re
+from typing import Any, Generator
+
+import pytest
+from playwright.sync_api import Page, expect
+
+from integ_tests.common import SHARING_HTPASSWD, login, start_radicale_server
+
+
+@pytest.fixture
+def radicale_server(tmp_path: pathlib.Path) -> Generator[str, Any, None]:
+    yield from start_radicale_server(tmp_path, SHARING_HTPASSWD)
+
+
+def create_named_collection(page: Page, name: str) -> None:
+    page.click('.fabcontainer a[data-name="new"]')
+    page.fill('#createcollectionscene input[data-name="displayname"]', name)
+    page.click('#createcollectionscene button[data-name="submit"]')
+    expect(page.locator("#createcollectionscene")).to_be_hidden()
+
+
+def test_shared_collection_property_edit(page: Page, radicale_server: str) -> None:
+    config = SHARING_HTPASSWD
+
+    # 1. Admin logs in and creates "Shared"
+    login(page, radicale_server, config)
+    create_named_collection(page, "Shared")
+
+    # 2. Admin shares it with "max" with "Allow Properties write" enabled
+    article = page.locator("article:not(.hidden)").filter(
+        has=page.locator("[data-name='title']", has_text="Shared")
+    )
+    article.hover()
+    article.locator("a[data-name='share']").click(force=True)
+
+    page.click('button[data-name="sharebymap"]')
+    page.locator('input[data-name="shareuser"]').fill(config.user_username)
+    page.locator('input[data-name="sharehref"]').fill("shared-mapped")
+    # Allow properties write
+    page.check("#newshare_attr_properties_write_allow")
+    page.click('#createeditsharescene button[data-name="submit"]')
+    page.click('#sharecollectionscene button[data-name="cancel"]')
+
+    # 3. Admin logs out
+    page.click('a[data-name="logout"]')
+
+    # 4. Max logs in
+    page.fill('#loginscene input[data-name="user"]', config.user_username)
+    page.fill('#loginscene input[data-name="password"]', "userpassword")
+    page.click('button:has-text("Next")')
+
+    # 5. Max enables the shared collection
+    page.click('a[data-name="incomingshares"]')
+    row = page.locator("tr[data-name='incomingsharerowtemplate']:not(.hidden)")
+    expect(row.locator("input[data-name='pathortoken']")).to_have_value(
+        re.compile("shared-mapped")
+    )
+    row.locator("input[data-name='enabled']").check()
+    row.locator("input[data-name='shown']").check()
+    page.click('#incomingsharingscene button[data-name="close"]')
+
+    # 6. Verify "Edit" button is visible
+    shared_article = page.locator("article:not(.hidden)").filter(
+        has=page.locator("[data-name='title']", has_text="Shared")
+    )
+    shared_article.hover()
+    expect(shared_article.locator("a[data-name='edit']")).to_be_visible()
+
+    # 7. Max edits the collection
+    shared_article.locator("a[data-name='edit']").click()
+    page.fill('#editcollectionscene input[data-name="displayname"]', "Renamed by Max")
+    page.click('#editcollectionscene button[data-name="submit"]')
+
+    # 8. Verify the change
+    expect(
+        page.locator(
+            "article:not(.hidden) [data-name='title']", has_text="Renamed by Max"
+        )
+    ).to_be_visible()

integ_tests/test_sharing_login.py

@@ -151,11 +151,9 @@ def test_incoming_shares(
     expect(article.locator('[data-name="shareoption"]')).to_be_hidden()
     expect(article.locator('a[data-name="delete"]')).to_be_hidden()
 
-    # Edit button depends on permissions
+    # Edit button is visible if either data write or property write is allowed.
-    if permissions == "rw":
+    # In the test environment, permit_properties_overlay is true, so it's always visible.
-        expect(article.locator('a[data-name="edit"]')).to_be_visible()
+    expect(article.locator('a[data-name="edit"]')).to_be_visible()
-    else:
-        expect(article.locator('a[data-name="edit"]')).to_be_hidden()
 
     # 7. Assert no error was shown
     expect(page.locator('#incomingsharingscene span[data-name="error"]')).to_be_hidden()

radicale/web/internal_data/js/api/api.js

@@ -103,11 +103,6 @@ export function get_collections(user, password, collection, callback) {
                         collections.push(parsedCollection);
                     }
                 }
-                collections.sort(function (a, b) {
-                    /** @type {string} */ let ca = a.displayname || a.href;
-                    /** @type {string} */ let cb = b.displayname || b.href;
-                    return ca.localeCompare(cb);
-                });
                 callback(collections, null);
             } else {
                 callback(null, "No valid XML received");

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

@@ -22,6 +22,7 @@
 import { delete_collection } from "../api/api.js";
 import { get_auth_header } from "../api/common.js";
 import { Collection, 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 { bytesToHumanReadable, completeHref, get_element, get_element_by_id } from "../utils/misc.js";
@@ -134,149 +135,197 @@ export class CollectionsScene {
     }
 
     /**
-     * @param {any[]} collections
+     * @param {Collection[]} collections
      * @param {import("../api/sharing.js").Share[]} shares
-     * @param {boolean} clear_error
      */
-    _show_collections(collections, shares, clear_error) {
+    _sort_collections(collections, shares) {
-        /** @type {HTMLElement} */ let navBar = get_element(document, "#logoutview");
+        collections.sort((a, b) => {
-        let heightOfNavBar = navBar.offsetHeight + "px";
+            const getShare = (/** @type {Collection} */ col) => (shares || []).find(
-        this._html_scene.style.marginTop = heightOfNavBar;
+                s => (s.ShareType === "map") &&
-        this._html_scene.style.height = "calc(100vh - " + heightOfNavBar + ")";
+                    decodeURIComponent(s.PathOrToken || "").replace(/\/+$/, "") === decodeURIComponent(col.href || "").replace(/\/+$/, ""));
 
-        if (clear_error) {
+            const shareA = getShare(a);
-            this._errorHandler.clearError();
+            const shareB = getShare(b);
-        }
 
-        // Clear old nodes
+            const ownedA = !shareA || shareA.Owner === this._user;
+            const ownedB = !shareB || shareB.Owner === this._user;
+
+            if (ownedA && !ownedB) return -1;
+            if (!ownedA && ownedB) return 1;
+
+            return extract_title(a).localeCompare(extract_title(b));
+        });
+    }
+
+    /**
+     * Clears all collection nodes from the DOM and resets the nodes array.
+     */
+    _clear_collections_display() {
         this._nodes.forEach(function (node) {
             if (node.parentNode) {
                 node.parentNode.removeChild(node);
             }
         });
         this._nodes = [];
+    }
 
-        collections.forEach((/** @type {Collection} */ collection) => {
+    /**
-            /** @type {HTMLElement} */ let node = /** @type {HTMLElement} */(this._template.cloneNode(true));
+     * Sets up the scene layout by adjusting margins based on the navbar height.
-            node.classList.remove("hidden");
+     */
-            /** @type {HTMLElement} */ let title_form = get_element(node, "[data-name=title]");
+    _setup_layout() {
-            /** @type {HTMLElement} */ let description_form = get_element(node, "[data-name=description]");
+        /** @type {HTMLElement} */ let navBar = get_element(document, "#logoutview");
-            /** @type {HTMLElement} */ let contentcount_form = get_element(node, "[data-name=contentcount]");
+        let heightOfNavBar = navBar.offsetHeight + "px";
-            /** @type {HTMLInputElement} */ let url_form = /** @type {HTMLInputElement} */ (get_element(node, "[data-name=url]"));
+        this._html_scene.style.marginTop = heightOfNavBar;
-            /** @type {HTMLElement} */ let color_form = get_element(node, "[data-name=color]");
+        this._html_scene.style.height = "calc(100vh - " + heightOfNavBar + ")";
-            /** @type {HTMLElement} */ let delete_btn = get_element(node, "[data-name=delete]");
+    }
-            /** @type {HTMLElement} */ let edit_btn = get_element(node, "[data-name=edit]");
-            /** @type {HTMLElement} */ let share_btn = get_element(node, "[data-name=share]");
-            /** @type {HTMLAnchorElement} */ let download_btn = /** @type {HTMLAnchorElement} */ (get_element(node, "[data-name=download]"));
-            /** @type {HTMLButtonElement} */ let copy_btn = /** @type {HTMLButtonElement} */ (get_element(node, "[data-name=copy-url]"));
-            if (collection.color) {
-                color_form.style.background = collection.color;
-            }
-            let possible_types = [CollectionType.ADDRESSBOOK, CollectionType.WEBCAL];
-            [CollectionType.CALENDAR, ""].forEach(function (e) {
-                [CollectionType.union(e, CollectionType.JOURNAL), e].forEach(function (e) {
-                    [CollectionType.union(e, CollectionType.TASKS), e].forEach(function (e) {
-                        if (e) {
-                            possible_types.push(e);
-                        }
-                    });
-                });
-            });
-            possible_types.forEach(function (e) {
-                if (e !== collection.type) {
-                    get_element(node, "[data-name=" + e + "]").classList.add("hidden");
-                }
-            });
 
-            let share_option = get_element(node, "[data-name=shareoption]");
+    /**
-            let can_share = collection.has_permission(Permission.SHARE_MAP) || collection.has_permission(Permission.SHARE_TOKEN);
+     * @param {Collection} collection
-            if (share_option) {
+     * @param {import("../api/sharing.js").Share[]} shares
-                if (can_share) {
+     */
-                    share_option.classList.remove("hidden");
+    _render_collection(collection, shares) {
-                } else {
+        /** @type {HTMLElement} */ let node = /** @type {HTMLElement} */(this._template.cloneNode(true));
-                    share_option.classList.add("hidden");
+        node.classList.remove("hidden");
-                }
+        /** @type {HTMLElement} */ let title_form = get_element(node, "[data-name=title]");
-            }
+        /** @type {HTMLElement} */ let description_form = get_element(node, "[data-name=description]");
-
+        /** @type {HTMLElement} */ let contentcount_form = get_element(node, "[data-name=contentcount]");
-            let share_info = get_element(node, "[data-name=shared-by]");
+        /** @type {HTMLInputElement} */ let url_form = /** @type {HTMLInputElement} */ (get_element(node, "[data-name=url]"));
-            let transformed_from = get_element(node, "[data-name=transformed-from]");
+        /** @type {HTMLElement} */ let color_form = get_element(node, "[data-name=color]");
-            let share = (shares || []).find(
+        /** @type {HTMLElement} */ let delete_btn = get_element(node, "[data-name=delete]");
-                s => (s.ShareType === "map") &&
+        /** @type {HTMLElement} */ let edit_btn = get_element(node, "[data-name=edit]");
-                    decodeURIComponent(s.PathOrToken || "").replace(/\/+$/, "") === decodeURIComponent(collection.href || "").replace(/\/+$/, ""));
+        /** @type {HTMLElement} */ let share_btn = get_element(node, "[data-name=share]");
-            if (share) {
+        /** @type {HTMLAnchorElement} */ let download_btn = /** @type {HTMLAnchorElement} */ (get_element(node, "[data-name=download]"));
-                if (share.Owner !== this._user) {
+        /** @type {HTMLButtonElement} */ let copy_btn = /** @type {HTMLButtonElement} */ (get_element(node, "[data-name=copy-url]"));
-                    share_info.classList.remove("hidden");
+        if (collection.color) {
-                    get_element(node, "[data-name=shared-by-owner]").textContent = share.Owner;
+            color_form.style.background = collection.color;
-                } else {
+        }
-                    transformed_from.classList.remove("hidden");
+        let possible_types = [CollectionType.ADDRESSBOOK, CollectionType.WEBCAL];
-                }
+        [CollectionType.CALENDAR, ""].forEach(function (e) {
-                let share_option = get_element(node, "[data-name=shareoption]");
+            [CollectionType.union(e, CollectionType.JOURNAL), e].forEach(function (e) {
-                if (share_option) {
+                [CollectionType.union(e, CollectionType.TASKS), e].forEach(function (e) {
-                    share_option.classList.add("hidden");
+                    if (e) {
-                    share_option.removeAttribute("data-name");
+                        possible_types.push(e);
-                }
-                delete_btn.classList.add("hidden");
-                if (!/w/i.test(share.Permissions || "")) {
-                    edit_btn.classList.add("hidden");
-                } else {
-                    edit_btn.classList.remove("hidden");
-                }
-            }
-            title_form.textContent = collection.displayname || collection.href;
-            if (title_form.textContent.length > 30) {
-                title_form.classList.add("smalltext");
-            }
-            description_form.textContent = collection.description;
-            if (description_form.textContent.length > 150) {
-                description_form.classList.add("smalltext");
-            }
-            if (collection.type != CollectionType.WEBCAL) {
-                let contentcount_form_txt = (collection.contentcount > 0 ? Number(collection.contentcount).toLocaleString() : "No") + " item" + (collection.contentcount == 1 ? "" : "s") + " in collection";
-                if (collection.contentcount > 0) {
-                    contentcount_form_txt += " (" + bytesToHumanReadable(collection.size) + ")";
-                }
-                contentcount_form.textContent = contentcount_form_txt;
-            }
-            let href = completeHref(collection.href);
-            new UrlTextHandler(url_form, copy_btn).setHref(href);
-            download_btn.href = href;
-            download_btn.onclick = (event) => {
-                event.preventDefault();
-                let auth = get_auth_header(this._user, this._password);
-                let headers = auth ? {
-                    'Authorization': auth
-                } : undefined;
-                fetch(href, { headers: headers }).then(function (response) {
-                    if (response.ok) {
-                        return response.blob();
                     }
-                    throw new Error("Download failed: " + response.statusText);
-                }).then(function (blob) {
-                    let url = window.URL.createObjectURL(blob);
-                    let a = document.createElement("a");
-                    a.href = url;
-                    a.download = (collection.displayname || collection.href).replace(/\/+$/, "") + (collection.type === CollectionType.ADDRESSBOOK ? ".vcf" : ".ics");
-                    document.body.appendChild(a);
-                    a.click();
-                    document.body.removeChild(a);
-                    window.URL.revokeObjectURL(url);
-                })["catch"]((error) => {
-                    this._errorHandler.setError(error.message);
                 });
-            };
+            });
-            if (collection.type == CollectionType.WEBCAL) {
+        });
-                if (download_btn.parentElement) {
+        possible_types.forEach(function (e) {
-                    download_btn.parentElement.classList.add("hidden");
+            if (e !== collection.type) {
+                get_element(node, "[data-name=" + e + "]").classList.add("hidden");
+            }
+        });
+
+        let share_option = get_element(node, "[data-name=shareoption]");
+        let can_share = collection.has_permission(Permission.SHARE_MAP) || collection.has_permission(Permission.SHARE_TOKEN);
+        if (share_option) {
+            if (can_share) {
+                share_option.classList.remove("hidden");
+            } else {
+                share_option.classList.add("hidden");
+            }
+        }
+
+        let share_info = get_element(node, "[data-name=shared-by]");
+        let transformed_from = get_element(node, "[data-name=transformed-from]");
+        let share = (shares || []).find(
+            s => (s.ShareType === "map") &&
+                decodeURIComponent(s.PathOrToken || "").replace(/\/+$/, "") === decodeURIComponent(collection.href || "").replace(/\/+$/, ""));
+        if (share) {
+            if (share.Owner !== this._user) {
+                share_info.classList.remove("hidden");
+                get_element(node, "[data-name=shared-by-owner]").textContent = share.Owner;
+            } else {
+                transformed_from.classList.remove("hidden");
+            }
+            let share_option = get_element(node, "[data-name=shareoption]");
+            if (share_option) {
+                share_option.classList.add("hidden");
+                share_option.removeAttribute("data-name");
+            }
+            delete_btn.classList.add("hidden");
+
+            let has_write_permission = /w/i.test(share.Permissions || "");
+            let has_write_properties = /P/i.test(share.Permissions || "") || collection.has_permission(Permission.WRITE_PROPERTIES);
+
+            if (has_write_permission || has_write_properties) {
+                edit_btn.classList.remove("hidden");
+            } else {
+                edit_btn.classList.add("hidden");
+            }
+        }
+        title_form.textContent = collection.displayname || collection.href;
+        if (title_form.textContent.length > 30) {
+            title_form.classList.add("smalltext");
+        }
+        description_form.textContent = collection.description;
+        if (description_form.textContent.length > 150) {
+            description_form.classList.add("smalltext");
+        }
+        if (collection.type != CollectionType.WEBCAL) {
+            let contentcount_form_txt = (collection.contentcount > 0 ? Number(collection.contentcount).toLocaleString() : "No") + " item" + (collection.contentcount == 1 ? "" : "s") + " in collection";
+            if (collection.contentcount > 0) {
+                contentcount_form_txt += " (" + bytesToHumanReadable(collection.size) + ")";
+            }
+            contentcount_form.textContent = contentcount_form_txt;
+        }
+        let href = completeHref(collection.href);
+        new UrlTextHandler(url_form, copy_btn).setHref(href);
+        download_btn.href = href;
+        download_btn.onclick = (event) => {
+            event.preventDefault();
+            let auth = get_auth_header(this._user, this._password);
+            let headers = auth ? {
+                'Authorization': auth
+            } : undefined;
+            fetch(href, { headers: headers }).then(function (response) {
+                if (response.ok) {
+                    return response.blob();
                 }
+                throw new Error("Download failed: " + response.statusText);
+            }).then(function (blob) {
+                let url = window.URL.createObjectURL(blob);
+                let a = document.createElement("a");
+                a.href = url;
+                a.download = (collection.displayname || collection.href).replace(/\/+$/, "") + (collection.type === CollectionType.ADDRESSBOOK ? ".vcf" : ".ics");
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                window.URL.revokeObjectURL(url);
+            })["catch"]((error) => {
+                this._errorHandler.setError(error.message);
+            });
+        };
+        if (collection.type == CollectionType.WEBCAL) {
+            if (download_btn.parentElement) {
+                download_btn.parentElement.classList.add("hidden");
             }
-            delete_btn.onclick = () => { return this._ondelete(collection); };
+        }
-            edit_btn.onclick = () => { return this._onedit(collection); };
+        delete_btn.onclick = () => { return this._ondelete(collection); };
-            share_btn.onclick = () => { return this._onshare(collection); };
+        edit_btn.onclick = () => { return this._onedit(collection); };
-            node.classList.remove("hidden");
+        share_btn.onclick = () => { return this._onshare(collection); };
-            this._nodes.push(node);
+        node.classList.remove("hidden");
-            if (this._template.parentNode) {
+        this._nodes.push(node);
-                this._template.parentNode.insertBefore(node, this._template);
+        if (this._template.parentNode) {
-            }
+            this._template.parentNode.insertBefore(node, this._template);
+        }
+    }
+
+    /**
+     * @param {Collection[]} collections
+     * @param {import("../api/sharing.js").Share[]} shares
+     * @param {boolean} clear_error
+     */
+    _show_collections(collections, shares, clear_error) {
+        this._setup_layout();
+        if (clear_error) {
+            this._errorHandler.clearError();
+        }
+
+        this._sort_collections(collections, shares);
+        this._clear_collections_display();
+
+        collections.forEach((collection) => {
+            this._render_collection(collection, shares);
         });
     }
 
@@ -299,13 +348,7 @@ export class CollectionsScene {
         this._new_btn.onclick = null;
         this._upload_btn.onclick = null;
         this._incomingshares_btn.onclick = null;
-        // remove collection
+        this._clear_collections_display();
-        this._nodes.forEach(function (node) {
-            if (node.parentNode) {
-                node.parentNode.removeChild(node);
-            }
-        });
-        this._nodes = [];
     }
 
     release() {

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

@@ -44,7 +44,7 @@ export function extractUsernameFromPrincipalCollection(principal_collection) {
 export function extract_title(collection) {
     if (collection.displayname && collection.displayname.length > 0) {
         return collection.displayname;
-    } else if (collection.type = CollectionType.PRINCIPAL) {
+    } else if (collection.type === CollectionType.PRINCIPAL) {
         return extractUsernameFromPrincipalCollection(collection)
     } else
         return decodeURIComponent(collection.href);