Add room detail, assume admins are members

src/app/components/RoomDetail.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+  import {goto} from "$app/navigation"
+  import type {RoomMeta} from "@welshman/util"
+  import {displayRelayUrl, makeRoomMeta} from "@welshman/util"
+  import type {Thunk} from "@welshman/app"
+  import {deleteRoom, waitForThunkError, repository, joinRoom, leaveRoom} from "@welshman/app"
+  import Pen from "@assets/icons/pen.svg?dataurl"
+  import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
+  import Login3 from "@assets/icons/login-3.svg?dataurl"
+  import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import EyeClosed from "@assets/icons/eye-closed.svg?dataurl"
+  import MinusCircle from "@assets/icons/minus-circle.svg?dataurl"
+  import Lock from "@assets/icons/lock.svg?dataurl"
+  import Microphone from "@assets/icons/microphone.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Confirm from "@lib/components/Confirm.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ProfileCircles from "@app/components/ProfileCircles.svelte"
+  import ProfileList from "@app/components/ProfileList.svelte"
+  import RoomEdit from "@app/components/RoomEdit.svelte"
+  import RoomName from "@app/components/RoomName.svelte"
+  import RoomImage from "@app/components/RoomImage.svelte"
+  import {
+    deriveRoom,
+    deriveRoomMembers,
+    deriveUserIsRoomAdmin,
+    deriveUserRoomMembershipStatus,
+    MembershipStatus,
+  } from "@app/core/state"
+  import {makeSpacePath} from "@app/util/routes"
+  import {pushModal} from "@app/util/modal"
+  import {pushToast} from "@app/util/toast"
+
+  type Props = {
+    url: string
+    h: string
+  }
+
+  const {url, h}: Props = $props()
+
+  const room = deriveRoom(url, h)
+  const members = deriveRoomMembers(url, h)
+  const userIsAdmin = deriveUserIsRoomAdmin(url, h)
+  const membershipStatus = deriveUserRoomMembershipStatus(url, h)
+
+  const back = () => history.back()
+
+  const startEdit = () => pushModal(RoomEdit, {url, h})
+
+  const handleLoading = async (f: (url: string, room: RoomMeta) => Thunk) => {
+    loading = true
+
+    try {
+      const message = await waitForThunkError(f(url, makeRoomMeta({h})))
+
+      if (message && !message.startsWith("duplicate:")) {
+        pushToast({theme: "error", message})
+      }
+    } finally {
+      loading = false
+    }
+  }
+
+  const join = () => handleLoading(joinRoom)
+
+  const leave = () => handleLoading(leaveRoom)
+
+  const showMembers = () =>
+    pushModal(ProfileList, {
+      title: "Members",
+      subtitle: `of ${$room?.name || h}`,
+      pubkeys: $members,
+    })
+
+  const startDelete = () =>
+    pushModal(Confirm, {
+      title: "Are you sure you want to delete this room?",
+      message:
+        "This room will no longer be accessible to space members, and all messages posted to it will be deleted.",
+      confirm: async () => {
+        const thunk = deleteRoom(url, $room)
+        const message = await waitForThunkError(thunk)
+
+        if (message) {
+          repository.removeEvent(thunk.event.id)
+          pushToast({theme: "error", message})
+        } else {
+          goto(makeSpacePath(url))
+        }
+      },
+    })
+
+  let loading = $state(false)
+</script>
+
+<div class="flex flex-col gap-3">
+  <div class="flex justify-between">
+    <div class="flex gap-3">
+      <RoomImage {url} {h} size={8} />
+      <div class="flex min-w-0 flex-col">
+        <RoomName {url} {h} class="text-2xl" />
+        <span class="text-primary">{displayRelayUrl(url)}</span>
+      </div>
+    </div>
+    <div class="grid grid-cols-2 gap-2">
+      {#if $room?.isRestricted}
+        <Button
+          class="btn btn-neutral btn-sm tooltip tooltip-left"
+          data-tip="Only members can send messages.">
+          <Icon size={4} icon={Microphone} />
+        </Button>
+      {/if}
+      {#if $room?.isPrivate}
+        <Button
+          class="btn btn-neutral btn-sm tooltip tooltip-left"
+          data-tip="Only members can view messages.">
+          <Icon size={4} icon={Lock} />
+        </Button>
+      {/if}
+      {#if $room?.isHidden}
+        <Button
+          class="btn btn-neutral btn-sm tooltip tooltip-left"
+          data-tip="This room is not visible to non-members.">
+          <Icon size={4} icon={EyeClosed} />
+        </Button>
+      {/if}
+      {#if $room?.isClosed}
+        <Button
+          class="btn btn-neutral btn-sm tooltip tooltip-left"
+          data-tip="Requests to join this room will be ignored.">
+          <Icon size={4} icon={MinusCircle} />
+        </Button>
+      {/if}
+    </div>
+  </div>
+  {#if $room?.about}
+    <p>{$room.about}</p>
+  {/if}
+  {#if $members.length > 0}
+    <div class="card2 card2-sm bg-alt flex gap-4">
+      <span>Members:</span>
+      <Button onclick={showMembers}>
+        <ProfileCircles pubkeys={$members} />
+      </Button>
+    </div>
+  {/if}
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+    <div class="flex gap-2">
+      {#if $userIsAdmin}
+        <Button class="btn btn-outline btn-error" onclick={startDelete}>
+          <Icon icon={TrashBin2} />
+          <span class="hidden md:inline">Delete Room</span>
+        </Button>
+        <Button class="btn btn-primary" onclick={startEdit}>
+          <Icon icon={Pen} />
+          Edit Room
+        </Button>
+      {:else if $membershipStatus === MembershipStatus.Initial}
+        <Button class="btn btn-neutral" disabled={loading} onclick={join}>
+          {#if loading}
+            <span class="loading loading-spinner loading-sm"></span>
+          {:else}
+            <Icon icon={Login3} />
+          {/if}
+          Join member list
+        </Button>
+      {:else if $membershipStatus === MembershipStatus.Pending}
+        <Button class="btn btn-neutral">
+          <Icon icon={ClockCircle} />
+          Membership pending
+        </Button>
+      {:else}
+        <Button class="btn btn-neutral" disabled={loading} onclick={leave}>
+          {#if loading}
+            <span class="loading loading-spinner loading-sm"></span>
+          {:else}
+            <Icon icon={Login3} />
+          {/if}
+          Leave member list
+        </Button>
+      {/if}
+    </div>
+  </ModalFooter>
+</div>

src/app/components/RoomEdit.svelte

@@ -2,20 +2,15 @@
   import {goto} from "$app/navigation"
   import type {RoomMeta} from "@welshman/util"
   import {displayRelayUrl} from "@welshman/util"
-  import {deleteRoom, waitForThunkError, repository} from "@welshman/app"
-  import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
   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 Icon from "@lib/components/Icon.svelte"
-  import Confirm from "@lib/components/Confirm.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import RoomForm from "@app/components/RoomForm.svelte"
   import {deriveRoom} from "@app/core/state"
   import {makeSpacePath} from "@app/util/routes"
-  import {pushModal} from "@app/util/modal"
-  import {pushToast} from "@app/util/toast"
 
   type Props = {
     url: string
@@ -29,24 +24,6 @@
   const back = () => history.back()
 
   const onsubmit = (room: RoomMeta) => goto(makeSpacePath(url, h))
-
-  const startDelete = () =>
-    pushModal(Confirm, {
-      title: "Are you sure you want to delete this room?",
-      message:
-        "This room will no longer be accessible to space members, and all messages posted to it will be deleted.",
-      confirm: async () => {
-        const thunk = deleteRoom(url, $room)
-        const message = await waitForThunkError(thunk)
-
-        if (message) {
-          repository.removeEvent(thunk.event.id)
-          pushToast({theme: "error", message})
-        } else {
-          goto(makeSpacePath(url))
-        }
-      },
-    })
 </script>
 
 <RoomForm {url} {onsubmit} initialValues={$room}>
@@ -68,15 +45,9 @@
         <Icon icon={AltArrowLeft} />
         Go back
       </Button>
-      <div class="flex gap-2">
-        <Button class="btn btn-outline btn-error" onclick={startDelete}>
-          <Icon icon={TrashBin2} />
-          <span class="hidden md:inline">Delete Room</span>
-        </Button>
-        <Button type="submit" class="btn btn-primary" disabled={loading}>
-          <Spinner {loading}>Save Changes</Spinner>
-        </Button>
-      </div>
+      <Button type="submit" class="btn btn-primary" disabled={loading}>
+        <Spinner {loading}>Save Changes</Spinner>
+      </Button>
     </ModalFooter>
   {/snippet}
 </RoomForm>

src/app/components/RoomImage.svelte

@@ -5,17 +5,18 @@
   import {deriveRoom} from "@app/core/state"
 
   interface Props {
-    h: any
-    url: any
+    h: string
+    url: string
+    size?: number
   }
 
-  const {url, h}: Props = $props()
+  const {url, h, size = 5}: Props = $props()
 
   const room = deriveRoom(url, h)
 </script>
 
 {#if $room.picture}
-  <ImageIcon src={$room.picture} alt="Room icon" />
+  <ImageIcon src={$room.picture} {size} alt="Room icon" />
 {:else}
-  <Icon icon={Hashtag} />
+  <Icon icon={Hashtag} {size} />
 {/if}

src/app/components/RoomName.svelte

@@ -1,9 +1,17 @@
 <script lang="ts">
-  import {roomsById, makeRoomId} from "@app/core/state"
+  import {deriveRoom} from "@app/core/state"
 
-  const {url, h} = $props()
+  type Props = {
+    url: string
+    h: string
+    class?: string
+  }
+
+  const {url, h, ...props}: Props = $props()
+
+  const room = deriveRoom(url, h)
 </script>
 
-<span class="ellipsize">
-  {$roomsById.get(makeRoomId(url, h))?.name || h}
+<span class="ellipsize {props.class}">
+  {$room?.name || h}
 </span>

src/app/components/RoomNameWithImage.svelte

@@ -3,14 +3,15 @@
   import RoomImage from "@app/components/RoomImage.svelte"
 
   interface Props {
-    h: any
-    url: any
+    h: string
+    url: string
+    class?: string
   }
 
-  const {url, h}: Props = $props()
+  const {url, h, ...props}: Props = $props()
 </script>
 
-<div class="flex flex-grow items-center justify-between gap-4">
+<div class="flex flex-grow items-center justify-between gap-4 {props.class}">
   <div class="flex items-center gap-3">
     <RoomImage {url} {h} />
     <div class="min-w-0 overflow-hidden text-ellipsis">

src/app/core/state.ts

@@ -806,18 +806,29 @@ export enum MembershipStatus {
   Granted,
 }
 
+export const deriveUserIsSpaceAdmin = (url: string) => {
+  const store = writable(false)
+
+  manageRelay(url, {method: ManagementMethod.SupportedMethods, params: []}).then(res =>
+    store.set(Boolean(res.result?.length)),
+  )
+
+  return store
+}
+
 export const deriveUserSpaceMembershipStatus = (url: string) =>
   derived(
     [
       pubkey,
       deriveSpaceMembers(url),
       deriveEventsForUrl(url, [{kinds: [RELAY_JOIN, RELAY_LEAVE]}]),
+      deriveUserIsSpaceAdmin(url),
     ],
-    ([$pubkey, $members, $events]) => {
-      const isMember = $members.includes($pubkey)
+    ([$pubkey, $members, $events, $isAdmin]) => {
+      const isMember = $members.includes($pubkey) || $isAdmin
 
       for (const event of $events) {
-        if (!getPubkeyTagValues(event.tags).includes($pubkey!)) {
+        if (event.pubkey !== $pubkey) {
           continue
         }
 
@@ -834,18 +845,25 @@ export const deriveUserSpaceMembershipStatus = (url: string) =>
     },
   )
 
+export const deriveUserIsRoomAdmin = (url: string, h: string) =>
+  derived(
+    [pubkey, deriveRoomAdmins(url, h), deriveUserIsSpaceAdmin(url)],
+    ([$pubkey, $admins, $isSpaceAdmin]) => $isSpaceAdmin || $admins.includes($pubkey!),
+  )
+
 export const deriveUserRoomMembershipStatus = (url: string, h: string) =>
   derived(
     [
       pubkey,
       deriveRoomMembers(url, h),
       deriveEventsForUrl(url, [{kinds: [ROOM_JOIN, ROOM_LEAVE], "#h": [h]}]),
+      deriveUserIsRoomAdmin(url, h),
     ],
-    ([$pubkey, $members, $events]) => {
-      const isMember = $members.includes($pubkey)
+    ([$pubkey, $members, $events, $isAdmin]) => {
+      const isMember = $members.includes($pubkey) || $isAdmin
 
       for (const event of $events) {
-        if (!getPubkeyTagValues(event.tags).includes($pubkey!)) {
+        if (event.pubkey !== $pubkey) {
           continue
         }
 
@@ -872,19 +890,6 @@ export const deriveUserCanCreateRoom = (url: string) =>
     },
   )
 
-export const deriveUserIsRoomAdmin = (url: string, h: string) =>
-  derived([pubkey, deriveRoomAdmins(url, h)], ([$pubkey, $admins]) => $admins.includes($pubkey!))
-
-export const deriveUserIsSpaceAdmin = (url: string) => {
-  const store = writable(false)
-
-  manageRelay(url, {method: ManagementMethod.SupportedMethods, params: []}).then(res =>
-    store.set(Boolean(res.result?.length)),
-  )
-
-  return store
-}
-
 // Other utils
 
 export const encodeRelay = (url: string) =>

src/lib/components/ImageIcon.svelte

@@ -4,13 +4,14 @@
   type Props = {
     src: string
     alt: string
+    size?: number
   }
 
-  const {src, alt}: Props = $props()
+  const {src, alt, size = 5}: Props = $props()
 </script>
 
 {#if src.includes("image/svg") || src.endsWith(".svg")}
-  <Icon icon={src} />
+  <Icon icon={src} {size} />
 {:else}
-  <img {src} {alt} class="h-5 w-5 rounded-lg object-cover" />
+  <img {src} {alt} class="h-{size} w-{size} rounded-lg object-cover" />
 {/if}

src/routes/spaces/[relay]/[h]/+page.svelte

@@ -16,11 +16,10 @@
   } from "@welshman/util"
   import {pubkey, publishThunk, waitForThunkError, joinRoom, leaveRoom} from "@welshman/app"
   import {slide, fade, fly} from "@lib/transition"
-  import Pen from "@assets/icons/pen.svg?dataurl"
+  import InfoCircle from "@assets/icons/info-circle.svg?dataurl"
   import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
   import Login2 from "@assets/icons/login-3.svg?dataurl"
   import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
-  import Logout2 from "@assets/icons/logout-3.svg?dataurl"
   import Bookmark from "@assets/icons/bookmark.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -30,10 +29,9 @@
   import Divider from "@lib/components/Divider.svelte"
   import ThunkToast from "@app/components/ThunkToast.svelte"
   import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
-  import RoomEdit from "@app/components/RoomEdit.svelte"
   import RoomName from "@app/components/RoomName.svelte"
-  import RoomAccess from "@app/components/RoomAccess.svelte"
   import RoomImage from "@app/components/RoomImage.svelte"
+  import RoomDetail from "@app/components/RoomDetail.svelte"
   import RoomItem from "@app/components/RoomItem.svelte"
   import RoomItemAddMember from "@src/app/components/RoomItemAddMember.svelte"
   import RoomItemRemoveMember from "@src/app/components/RoomItemRemoveMember.svelte"
@@ -49,7 +47,6 @@
     MembershipStatus,
     PROTECTED,
     MESSAGE_KINDS,
-    deriveUserIsRoomAdmin,
   } from "@app/core/state"
   import {setChecked, checked} from "@app/util/notifications"
   import {
@@ -71,10 +68,11 @@
   const room = deriveRoom(url, h)
   const shouldProtect = canEnforceNip70(url)
   const userRooms = deriveUserRooms(url)
-  const userIsAdmin = deriveUserIsRoomAdmin(url, h)
   const isFavorite = $derived($userRooms.includes(h))
   const membershipStatus = deriveUserRoomMembershipStatus(url, h)
 
+  const showRoomDetail = () => pushModal(RoomDetail, {url, h})
+
   const addFavorite = () => addRoomMembership(url, h)
 
   const removeFavorite = () => removeRoomMembership(url, h)
@@ -304,8 +302,6 @@
     }
   }
 
-  const startEdit = () => pushModal(RoomEdit, {url, h})
-
   onMount(() => {
     const observer = new ResizeObserver(() => {
       if (dynamicPadding && chatCompose) {
@@ -342,47 +338,18 @@
   {/snippet}
   {#snippet action()}
     <div class="row-2">
-      <RoomAccess {url} {h} />
-      {#if $userIsAdmin}
-        <Button
-          class="btn btn-neutral btn-sm tooltip tooltip-left"
-          data-tip="Edit room information"
-          onclick={startEdit}>
-          <Icon size={4} icon={Pen} />
-        </Button>
-      {:else if $membershipStatus === MembershipStatus.Initial}
-        <Button
-          class="btn btn-neutral btn-sm tooltip tooltip-left"
-          data-tip="Request to be added to the member list"
-          disabled={joining}
-          onclick={join}>
-          {#if joining}
-            <span class="loading loading-spinner loading-sm"></span>
-          {:else}
-            <Icon size={4} icon={Login2} />
-          {/if}
-        </Button>
-      {:else if $membershipStatus === MembershipStatus.Pending}
-        <Button
-          class="btn btn-neutral btn-sm tooltip tooltip-left"
-          data-tip="Membership is pending">
-          <Icon size={4} icon={ClockCircle} />
-        </Button>
-      {:else}
-        <Button
-          class="btn btn-neutral btn-sm tooltip tooltip-left"
-          data-tip="Request to be removed from member list"
-          disabled={leaving}
-          onclick={leave}>
-          <Icon size={4} icon={Logout2} />
-        </Button>
-      {/if}
       <Button
         class="btn btn-neutral btn-sm tooltip tooltip-left"
         data-tip={isFavorite ? "Remove Favorite" : "Add Favorite"}
         onclick={isFavorite ? removeFavorite : addFavorite}>
         <Icon size={4} icon={Bookmark} class={cx({"text-primary": isFavorite})} />
       </Button>
+      <Button
+        class="btn btn-neutral btn-sm tooltip tooltip-left"
+        data-tip="Room information"
+        onclick={showRoomDetail}>
+        <Icon size={4} icon={InfoCircle} />
+      </Button>
       <MenuSpaceButton {url} />
     </div>
   {/snippet}