Display permissions as pill

integ_tests/test_sharing.py

@@ -48,7 +48,7 @@ def test_create_and_delete_share_by_key(page: Page, radicale_server: str) -> Non
         page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden)")
     ).to_have_count(1)
     expect(
-        page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden) img[alt='RO']")
+        page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden) span[data-name='ro']")
     ).to_be_visible()
     page.once("dialog", lambda dialog: dialog.accept())
     page.click('tr:not(.hidden) button[data-name="delete"]', strict=True)
@@ -62,7 +62,7 @@ def test_create_and_delete_share_by_key(page: Page, radicale_server: str) -> Non
         page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden)")
     ).to_have_count(1)
     expect(
-        page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden) img[alt='RW']")
+        page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden) span[data-name='rw']")
     ).to_be_visible()
     page.once("dialog", lambda dialog: dialog.accept())
     page.click('tr:not(.hidden) button[data-name="delete"]', strict=True)
@@ -89,7 +89,7 @@ def test_create_and_delete_share_by_map(page: Page, radicale_server: str) -> Non
         page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden)")
     ).to_have_count(1)
     expect(
-        page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden) img[alt='RO']")
+        page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden) span[data-name='ro']")
     ).to_be_visible()
     page.once("dialog", lambda dialog: dialog.accept())
     page.click('tr:not(.hidden) button[data-name="delete"]', strict=True)
@@ -105,7 +105,7 @@ def test_create_and_delete_share_by_map(page: Page, radicale_server: str) -> Non
         page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden)")
     ).to_have_count(1)
     expect(
-        page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden) img[alt='RW']")
+        page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden) span[data-name='rw']")
     ).to_be_visible()
     page.once("dialog", lambda dialog: dialog.accept())
     page.click('tr:not(.hidden) button[data-name="delete"]', strict=True)
@@ -196,7 +196,7 @@ def test_edit_share_by_token(page: Page, radicale_server: str) -> None:
     page.click('button[data-name="sharebytoken"]')
     page.click('#newshare button[data-name="submit"]')
     expect(
-        page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden) img[alt='RO']")
+        page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden) span[data-name='ro']")
     ).to_be_visible()
 
     # Edit to RW
@@ -207,7 +207,7 @@ def test_edit_share_by_token(page: Page, radicale_server: str) -> None:
 
     # Verify RW
     expect(
-        page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden) img[alt='RW']")
+        page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden) span[data-name='rw']")
     ).to_be_visible()
 
 
@@ -223,7 +223,7 @@ def test_edit_share_by_map(page: Page, radicale_server: str) -> None:
     page.locator('input[data-name="sharehref"]').fill("mapped")
     page.click('#newshare button[data-name="submit"]')
     expect(
-        page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden) img[alt='RO']")
+        page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden) span[data-name='ro']")
     ).to_be_visible()
 
     # Edit map share
@@ -239,7 +239,7 @@ def test_edit_share_by_map(page: Page, radicale_server: str) -> None:
 
     # Verify changes
     expect(
-        page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden) img[alt='RW']")
+        page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden) span[data-name='rw']")
     ).to_be_visible()
     # 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

radicale/web/internal_data/css/main.css

@@ -501,4 +501,20 @@ button.inline {
     #logoutview span {
         padding: 0 5px;
     }
-}
+}
+
+.pill {
+  display: inline-block;
+  padding: 0.25em 0.6em;
+  font-size: 75%;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.375rem;
+  background-color: #6c757d;
+  color: #fff;
+  margin: 0 2px;
+  width: 1.4em;
+}

radicale/web/internal_data/index.html

@@ -159,8 +159,7 @@
                 <button type="button" class="blue inline" data-name="edit"><img src="css/icons/edit.svg"
                     class="small_icon" alt="Edit"></button>
               </td>
-              <td><img src="css/icons/edit.svg" class="med_icon" alt="RW" data-name="rw" /><img src="css/icons/eye.svg"
+              <td><span class="pill" data-name="rw">rw</span><span class="pill" data-name="ro">ro</span></td>
-                  class="med_icon" alt="RO" data-name="ro" /></td>
               <td><input type="text" data-name="pathortoken" value="" readonly=""
                   onfocus="this.setSelectionRange(0, 99999);" class="inline"></td>
               <td>
@@ -185,8 +184,7 @@
                 <button type="button" class="blue inline" data-name="edit"><img src="css/icons/edit.svg"
                     class="small_icon" alt="Edit"></button>
               </td>
-              <td><img src="css/icons/edit.svg" class="med_icon" alt="RW" data-name="rw" /><img src="css/icons/eye.svg"
+              <td><span class="pill" data-name="rw">rw</span><span class="pill" data-name="ro">ro</span></td>
-                  class="med_icon" alt="RO" data-name="ro" /></td>
               <td><input type="text" data-name="pathortoken" value="" readonly=""
                   onfocus="this.setSelectionRange(0, 99999);" class="inline"></td>
               <td>
@@ -227,7 +225,7 @@
           <tr data-name="incomingsharerowtemplate" class="hidden">
             <td data-name="pathortoken"></td>
             <td data-name="owner"></td>
-            <td data-name="permissions"></td>
+            <td data-name="permissions"><span class="pill" data-name="rw">rw</span><span class="pill" data-name="ro">ro</span></td>
             <td><input type="checkbox" data-name="enabled"></td>
             <td><input type="checkbox" data-name="hidden"></td>
           </tr>

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

@@ -35,10 +35,9 @@ export class CreateEditShareScene {
      * @param {string} password
      * @param {import("../models/collection.js").Collection} collection
      * @param {string} shareType
-     * @param {function():void} onclose
      * @param {Share} [share] If provided, the scene will be in edit mode.
      */
-    constructor(user, password, collection, shareType, onclose, share) {
+    constructor(user, password, collection, shareType, share) {
         let edit = !!share;
         let pathMapped = collection.href;
         /** @type {HTMLElement} */ let html_scene = document.getElementById("newshare");
@@ -83,7 +82,6 @@ export class CreateEditShareScene {
                 if (scene_index !== null) {
                     pop_scene(scene_index - 1);
                 }
-                if (onclose) onclose();
             } catch (err) {
                 console.error(err);
             }
@@ -119,7 +117,6 @@ export class CreateEditShareScene {
                         errorHandler.setError(error);
                     } else {
                         pop_scene(scene_index - 1);
-                        if (onclose) onclose();
                     }
                 };
 

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

@@ -21,6 +21,7 @@
 
 import { Share, reload_sharing_list, update_incoming_share } from "../api/sharing.js";
 import { ErrorHandler } from "../utils/error.js";
+import { displayPermissions } from "../utils/permissions.js";
 import { LoadingScene } from "./LoadingScene.js";
 import { Scene, pop_scene, push_scene, scene_stack } from "./scene_manager.js";
 
@@ -99,7 +100,7 @@ export class IncomingSharingScene {
 
                 let pathortoken_td = node.querySelector("[data-name=pathortoken]");
                 let owner_td = node.querySelector("[data-name=owner]");
-                let permissions_td = node.querySelector("[data-name=permissions]");
+                let permissions_td = /** @type {HTMLElement} */ node.querySelector("[data-name=permissions]");
                 let enabled_cb = /** @type {HTMLInputElement} */ (node.querySelector("[data-name=enabled]"));
                 let hidden_cb = /** @type {HTMLInputElement} */ (node.querySelector("[data-name=hidden]"));
 
@@ -110,7 +111,7 @@ export class IncomingSharingScene {
 
                 pathortoken_td.textContent = displayPath;
                 owner_td.textContent = share.Owner;
-                permissions_td.textContent = share.Permissions;
+                displayPermissions(share.Permissions, permissions_td);
 
                 enabled_cb.checked = share.EnabledByUser;
                 hidden_cb.checked = share.HiddenByUser;

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

@@ -27,6 +27,7 @@ import {
 } from "../api/sharing.js";
 import { Collection } from "../models/collection.js";
 import { ErrorHandler } from "../utils/error.js";
+import { displayPermissions } from "../utils/permissions.js";
 import { CreateEditShareScene } from "./CreateEditShareScene.js";
 import { Scene, pop_scene, push_scene, scene_stack } from "./scene_manager.js";
 
@@ -73,16 +74,12 @@ export class ShareCollectionScene {
     }
 
     function onsharebytoken() {
-      let create_edit_share_scene = new CreateEditShareScene(user, password, collection, "token", function () {
+      let create_edit_share_scene = new CreateEditShareScene(user, password, collection, "token");
-        update_share_list(user, password, collection, errorHandler);
-      });
       push_scene(create_edit_share_scene, false);
     }
 
     function onsharebymap() {
-      let create_edit_share_scene = new CreateEditShareScene(user, password, collection, "map", function () {
+      let create_edit_share_scene = new CreateEditShareScene(user, password, collection, "map");
-        update_share_list(user, password, collection, errorHandler);
-      });
       push_scene(create_edit_share_scene, false);
     }
 
@@ -181,23 +178,11 @@ function add_share_row_node(user, password, collection, share, template, delete_
   }
 
   let permissions = (share["Permissions"] || "").toLowerCase();
-  if (permissions === "rw") {
+  displayPermissions(permissions, node);
-    node
-      .querySelector("[data-name=ro]")
-      .parentNode.removeChild(node.querySelector("[data-name=ro]"));
-  } else if (permissions === "r") {
-    node
-      .querySelector("[data-name=rw]")
-      .parentNode.removeChild(node.querySelector("[data-name=rw]"));
-  } else {
-    console.warn("Unknown permissions", permissions);
-  }
 
   /** @type {HTMLElement} */ let edit_btn = node.querySelector("[data-name=edit]");
   edit_btn.onclick = function () {
-    let create_edit_share_scene = new CreateEditShareScene(user, password, collection, share.ShareType, function () {
+    let create_edit_share_scene = new CreateEditShareScene(user, password, collection, share.ShareType, share);
-      update_share_list(user, password, collection, errorHandler);
-    }, share);
     push_scene(create_edit_share_scene, false);
   };
 

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

@@ -0,0 +1,38 @@
+/**
+ * This file is part of Radicale Server - Calendar Server
+ * 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 {string} permissions
+ * @param {HTMLElement} node
+ */
+export function displayPermissions(permissions, node) {
+  permissions = (permissions || "").toLowerCase();
+  if (permissions === "rw") {
+    const roElement = node.querySelector("[data-name=ro]");
+    if (roElement) {
+      roElement.parentNode.removeChild(roElement);
+    }
+  } else if (permissions === "r") {
+    const rwElement = node.querySelector("[data-name=rw]");
+    if (rwElement) {
+      rwElement.parentNode.removeChild(rwElement);
+    }
+  } else {
+    console.warn("Unknown permissions", permissions);
+  }
+}