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">