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

2026-04-17 05:57:10 +05:30
parent bbbc6f7363
commit 559db6b930
11 changed files with 951 additions and 140 deletions
@@ -3,7 +3,7 @@
  import type {Snippet} from "svelte"
  import {goto} from "$app/navigation"
  import type {TrustedEvent} from "@welshman/util"
-  import {COMMENT, ManagementMethod} from "@welshman/util"
+  import {COMMENT, ManagementMethod, getTagValue} from "@welshman/util"
  import {pubkey, repository, relaysByUrl, manageRelay} from "@welshman/app"
  import ShareCircle from "@assets/icons/share-circle.svg?dataurl"
  import Code2 from "@assets/icons/code-2.svg?dataurl"
@@ -18,6 +18,7 @@
  import EventShare from "@app/components/EventShare.svelte"
  import EventDeleteConfirm from "@app/components/EventDeleteConfirm.svelte"
  import {hasNip29, deriveUserIsSpaceAdmin} from "@app/core/state"
+  import {hasPermission} from "@app/core/roles"
  import {pushModal} from "@app/util/modal"
  import {pushToast} from "@app/util/toast"
  import {makeSpaceChatPath} from "@app/util/routes"
@@ -33,7 +34,8 @@
  const {url, noun, event, onClick, customActions}: Props = $props()

  const isRoot = event.kind !== COMMENT
-  const userIsAdmin = deriveUserIsSpaceAdmin(url)
+  const h = getTagValue("h", event.tags)
+  const canDelete = h ? hasPermission(url, h, 9005) : deriveUserIsSpaceAdmin(url)

  const report = () => pushModal(Report, {url, event})

@@ -107,7 +109,7 @@
        Report Content
      </Button>
    </li>
-    {#if $userIsAdmin}
+    {#if $canDelete}
      <li>
        <Button class="text-error" onclick={showAdminDelete}>
          <Icon size={4} icon={TrashBin2} />
@@ -1,5 +1,6 @@
 <script lang="ts">
  import {onMount} from "svelte"
+  import {readable} from "svelte/store"
  import {removeUndefined} from "@welshman/lib"
  import {ManagementMethod} from "@welshman/util"
  import {
@@ -28,7 +29,9 @@
  import ProfileInfo from "@app/components/ProfileInfo.svelte"
  import EventInfo from "@app/components/EventInfo.svelte"
  import ProfileBadges from "@app/components/ProfileBadges.svelte"
-  import {pubkeyLink, deriveUserIsSpaceAdmin, deriveSpaceBannedPubkeyItems} from "@app/core/state"
+  import RoleBadge from "@app/components/RoleBadge.svelte"
+  import {pubkeyLink, deriveSpaceBannedPubkeyItems} from "@app/core/state"
+  import {deriveUserHasSpacePermission, deriveSpaceMemberRoleInfo} from "@app/core/roles"
  import {addSpaceMembers} from "@app/core/commands"
  import {pushModal} from "@app/util/modal"
  import {pushToast} from "@app/util/toast"
@@ -43,10 +46,16 @@

  const profile = deriveProfile(pubkey, removeUndefined([url]))

-  const userIsAdmin = deriveUserIsSpaceAdmin(url)
+  const canBan = url ? deriveUserHasSpacePermission(url, 9009) : readable(false)
+
+  const canRestore = url ? deriveUserHasSpacePermission(url, 9000) : readable(false)

  const bannedPubkeys = url ? deriveSpaceBannedPubkeyItems(url) : undefined

+  const spaceMemberRoles = url ? deriveSpaceMemberRoleInfo(url) : readable(new Map())
+
+  const assignedRoles = $derived($spaceMemberRoles.get(pubkey)?.roles || [])
+
  const isBanned = $derived($bannedPubkeys?.some(item => item.pubkey === pubkey) ?? false)

  const back = () => history.back()
@@ -105,7 +114,7 @@
    <div class="flex flex-col gap-4">
      <div class="flex justify-between">
        <Profile showPubkey avatarSize={14} {pubkey} {url} />
-        {#if $profile || $userIsAdmin}
+        {#if $profile || $canBan || $canRestore}
          <div class="relative">
            <Button class="btn btn-circle btn-ghost btn-sm" onclick={() => toggleMenu(pubkey)}>
              <Icon icon={MenuDots} />
@@ -123,22 +132,22 @@
                      </Button>
                    </li>
                  {/if}
-                  {#if $userIsAdmin}
-                    {#if isBanned}
+                  {#if isBanned}
+                    {#if $canRestore}
                      <li>
                        <Button onclick={restoreMember}>
                          <Icon icon={Restart} />
                          Restore User
                        </Button>
                      </li>
-                    {:else}
-                      <li>
-                        <Button class="text-error" onclick={banMember}>
-                          <Icon icon={MinusCircle} />
-                          Ban User
-                        </Button>
-                      </li>
                    {/if}
+                  {:else if $canBan}
+                    <li>
+                      <Button class="text-error" onclick={banMember}>
+                        <Icon icon={MinusCircle} />
+                        Ban User
+                      </Button>
+                    </li>
                  {/if}
                </ul>
              </Popover>
@@ -147,6 +156,16 @@
        {/if}
      </div>
      <ProfileInfo {pubkey} {url} />
+      {#if assignedRoles.length > 0}
+        <div class="card2 card2-sm bg-alt col-3">
+          <h3 class="text-lg font-semibold">Roles</h3>
+          <div class="flex flex-wrap gap-2">
+            {#each assignedRoles as role (role.name)}
+              <RoleBadge role={role.name} label={role.label} color={role.color} class="badge-md" />
+            {/each}
+          </div>
+        </div>
+      {/if}
      <ProfileBadges {pubkey} {url} />
    </div>
  </ModalBody>
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import cx from "classnames"
+  import {roleColorToCSS} from "@app/core/roles"
+
+  type Props = {
+    role: string
+    label?: string
+    color?: number
+    class?: string
+  }
+
+  const {role, label, color, ...props}: Props = $props()
+
+  const style = $derived(
+    color === undefined
+      ? ""
+      : `color: ${roleColorToCSS(color)}; border-color: ${roleColorToCSS(color)};`,
+  )
+
+  const className = $derived(cx("badge badge-outline badge-sm", props.class))
+</script>
+
+<span class={className} {style}>
+  {label || role}
+</span>
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import {sortBy} from "@welshman/lib"
  import {goto} from "$app/navigation"
  import type {RoomMeta} from "@welshman/util"
  import {displayRelayUrl, makeRoomMeta} from "@welshman/util"
@@ -27,10 +28,12 @@
  import ModalBody from "@lib/components/ModalBody.svelte"
  import ModalFooter from "@lib/components/ModalFooter.svelte"
  import ProfileCircles from "@app/components/ProfileCircles.svelte"
+  import RoleBadge from "@app/components/RoleBadge.svelte"
  import RoomMembers from "@app/components/RoomMembers.svelte"
  import RoomEdit from "@app/components/RoomEdit.svelte"
  import RoomName from "@app/components/RoomName.svelte"
  import RoomImage from "@app/components/RoomImage.svelte"
+  import {deriveRoomRoles, hasPermission} from "@app/core/roles"
  import {
    deriveRoom,
    deriveRoomMembers,
@@ -58,13 +61,29 @@

  const room = deriveRoom(url, h)
  const members = deriveRoomMembers(url, h)
+  const roomRoles = deriveRoomRoles(url, h)
  const userIsAdmin = deriveUserIsRoomAdmin(url, h)
+  const canEditMetadata = hasPermission(url, h, 9002)
  const membershipStatus = deriveUserRoomMembershipStatus(url, h)
  const userRooms = deriveUserRooms(url)

  const isFavorite = $derived($userRooms.includes(h))
  const shouldNotify = deriveShouldNotify(url, h)

+  const roleRows = $derived.by(() =>
+    sortBy(
+      role => -(role.order ?? -Infinity),
+      Array.from($roomRoles.roles.values()).map(role => ({
+        name: role.name,
+        label: role.label,
+        color: role.color,
+        order: role.order,
+        permissionsLabel: role.permissions.join(", "),
+        accessLabel: Array.from(role.access).join(", "),
+      })),
+    ),
+  )
+
  const back = () => history.back()

  const toggleMenu = () => {
@@ -152,7 +171,7 @@
            <ul
              transition:fly
              class="bg-alt menu absolute right-0 z-popover w-48 gap-1 rounded-box p-2 shadow-md">
-              {#if $userIsAdmin}
+              {#if $canEditMetadata}
                <li>
                  <Button onclick={startEdit}>
                    <Icon icon={Pen} />
@@ -247,7 +266,7 @@
      <div class="card2 card2-sm bg-alt flex items-center justify-between gap-4">
        <div class="flex items-center gap-4">
          <span>Members:</span>
-          <ProfileCircles pubkeys={$members} />
+          <ProfileCircles pubkeys={$members.map(member => member.pubkey)} />
        </div>
        <Button class="btn btn-neutral btn-sm" onclick={showMembers}>View All</Button>
      </div>
@@ -256,6 +275,33 @@
        <span class="text-error">Member list not available from this relay</span>
      </div>
    {/if}
+    {#if $userIsAdmin && roleRows.length > 0}
+      <div class="card2 card2-sm bg-alt col-4">
+        <strong class="text-lg">Role Definitions</strong>
+        <div class="flex flex-col gap-2">
+          {#each roleRows as role (role.name)}
+            <div class="rounded-box bg-base-300 p-3 flex flex-col gap-2">
+              <div class="flex items-center gap-2">
+                <RoleBadge
+                  role={role.name}
+                  label={role.label}
+                  color={role.color}
+                  class="badge-md" />
+                {#if role.order !== undefined}
+                  <span class="text-xs opacity-70">Order {role.order}</span>
+                {/if}
+              </div>
+              {#if role.permissionsLabel}
+                <p class="text-xs opacity-75">Permissions: {role.permissionsLabel}</p>
+              {/if}
+              {#if role.accessLabel}
+                <p class="text-xs opacity-75">Access: {role.accessLabel}</p>
+              {/if}
+            </div>
+          {/each}
+        </div>
+      </div>
+    {/if}
    <div class="card2 card2-sm bg-alt col-4">
      <strong class="text-lg">Room Settings</strong>
      <div class="flex items-center justify-between">
@@ -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
@@ -18,7 +18,7 @@
  import SpaceRelayStatus from "@app/components/SpaceRelayStatus.svelte"
  import RelayDescription from "@app/components/RelayDescription.svelte"
  import ProfileLatest from "@app/components/ProfileLatest.svelte"
-  import {deriveUserIsSpaceAdmin} from "@app/core/state"
+  import {deriveUserHasSpacePermission} from "@app/core/roles"
  import {pushModal} from "@app/util/modal"

  type Props = {
@@ -28,7 +28,7 @@
  const {url}: Props = $props()
  const relay = deriveRelay(url)
  const owner = $derived($relay?.pubkey)
-  const userIsAdmin = deriveUserIsSpaceAdmin(url)
+  const canEdit = deriveUserHasSpacePermission(url, 9002)

  const back = () => history.back()

@@ -54,7 +54,7 @@
          <p class="ellipsize text-sm opacity-75">{displayRelayUrl(url)}</p>
        </div>
      </div>
-      {#if $userIsAdmin}
+      {#if $canEdit}
        <Button class="btn btn-primary" onclick={startEdit}>
          <Icon icon={Pen} />
          Edit
@@ -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