feat(rbac): implement NIP-29 room roles and permission gating (#47)

src/app/components/RoomMembers.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import {first, sortBy} from "@welshman/lib"
   import {waitForThunkError, removeRoomMember} from "@welshman/app"
   import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
   import MinusCircle from "@assets/icons/minus-circle.svg?dataurl"
@@ -16,9 +17,12 @@
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import Profile from "@app/components/Profile.svelte"
+  import RoleBadge from "@app/components/RoleBadge.svelte"
   import RoomName from "@app/components/RoomName.svelte"
   import RoomMembersAdd from "@app/components/RoomMembersAdd.svelte"
-  import {deriveRoom, deriveRoomMembers, deriveUserIsRoomAdmin} from "@app/core/state"
+  import type {RoomMember} from "@app/core/roles"
+  import {deriveRoom, deriveRoomMembers} from "@app/core/state"
+  import {deriveRoomRoles, hasPermission} from "@app/core/roles"
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
 
@@ -31,7 +35,9 @@
 
   const room = deriveRoom(url, h)
   const members = deriveRoomMembers(url, h)
-  const userIsAdmin = deriveUserIsRoomAdmin(url, h)
+  const roomRoles = deriveRoomRoles(url, h)
+  const canAddMembers = hasPermission(url, h, 9000)
+  const canRemoveMembers = hasPermission(url, h, 9001)
 
   const back = () => history.back()
 
@@ -43,6 +49,62 @@
     menuPubkey = undefined
   }
 
+  const getResolvedRoles = (member: RoomMember) =>
+    removeUndefined(member.roles.map(roleName => $roomRoles.roles.get(roleName)))
+
+  const getPrimaryRole = (member: RoomMember) =>
+    first(sortBy(role => -(role.order ?? -Infinity), getResolvedRoles(member)))
+
+  const memberGroups = $derived.by(() => {
+    const byRole = new Map<
+      string,
+      {
+        key: string
+        label: string
+        color?: number
+        order?: number
+        members: RoomMember[]
+      }
+    >()
+    const defaultGroup = {
+      key: "members",
+      label: "Members",
+      members: [] as RoomMember[],
+    }
+
+    for (const member of $members) {
+      const primaryRole = getPrimaryRole(member)
+
+      if (!primaryRole) {
+        defaultGroup.members.push(member)
+        continue
+      }
+
+      if (!byRole.has(primaryRole.name)) {
+        byRole.set(primaryRole.name, {
+          key: primaryRole.name,
+          label: primaryRole.label || primaryRole.name,
+          color: primaryRole.color,
+          order: primaryRole.order,
+          members: [],
+        })
+      }
+
+      byRole.get(primaryRole.name)!.members.push(member)
+    }
+
+    const groups = sortBy(group => -(group.order ?? -Infinity), Array.from(byRole.values()))
+
+    if (defaultGroup.members.length > 0) {
+      groups.push(defaultGroup)
+    }
+
+    return groups
+  })
+
+  const removeUndefined = <T,>(items: Array<T | undefined>): T[] =>
+    items.filter((item): item is T => item !== undefined)
+
   const addMember = () => pushModal(RoomMembersAdd, {url, h})
 
   const removeMember = (pubkey: string) =>
@@ -82,33 +144,57 @@
           <span class="text-base-content/70">No members yet</span>
         </div>
       {:else}
-        {#each $members as pubkey (pubkey)}
-          <div class="card2 bg-alt relative">
-            <div class="flex items-center justify-between gap-2">
-              <div class="min-w-0 flex-1">
-                <Profile {pubkey} {url} />
-              </div>
-              <div class="relative">
-                <Button class="btn btn-circle btn-ghost btn-sm" onclick={() => toggleMenu(pubkey)}>
-                  <Icon icon={MenuDots} />
-                </Button>
-                {#if menuPubkey === pubkey}
-                  <Popover hideOnClick onClose={closeMenu}>
-                    <ul
-                      transition:fly
-                      class="menu absolute right-0 z-popover mt-2 w-48 gap-1 rounded-box bg-base-100 p-2 shadow-md">
-                      <li>
-                        <Button class="text-error" onclick={() => removeMember(pubkey)}>
-                          <Icon icon={MinusCircle} />
-                          Remove Member
-                        </Button>
-                      </li>
-                    </ul>
-                  </Popover>
+        {#each memberGroups as group (group.key)}
+          <div class="pt-2 pb-1">
+            {#if group.color !== undefined}
+              <RoleBadge
+                role={group.key}
+                label={group.label}
+                color={group.color}
+                class="badge-md" />
+            {:else}
+              <span class="text-sm font-semibold opacity-75">{group.label}</span>
+            {/if}
+          </div>
+          {#each group.members as member (member.pubkey)}
+            <div class="card2 bg-alt relative">
+              <div class="flex items-center justify-between gap-2">
+                <div class="min-w-0 flex-1">
+                  <Profile pubkey={member.pubkey} {url} />
+                  {#if getResolvedRoles(member).length > 0}
+                    <div class="mt-1 flex flex-wrap gap-1">
+                      {#each getResolvedRoles(member) as role (role.name)}
+                        <RoleBadge role={role.name} label={role.label} color={role.color} />
+                      {/each}
+                    </div>
+                  {/if}
+                </div>
+                {#if $canRemoveMembers}
+                  <div class="relative">
+                    <Button
+                      class="btn btn-circle btn-ghost btn-sm"
+                      onclick={() => toggleMenu(member.pubkey)}>
+                      <Icon icon={MenuDots} />
+                    </Button>
+                    {#if menuPubkey === member.pubkey}
+                      <Popover hideOnClick onClose={closeMenu}>
+                        <ul
+                          transition:fly
+                          class="menu absolute right-0 z-popover mt-2 w-48 gap-1 rounded-box bg-base-100 p-2 shadow-md">
+                          <li>
+                            <Button class="text-error" onclick={() => removeMember(member.pubkey)}>
+                              <Icon icon={MinusCircle} />
+                              Remove Member
+                            </Button>
+                          </li>
+                        </ul>
+                      </Popover>
+                    {/if}
+                  </div>
                 {/if}
               </div>
             </div>
-          </div>
+          {/each}
         {/each}
       {/if}
     </div>
@@ -118,7 +204,7 @@
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    {#if $userIsAdmin}
+    {#if $canAddMembers}
       <Button class="btn btn-primary" onclick={addMember}>
         <Icon icon={AddCircle} />
         Add members