From fb2d78fd5708afddcb6ffaca7b90987df2d49272 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Mon, 2 Feb 2026 10:09:14 -0800
Subject: [PATCH] Rework modal header structure

---
 src/app/components/CalendarEventCreate.svelte    | 10 ++++------
 src/app/components/CalendarEventEdit.svelte      | 10 ++++------
 src/app/components/ChatEnable.svelte             | 10 ++++------
 src/app/components/ChatMembers.svelte            |  5 ++---
 src/app/components/ChatStart.svelte              | 10 ++++------
 src/app/components/EventInfo.svelte              | 10 ++++------
 src/app/components/EventShare.svelte             | 10 ++++------
 src/app/components/GoalCreate.svelte             | 10 ++++------
 src/app/components/InfoBunker.svelte             |  5 ++---
 src/app/components/InfoHandle.svelte             |  5 ++---
 src/app/components/InfoKeys.svelte               |  5 ++---
 src/app/components/InfoNostr.svelte              |  5 ++---
 src/app/components/InfoRelay.svelte              |  5 ++---
 src/app/components/InfoSignatures.svelte         |  5 ++---
 src/app/components/InfoZapperError.svelte        |  5 ++---
 src/app/components/KeyDownload.svelte            |  5 ++---
 src/app/components/KeyRecoveryConfirm.svelte     | 10 ++++------
 src/app/components/KeyRecoveryRequest.svelte     | 10 ++++------
 src/app/components/LogInBunker.svelte            | 10 ++++------
 src/app/components/LogInEmail.svelte             | 10 ++++------
 src/app/components/LogInKey.svelte               | 10 ++++------
 src/app/components/LogInOTP.svelte               | 10 ++++------
 src/app/components/LogInOTPConfirm.svelte        | 10 ++++------
 src/app/components/LogOut.svelte                 |  5 ++---
 src/app/components/ProfileDelete.svelte          | 10 ++++------
 src/app/components/ProfileList.svelte            | 12 +++++-------
 src/app/components/Report.svelte                 | 10 ++++------
 src/app/components/ReportDetails.svelte          | 10 ++++------
 src/app/components/RoomCreate.svelte             | 14 ++++++--------
 src/app/components/RoomEdit.svelte               | 14 ++++++--------
 src/app/components/RoomMembersAdd.svelte         | 10 ++++------
 src/app/components/SignUpComplete.svelte         |  5 ++---
 src/app/components/SignUpEmail.svelte            | 10 ++++------
 src/app/components/SignUpEmailConfirm.svelte     | 10 ++++------
 src/app/components/SpaceAccessRequest.svelte     | 11 +++++------
 src/app/components/SpaceAdd.svelte               | 11 +++++------
 src/app/components/SpaceAuthError.svelte         | 10 ++++------
 src/app/components/SpaceEdit.svelte              | 10 ++++------
 src/app/components/SpaceExit.svelte              |  9 ++++-----
 src/app/components/SpaceInvite.svelte            | 16 +++++++---------
 src/app/components/SpaceInviteAccept.svelte      | 11 +++++------
 src/app/components/SpaceMembersAdd.svelte        | 10 ++++------
 src/app/components/SpaceMembersBanned.svelte     | 10 ++++------
 src/app/components/SpaceTrustRelay.svelte        | 14 ++++++--------
 src/app/components/ThreadCreate.svelte           | 10 ++++------
 .../components/WalletAsReceivingAddress.svelte   |  5 ++---
 src/app/components/WalletConnect.svelte          | 11 +++++------
 src/app/components/WalletPay.svelte              | 10 ++++------
 .../WalletUpdateReceivingAddress.svelte          | 10 ++++------
 src/app/components/Zap.svelte                    | 10 ++++------
 src/lib/components/Confirm.svelte                | 10 ++++------
 src/lib/components/Dialog.svelte                 |  6 +++---
 src/lib/components/ModalHeader.svelte            | 10 +++++-----
 src/lib/components/ModalSubtitle.svelte          | 11 +++++++++++
 src/lib/components/ModalTitle.svelte             | 11 +++++++++++
 55 files changed, 224 insertions(+), 287 deletions(-)
 create mode 100644 src/lib/components/ModalSubtitle.svelte
 create mode 100644 src/lib/components/ModalTitle.svelte

diff --git a/src/app/components/CalendarEventCreate.svelte b/src/app/components/CalendarEventCreate.svelte
index 00b0b4e6..25dc189a 100644
--- a/src/app/components/CalendarEventCreate.svelte
+++ b/src/app/components/CalendarEventCreate.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import CalendarEventForm from "@app/components/CalendarEventForm.svelte"
 
   type Props = {
@@ -13,12 +15,8 @@
 <CalendarEventForm {url} {h}>
   {#snippet header()}
     <ModalHeader>
-      {#snippet title()}
-        <div>Create an Event</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Invite other group members to events online or in real life.</div>
-      {/snippet}
+      <ModalTitle>Create an Event</ModalTitle>
+      <ModalSubtitle>Invite other group members to events online or in real life.</ModalSubtitle>
     </ModalHeader>
   {/snippet}
 </CalendarEventForm>
diff --git a/src/app/components/CalendarEventEdit.svelte b/src/app/components/CalendarEventEdit.svelte
index fa924cfb..25dafbb3 100644
--- a/src/app/components/CalendarEventEdit.svelte
+++ b/src/app/components/CalendarEventEdit.svelte
@@ -2,6 +2,8 @@
   import type {TrustedEvent} from "@welshman/util"
   import {getTagValue} from "@welshman/util"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import CalendarEventForm from "@app/components/CalendarEventForm.svelte"
 
   type Props = {
@@ -24,12 +26,8 @@
 <CalendarEventForm {url} {initialValues}>
   {#snippet header()}
     <ModalHeader>
-      {#snippet title()}
-        <div>Edit this Event</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Invite other group members to events online or in real life.</div>
-      {/snippet}
+      <ModalTitle>Edit this Event</ModalTitle>
+      <ModalSubtitle>Invite other group members to events online or in real life.</ModalSubtitle>
     </ModalHeader>
   {/snippet}
 </CalendarEventForm>
diff --git a/src/app/components/ChatEnable.svelte b/src/app/components/ChatEnable.svelte
index 7b05e4e6..9e5499de 100644
--- a/src/app/components/ChatEnable.svelte
+++ b/src/app/components/ChatEnable.svelte
@@ -10,6 +10,8 @@
   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 {PLATFORM_NAME} from "@app/core/state"
   import {clearModals} from "@app/util/modal"
@@ -38,12 +40,8 @@
 <Modal tag="form" onsubmit={preventDefault(submit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Enable Messages</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Do you want to enable direct messages?</div>
-      {/snippet}
+      <ModalTitle>Enable Messages</ModalTitle>
+      <ModalSubtitle>Do you want to enable direct messages?</ModalSubtitle>
     </ModalHeader>
     <p>
       By default, direct messages are disabled, since loading them requires
diff --git a/src/app/components/ChatMembers.svelte b/src/app/components/ChatMembers.svelte
index e8ad5b23..f8e1327d 100644
--- a/src/app/components/ChatMembers.svelte
+++ b/src/app/components/ChatMembers.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -16,9 +17,7 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>People in this conversation</div>
-      {/snippet}
+      <ModalTitle>People in this conversation</ModalTitle>
     </ModalHeader>
     {#each pubkeys as pubkey (pubkey)}
       <div class="card2 bg-alt">
diff --git a/src/app/components/ChatStart.svelte b/src/app/components/ChatStart.svelte
index 54e548d2..fe498fdc 100644
--- a/src/app/components/ChatStart.svelte
+++ b/src/app/components/ChatStart.svelte
@@ -14,6 +14,8 @@
   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 ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
   import {makeChatPath} from "@app/util/routes"
@@ -57,12 +59,8 @@
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Start a Chat</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Create an encrypted chat room for private conversations.</div>
-      {/snippet}
+      <ModalTitle>Start a Chat</ModalTitle>
+      <ModalSubtitle>Create an encrypted chat room for private conversations.</ModalSubtitle>
     </ModalHeader>
     <Field>
       {#snippet input()}
diff --git a/src/app/components/EventInfo.svelte b/src/app/components/EventInfo.svelte
index 6ce4178d..783b71aa 100644
--- a/src/app/components/EventInfo.svelte
+++ b/src/app/components/EventInfo.svelte
@@ -14,6 +14,8 @@
   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 {clip} from "@app/util/toast"
 
   type Props = {
@@ -41,12 +43,8 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Event Details</div>
-      {/snippet}
-      {#snippet info()}
-        <div>The full details of this event are shown below.</div>
-      {/snippet}
+      <ModalTitle>Event Details</ModalTitle>
+      <ModalSubtitle>The full details of this event are shown below.</ModalSubtitle>
     </ModalHeader>
     <FieldInline>
       {#snippet label()}
diff --git a/src/app/components/EventShare.svelte b/src/app/components/EventShare.svelte
index 2d8ec2a5..61b745db 100644
--- a/src/app/components/EventShare.svelte
+++ b/src/app/components/EventShare.svelte
@@ -8,6 +8,8 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.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 Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -34,12 +36,8 @@
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Share {noun}</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Which room would you like to share this event to?</div>
-      {/snippet}
+      <ModalTitle>Share {noun}</ModalTitle>
+      <ModalSubtitle>Which room would you like to share this event to?</ModalSubtitle>
     </ModalHeader>
     <div class="grid grid-cols-3 gap-2">
       {#each $roomsByUrl.get(url) || [] as room (room.h)}
diff --git a/src/app/components/GoalCreate.svelte b/src/app/components/GoalCreate.svelte
index b6ae3e18..1db8ded5 100644
--- a/src/app/components/GoalCreate.svelte
+++ b/src/app/components/GoalCreate.svelte
@@ -11,6 +11,8 @@
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.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 Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -87,12 +89,8 @@
 <Modal tag="form" onsubmit={preventDefault(submit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Create a Funding Goal</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Request contributions for your fundraiser.</div>
-      {/snippet}
+      <ModalTitle>Create a Funding Goal</ModalTitle>
+      <ModalSubtitle>Request contributions for your fundraiser.</ModalSubtitle>
     </ModalHeader>
     <div class="col-8 relative">
       <Field>
diff --git a/src/app/components/InfoBunker.svelte b/src/app/components/InfoBunker.svelte
index a5a44fca..c5d0d5de 100644
--- a/src/app/components/InfoBunker.svelte
+++ b/src/app/components/InfoBunker.svelte
@@ -4,15 +4,14 @@
   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 {PLATFORM_NAME} from "@app/core/state"
 </script>
 
 <Modal
   ><ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>What is a bunker link?</div>
-      {/snippet}
+      <ModalTitle>What is a bunker link?</ModalTitle>
     </ModalHeader>
     <p>
       <Link external class="link" href="https://nostr.com/">Nostr</Link> uses "keys" instead of passwords
diff --git a/src/app/components/InfoHandle.svelte b/src/app/components/InfoHandle.svelte
index dedeaeec..42acd9c5 100644
--- a/src/app/components/InfoHandle.svelte
+++ b/src/app/components/InfoHandle.svelte
@@ -4,15 +4,14 @@
   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 {PLATFORM_NAME} from "@app/core/state"
 </script>
 
 <Modal
   ><ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>What is a nostr address?</div>
-      {/snippet}
+      <ModalTitle>What is a nostr address?</ModalTitle>
     </ModalHeader>
     <p>
       {PLATFORM_NAME} hosts spaces on the <Link external href="https://nostr.com/" class="underline"
diff --git a/src/app/components/InfoKeys.svelte b/src/app/components/InfoKeys.svelte
index fd4b5feb..4809f9c6 100644
--- a/src/app/components/InfoKeys.svelte
+++ b/src/app/components/InfoKeys.svelte
@@ -8,6 +8,7 @@
   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 ModalFooter from "@lib/components/ModalFooter.svelte"
   import KeyRecoveryRequest from "@app/components/KeyRecoveryRequest.svelte"
   import {PLATFORM_NAME} from "@app/core/state"
@@ -21,9 +22,7 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>What is a private key?</div>
-      {/snippet}
+      <ModalTitle>What is a private key?</ModalTitle>
     </ModalHeader>
     <p>
       Most online services keep track of users by giving them a username and password. This gives
diff --git a/src/app/components/InfoNostr.svelte b/src/app/components/InfoNostr.svelte
index 6fc130d2..967790ef 100644
--- a/src/app/components/InfoNostr.svelte
+++ b/src/app/components/InfoNostr.svelte
@@ -4,14 +4,13 @@
   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"
 </script>
 
 <Modal
   ><ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>What is nostr?</div>
-      {/snippet}
+      <ModalTitle>What is nostr?</ModalTitle>
     </ModalHeader>
     <p>
       <Link external href="https://nostr.com/" class="link">Nostr</Link> is way to build social apps that
diff --git a/src/app/components/InfoRelay.svelte b/src/app/components/InfoRelay.svelte
index 110b7fbe..e1ab12c1 100644
--- a/src/app/components/InfoRelay.svelte
+++ b/src/app/components/InfoRelay.svelte
@@ -2,6 +2,7 @@
   import Button from "@lib/components/Button.svelte"
   import Link from "@lib/components/Link.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -11,9 +12,7 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>What is a relay?</div>
-      {/snippet}
+      <ModalTitle>What is a relay?</ModalTitle>
     </ModalHeader>
     <p>
       {PLATFORM_NAME} hosts spaces on the <Link external href="https://nostr.com/" class="underline"
diff --git a/src/app/components/InfoSignatures.svelte b/src/app/components/InfoSignatures.svelte
index de7edfa1..64097b85 100644
--- a/src/app/components/InfoSignatures.svelte
+++ b/src/app/components/InfoSignatures.svelte
@@ -4,6 +4,7 @@
   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"
 
   const back = () => history.back()
 </script>
@@ -11,9 +12,7 @@
 <Modal
   ><ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>What are digital signatures?</div>
-      {/snippet}
+      <ModalTitle>What are digital signatures?</ModalTitle>
     </ModalHeader>
     <p>
       Most online services ask their users to trust them that they're being honest, and they usually
diff --git a/src/app/components/InfoZapperError.svelte b/src/app/components/InfoZapperError.svelte
index db2ab03f..18625610 100644
--- a/src/app/components/InfoZapperError.svelte
+++ b/src/app/components/InfoZapperError.svelte
@@ -4,6 +4,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -19,9 +20,7 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Unable to Zap</div>
-      {/snippet}
+      <ModalTitle>Unable to Zap</ModalTitle>
     </ModalHeader>
     <p>
       Zapping <ProfileLink {pubkey} class="!text-primary" /> isn't possible right now because
diff --git a/src/app/components/KeyDownload.svelte b/src/app/components/KeyDownload.svelte
index 2d4b7967..b00900a0 100644
--- a/src/app/components/KeyDownload.svelte
+++ b/src/app/components/KeyDownload.svelte
@@ -13,6 +13,7 @@
   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 ModalFooter from "@lib/components/ModalFooter.svelte"
   import {pushToast} from "@app/util/toast"
   import {PLATFORM_NAME} from "@app/core/state"
@@ -109,9 +110,7 @@
 <Modal tag="form" onsubmit={preventDefault(next)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Your Keys are Ready!</div>
-      {/snippet}
+      <ModalTitle>Your Keys are Ready!</ModalTitle>
     </ModalHeader>
     <p>
       A cryptographic key pair has two parts: your <strong>public key</strong> identifies your
diff --git a/src/app/components/KeyRecoveryConfirm.svelte b/src/app/components/KeyRecoveryConfirm.svelte
index d75bf425..caa02412 100644
--- a/src/app/components/KeyRecoveryConfirm.svelte
+++ b/src/app/components/KeyRecoveryConfirm.svelte
@@ -12,6 +12,8 @@
   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 KeyDownload from "@app/components/KeyDownload.svelte"
   import {pushToast} from "@app/util/toast"
@@ -86,12 +88,8 @@
 <Modal tag="form" onsubmit={preventDefault(submit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        Recover your Key
-      {/snippet}
-      {#snippet info()}
-        Take control over your cryptographic identity
-      {/snippet}
+      <ModalTitle>Recover your Key</ModalTitle>
+      <ModalSubtitle>Take control over your cryptographic identity</ModalSubtitle>
     </ModalHeader>
     <p>Your recovery codes have been sent!</p>
     <p>
diff --git a/src/app/components/KeyRecoveryRequest.svelte b/src/app/components/KeyRecoveryRequest.svelte
index e9441dc1..82bde83f 100644
--- a/src/app/components/KeyRecoveryRequest.svelte
+++ b/src/app/components/KeyRecoveryRequest.svelte
@@ -11,6 +11,8 @@
   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 {pushModal} from "@app/util/modal"
   import KeyRecoveryConfirm from "@app/components/KeyRecoveryConfirm.svelte"
@@ -44,12 +46,8 @@
 <Modal tag="form" onsubmit={preventDefault(submit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        Recover your Key
-      {/snippet}
-      {#snippet info()}
-        Take control over your cryptographic identity
-      {/snippet}
+      <ModalTitle>Recover your Key</ModalTitle>
+      <ModalSubtitle>Take control over your cryptographic identity</ModalSubtitle>
     </ModalHeader>
     <p>
       When you signed up, your Nostr secret key was split into multiple pieces and stored on
diff --git a/src/app/components/LogInBunker.svelte b/src/app/components/LogInBunker.svelte
index 91ff3a1e..5118ec3a 100644
--- a/src/app/components/LogInBunker.svelte
+++ b/src/app/components/LogInBunker.svelte
@@ -13,6 +13,8 @@
   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 BunkerConnect from "@app/components/BunkerConnect.svelte"
   import BunkerUrl from "@app/components/BunkerUrl.svelte"
@@ -125,12 +127,8 @@
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Log In with a Signer</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Using a remote signer app helps you keep your keys safe.</div>
-      {/snippet}
+      <ModalTitle>Log In with a Signer</ModalTitle>
+      <ModalSubtitle>Using a remote signer app helps you keep your keys safe.</ModalSubtitle>
     </ModalHeader>
     <div class:hidden={mode !== "bunker"}></div>
     {#if mode === "connect"}
diff --git a/src/app/components/LogInEmail.svelte b/src/app/components/LogInEmail.svelte
index 7d6d3f82..d63f9566 100644
--- a/src/app/components/LogInEmail.svelte
+++ b/src/app/components/LogInEmail.svelte
@@ -13,6 +13,8 @@
   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 LogInOTP from "@app/components/LogInOTP.svelte"
   import {pushModal, clearModals} from "@app/util/modal"
@@ -72,12 +74,8 @@
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Log In</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Log in using your email and password</div>
-      {/snippet}
+      <ModalTitle>Log In</ModalTitle>
+      <ModalSubtitle>Log in using your email and password</ModalSubtitle>
     </ModalHeader>
     <FieldInline>
       {#snippet label()}
diff --git a/src/app/components/LogInKey.svelte b/src/app/components/LogInKey.svelte
index bb4fc121..38a6e507 100644
--- a/src/app/components/LogInKey.svelte
+++ b/src/app/components/LogInKey.svelte
@@ -16,6 +16,8 @@
   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 {clearModals} from "@app/util/modal"
   import {setChecked} from "@app/util/notifications"
@@ -76,12 +78,8 @@
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Log In with Key</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Enter your nostr private key to log in.</div>
-      {/snippet}
+      <ModalTitle>Log In with Key</ModalTitle>
+      <ModalSubtitle>Enter your nostr private key to log in.</ModalSubtitle>
     </ModalHeader>
     <FieldInline>
       {#snippet label()}
diff --git a/src/app/components/LogInOTP.svelte b/src/app/components/LogInOTP.svelte
index 887f021f..23e9fd23 100644
--- a/src/app/components/LogInOTP.svelte
+++ b/src/app/components/LogInOTP.svelte
@@ -11,6 +11,8 @@
   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 LogInOTPConfirm from "@app/components/LogInOTPConfirm.svelte"
   import {pushModal} from "@app/util/modal"
@@ -49,12 +51,8 @@
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Log In</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Log in using a one-time login code</div>
-      {/snippet}
+      <ModalTitle>Log In</ModalTitle>
+      <ModalSubtitle>Log in using a one-time login code</ModalSubtitle>
     </ModalHeader>
     <FieldInline>
       {#snippet label()}
diff --git a/src/app/components/LogInOTPConfirm.svelte b/src/app/components/LogInOTPConfirm.svelte
index b391a88e..532d70ae 100644
--- a/src/app/components/LogInOTPConfirm.svelte
+++ b/src/app/components/LogInOTPConfirm.svelte
@@ -10,6 +10,8 @@
   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 {clearModals} from "@app/util/modal"
   import {setChecked} from "@app/util/notifications"
@@ -84,12 +86,8 @@
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Log In</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Enter the login codes sent to your email</div>
-      {/snippet}
+      <ModalTitle>Log In</ModalTitle>
+      <ModalSubtitle>Enter the login codes sent to your email</ModalSubtitle>
     </ModalHeader>
     <p>Your login codes have been sent!</p>
     <p>
diff --git a/src/app/components/LogOut.svelte b/src/app/components/LogOut.svelte
index 8644307d..39981013 100644
--- a/src/app/components/LogOut.svelte
+++ b/src/app/components/LogOut.svelte
@@ -7,6 +7,7 @@
   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 ModalFooter from "@lib/components/ModalFooter.svelte"
   import {Push} from "@app/util/notifications"
   import {kv, db} from "@app/core/storage"
@@ -36,9 +37,7 @@
 <Modal tag="form" onsubmit={preventDefault(doLogout)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Are you sure you want<br />to log out?</div>
-      {/snippet}
+      <ModalTitle>Are you sure you want<br />to log out?</ModalTitle>
     </ModalHeader>
     <p class="text-center">Your local database will be cleared.</p>
   </ModalBody>
diff --git a/src/app/components/ProfileDelete.svelte b/src/app/components/ProfileDelete.svelte
index fb85b865..870bef08 100644
--- a/src/app/components/ProfileDelete.svelte
+++ b/src/app/components/ProfileDelete.svelte
@@ -17,6 +17,8 @@
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.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 Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -113,12 +115,8 @@
 <Modal tag="form" onsubmit={preventDefault(confirm)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        Delete your account
-      {/snippet}
-      {#snippet info()}
-        From the Nostr network
-      {/snippet}
+      <ModalTitle>Delete your account</ModalTitle>
+      <ModalSubtitle>From the Nostr network</ModalSubtitle>
     </ModalHeader>
     {#if showProgress}
       <p>
diff --git a/src/app/components/ProfileList.svelte b/src/app/components/ProfileList.svelte
index 55f969af..80ef0b2f 100644
--- a/src/app/components/ProfileList.svelte
+++ b/src/app/components/ProfileList.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
   import Button from "@lib/components/Button.svelte"
-  import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.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 Profile from "@app/components/Profile.svelte"
 
   interface Props {
@@ -19,12 +21,8 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>{restProps.title}</div>
-      {/snippet}
-      {#snippet info()}
-        <div>{subtitle}</div>
-      {/snippet}
+      <ModalTitle>{restProps.title}</ModalTitle>
+      <ModalSubtitle>{subtitle}</ModalSubtitle>
     </ModalHeader>
     {#each pubkeys as pubkey (pubkey)}
       <div class="card2 bg-alt">
diff --git a/src/app/components/Report.svelte b/src/app/components/Report.svelte
index 54a41584..de70295e 100644
--- a/src/app/components/Report.svelte
+++ b/src/app/components/Report.svelte
@@ -7,6 +7,8 @@
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.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 Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -43,12 +45,8 @@
 <Modal tag="form" onsubmit={preventDefault(confirm)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Report Content</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Flag inappropriate content.</div>
-      {/snippet}
+      <ModalTitle>Report Content</ModalTitle>
+      <ModalSubtitle>Flag inappropriate content.</ModalSubtitle>
     </ModalHeader>
     <Field>
       {#snippet label()}
diff --git a/src/app/components/ReportDetails.svelte b/src/app/components/ReportDetails.svelte
index b3a72b5b..06cf399c 100644
--- a/src/app/components/ReportDetails.svelte
+++ b/src/app/components/ReportDetails.svelte
@@ -4,6 +4,8 @@
   import {deriveEventsById} from "@welshman/store"
   import {repository} from "@welshman/app"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -34,12 +36,8 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Report Details</div>
-      {/snippet}
-      {#snippet info()}
-        <div>All reports for this event are shown below.</div>
-      {/snippet}
+      <ModalTitle>Report Details</ModalTitle>
+      <ModalSubtitle>All reports for this event are shown below.</ModalSubtitle>
     </ModalHeader>
     {#each $reports.values() as report (report.id)}
       <div class="card2 card2-sm bg-alt">
diff --git a/src/app/components/RoomCreate.svelte b/src/app/components/RoomCreate.svelte
index 2a2e7d8b..ac14cd90 100644
--- a/src/app/components/RoomCreate.svelte
+++ b/src/app/components/RoomCreate.svelte
@@ -8,6 +8,8 @@
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.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 RoomForm from "@app/components/RoomForm.svelte"
   import {makeSpacePath} from "@app/util/routes"
@@ -22,14 +24,10 @@
 <RoomForm {url} {onsubmit}>
   {#snippet header()}
     <ModalHeader>
-      {#snippet title()}
-        <div>Create a Room</div>
-      {/snippet}
-      {#snippet info()}
-        <div>
-          On <span class="text-primary">{displayRelayUrl(url)}</span>
-        </div>
-      {/snippet}
+      <ModalTitle>Create a Room</ModalTitle>
+      <ModalSubtitle>
+        On <span class="text-primary">{displayRelayUrl(url)}</span>
+      </ModalSubtitle>
     </ModalHeader>
   {/snippet}
   {#snippet footer({loading})}
diff --git a/src/app/components/RoomEdit.svelte b/src/app/components/RoomEdit.svelte
index 57daa45e..c6a8aba5 100644
--- a/src/app/components/RoomEdit.svelte
+++ b/src/app/components/RoomEdit.svelte
@@ -7,6 +7,8 @@
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.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 RoomForm from "@app/components/RoomForm.svelte"
   import {deriveRoom} from "@app/core/state"
@@ -29,14 +31,10 @@
 <RoomForm {url} {onsubmit} initialValues={$room}>
   {#snippet header()}
     <ModalHeader>
-      {#snippet title()}
-        <div>Edit a Room</div>
-      {/snippet}
-      {#snippet info()}
-        <div>
-          On <span class="text-primary">{displayRelayUrl(url)}</span>
-        </div>
-      {/snippet}
+      <ModalTitle>Edit a Room</ModalTitle>
+      <ModalSubtitle>
+        On <span class="text-primary">{displayRelayUrl(url)}</span>
+      </ModalSubtitle>
     </ModalHeader>
   {/snippet}
   {#snippet footer({loading})}
diff --git a/src/app/components/RoomMembersAdd.svelte b/src/app/components/RoomMembersAdd.svelte
index 2a35c0e6..15519c1c 100644
--- a/src/app/components/RoomMembersAdd.svelte
+++ b/src/app/components/RoomMembersAdd.svelte
@@ -6,6 +6,8 @@
   import Field from "@lib/components/Field.svelte"
   import Icon from "@lib/components/Icon.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 Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -53,12 +55,8 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Add Members</div>
-      {/snippet}
-      {#snippet info()}
-        <div>to <RoomName {url} {h} /></div>
-      {/snippet}
+      <ModalTitle>Add Members</ModalTitle>
+      <ModalSubtitle>to <RoomName {url} {h} /></ModalSubtitle>
     </ModalHeader>
     <Field>
       {#snippet label()}
diff --git a/src/app/components/SignUpComplete.svelte b/src/app/components/SignUpComplete.svelte
index 461fe9a5..cd600113 100644
--- a/src/app/components/SignUpComplete.svelte
+++ b/src/app/components/SignUpComplete.svelte
@@ -7,6 +7,7 @@
   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 ModalFooter from "@lib/components/ModalFooter.svelte"
 
   type Props = {
@@ -21,9 +22,7 @@
 <Modal tag="form" onsubmit={preventDefault(next)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>You're all set!</div>
-      {/snippet}
+      <ModalTitle>You're all set!</ModalTitle>
     </ModalHeader>
     <p>
       You've created your profile, saved your keys, and now you're ready to start chatting — all
diff --git a/src/app/components/SignUpEmail.svelte b/src/app/components/SignUpEmail.svelte
index 46715f33..d76c39f3 100644
--- a/src/app/components/SignUpEmail.svelte
+++ b/src/app/components/SignUpEmail.svelte
@@ -14,6 +14,8 @@
   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 SignUpEmailConfirm from "@app/components/SignUpEmailConfirm.svelte"
   import {pushToast} from "@app/util/toast"
@@ -97,12 +99,8 @@
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Sign up with Email</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Keep your keys safe using multi-signer key sharing</div>
-      {/snippet}
+      <ModalTitle>Sign up with Email</ModalTitle>
+      <ModalSubtitle>Keep your keys safe using multi-signer key sharing</ModalSubtitle>
     </ModalHeader>
     <p>
       Under the hood, nostr uses "cryptographic keypairs" to help you prove that your identity is
diff --git a/src/app/components/SignUpEmailConfirm.svelte b/src/app/components/SignUpEmailConfirm.svelte
index 9ea0926c..b3279179 100644
--- a/src/app/components/SignUpEmailConfirm.svelte
+++ b/src/app/components/SignUpEmailConfirm.svelte
@@ -12,6 +12,8 @@
   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"
 
   type Props = {
@@ -40,12 +42,8 @@
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Verify your Email Address</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Enter the one-time confirmation code sent to your email</div>
-      {/snippet}
+      <ModalTitle>Verify your Email Address</ModalTitle>
+      <ModalSubtitle>Enter the one-time confirmation code sent to your email</ModalSubtitle>
     </ModalHeader>
     <FieldInline>
       {#snippet label()}
diff --git a/src/app/components/SpaceAccessRequest.svelte b/src/app/components/SpaceAccessRequest.svelte
index 76c9eaaa..386303cd 100644
--- a/src/app/components/SpaceAccessRequest.svelte
+++ b/src/app/components/SpaceAccessRequest.svelte
@@ -11,6 +11,8 @@
   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 {pushToast} from "@app/util/toast"
   import {attemptRelayAccess} from "@app/core/commands"
@@ -49,12 +51,9 @@
 <Modal tag="form" onsubmit={preventDefault(join)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Request Access</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Enter an invite code below to request access to {displayUrl(url)}.</div>
-      {/snippet}
+      <ModalTitle>Request Access</ModalTitle>
+      <ModalSubtitle
+        >Enter an invite code below to request access to {displayUrl(url)}.</ModalSubtitle>
     </ModalHeader>
     <Field>
       {#snippet label()}
diff --git a/src/app/components/SpaceAdd.svelte b/src/app/components/SpaceAdd.svelte
index 6075b83d..a7e41efd 100644
--- a/src/app/components/SpaceAdd.svelte
+++ b/src/app/components/SpaceAdd.svelte
@@ -9,6 +9,8 @@
   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 SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
   import {pushModal} from "@app/util/modal"
 
@@ -24,12 +26,9 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Add a Space</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Spaces are places where communities come together to work, play, and hang out.</div>
-      {/snippet}
+      <ModalTitle>Add a Space</ModalTitle>
+      <ModalSubtitle
+        >Spaces are places where communities come together to work, play, and hang out.</ModalSubtitle>
     </ModalHeader>
     {#if !hideDiscover}
       <Link href="/discover">
diff --git a/src/app/components/SpaceAuthError.svelte b/src/app/components/SpaceAuthError.svelte
index ff0e96e1..08954f18 100644
--- a/src/app/components/SpaceAuthError.svelte
+++ b/src/app/components/SpaceAuthError.svelte
@@ -11,6 +11,8 @@
   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 SpaceAccessRequest from "@app/components/SpaceAccessRequest.svelte"
   import {pushModal, clearModals} from "@app/util/modal"
@@ -42,12 +44,8 @@
 <Modal tag="form" onsubmit={preventDefault(requestAccess)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Access Error</div>
-      {/snippet}
-      {#snippet info()}
-        <div>We couldn't connect you to this space.</div>
-      {/snippet}
+      <ModalTitle>Access Error</ModalTitle>
+      <ModalSubtitle>We couldn't connect you to this space.</ModalSubtitle>
     </ModalHeader>
     <p>
       We received an error from the relay indicating you don't have access to {displayRelayUrl(
diff --git a/src/app/components/SpaceEdit.svelte b/src/app/components/SpaceEdit.svelte
index 61b10048..cad8abda 100644
--- a/src/app/components/SpaceEdit.svelte
+++ b/src/app/components/SpaceEdit.svelte
@@ -14,6 +14,8 @@
   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 ImageIcon from "@lib/components/ImageIcon.svelte"
   import IconPickerButton from "@lib/components/IconPickerButton.svelte"
@@ -124,12 +126,8 @@
 <Modal tag="form" onsubmit={preventDefault(trySubmit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Edit a Space</div>
-      {/snippet}
-      {#snippet info()}
-        <span class="text-primary">{displayRelayUrl(url)}</span>
-      {/snippet}
+      <ModalTitle>Edit a Space</ModalTitle>
+      <ModalSubtitle><span class="text-primary">{displayRelayUrl(url)}</span></ModalSubtitle>
     </ModalHeader>
     <FieldInline>
       {#snippet label()}
diff --git a/src/app/components/SpaceExit.svelte b/src/app/components/SpaceExit.svelte
index 70b543cd..19a8f84d 100644
--- a/src/app/components/SpaceExit.svelte
+++ b/src/app/components/SpaceExit.svelte
@@ -9,6 +9,7 @@
   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 ModalFooter from "@lib/components/ModalFooter.svelte"
   import {removeSpaceMembership, publishLeaveRequest, removeTrustedRelay} from "@app/core/commands"
 
@@ -36,11 +37,9 @@
 <Modal tag="form" onsubmit={preventDefault(exit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>
-          You are leaving<br /><span class="text-primary">{displayRelayUrl(url)}</span>
-        </div>
-      {/snippet}
+      <ModalTitle>
+        You are leaving<br /><span class="text-primary">{displayRelayUrl(url)}</span>
+      </ModalTitle>
     </ModalHeader>
     <p class="text-center">Are you sure you want to leave?</p>
   </ModalBody>
diff --git a/src/app/components/SpaceInvite.svelte b/src/app/components/SpaceInvite.svelte
index 3444c4d6..b6cc7105 100644
--- a/src/app/components/SpaceInvite.svelte
+++ b/src/app/components/SpaceInvite.svelte
@@ -12,6 +12,8 @@
   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 QRCode from "@app/components/QRCode.svelte"
   import {clip} from "@app/util/toast"
@@ -57,15 +59,11 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Create an Invite</div>
-      {/snippet}
-      {#snippet info()}
-        <div>
-          Get a link that you can use to invite people to
-          <span class="text-primary">{displayRelayUrl(url)}</span>
-        </div>
-      {/snippet}
+      <ModalTitle>Create an Invite</ModalTitle>
+      <ModalSubtitle>
+        Get a link that you can use to invite people to
+        <span class="text-primary">{displayRelayUrl(url)}</span>
+      </ModalSubtitle>
     </ModalHeader>
     <div>
       {#if loading}
diff --git a/src/app/components/SpaceInviteAccept.svelte b/src/app/components/SpaceInviteAccept.svelte
index 9de6a7e7..f9f53460 100644
--- a/src/app/components/SpaceInviteAccept.svelte
+++ b/src/app/components/SpaceInviteAccept.svelte
@@ -13,6 +13,8 @@
   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 RelaySummary from "@app/components/RelaySummary.svelte"
   import {pushToast} from "@app/util/toast"
@@ -62,12 +64,9 @@
 <Modal tag="form" onsubmit={preventDefault(join)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Join a Space</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Enter a relay URL or invite link below to join an existing space.</div>
-      {/snippet}
+      <ModalTitle>Join a Space</ModalTitle>
+      <ModalSubtitle
+        >Enter a relay URL or invite link below to join an existing space.</ModalSubtitle>
     </ModalHeader>
     <Field>
       {#snippet label()}
diff --git a/src/app/components/SpaceMembersAdd.svelte b/src/app/components/SpaceMembersAdd.svelte
index f38af88b..23dc5b4d 100644
--- a/src/app/components/SpaceMembersAdd.svelte
+++ b/src/app/components/SpaceMembersAdd.svelte
@@ -9,6 +9,8 @@
   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 ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
   import {pushToast} from "@app/util/toast"
@@ -54,12 +56,8 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Add Members</div>
-      {/snippet}
-      {#snippet info()}
-        <div>to {displayRelayUrl(url)}</div>
-      {/snippet}
+      <ModalTitle>Add Members</ModalTitle>
+      <ModalSubtitle>to {displayRelayUrl(url)}</ModalSubtitle>
     </ModalHeader>
     <Field>
       {#snippet label()}
diff --git a/src/app/components/SpaceMembersBanned.svelte b/src/app/components/SpaceMembersBanned.svelte
index 256367de..85b75686 100644
--- a/src/app/components/SpaceMembersBanned.svelte
+++ b/src/app/components/SpaceMembersBanned.svelte
@@ -11,6 +11,8 @@
   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 Profile from "@app/components/Profile.svelte"
   import {deriveSpaceBannedPubkeyItems} from "@app/core/state"
@@ -54,12 +56,8 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Banned users</div>
-      {/snippet}
-      {#snippet info()}
-        <div>on {displayRelayUrl(url)}</div>
-      {/snippet}
+      <ModalTitle>Banned users</ModalTitle>
+      <ModalSubtitle>on {displayRelayUrl(url)}</ModalSubtitle>
     </ModalHeader>
     {#each $bans as { pubkey, reason } (pubkey)}
       <div class="card2 bg-alt relative">
diff --git a/src/app/components/SpaceTrustRelay.svelte b/src/app/components/SpaceTrustRelay.svelte
index 1a55255f..6b8ec8c5 100644
--- a/src/app/components/SpaceTrustRelay.svelte
+++ b/src/app/components/SpaceTrustRelay.svelte
@@ -11,6 +11,8 @@
   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 InfoSignatures from "@app/components/InfoSignatures.svelte"
   import {relaysPendingTrust} from "@app/core/state"
@@ -55,14 +57,10 @@
 <Modal tag="form" onsubmit={preventDefault(trustSpace)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        Do you trust this space?
-      {/snippet}
-      {#snippet info()}
-        <div>
-          Only join <span class="text-primary">{displayRelayUrl(url)}</span> if you trust the adminstrator
-        </div>
-      {/snippet}
+      <ModalTitle>Do you trust this space?</ModalTitle>
+      <ModalSubtitle>
+        Only join <span class="text-primary">{displayRelayUrl(url)}</span> if you trust the adminstrator
+      </ModalSubtitle>
     </ModalHeader>
     <div class="m-auto flex flex-col gap-4">
       <p>
diff --git a/src/app/components/ThreadCreate.svelte b/src/app/components/ThreadCreate.svelte
index 788a7a76..5f947e0d 100644
--- a/src/app/components/ThreadCreate.svelte
+++ b/src/app/components/ThreadCreate.svelte
@@ -9,6 +9,8 @@
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.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 Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -79,12 +81,8 @@
 <Modal tag="form" onsubmit={preventDefault(submit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Create a Thread</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Share a link, or start a discussion.</div>
-      {/snippet}
+      <ModalTitle>Create a Thread</ModalTitle>
+      <ModalSubtitle>Share a link, or start a discussion.</ModalSubtitle>
     </ModalHeader>
     <div class="col-8 relative">
       <Field>
diff --git a/src/app/components/WalletAsReceivingAddress.svelte b/src/app/components/WalletAsReceivingAddress.svelte
index bace65eb..4155ea33 100644
--- a/src/app/components/WalletAsReceivingAddress.svelte
+++ b/src/app/components/WalletAsReceivingAddress.svelte
@@ -5,6 +5,7 @@
   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 ModalFooter from "@lib/components/ModalFooter.svelte"
   import {updateProfile} from "@app/core/commands"
   import {clearModals} from "@app/util/modal"
@@ -37,9 +38,7 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        Set as Receiving Address?
-      {/snippet}
+      <ModalTitle>Set as Receiving Address?</ModalTitle>
     </ModalHeader>
     {#if $userProfile?.lud16}
       <p>
diff --git a/src/app/components/WalletConnect.svelte b/src/app/components/WalletConnect.svelte
index 25014138..99c87201 100644
--- a/src/app/components/WalletConnect.svelte
+++ b/src/app/components/WalletConnect.svelte
@@ -18,6 +18,8 @@
   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 {getWebLn} from "@app/core/commands"
   import {pushToast} from "@app/util/toast"
@@ -114,12 +116,9 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Connect a Wallet</div>
-      {/snippet}
-      {#snippet info()}
-        Use Nostr Wallet Connect to send Bitcoin payments over lightning.
-      {/snippet}
+      <ModalTitle>Connect a Wallet</ModalTitle>
+      <ModalSubtitle
+        >Use Nostr Wallet Connect to send Bitcoin payments over lightning.</ModalSubtitle>
     </ModalHeader>
     {#if getWebLn()}
       <Button
diff --git a/src/app/components/WalletPay.svelte b/src/app/components/WalletPay.svelte
index 61386aea..53699f77 100644
--- a/src/app/components/WalletPay.svelte
+++ b/src/app/components/WalletPay.svelte
@@ -11,6 +11,8 @@
   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 {payInvoice} from "@app/core/commands"
   import {pushToast} from "@app/util/toast"
@@ -53,12 +55,8 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Pay with Lightning</div>
-      {/snippet}
-      {#snippet info()}
-        Use your Nostr wallet to send Bitcoin payments over lightning.
-      {/snippet}
+      <ModalTitle>Pay with Lightning</ModalTitle>
+      <ModalSubtitle>Use your Nostr wallet to send Bitcoin payments over lightning.</ModalSubtitle>
     </ModalHeader>
     {#if invoice}
       <div class="card2 bg-alt flex flex-col gap-2">
diff --git a/src/app/components/WalletUpdateReceivingAddress.svelte b/src/app/components/WalletUpdateReceivingAddress.svelte
index 46432cf8..f78f260a 100644
--- a/src/app/components/WalletUpdateReceivingAddress.svelte
+++ b/src/app/components/WalletUpdateReceivingAddress.svelte
@@ -4,6 +4,8 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.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 Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -47,12 +49,8 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        Update Lightning Address
-      {/snippet}
-      {#snippet info()}
-        Update your lightning address for receiving payments.
-      {/snippet}
+      <ModalTitle>Update Lightning Address</ModalTitle>
+      <ModalSubtitle>Update your lightning address for receiving payments.</ModalSubtitle>
     </ModalHeader>
 
     <div class="column gap-4">
diff --git a/src/app/components/Zap.svelte b/src/app/components/Zap.svelte
index e84208c7..e842a4a2 100644
--- a/src/app/components/Zap.svelte
+++ b/src/app/components/Zap.svelte
@@ -13,6 +13,8 @@
   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 EmojiButton from "@lib/components/EmojiButton.svelte"
   import ProfileLink from "@app/components/ProfileLink.svelte"
@@ -114,12 +116,8 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>Send a Zap</div>
-      {/snippet}
-      {#snippet info()}
-        <div>To <ProfileLink {pubkey} class="!text-primary" /></div>
-      {/snippet}
+      <ModalTitle>Send a Zap</ModalTitle>
+      <ModalSubtitle>To <ProfileLink {pubkey} class="!text-primary" /></ModalSubtitle>
     </ModalHeader>
     <FieldInline class="!grid-cols-3">
       {#snippet label()}
diff --git a/src/lib/components/Confirm.svelte b/src/lib/components/Confirm.svelte
index 671a6270..7f11cc86 100644
--- a/src/lib/components/Confirm.svelte
+++ b/src/lib/components/Confirm.svelte
@@ -6,6 +6,8 @@
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.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 Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -37,12 +39,8 @@
 <Modal tag="form" onsubmit={preventDefault(tryConfirm)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
-        <div>{restProps.title || "Are you sure?"}</div>
-      {/snippet}
-      {#snippet info()}
-        <div>{subtitle}</div>
-      {/snippet}
+      <ModalTitle>{restProps.title || "Are you sure?"}</ModalTitle>
+      <ModalSubtitle>{subtitle}</ModalSubtitle>
     </ModalHeader>
     <p class="text-center">{message}</p>
   </ModalBody>
diff --git a/src/lib/components/Dialog.svelte b/src/lib/components/Dialog.svelte
index c6f13a5f..a204f3a7 100644
--- a/src/lib/components/Dialog.svelte
+++ b/src/lib/components/Dialog.svelte
@@ -37,12 +37,12 @@
   <button
     type="button"
     aria-label="Close dialog"
-    class="absolute inset-0 cursor-pointer bg-[#ccc] opacity-75 dark:bg-black"
-    transition:fade={{duration: 300}}
+    class="absolute inset-0 cursor-pointer bg-black opacity-50 dark:opacity-75"
+    transition:fade={{duration: 200}}
     onclick={onClose}>
   </button>
   <div class={wrapperClass}>
-    <div class={innerClass} transition:fly={{duration: 300}}>
+    <div class={innerClass} transition:fly>
       <children.component {...children.props} />
     </div>
   </div>
diff --git a/src/lib/components/ModalHeader.svelte b/src/lib/components/ModalHeader.svelte
index 23430fdb..f0a0f26a 100644
--- a/src/lib/components/ModalHeader.svelte
+++ b/src/lib/components/ModalHeader.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
+  import type {Snippet} from "svelte"
+
   interface Props {
-    title?: import("svelte").Snippet
-    info?: import("svelte").Snippet
+    children: Snippet
   }
 
-  const {title, info}: Props = $props()
+  const {children}: Props = $props()
 </script>
 
 <div class="flex flex-col m-auto max-w-xs gap-2 py-4">
-  <h1 class="heading">{@render title?.()}</h1>
-  <p class="text-center text-sm opacity-75">{@render info?.()}</p>
+  {@render children()}
 </div>
diff --git a/src/lib/components/ModalSubtitle.svelte b/src/lib/components/ModalSubtitle.svelte
new file mode 100644
index 00000000..186ebf59
--- /dev/null
+++ b/src/lib/components/ModalSubtitle.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type {Snippet} from "svelte"
+
+  interface Props {
+    children: Snippet
+  }
+
+  const {children}: Props = $props()
+</script>
+
+<p class="text-center text-sm opacity-75">{@render children()}</p>
diff --git a/src/lib/components/ModalTitle.svelte b/src/lib/components/ModalTitle.svelte
new file mode 100644
index 00000000..bf165c77
--- /dev/null
+++ b/src/lib/components/ModalTitle.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type {Snippet} from "svelte"
+
+  interface Props {
+    children: Snippet
+  }
+
+  const {children}: Props = $props()
+</script>
+
+<h1 class="heading">{@render children()}</h1>