Add room membership management

CHANGELOG.md

@@ -4,7 +4,9 @@
 
 * Switch back to indexeddb to fix memory and performance
 * Add pay invoice functionality
-* Add room membership management and bans
+* Add space membership management and bans
+* Add event info to profile dialog
+* Add better room membership management
 
 # 1.5.3
 

src/app/components/ProfileDetail.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import {goto} from "$app/navigation"
+  import {removeUndefined} from "@welshman/lib"
   import {ManagementMethod} from "@welshman/util"
-  import {shouldUnwrap, manageRelay} from "@welshman/app"
+  import {shouldUnwrap, manageRelay, deriveProfile} from "@welshman/app"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import Code2 from "@assets/icons/code-2.svg?dataurl"
   import Letter from "@assets/icons/letter-opened.svg?dataurl"
   import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
   import MinusCircle from "@assets/icons/minus-circle.svg?dataurl"
@@ -16,6 +18,7 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Profile from "@app/components/Profile.svelte"
   import ProfileInfo from "@app/components/ProfileInfo.svelte"
+  import EventInfo from "@app/components/EventInfo.svelte"
   import ProfileBadges from "@app/components/ProfileBadges.svelte"
   import ChatEnable from "@app/components/ChatEnable.svelte"
   import {pubkeyLink, deriveUserIsSpaceAdmin} from "@app/core/state"
@@ -30,12 +33,16 @@
 
   const {pubkey, url}: Props = $props()
 
+  const profile = deriveProfile(pubkey, removeUndefined([url]))
+
   const userIsAdmin = deriveUserIsSpaceAdmin(url)
 
   const back = () => history.back()
 
   const chatPath = makeChatPath([pubkey])
 
+  const showInfo = () => pushModal(EventInfo, {url, event: $profile!.event})
+
   const openChat = () => ($shouldUnwrap ? goto(chatPath) : pushModal(ChatEnable, {next: chatPath}))
 
   const toggleMenu = (pubkey: string) => {
@@ -71,7 +78,7 @@
 <div class="flex flex-col gap-4">
   <div class="flex justify-between">
     <Profile showPubkey avatarSize={14} {pubkey} {url} />
-    {#if $userIsAdmin}
+    {#if $profile || $userIsAdmin}
       <div class="relative">
         <Button class="btn btn-circle btn-ghost btn-sm" onclick={() => toggleMenu(pubkey)}>
           <Icon icon={MenuDots} />
@@ -81,12 +88,22 @@
             <ul
               transition:fly
               class="bg-alt menu absolute right-0 z-popover w-48 gap-1 rounded-box p-2 shadow-md">
-              <li>
-                <Button class="text-error" onclick={banMember}>
-                  <Icon icon={MinusCircle} />
-                  Ban User
-                </Button>
-              </li>
+              {#if $profile}
+                <li>
+                  <Button onclick={showInfo}>
+                    <Icon icon={Code2} />
+                    User Details
+                  </Button>
+                </li>
+              {/if}
+              {#if $userIsAdmin}
+                <li>
+                  <Button class="text-error" onclick={banMember}>
+                    <Icon icon={MinusCircle} />
+                    Ban User
+                  </Button>
+                </li>
+              {/if}
             </ul>
           </Popover>
         {/if}

src/app/components/RoomDetail.svelte

@@ -134,12 +134,13 @@
     <p>{$room.about}</p>
   {/if}
   {#if $members.length > 0}
-    <Button onclick={showMembers}>
-      <div class="card2 card2-sm bg-alt flex items-center gap-4">
+    <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} />
       </div>
-    </Button>
+      <Button class="btn btn-neutral btn-sm" onclick={showMembers}>View All</Button>
+    </div>
   {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>

src/app/components/RoomForm.svelte

@@ -117,7 +117,7 @@
           {#if imagePreview}
             <div class="flex items-center gap-2">
               <span class="text-sm opacity-75">Selected:</span>
-              <ImageIcon src={imagePreview} alt="" />
+              <ImageIcon src={imagePreview} alt="" class="rounded-lg" />
             </div>
           {:else}
             <span class="text-sm opacity-75">No icon selected</span>
@@ -144,7 +144,7 @@
     {#snippet input()}
       <label class="input input-bordered flex w-full items-center gap-2">
         {#if imagePreview}
-          <ImageIcon src={imagePreview} alt="" />
+          <ImageIcon src={imagePreview} alt="" class="rounded-lg" />
         {:else}
           <Icon icon={Hashtag} />
         {/if}

src/app/components/RoomMembers.svelte

@@ -1,9 +1,21 @@
 <script lang="ts">
+  import {waitForThunkError, removeRoomMember} from "@welshman/app"
+  import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
+  import MinusCircle from "@assets/icons/minus-circle.svg?dataurl"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import {fly} from "@lib/transition"
   import Button from "@lib/components/Button.svelte"
-  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import RoomName from "@app/components/RoomName.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import Popover from "@lib/components/Popover.svelte"
+  import Confirm from "@lib/components/Confirm.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Profile from "@app/components/Profile.svelte"
-  import {deriveRoomMembers} from "@app/core/state"
+  import RoomName from "@app/components/RoomName.svelte"
+  import RoomMembersAdd from "@app/components/RoomMembersAdd.svelte"
+  import {deriveRoom, deriveRoomMembers, deriveUserIsRoomAdmin} from "@app/core/state"
+  import {pushModal} from "@app/util/modal"
+  import {pushToast} from "@app/util/toast"
 
   interface Props {
     url: string
@@ -12,22 +24,86 @@
 
   const {url, h}: Props = $props()
 
+  const room = deriveRoom(url, h)
   const members = deriveRoomMembers(url, h)
+  const userIsAdmin = deriveUserIsRoomAdmin(url, h)
+
+  const back = () => history.back()
+
+  const toggleMenu = (pubkey: string) => {
+    menuPubkey = menuPubkey === pubkey ? null : pubkey
+  }
+
+  const closeMenu = () => {
+    menuPubkey = null
+  }
+
+  const addMember = () => pushModal(RoomMembersAdd, {url, h})
+
+  const removeMember = (pubkey: string) =>
+    pushModal(Confirm, {
+      title: "Remove Member",
+      message: "Are you sure you want to remove this user from the room?",
+      confirm: async () => {
+        const error = await waitForThunkError(removeRoomMember(url, $room, pubkey))
+
+        if (error) {
+          pushToast({theme: "error", message: error})
+        } else {
+          pushToast({message: "Member has successfully been removed!"})
+          back()
+        }
+      },
+    })
+
+  let menuPubkey = $state<string | null>(null)
 </script>
 
 <div class="column gap-4">
-  <ModalHeader>
-    {#snippet title()}
-      <div>Members</div>
-    {/snippet}
-    {#snippet info()}
-      <div>of <RoomName {url} {h} /></div>
-    {/snippet}
-  </ModalHeader>
+  <div class="flex min-w-0 flex-col gap-1">
+    <h1 class="ellipsize whitespace-nowrap text-2xl font-bold">Members</h1>
+    <p class="ellipsize text-sm opacity-75">of <RoomName {url} {h} /></p>
+  </div>
+  {#if $userIsAdmin}
+    <div class="flex gap-2">
+      <Button class="btn btn-primary" onclick={addMember}>
+        <Icon icon={AddCircle} />
+        Add members
+      </Button>
+    </div>
+  {/if}
   {#each $members as pubkey (pubkey)}
-    <div class="card2 bg-alt">
-      <Profile {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>
+          {/if}
+        </div>
+      </div>
     </div>
   {/each}
-  <Button class="btn btn-primary" onclick={() => history.back()}>Got it</Button>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+  </ModalFooter>
 </div>

src/app/components/RoomMembersAdd.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import {addRoomMember, waitForThunkError} from "@welshman/app"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Field from "@lib/components/Field.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import RoomName from "@app/components/RoomName.svelte"
+  import ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
+  import {pushToast} from "@app/util/toast"
+  import {deriveRoom} from "@app/core/state"
+
+  interface Props {
+    url: string
+    h: string
+  }
+
+  const {url, h}: Props = $props()
+
+  const room = deriveRoom(url, h)
+
+  const back = () => history.back()
+
+  const addMember = async () => {
+    loading = true
+
+    try {
+      const errors = await Promise.all(
+        pubkeys.map(pubkey => waitForThunkError(addRoomMember(url, $room, pubkey))),
+      )
+
+      for (const error of errors) {
+        if (error) {
+          return pushToast({theme: "error", message: errors[0]})
+        }
+      }
+
+      pushToast({message: "Members have successfully been added!"})
+      back()
+    } finally {
+      loading = false
+    }
+  }
+
+  let loading = $state(false)
+  let pubkeys: string[] = $state([])
+</script>
+
+<div class="column gap-4">
+  <ModalHeader>
+    {#snippet title()}
+      <div>Add Members</div>
+    {/snippet}
+    {#snippet info()}
+      <div>to <RoomName {url} {h} /></div>
+    {/snippet}
+  </ModalHeader>
+  <Field>
+    {#snippet label()}
+      <p>Search for People</p>
+    {/snippet}
+    {#snippet input()}
+      <ProfileMultiSelect bind:value={pubkeys} />
+    {/snippet}
+  </Field>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+    <Button class="btn btn-primary" onclick={addMember} disabled={loading}>
+      <Spinner {loading}>Save changes</Spinner>
+    </Button>
+  </ModalFooter>
+</div>

src/app/components/SpaceMembersAdd.svelte

@@ -38,7 +38,7 @@
         }
       }
 
-      pushToast({message: "User has successfully been added!"})
+      pushToast({message: "Members have successfully been added!"})
       back()
     } finally {
       loading = false
@@ -60,7 +60,7 @@
   </ModalHeader>
   <Field>
     {#snippet label()}
-      <p>Search for Members</p>
+      <p>Search for People</p>
     {/snippet}
     {#snippet input()}
       <ProfileMultiSelect bind:value={pubkeys} />

src/app/core/state.ts

@@ -727,7 +727,7 @@ export const deriveSpaceMembers = (url: string) =>
       const membersEvent = $events.find(spec({kind: RELAY_MEMBERS}))
 
       if (membersEvent) {
-        return getTagValues("member", membersEvent.tags)
+        return uniq(getTagValues("member", membersEvent.tags))
       }
 
       const members = new Set<string>()
@@ -780,7 +780,7 @@ export const deriveRoomMembers = (url: string, h: string) =>
       const membersEvent = $events.find(spec({kind: ROOM_MEMBERS}))
 
       if (membersEvent) {
-        return getPubkeyTagValues(membersEvent.tags)
+        return uniq(getPubkeyTagValues(membersEvent.tags))
       }
 
       const members = new Set<string>()