Add modal body to some menus

src/app/components/ChatMessageMenuMobile.svelte

@@ -2,17 +2,19 @@
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import type {TrustedEvent} from "@welshman/util"
   import {sendWrapped} from "@welshman/app"
+  import SmileCircle from "@assets/icons/smile-circle.svg?dataurl"
+  import Reply from "@assets/icons/reply-2.svg?dataurl"
+  import Copy from "@assets/icons/copy.svg?dataurl"
+  import Code2 from "@assets/icons/code-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
   import Button from "@lib/components/Button.svelte"
   import EmojiPicker from "@lib/components/EmojiPicker.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
   import {makeReaction} from "@app/core/commands"
   import {pushModal} from "@app/util/modal"
   import {clip} from "@app/util/toast"
-  import SmileCircle from "@assets/icons/smile-circle.svg?dataurl"
-  import Reply from "@assets/icons/reply-2.svg?dataurl"
-  import Copy from "@assets/icons/copy.svg?dataurl"
-  import Code2 from "@assets/icons/code-2.svg?dataurl"
 
   type Props = {
     pubkeys: string[]
@@ -45,21 +47,23 @@
   const showInfo = () => pushModal(EventInfo, {event}, {replaceState: true})
 </script>
 
-<div class="col-2">
+<Modal>
-  <Button class="btn btn-neutral" onclick={showInfo}>
+  <ModalBody>
-    <Icon size={4} icon={Code2} />
+    <Button class="btn btn-neutral" onclick={showInfo}>
-    Message Info
+      <Icon size={4} icon={Code2} />
-  </Button>
+      Message Info
-  <Button class="btn btn-neutral w-full" onclick={copyText}>
+    </Button>
-    <Icon size={4} icon={Copy} />
+    <Button class="btn btn-neutral w-full" onclick={copyText}>
-    Copy Text
+      <Icon size={4} icon={Copy} />
-  </Button>
+      Copy Text
-  <Button class="btn btn-neutral w-full" onclick={sendReply}>
+    </Button>
-    <Icon size={4} icon={Reply} />
+    <Button class="btn btn-neutral w-full" onclick={sendReply}>
-    Send Reply
+      <Icon size={4} icon={Reply} />
-  </Button>
+      Send Reply
-  <Button class="btn btn-primary w-full" onclick={showEmojiPicker}>
+    </Button>
-    <Icon size={4} icon={SmileCircle} />
+    <Button class="btn btn-primary w-full" onclick={showEmojiPicker}>
-    Send Reaction
+      <Icon size={4} icon={SmileCircle} />
-  </Button>
+      Send Reaction
-</div>
+    </Button>
+  </ModalBody>
+</Modal>

src/app/components/RoomItemMenuMobile.svelte

@@ -11,6 +11,8 @@
   import Button from "@lib/components/Button.svelte"
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
   import EmojiPicker from "@lib/components/EmojiPicker.svelte"
   import ZapButton from "@app/components/ZapButton.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
@@ -54,35 +56,37 @@
   const showDelete = () => pushModal(EventDeleteConfirm, {url, event})
 </script>
 
-<div class="flex flex-col gap-2">
+<Modal>
-  {#if event.pubkey === $pubkey}
+  <ModalBody>
-    <Button class="btn btn-neutral text-error" onclick={showDelete}>
+    {#if event.pubkey === $pubkey}
-      <Icon size={4} icon={TrashBin2} />
+      <Button class="btn btn-neutral text-error" onclick={showDelete}>
-      Delete Message
+        <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}
+    {#if path}
-  <Button class="btn btn-neutral" onclick={showInfo}>
+      <Link class="btn btn-neutral" href={path}>
-    <Icon size={4} icon={Code2} />
+        <Icon size={4} icon={MenuDots} />
-    Message Info
+        View Details
-  </Button>
+      </Link>
-  {#if path}
+    {/if}
-    <Link class="btn btn-neutral" href={path}>
+    {#if ENABLE_ZAPS}
-      <Icon size={4} icon={MenuDots} />
+      <ZapButton replaceState {url} {event} class="btn btn-neutral w-full">
-      View Details
+        <Icon size={4} icon={Bolt} />
-    </Link>
+        Send Zap
-  {/if}
+      </ZapButton>
-  {#if ENABLE_ZAPS}
+    {/if}
-    <ZapButton replaceState {url} {event} class="btn btn-neutral w-full">
+    <Button class="btn btn-neutral w-full" onclick={sendReply}>
-      <Icon size={4} icon={Bolt} />
+      <Icon size={4} icon={Reply} />
-      Send Zap
+      Send Reply
-    </ZapButton>
+    </Button>
-  {/if}
+    <Button class="btn btn-neutral w-full" onclick={showEmojiPicker}>
-  <Button class="btn btn-neutral w-full" onclick={sendReply}>
+      <Icon size={4} icon={SmileCircle} />
-    <Icon size={4} icon={Reply} />
+      Send Reaction
-    Send Reply
+    </Button>
-  </Button>
+  </ModalBody>
-  <Button class="btn btn-neutral w-full" onclick={showEmojiPicker}>
+</Modal>
-    <Icon size={4} icon={SmileCircle} />
-    Send Reaction
-  </Button>
-</div>

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-4 p-6", props.class)}>
+<div class={cx("scroll-container overflow-y-auto min-h-0 flex flex-col gap-2 p-6", props.class)}>
   {@render children?.()}
 </div>