Restructure the mobile message menu around react, reply and zap (#397)

Reviewed-on: https://gitea.coracle.social/coracle/flotilla/pulls/397
Co-authored-by: Coracle-Bot <npub1klq6260@nostr.local>

src/app/components/ChatMessageMenuMobile.svelte

@@ -6,9 +6,12 @@
   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 AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
+  import AltArrowUp from "@assets/icons/alt-arrow-up.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
+  import {slideAndFade} from "@lib/transition"
   import Button from "@lib/components/Button.svelte"
   import EmojiPicker from "@lib/components/EmojiPicker.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
@@ -25,6 +28,8 @@
 
   const {event, pubkeys, reply, edit}: Props = $props()
 
+  const tile = "button h-auto flex-col gap-1.5 py-4 text-xs"
+
   const onEmoji = async (emoji: NativeEmoji) => {
     history.back()
 
@@ -51,33 +56,49 @@
   }
 
   const showInfo = () => pushModal(EventInfo, {event}, {replaceState: true})
+
+  const toggleMore = () => {
+    showMore = !showMore
+  }
+
+  let showMore = $state(false)
 </script>
 
 <Modal>
   <ModalBody>
-    <div class="flex flex-col gap-2">
+    <div class="grid grid-cols-2 gap-2">
-      <Button class="button button-neutral" onclick={showInfo}>
+      <Button class="{tile} button-outline button-primary" onclick={showEmojiPicker}>
-        <Icon size={4} icon={Code2} />
+        <Icon size={6} icon={SmileCircle} />
-        Message Info
+        React
       </Button>
-      <Button class="button button-neutral w-full" onclick={copyText}>
+      <Button class="{tile} button-neutral" onclick={sendReply}>
-        <Icon size={4} icon={Copy} />
+        <Icon size={6} icon={Reply} />
-        Copy Text
+        Reply
       </Button>
-      <Button class="button button-neutral w-full" onclick={sendReply}>
+    </div>
-        <Icon size={4} icon={Reply} />
+    <div class="flex flex-col">
-        Send Reply
+      <Button class="button button-neutral w-full" onclick={toggleMore}>
+        <Icon size={4} icon={showMore ? AltArrowUp : AltArrowDown} />
+        {showMore ? "Fewer Options" : "More Options"}
       </Button>
-      {#if edit}
+      {#if showMore}
-        <Button class="button button-neutral w-full" onclick={sendEdit}>
+        <div transition:slideAndFade class="flex flex-col gap-2 pt-2">
-          <Icon size={4} icon={Pen} />
+          {#if edit}
-          Edit Message
+            <Button class="button button-neutral w-full" onclick={sendEdit}>
-        </Button>
+              <Icon size={4} icon={Pen} />
+              Edit Message
+            </Button>
+          {/if}
+          <Button class="button button-neutral w-full" onclick={copyText}>
+            <Icon size={4} icon={Copy} />
+            Copy Text
+          </Button>
+          <Button class="button button-neutral w-full" onclick={showInfo}>
+            <Icon size={4} icon={Code2} />
+            Message Info
+          </Button>
+        </div>
       {/if}
-      <Button class="button button-primary w-full" onclick={showEmojiPicker}>
-        <Icon size={4} icon={SmileCircle} />
-        Send Reaction
-      </Button>
     </div>
   </ModalBody>
 </Modal>

src/app/components/RoomItemMenuMobile.svelte

@@ -4,14 +4,18 @@
   import * as nip19 from "nostr-tools/nip19"
   import {getIdOrAddress, tagSpec, tagValue, toNostrURI} from "@welshman/util"
   import Bolt from "@assets/icons/bolt.svg?dataurl"
+  import Pen from "@assets/icons/pen.svg?dataurl"
   import Reply from "@assets/icons/reply-2.svg?dataurl"
   import ShareCircle from "@assets/icons/share-circle.svg?dataurl"
   import Code2 from "@assets/icons/code-2.svg?dataurl"
   import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
   import SmileCircle from "@assets/icons/smile-circle.svg?dataurl"
   import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
+  import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
+  import AltArrowUp from "@assets/icons/alt-arrow-up.svg?dataurl"
   import Pin from "@assets/icons/pin.svg?dataurl"
   import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
+  import {slideAndFade} from "@lib/transition"
   import Button from "@lib/components/Button.svelte"
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
@@ -34,15 +38,17 @@
     url: string
     event: TrustedEvent
     reply: () => void
+    edit?: () => void
   }
 
-  const {url, event, reply}: Props = $props()
+  const {url, event, reply, edit}: Props = $props()
 
   const h = tagValue(tagSpec(ROOM), event.tags) ?? ""
   const path = makeContentPath(url, event.kind, getIdOrAddress(event))
   const pinIds = $roomPinLists.pins(url, h).$
   const userIsRoomAdmin = deriveUserIsRoomAdmin(url, h)
   const isPinned = $derived($pinIds.includes(event.id))
+  const tile = "button h-auto flex-col gap-1.5 py-4 text-xs"
 
   const onEmoji = async (emoji: NativeEmoji) => {
     history.back()
@@ -67,6 +73,11 @@
     reply()
   }
 
+  const sendEdit = () => {
+    history.back()
+    edit?.()
+  }
+
   const share = () => {
     history.back()
     shareEvent(url, "Message", event)
@@ -76,6 +87,10 @@
 
   const showDelete = () => pushModal(EventDeleteConfirm, {url, event})
 
+  const toggleMore = () => {
+    showMore = !showMore
+  }
+
   const togglePin = async () => {
     if (!h) return
 
@@ -91,57 +106,75 @@
       pushToast({message: isPinned ? "Message unpinned" : "Message pinned"})
     }
   }
+
+  let showMore = $state(false)
 </script>
 
 <Modal>
   <ModalBody>
-    <div class="flex flex-col gap-2">
+    <div class="grid gap-2 {ENABLE_ZAPS ? 'grid-cols-3' : 'grid-cols-2'}">
-      {#if event.pubkey === $user.pubkey}
-        <Button class="button button-neutral text-error" onclick={showDelete}>
-          <Icon size={4} icon={TrashBin2} />
-          Delete Message
-        </Button>
-      {/if}
-      <Button class="button button-neutral" onclick={showInfo}>
-        <Icon size={4} icon={Code2} />
-        Message Info
-      </Button>
-      <Button class="button button-neutral" onclick={share}>
-        <Icon size={4} icon={ShareCircle} />
-        Share
-      </Button>
-      {#if path}
-        <Link class="button button-neutral" href={path}>
-          <Icon size={4} icon={MenuDots} />
-          View Details
-        </Link>
-      {/if}
-      {#if h && $userIsRoomAdmin}
-        <Button class="button button-neutral w-full" onclick={togglePin}>
-          <Icon size={4} icon={Pin} />
-          {isPinned ? "Unpin Message" : "Pin Message"}
-        </Button>
-      {/if}
-      {#if h}
-        <Button class="button button-neutral w-full" onclick={createThread}>
-          <Icon size={4} icon={NotesMinimalistic} />
-          Create a Thread
-        </Button>
-      {/if}
       {#if ENABLE_ZAPS}
-        <ZapButton replaceState {url} {event} class="button button-neutral w-full">
+        <ZapButton replaceState {url} {event} class="{tile} button-outline button-secondary">
-          <Icon size={4} icon={Bolt} />
+          <Icon size={6} icon={Bolt} />
-          Send Zap
+          Zap
         </ZapButton>
       {/if}
-      <Button class="button button-neutral w-full" onclick={sendReply}>
+      <Button class="{tile} button-outline button-primary" onclick={showEmojiPicker}>
-        <Icon size={4} icon={Reply} />
+        <Icon size={6} icon={SmileCircle} />
-        Send Reply
+        React
       </Button>
-      <Button class="button button-neutral w-full" onclick={showEmojiPicker}>
+      <Button class="{tile} button-neutral" onclick={sendReply}>
-        <Icon size={4} icon={SmileCircle} />
+        <Icon size={6} icon={Reply} />
-        Send Reaction
+        Reply
       </Button>
     </div>
+    <div class="flex flex-col">
+      <Button class="button button-neutral w-full" onclick={toggleMore}>
+        <Icon size={4} icon={showMore ? AltArrowUp : AltArrowDown} />
+        {showMore ? "Fewer Options" : "More Options"}
+      </Button>
+      {#if showMore}
+        <div transition:slideAndFade class="flex flex-col gap-2 pt-2">
+          {#if edit}
+            <Button class="button button-neutral w-full" onclick={sendEdit}>
+              <Icon size={4} icon={Pen} />
+              Edit Message
+            </Button>
+          {/if}
+          <Button class="button button-neutral w-full" onclick={share}>
+            <Icon size={4} icon={ShareCircle} />
+            Share
+          </Button>
+          {#if h}
+            <Button class="button button-neutral w-full" onclick={createThread}>
+              <Icon size={4} icon={NotesMinimalistic} />
+              Create a Thread
+            </Button>
+          {/if}
+          {#if h && $userIsRoomAdmin}
+            <Button class="button button-neutral w-full" onclick={togglePin}>
+              <Icon size={4} icon={Pin} />
+              {isPinned ? "Unpin Message" : "Pin Message"}
+            </Button>
+          {/if}
+          {#if path}
+            <Link class="button button-neutral w-full" href={path}>
+              <Icon size={4} icon={MenuDots} />
+              View Details
+            </Link>
+          {/if}
+          <Button class="button button-neutral w-full" onclick={showInfo}>
+            <Icon size={4} icon={Code2} />
+            Message Info
+          </Button>
+          {#if event.pubkey === $user.pubkey}
+            <Button class="button button-neutral w-full text-error" onclick={showDelete}>
+              <Icon size={4} icon={TrashBin2} />
+              Delete Message
+            </Button>
+          {/if}
+        </div>
+      {/if}
+    </div>
   </ModalBody>
 </Modal>

src/lib/components/button.css

@@ -30,13 +30,14 @@
     }
   }
 
-  /* secondary — outline that fills on hover */
+  /* secondary — solid fill that darkens on hover */
   .button-secondary {
-    @apply bg-surface text-secondary border-secondary;
+    @apply bg-secondary text-secondary-content;
+    border-color: rgba(0, 0, 0, 0.1);
     box-shadow: var(--shadow-sm);
 
     &:hover {
-      @apply bg-secondary text-secondary-content;
+      @apply bg-secondary-bold;
     }
   }
 
@@ -80,15 +81,41 @@
     }
   }
 
-  /* outline */
+  /* outline — border and text carry the color, fill arrives on hover. Stands
+     alone as a neutral outline, or pairs with a color class. */
   .button-outline {
-    @apply text-content bg-transparent;
+    @apply text-content border-line bg-transparent;
+    box-shadow: var(--shadow-sm);
 
     &:hover {
       @apply border-primary text-primary;
     }
   }
 
+  .button-outline.button-primary {
+    @apply text-primary border-primary bg-transparent;
+
+    &:hover {
+      @apply bg-primary text-primary-content;
+    }
+  }
+
+  .button-outline.button-secondary {
+    @apply text-secondary border-secondary bg-transparent;
+
+    &:hover {
+      @apply bg-secondary text-secondary-content;
+    }
+  }
+
+  .button-outline.button-error {
+    @apply text-error border-error bg-transparent;
+
+    &:hover {
+      @apply bg-error text-error-content;
+    }
+  }
+
   /* sizes — height is explicit (not derived from padding/line-height) so sm/xs
      reliably change the button height even when the content is a fixed-size icon */
   .button,
@@ -139,30 +166,41 @@
   }
 }
 
-[data-fl-theme="clay"] .button-primary,
+/* these are unlayered, so they beat the @layer rules above no matter their
-[data-fl-theme="clay"] .button-error {
+   specificity — hence the :not(.button-outline) on every filled variant */
+[data-fl-theme="clay"] .button-primary:not(.button-outline),
+[data-fl-theme="clay"] .button-secondary:not(.button-outline),
+[data-fl-theme="clay"] .button-error:not(.button-outline) {
   box-shadow: var(--shadow-sm), var(--shadow-inset-strong);
 }
 
 /* hover lift + bigger offset shadow; active press + smaller offset shadow */
-[data-fl-theme="clay"] .button-primary:hover {
+[data-fl-theme="clay"] .button-primary:not(.button-outline):hover {
   background: var(--primary-bold);
   transform: translateY(-2px);
   box-shadow:
     6px 6px 0 rgba(var(--shadow-color), 0.3),
     var(--shadow-inset-strong);
 }
-[data-fl-theme="clay"] .button-secondary:hover,
+[data-fl-theme="clay"] .button-secondary:not(.button-outline):hover {
+  background: var(--secondary-bold);
+  transform: translateY(-2px);
+  box-shadow:
+    6px 6px 0 rgba(var(--shadow-color), 0.3),
+    var(--shadow-inset-strong);
+}
 [data-fl-theme="clay"] .button-neutral:hover,
-[data-fl-theme="clay"] .button-error:hover {
+[data-fl-theme="clay"] .button-outline:hover,
+[data-fl-theme="clay"] .button-error:not(.button-outline):hover {
   transform: translateY(-2px);
 }
-[data-fl-theme="clay"] .button-primary:active,
+[data-fl-theme="clay"] .button-primary:not(.button-outline):active,
-[data-fl-theme="clay"] .button-secondary:active,
+[data-fl-theme="clay"] .button-secondary:not(.button-outline):active,
-[data-fl-theme="clay"] .button-neutral:active {
+[data-fl-theme="clay"] .button-neutral:active,
+[data-fl-theme="clay"] .button-outline:active {
   transform: translateY(2px);
   box-shadow: 2px 2px 0 rgba(var(--shadow-color), 0.3);
 }
-[data-fl-theme="clay"] .button-error:active {
+[data-fl-theme="clay"] .button-error:not(.button-outline):active {
   transform: translateY(2px);
 }