fix: checkbox event propagation in permissions tables

Author: TorstenDittmann

src/lib/components/permissions/team.svelte

@@ -88,11 +88,13 @@
                 {@const exists = $groups.has(role)}
                 <Table.Row.Button {root} on:click={() => onSelection(role)} disabled={exists}>
                     <Table.Cell column="checkbox" {root}>
-                        <Selector.Checkbox
-                            size="s"
-                            id={team.$id}
-                            disabled={exists}
-                            checked={exists || selected.has(role)} />
+                        <div style:pointer-events="none">
+                            <Selector.Checkbox
+                                size="s"
+                                id={team.$id}
+                                disabled={exists}
+                                checked={exists || selected.has(role)} />
+                        </div>
                     </Table.Cell>
                     <Table.Cell column="team" {root}>
                         <Layout.Stack direction="row" alignItems="center" gap="s">

src/lib/components/permissions/user.svelte

@@ -53,12 +53,20 @@
         isLoading = false;
     }
 
-    function onSelection(role: string) {
+    function onSelection(role: string, value: boolean | null = null) {
         const checked = selected.has(role);
-        if (checked) {
-            selected.delete(role);
+        if (value === null) {
+            if (checked) {
+                selected.delete(role);
+            } else {
+                selected.add(role);
+            }
         } else {
-            selected.add(role);
+            if (value) {
+                selected.add(role);
+            } else {
+                selected.delete(role);
+            }
         }
         selected = selected;
 
@@ -90,11 +98,13 @@
                 {@const exists = $groups.has(role)}
                 <Table.Row.Button {root} on:click={() => onSelection(role)} disabled={exists}>
                     <Table.Cell column="checkbox" {root}>
-                        <Selector.Checkbox
-                            size="s"
-                            id={user.$id}
-                            disabled={exists}
-                            checked={exists || selected.has(role)} />
+                        <div style:pointer-events="none">
+                            <Selector.Checkbox
+                                size="s"
+                                id={user.$id}
+                                disabled={exists}
+                                checked={exists || selected.has(role)} />
+                        </div>
                     </Table.Cell>
                     <Table.Cell column="user" {root}>
                         <Layout.Stack direction="row" alignItems="center" gap="s">