Clean up modals

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>