Clean up modals

src/app.css

@@ -274,7 +274,7 @@
 .input-editor,
 .chat-editor,
 .note-editor {
-  @apply -m-1 min-h-12 p-1;
+  @apply -m-1 min-h-12 p-1 text-sm;
 }
 
 .tiptap {

src/app/components/ChatMembers.svelte

@@ -19,11 +19,13 @@
     <ModalHeader>
       <ModalTitle>People in this conversation</ModalTitle>
     </ModalHeader>
-    {#each pubkeys as pubkey (pubkey)}
-      <div class="card2 bg-alt">
-        <Profile {pubkey} />
-      </div>
-    {/each}
+    <div class="flex flex-col gap-2">
+      {#each pubkeys as pubkey (pubkey)}
+        <div class="card2 bg-alt">
+          <Profile {pubkey} />
+        </div>
+      {/each}
+    </div>
   </ModalBody>
   <ModalFooter>
     <Button class="btn btn-primary" onclick={() => history.back()}>Got it</Button>

src/app/components/ChatMenu.svelte

@@ -27,24 +27,26 @@
 
 <Modal>
   <ModalBody>
-    <Button class="btn btn-primary" onclick={startChat}>
-      <Icon size={5} icon={ChatSquare} />
-      Start chat
-    </Button>
-    <Button class="btn btn-neutral" onclick={markAsRead}>
-      <Icon size={5} icon={Check} />
-      Mark all read
-    </Button>
-    {#if $notificationSettings.messages}
-      <Button class="btn btn-neutral" onclick={disableAlerts}>
-        <Icon size={4} icon={BellOff} />
-        Disable alerts
+    <div class="flex flex-col gap-2">
+      <Button class="btn btn-primary" onclick={startChat}>
+        <Icon size={5} icon={ChatSquare} />
+        Start chat
       </Button>
-    {:else}
-      <Button class="btn btn-neutral" onclick={enableAlerts}>
-        <Icon size={4} icon={Bell} />
-        Enable alerts
+      <Button class="btn btn-neutral" onclick={markAsRead}>
+        <Icon size={5} icon={Check} />
+        Mark all read
       </Button>
-    {/if}
+      {#if $notificationSettings.messages}
+        <Button class="btn btn-neutral" onclick={disableAlerts}>
+          <Icon size={4} icon={BellOff} />
+          Disable alerts
+        </Button>
+      {:else}
+        <Button class="btn btn-neutral" onclick={enableAlerts}>
+          <Icon size={4} icon={Bell} />
+          Enable alerts
+        </Button>
+      {/if}
+    </div>
   </ModalBody>
 </Modal>

src/app/components/ChatMessageMenuMobile.svelte

@@ -49,21 +49,23 @@
 
 <Modal>
   <ModalBody>
-    <Button class="btn btn-neutral" onclick={showInfo}>
-      <Icon size={4} icon={Code2} />
-      Message Info
-    </Button>
-    <Button class="btn btn-neutral w-full" onclick={copyText}>
-      <Icon size={4} icon={Copy} />
-      Copy Text
-    </Button>
-    <Button class="btn btn-neutral w-full" onclick={sendReply}>
-      <Icon size={4} icon={Reply} />
-      Send Reply
-    </Button>
-    <Button class="btn btn-primary w-full" onclick={showEmojiPicker}>
-      <Icon size={4} icon={SmileCircle} />
-      Send Reaction
-    </Button>
+    <div class="flex flex-col gap-2">
+      <Button class="btn btn-neutral" onclick={showInfo}>
+        <Icon size={4} icon={Code2} />
+        Message Info
+      </Button>
+      <Button class="btn btn-neutral w-full" onclick={copyText}>
+        <Icon size={4} icon={Copy} />
+        Copy Text
+      </Button>
+      <Button class="btn btn-neutral w-full" onclick={sendReply}>
+        <Icon size={4} icon={Reply} />
+        Send Reply
+      </Button>
+      <Button class="btn btn-primary w-full" onclick={showEmojiPicker}>
+        <Icon size={4} icon={SmileCircle} />
+        Send Reaction
+      </Button>
+    </div>
   </ModalBody>
 </Modal>

src/app/components/MenuSettings.svelte

@@ -25,99 +25,101 @@
 
 <Modal>
   <ModalBody>
-    <Link replaceState href="/settings/profile">
-      <CardButton class="btn-neutral">
-        {#snippet icon()}
-          <div><Icon icon={UserRounded} size={7} /></div>
-        {/snippet}
-        {#snippet title()}
-          <div>Profile</div>
-        {/snippet}
-        {#snippet info()}
-          <div>Customize your user profile</div>
-        {/snippet}
-      </CardButton>
-    </Link>
-    <Link replaceState href="/settings/alerts">
-      <CardButton class="btn-neutral">
-        {#snippet icon()}
-          <div><Icon icon={Bell} size={7} /></div>
-        {/snippet}
-        {#snippet title()}
-          <div>Alerts</div>
-        {/snippet}
-        {#snippet info()}
-          <div>Set up email digests and push notifications</div>
-        {/snippet}
-      </CardButton>
-    </Link>
-    <Link replaceState href="/settings/wallet">
-      <CardButton class="btn-neutral">
-        {#snippet icon()}
-          <div><Icon icon={Wallet} size={7} /></div>
-        {/snippet}
-        {#snippet title()}
-          <div>Wallet</div>
-        {/snippet}
-        {#snippet info()}
-          <div>Connect a bitcoin wallet for sending social tips</div>
-        {/snippet}
-      </CardButton>
-    </Link>
-    <Link replaceState href="/settings/relays">
-      <CardButton class="btn-neutral">
-        {#snippet icon()}
-          <div><Icon icon={Server} size={7} /></div>
-        {/snippet}
-        {#snippet title()}
-          <div>Relays</div>
-        {/snippet}
-        {#snippet info()}
-          <div>Control how {PLATFORM_NAME} talks to the network</div>
-        {/snippet}
-      </CardButton>
-    </Link>
-    <Link replaceState href="/settings/content">
-      <CardButton class="btn-neutral">
-        {#snippet icon()}
-          <div><Icon icon={Settings} size={7} /></div>
-        {/snippet}
-        {#snippet title()}
-          <div>Settings</div>
-        {/snippet}
-        {#snippet info()}
-          <div>Get into the details about how {PLATFORM_NAME} works</div>
-        {/snippet}
-      </CardButton>
-    </Link>
-    <Button onclick={toggleTheme}>
-      <CardButton class="btn-neutral">
-        {#snippet icon()}
-          <div><Icon icon={Moon} size={7} /></div>
-        {/snippet}
-        {#snippet title()}
-          <div>Theme</div>
-        {/snippet}
-        {#snippet info()}
-          <div>Switch between light and dark mode</div>
-        {/snippet}
-      </CardButton>
-    </Button>
-    <Link replaceState href="/settings/about">
-      <CardButton class="btn-neutral">
-        {#snippet icon()}
-          <div><Icon icon={Code2} size={7} /></div>
-        {/snippet}
-        {#snippet title()}
-          <div>About</div>
-        {/snippet}
-        {#snippet info()}
-          <div>Learn about {PLATFORM_NAME} and support the developer</div>
-        {/snippet}
-      </CardButton>
-    </Link>
-    <Button onclick={logout} class="btn btn-neutral">
-      <Icon icon={Exit} /> Log Out
-    </Button>
+    <div class="flex flex-col gap-2">
+      <Link replaceState href="/settings/profile">
+        <CardButton class="btn-neutral">
+          {#snippet icon()}
+            <div><Icon icon={UserRounded} size={7} /></div>
+          {/snippet}
+          {#snippet title()}
+            <div>Profile</div>
+          {/snippet}
+          {#snippet info()}
+            <div>Customize your user profile</div>
+          {/snippet}
+        </CardButton>
+      </Link>
+      <Link replaceState href="/settings/alerts">
+        <CardButton class="btn-neutral">
+          {#snippet icon()}
+            <div><Icon icon={Bell} size={7} /></div>
+          {/snippet}
+          {#snippet title()}
+            <div>Alerts</div>
+          {/snippet}
+          {#snippet info()}
+            <div>Set up email digests and push notifications</div>
+          {/snippet}
+        </CardButton>
+      </Link>
+      <Link replaceState href="/settings/wallet">
+        <CardButton class="btn-neutral">
+          {#snippet icon()}
+            <div><Icon icon={Wallet} size={7} /></div>
+          {/snippet}
+          {#snippet title()}
+            <div>Wallet</div>
+          {/snippet}
+          {#snippet info()}
+            <div>Connect a bitcoin wallet for sending social tips</div>
+          {/snippet}
+        </CardButton>
+      </Link>
+      <Link replaceState href="/settings/relays">
+        <CardButton class="btn-neutral">
+          {#snippet icon()}
+            <div><Icon icon={Server} size={7} /></div>
+          {/snippet}
+          {#snippet title()}
+            <div>Relays</div>
+          {/snippet}
+          {#snippet info()}
+            <div>Control how {PLATFORM_NAME} talks to the network</div>
+          {/snippet}
+        </CardButton>
+      </Link>
+      <Link replaceState href="/settings/content">
+        <CardButton class="btn-neutral">
+          {#snippet icon()}
+            <div><Icon icon={Settings} size={7} /></div>
+          {/snippet}
+          {#snippet title()}
+            <div>Settings</div>
+          {/snippet}
+          {#snippet info()}
+            <div>Get into the details about how {PLATFORM_NAME} works</div>
+          {/snippet}
+        </CardButton>
+      </Link>
+      <Button onclick={toggleTheme}>
+        <CardButton class="btn-neutral">
+          {#snippet icon()}
+            <div><Icon icon={Moon} size={7} /></div>
+          {/snippet}
+          {#snippet title()}
+            <div>Theme</div>
+          {/snippet}
+          {#snippet info()}
+            <div>Switch between light and dark mode</div>
+          {/snippet}
+        </CardButton>
+      </Button>
+      <Link replaceState href="/settings/about">
+        <CardButton class="btn-neutral">
+          {#snippet icon()}
+            <div><Icon icon={Code2} size={7} /></div>
+          {/snippet}
+          {#snippet title()}
+            <div>About</div>
+          {/snippet}
+          {#snippet info()}
+            <div>Learn about {PLATFORM_NAME} and support the developer</div>
+          {/snippet}
+        </CardButton>
+      </Link>
+      <Button onclick={logout} class="btn btn-neutral">
+        <Icon icon={Exit} /> Log Out
+      </Button>
+    </div>
   </ModalBody>
 </Modal>

src/app/components/RelayName.svelte

@@ -3,11 +3,14 @@
 
   type Props = {
     url: string
+    class?: string
   }
 
-  const {url}: Props = $props()
+  const {url, ...props}: Props = $props()
 
   const display = $derived(deriveRelayDisplay(url))
 </script>
 
-{$display}
+<span class={props.class}>
+  {$display}
+</span>

src/app/components/RoomDetail.svelte

@@ -7,6 +7,7 @@
   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 MenuDots from "@assets/icons/menu-dots.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"
@@ -15,8 +16,10 @@
   import Microphone from "@assets/icons/microphone.svg?dataurl"
   import Bookmark from "@assets/icons/bookmark.svg?dataurl"
   import VolumeLoud from "@assets/icons/volume-loud.svg?dataurl"
+  import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Popover from "@lib/components/Popover.svelte"
   import Confirm from "@lib/components/Confirm.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -62,6 +65,14 @@
 
   const back = () => history.back()
 
+  const toggleMenu = () => {
+    showMenu = !showMenu
+  }
+
+  const closeMenu = () => {
+    showMenu = false
+  }
+
   const startEdit = () => pushModal(RoomEdit, {url, h})
 
   const handleLoading = async (f: (url: string, room: RoomMeta) => Thunk) => {
@@ -115,6 +126,7 @@
     })
 
   let loading = $state(false)
+  let showMenu = $state(false)
 </script>
 
 <Modal>
@@ -129,33 +141,99 @@
           <span class="text-primary">{displayRelayUrl(url)}</span>
         </div>
       </div>
-      <div class="grid grid-cols-2 gap-2">
+      <div class="relative">
+        <Button class="btn btn-circle btn-ghost btn-sm" onclick={toggleMenu}>
+          <Icon icon={MenuDots} />
+        </Button>
+        {#if showMenu}
+          <Popover hideOnClick onClose={closeMenu}>
+            <ul
+              transition:fly
+              class="bg-alt menu absolute right-0 z-popover w-48 gap-1 rounded-box p-2 shadow-md">
+              {#if $userIsAdmin}
+                <li>
+                  <Button class="text-error" onclick={startDelete}>
+                    <Icon icon={TrashBin2} />
+                    Delete Room
+                  </Button>
+                </li>
+                <li>
+                  <Button onclick={startEdit}>
+                    <Icon icon={Pen} />
+                    Edit Room
+                  </Button>
+                </li>
+              {:else if $membershipStatus === MembershipStatus.Initial}
+                <li>
+                  <Button disabled={loading} onclick={join}>
+                    {#if loading}
+                      <span class="loading loading-spinner loading-sm"></span>
+                    {:else}
+                      <Icon icon={Login3} />
+                    {/if}
+                    Join member list
+                  </Button>
+                </li>
+              {:else if $membershipStatus === MembershipStatus.Pending}
+                <li>
+                  <Button>
+                    <Icon icon={ClockCircle} />
+                    Membership pending
+                  </Button>
+                </li>
+              {:else}
+                <li>
+                  <Button disabled={loading} onclick={leave}>
+                    {#if loading}
+                      <span class="loading loading-spinner loading-sm"></span>
+                    {:else}
+                      <Icon icon={Login3} />
+                    {/if}
+                    Leave member list
+                  </Button>
+                </li>
+              {/if}
+            </ul>
+          </Popover>
+        {/if}
+      </div>
+    </div>
+    <div class="flex flex-col gap-2 card2 card2-sm bg-alt">
+      <strong class="text-lg">Room Permissions</strong>
+      <div class="flex gap-2 flex-wrap">
         {#if $room?.isRestricted}
           <Button
-            class="btn btn-neutral btn-sm tooltip tooltip-left"
+            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
             data-tip="Only members can send messages.">
-            <Icon size={4} icon={Microphone} />
+            <Icon size={4} icon={Microphone} /> Restricted
           </Button>
         {/if}
         {#if $room?.isPrivate}
           <Button
-            class="btn btn-neutral btn-sm tooltip tooltip-left"
+            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
             data-tip="Only members can view messages.">
-            <Icon size={4} icon={Lock} />
+            <Icon size={4} icon={Lock} /> Private
           </Button>
         {/if}
         {#if $room?.isHidden}
           <Button
-            class="btn btn-neutral btn-sm tooltip tooltip-left"
+            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
             data-tip="This room is not visible to non-members.">
-            <Icon size={4} icon={EyeClosed} />
+            <Icon size={4} icon={EyeClosed} /> Hidden
           </Button>
         {/if}
         {#if $room?.isClosed}
           <Button
-            class="btn btn-neutral btn-sm tooltip tooltip-left"
+            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
             data-tip="Requests to join this room will be ignored.">
-            <Icon size={4} icon={MinusCircle} />
+            <Icon size={4} icon={MinusCircle} /> Closed
+          </Button>
+        {/if}
+        {#if !$room?.isRestricted && !$room?.isPrivate && !$room?.isHidden && !$room?.isClosed}
+          <Button
+            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
+            data-tip="This room has no additional access controls.">
+            <Icon size={4} icon={MinusCircle} /> Public
           </Button>
         {/if}
       </div>
@@ -203,40 +281,5 @@
       <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>
 </Modal>

src/app/components/RoomItemMenuMobile.svelte

@@ -58,35 +58,37 @@
 
 <Modal>
   <ModalBody>
-    {#if event.pubkey === $pubkey}
-      <Button class="btn btn-neutral text-error" onclick={showDelete}>
-        <Icon size={4} icon={TrashBin2} />
-        Delete Message
+    <div class="flex flex-col gap-2">
+      {#if event.pubkey === $pubkey}
+        <Button class="btn btn-neutral text-error" onclick={showDelete}>
+          <Icon size={4} icon={TrashBin2} />
+          Delete Message
+        </Button>
+      {/if}
+      <Button class="btn btn-neutral" onclick={showInfo}>
+        <Icon size={4} icon={Code2} />
+        Message Info
       </Button>
-    {/if}
-    <Button class="btn btn-neutral" onclick={showInfo}>
-      <Icon size={4} icon={Code2} />
-      Message Info
-    </Button>
-    {#if path}
-      <Link class="btn btn-neutral" href={path}>
-        <Icon size={4} icon={MenuDots} />
-        View Details
-      </Link>
-    {/if}
-    {#if ENABLE_ZAPS}
-      <ZapButton replaceState {url} {event} class="btn btn-neutral w-full">
-        <Icon size={4} icon={Bolt} />
-        Send Zap
-      </ZapButton>
-    {/if}
-    <Button class="btn btn-neutral w-full" onclick={sendReply}>
-      <Icon size={4} icon={Reply} />
-      Send Reply
-    </Button>
-    <Button class="btn btn-neutral w-full" onclick={showEmojiPicker}>
-      <Icon size={4} icon={SmileCircle} />
-      Send Reaction
-    </Button>
+      {#if path}
+        <Link class="btn btn-neutral" href={path}>
+          <Icon size={4} icon={MenuDots} />
+          View Details
+        </Link>
+      {/if}
+      {#if ENABLE_ZAPS}
+        <ZapButton replaceState {url} {event} class="btn btn-neutral w-full">
+          <Icon size={4} icon={Bolt} />
+          Send Zap
+        </ZapButton>
+      {/if}
+      <Button class="btn btn-neutral w-full" onclick={sendReply}>
+        <Icon size={4} icon={Reply} />
+        Send Reply
+      </Button>
+      <Button class="btn btn-neutral w-full" onclick={showEmojiPicker}>
+        <Icon size={4} icon={SmileCircle} />
+        Send Reaction
+      </Button>
+    </div>
   </ModalBody>
 </Modal>

src/app/components/RoomMembers.svelte

@@ -12,6 +12,9 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import Profile from "@app/components/Profile.svelte"
   import RoomName from "@app/components/RoomName.svelte"
   import RoomMembersAdd from "@app/components/RoomMembersAdd.svelte"
@@ -63,51 +66,53 @@
 
 <Modal>
   <ModalBody>
-    <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 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}
+    <ModalHeader>
+      <ModalTitle>Members</ModalTitle>
+      <ModalSubtitle>
+        of <RoomName {url} {h} class="text-primary" />
+      </ModalSubtitle>
+    </ModalHeader>
+    <div class="flex flex-col gap-2">
+      {#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>
+              {/if}
+            </div>
           </div>
         </div>
-      </div>
-    {/each}
+      {/each}
+    </div>
   </ModalBody>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
+    {#if $userIsAdmin}
+      <Button class="btn btn-primary" onclick={addMember}>
+        <Icon icon={AddCircle} />
+        Add members
+      </Button>
+    {/if}
   </ModalFooter>
 </Modal>

src/app/components/RoomMembersAdd.svelte

@@ -114,7 +114,7 @@
   <ModalBody>
     <ModalHeader>
       <ModalTitle>Add Members</ModalTitle>
-      <ModalSubtitle>to <RoomName {url} {h} /></ModalSubtitle>
+      <ModalSubtitle>to <RoomName {url} {h} class="text-primary" /></ModalSubtitle>
     </ModalHeader>
     <Field>
       {#snippet label()}

src/app/components/SpaceMembers.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {displayRelayUrl, ManagementMethod} from "@welshman/util"
+  import {ManagementMethod} from "@welshman/util"
   import {manageRelay, displayProfileByPubkey} from "@welshman/app"
   import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
   import MinusCircle from "@assets/icons/minus-circle.svg?dataurl"
@@ -12,7 +12,11 @@
   import Confirm from "@lib/components/Confirm.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.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"
@@ -72,56 +76,56 @@
 
 <Modal>
   <ModalBody>
-    <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 {displayRelayUrl(url)}</p>
-    </div>
+    <ModalHeader>
+      <ModalTitle>Members</ModalTitle>
+      <ModalSubtitle>of <RelayName {url} class="text-primary" /></ModalSubtitle>
+    </ModalHeader>
     {#if $userIsAdmin}
-      <div class="flex gap-2">
-        <Button class="btn btn-primary" onclick={addMember}>
-          <Icon icon={AddCircle} />
-          Add members
+      {#if $bans.length > 0}
+        <Button class="btn btn-neutral" onclick={showBannedPubkeyItems}>
+          Banned users ({$bans.length})
         </Button>
-        {#if $bans.length > 0}
-          <Button class="btn btn-neutral" onclick={showBannedPubkeyItems}>
-            Banned users ({$bans.length})
-          </Button>
-        {/if}
-      </div>
+      {/if}
     {/if}
-    {#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>
-          <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={() => banMember(pubkey)}>
-                      <Icon icon={MinusCircle} />
-                      Ban User
-                    </Button>
-                  </li>
-                </ul>
-              </Popover>
-            {/if}
+    <div class="flex flex-col gap-2">
+      {#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>
+            <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={() => banMember(pubkey)}>
+                        <Icon icon={MinusCircle} />
+                        Ban User
+                      </Button>
+                    </li>
+                  </ul>
+                </Popover>
+              {/if}
+            </div>
           </div>
         </div>
-      </div>
-    {/each}
+      {/each}
+    </div>
   </ModalBody>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
+    <Button class="btn btn-primary" onclick={addMember}>
+      <Icon icon={AddCircle} />
+      Add members
+    </Button>
   </ModalFooter>
 </Modal>

src/app/components/SpaceMembersBanned.svelte

@@ -59,34 +59,36 @@
       <ModalTitle>Banned users</ModalTitle>
       <ModalSubtitle>on {displayRelayUrl(url)}</ModalSubtitle>
     </ModalHeader>
-    {#each $bans as { pubkey, reason } (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 onclick={() => restoreMember(pubkey)}>
-                      <Icon icon={Restart} />
-                      Restore User
-                    </Button>
-                  </li>
-                </ul>
-              </Popover>
-            {/if}
+    <div class="flex flex-col gap-2">
+      {#each $bans as { pubkey, reason } (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 onclick={() => restoreMember(pubkey)}>
+                        <Icon icon={Restart} />
+                        Restore User
+                      </Button>
+                    </li>
+                  </ul>
+                </Popover>
+              {/if}
+            </div>
           </div>
         </div>
-      </div>
-    {/each}
+      {/each}
+    </div>
   </ModalBody>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>

src/app/components/SpaceReports.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
-  import {REPORT, displayRelayUrl} from "@welshman/util"
+  import {REPORT} from "@welshman/util"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import ReportItem from "@app/components/ReportItem.svelte"
+  import RelayName from "@app/components/RelayName.svelte"
   import {deriveEventsForUrl} from "@app/core/state"
 
   interface Props {
@@ -22,13 +26,17 @@
 
 <Modal>
   <ModalBody>
-    <div class="flex min-w-0 flex-col gap-1">
-      <h1 class="ellipsize whitespace-nowrap text-2xl font-bold">Reports</h1>
-      <p class="ellipsize text-sm opacity-75">on {displayRelayUrl(url)}</p>
+    <ModalHeader>
+      <ModalTitle>Reports</ModalTitle>
+      <ModalSubtitle>on <RelayName {url} class="text-primary" /></ModalSubtitle>
+    </ModalHeader>
+    <div class="flex flex-col gap-2">
+      {#each $reports as event (event.id)}
+        <ReportItem {url} {event} />
+      {:else}
+        <p class="py-12 text-center">No reports found.</p>
+      {/each}
     </div>
-    {#each $reports as event (event.id)}
-      <ReportItem {url} {event} />
-    {/each}
   </ModalBody>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>

src/lib/components/ModalBody.svelte

@@ -10,6 +10,6 @@
   const {children, ...props}: Props = $props()
 </script>
 
-<div class={cx("scroll-container overflow-y-auto min-h-0 flex flex-col gap-2 p-6", props.class)}>
+<div class={cx("scroll-container overflow-y-auto min-h-0 flex flex-col gap-4 p-6", props.class)}>
   {@render children?.()}
 </div>

src/lib/components/ModalFooter.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <div class="h-20 flex-shrink-0"></div>
-<div class="flex absolute bottom-0 left-0 right-0 p-6 pt-2 rounded-b-box bg-base-100">
+<div class="flex absolute bottom-0 left-0 right-0 p-6 py-4 rounded-b-box bg-base-200">
   <div class="flex flex-grow gap-4 items-center justify-between">
     {@render children?.()}
   </div>