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

src/app/components/SpaceMembers.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import {sortBy} from "@welshman/lib"
   import {ManagementMethod} from "@welshman/util"
   import {manageRelay, displayProfileByPubkey} from "@welshman/app"
   import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
@@ -17,16 +18,18 @@
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import RoleBadge from "@app/components/RoleBadge.svelte"
   import RelayName from "@app/components/RelayName.svelte"
   import Profile from "@app/components/Profile.svelte"
   import SpaceMembersAdd from "@app/components/SpaceMembersAdd.svelte"
   import SpaceMembersBanned from "@app/components/SpaceMembersBanned.svelte"
+  import type {RoomMember} from "@app/core/roles"
   import {
     deriveSpaceMembers,
     deriveSpaceBannedPubkeyItems,
-    deriveUserIsSpaceAdmin,
     deriveSupportedMethods,
   } from "@app/core/state"
+  import {deriveSpaceMemberRoleInfo, deriveUserHasSpacePermission} from "@app/core/roles"
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
 
@@ -38,10 +41,83 @@
 
   const members = deriveSpaceMembers(url)
   const bans = deriveSpaceBannedPubkeyItems(url)
-  const userIsAdmin = deriveUserIsSpaceAdmin(url)
+  const spaceMemberRoles = deriveSpaceMemberRoleInfo(url)
+  const canAddMember = deriveUserHasSpacePermission(url, 9000)
+  const canBanByPermission = deriveUserHasSpacePermission(url, 9009)
+  const canUnallowByPermission = deriveUserHasSpacePermission(url, 9001)
   const supportedMethods = deriveSupportedMethods(url)
-  const canBan = $derived($supportedMethods.includes(ManagementMethod.BanPubkey))
-  const canUnallow = $derived($supportedMethods.includes(ManagementMethod.UnallowPubkey))
+  const canBan = $derived(
+    $canBanByPermission && $supportedMethods.includes(ManagementMethod.BanPubkey),
+  )
+  const canUnallow = $derived(
+    $canUnallowByPermission && $supportedMethods.includes(ManagementMethod.UnallowPubkey),
+  )
+
+  type SpaceMemberWithRoles = RoomMember & {
+    roleDefinitions: Array<{name: string; label?: string; color?: number; order?: number}>
+    primaryRole?: {name: string; label?: string; color?: number}
+    sortKey: number
+  }
+
+  const memberGroups = $derived.by(() => {
+    const byRole = new Map<
+      string,
+      {
+        key: string
+        label: string
+        color?: number
+        order?: number
+        members: SpaceMemberWithRoles[]
+      }
+    >()
+    const defaultGroup = {
+      key: "members",
+      label: "Members",
+      members: [] as SpaceMemberWithRoles[],
+    }
+
+    for (const pubkey of $members) {
+      const roleInfo = $spaceMemberRoles.get(pubkey)
+      const member = {
+        pubkey,
+        roles: roleInfo?.roles.map(role => role.name) || [],
+        roleDefinitions: roleInfo?.roles || [],
+        primaryRole: roleInfo?.primaryRole,
+        sortKey: roleInfo?.sortKey ?? -Infinity,
+      }
+
+      if (!member.primaryRole) {
+        defaultGroup.members.push(member)
+        continue
+      }
+
+      const roleName = member.primaryRole.name
+
+      if (!byRole.has(roleName)) {
+        byRole.set(roleName, {
+          key: roleName,
+          label: member.primaryRole.label || roleName,
+          color: member.primaryRole.color,
+          order: member.sortKey,
+          members: [],
+        })
+      }
+
+      byRole.get(roleName)!.members.push(member)
+    }
+
+    const groups = sortBy(group => -(group.order ?? -Infinity), Array.from(byRole.values()))
+
+    for (const group of groups) {
+      group.members = sortBy(member => -member.sortKey, group.members)
+    }
+
+    if (defaultGroup.members.length > 0) {
+      groups.push(defaultGroup)
+    }
+
+    return groups
+  })
 
   const back = () => history.back()
 
@@ -104,7 +180,7 @@
       <ModalTitle>Members</ModalTitle>
       <ModalSubtitle>of <RelayName {url} class="text-primary" /></ModalSubtitle>
     </ModalHeader>
-    {#if $userIsAdmin}
+    {#if canBan || canUnallow}
       {#if $bans.length > 0}
         <Button class="btn btn-neutral" onclick={showBannedPubkeyItems}>
           Banned users ({$bans.length})
@@ -121,47 +197,67 @@
           <span class="text-base-content/70">No members yet</span>
         </div>
       {:else}
-        {#each $members as pubkey (pubkey)}
-          <div class="card2 card2-sm bg-alt relative">
-            <div class="flex items-center justify-between gap-2">
-              <div class="min-w-0 flex-1">
-                <Profile {pubkey} {url} />
-              </div>
-              {#if canBan || canUnallow}
-                <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">
-                        {#if canUnallow}
-                          <li>
-                            <Button onclick={() => unallowMember(pubkey)}>
-                              <Icon icon={UserMinus} />
-                              Remove User
-                            </Button>
-                          </li>
-                        {/if}
-                        {#if canBan}
-                          <li>
-                            <Button class="text-error" onclick={() => banMember(pubkey)}>
-                              <Icon icon={MinusCircle} />
-                              Ban User
-                            </Button>
-                          </li>
-                        {/if}
-                      </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 card2-sm 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 member.roleDefinitions.length > 0}
+                    <div class="mt-1 flex flex-wrap gap-1">
+                      {#each member.roleDefinitions as role (role.name)}
+                        <RoleBadge role={role.name} label={role.label} color={role.color} />
+                      {/each}
+                    </div>
                   {/if}
                 </div>
-              {/if}
+                {#if canBan || canUnallow}
+                  <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">
+                          {#if canUnallow}
+                            <li>
+                              <Button onclick={() => unallowMember(member.pubkey)}>
+                                <Icon icon={UserMinus} />
+                                Remove User
+                              </Button>
+                            </li>
+                          {/if}
+                          {#if canBan}
+                            <li>
+                              <Button class="text-error" onclick={() => banMember(member.pubkey)}>
+                                <Icon icon={MinusCircle} />
+                                Ban User
+                              </Button>
+                            </li>
+                          {/if}
+                        </ul>
+                      </Popover>
+                    {/if}
+                  </div>
+                {/if}
+              </div>
             </div>
-          </div>
+          {/each}
         {/each}
       {/if}
     </div>
@@ -171,7 +267,7 @@
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    {#if $userIsAdmin}
+    {#if $canAddMember}
       <Button class="btn btn-primary" onclick={addMember}>
         <Icon icon={AddCircle} />
         Add members