Apply layout changes to chat

CHANGELOG.md

@@ -10,6 +10,7 @@
 * Fix nevent hints for url-specific stuff
 * Add alerts via Anchor
 * Fix confirm and reactions on mobile
+* Add reply to chat on mobile
 
 # 0.2.11
 

src/app/components/ChannelMessage.svelte

@@ -99,15 +99,17 @@
   <div class="row-2 ml-10 mt-1">
     <ReactionSummary {url} {event} {onReactionClick} reactionClass="tooltip-right" />
   </div>
-  <button
-    class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all"
-    class:group-hover:opacity-100={!isMobile}>
-    <ChannelMessageEmojiButton {url} {room} {event} />
-    {#if replyTo}
-      <Button class="btn join-item btn-xs" onclick={reply}>
-        <Icon icon="reply" size={4} />
-      </Button>
-    {/if}
-    <ChannelMessageMenuButton {url} {event} />
-  </button>
+  {#if !isMobile}
+    <button
+      class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all"
+      class:group-hover:opacity-100={!isMobile}>
+      <ChannelMessageEmojiButton {url} {room} {event} />
+      {#if replyTo}
+        <Button class="btn join-item btn-xs" onclick={reply}>
+          <Icon icon="reply" size={4} />
+        </Button>
+      {/if}
+      <ChannelMessageMenuButton {url} {event} />
+    </button>
+  {/if}
 </TapTarget>

src/app/components/Chat.svelte

@@ -70,6 +70,8 @@
   let loading = $state(true)
   let compose: ChatCompose | undefined = $state()
   let parent: TrustedEvent | undefined = $state()
+  let parentPreview: HTMLElement | undefined = $state()
+  let dynamicPadding: HTMLElement | undefined = $state()
 
   const elements = $derived.by(() => {
     const elements = []
@@ -104,6 +106,16 @@
   onMount(() => {
     // Don't use loadInboxRelaySelection because we want to force reload
     load({filters: [{kinds: [INBOX_RELAYS], authors: others}]})
+
+    const observer = new ResizeObserver(() => {
+      dynamicPadding!.style.minHeight = `${parentPreview!.offsetHeight}px`
+    })
+
+    observer.observe(parentPreview!)
+
+    return () => {
+      observer.unobserve(parentPreview!)
+    }
   })
 
   setTimeout(() => {
@@ -111,110 +123,113 @@
   }, 5000)
 </script>
 
-<div class="relative flex h-full w-full flex-col">
-  {#if others.length > 0}
-    <PageBar>
-      {#snippet title()}
-        <div class="flex flex-col gap-1 sm:flex-row sm:gap-2">
-          {#if others.length === 1}
-            {@const pubkey = others[0]}
-            {@const onClick = () => pushModal(ProfileDetail, {pubkey})}
-            <Button onclick={onClick} class="row-2">
-              <ProfileCircle {pubkey} size={5} />
-              <ProfileName {pubkey} />
-            </Button>
-          {:else}
-            <div class="flex items-center gap-2">
-              <ProfileCircles pubkeys={others} size={5} />
-              <p class="overflow-hidden text-ellipsis whitespace-nowrap">
-                <ProfileName pubkey={others[0]} />
-                and
-                {#if others.length === 2}
-                  <ProfileName pubkey={others[1]} />
-                {:else}
-                  {others.length - 1}
-                  {others.length > 2 ? "others" : "other"}
-                {/if}
-              </p>
-            </div>
-            {#if others.length > 2}
-              <Button onclick={showMembers} class="btn btn-link hidden sm:block"
-                >Show all members</Button>
-            {/if}
-          {/if}
-        </div>
-      {/snippet}
-      {#snippet action()}
-        <div>
-          {#if remove($pubkey, missingInboxes).length > 0}
-            {@const count = remove($pubkey, missingInboxes).length}
-            {@const label = count > 1 ? "inboxes are" : "inbox is"}
-            <div
-              class="row-2 badge badge-error badge-lg tooltip tooltip-left cursor-pointer"
-              data-tip="{count} {label} not configured.">
-              <Icon icon="danger" />
-              {count}
-            </div>
-          {/if}
-        </div>
-      {/snippet}
-    </PageBar>
-  {/if}
-  <div class="-mt-2 flex flex-grow flex-col-reverse overflow-auto py-2">
-    {#if missingInboxes.includes($pubkey!)}
-      <div class="py-12">
-        <div class="card2 col-2 m-auto max-w-md items-center text-center">
-          <p class="row-2 text-lg text-error">
-            <Icon icon="danger" />
-            Your inbox is not configured.
-          </p>
-          <p>
-            In order to deliver messages, {PLATFORM_NAME} needs to know where to send them. Please visit
-            your <Link class="link" href="/settings/relays">relay settings page</Link> to set up your
-            inbox.
-          </p>
-        </div>
-      </div>
-    {:else if missingInboxes.length > 0}
-      <div class="py-12">
-        <div class="card2 col-2 m-auto max-w-md items-center text-center">
-          <p class="row-2 text-lg text-error">
-            <Icon icon="danger" />
-            {missingInboxes.length}
-            {missingInboxes.length > 1 ? "inboxes are" : "inbox is"} not configured.
-          </p>
-          <p>
-            In order to deliver messages, {PLATFORM_NAME} needs to know where to send them. Please make
-            sure everyone in this conversation has set up their inbox relays.
-          </p>
-        </div>
-      </div>
-    {/if}
-    {#each elements as { type, id, value, showPubkey } (id)}
-      {#if type === "date"}
-        <Divider>{value}</Divider>
-      {:else}
-        <ChatMessage
-          event={$state.snapshot(value as TrustedEvent)}
-          {pubkeys}
-          {showPubkey}
-          {replyTo} />
-      {/if}
-    {/each}
-    <p
-      class="m-auto flex h-10 max-w-sm flex-col items-center justify-center gap-4 py-20 text-center">
-      <Spinner {loading}>
-        {#if loading}
-          Looking for messages...
+{#if others.length > 0}
+  <PageBar class="chat__page-bar">
+    {#snippet title()}
+      <div class="flex flex-col gap-1 sm:flex-row sm:gap-2">
+        {#if others.length === 1}
+          {@const pubkey = others[0]}
+          {@const onClick = () => pushModal(ProfileDetail, {pubkey})}
+          <Button onclick={onClick} class="row-2">
+            <ProfileCircle {pubkey} size={5} />
+            <ProfileName {pubkey} />
+          </Button>
         {:else}
-          End of message history
+          <div class="flex items-center gap-2">
+            <ProfileCircles pubkeys={others} size={5} />
+            <p class="overflow-hidden text-ellipsis whitespace-nowrap">
+              <ProfileName pubkey={others[0]} />
+              and
+              {#if others.length === 2}
+                <ProfileName pubkey={others[1]} />
+              {:else}
+                {others.length - 1}
+                {others.length > 2 ? "others" : "other"}
+              {/if}
+            </p>
+          </div>
+          {#if others.length > 2}
+            <Button onclick={showMembers} class="btn btn-link hidden sm:block"
+              >Show all members</Button>
+          {/if}
         {/if}
-      </Spinner>
-      {@render info?.()}
-    </p>
-  </div>
-  {#if parent}
-    <ChatComposeParent event={parent} clear={clearParent} verb="Replying to" />
+      </div>
+    {/snippet}
+    {#snippet action()}
+      <div>
+        {#if remove($pubkey, missingInboxes).length > 0}
+          {@const count = remove($pubkey, missingInboxes).length}
+          {@const label = count > 1 ? "inboxes are" : "inbox is"}
+          <div
+            class="row-2 badge badge-error badge-lg tooltip tooltip-left cursor-pointer"
+            data-tip="{count} {label} not configured.">
+            <Icon icon="danger" />
+            {count}
+          </div>
+        {/if}
+      </div>
+    {/snippet}
+  </PageBar>
+{/if}
+
+<div class="chat__messages scroll-container">
+  <div bind:this={dynamicPadding}></div>
+  {#if missingInboxes.includes($pubkey!)}
+    <div class="py-12">
+      <div class="card2 col-2 m-auto max-w-md items-center text-center">
+        <p class="row-2 text-lg text-error">
+          <Icon icon="danger" />
+          Your inbox is not configured.
+        </p>
+        <p>
+          In order to deliver messages, {PLATFORM_NAME} needs to know where to send them. Please visit
+          your <Link class="link" href="/settings/relays">relay settings page</Link> to set up your inbox.
+        </p>
+      </div>
+    </div>
+  {:else if missingInboxes.length > 0}
+    <div class="py-12">
+      <div class="card2 col-2 m-auto max-w-md items-center text-center">
+        <p class="row-2 text-lg text-error">
+          <Icon icon="danger" />
+          {missingInboxes.length}
+          {missingInboxes.length > 1 ? "inboxes are" : "inbox is"} not configured.
+        </p>
+        <p>
+          In order to deliver messages, {PLATFORM_NAME} needs to know where to send them. Please make
+          sure everyone in this conversation has set up their inbox relays.
+        </p>
+      </div>
+    </div>
   {/if}
+  {#each elements as { type, id, value, showPubkey } (id)}
+    {#if type === "date"}
+      <Divider>{value}</Divider>
+    {:else}
+      <ChatMessage
+        event={$state.snapshot(value as TrustedEvent)}
+        {pubkeys}
+        {showPubkey}
+        {replyTo} />
+    {/if}
+  {/each}
+  <p class="m-auto flex h-10 max-w-sm flex-col items-center justify-center gap-4 py-20 text-center">
+    <Spinner {loading}>
+      {#if loading}
+        Looking for messages...
+      {:else}
+        End of message history
+      {/if}
+    </Spinner>
+    {@render info?.()}
+  </p>
+</div>
+
+<div class="chat__compose bg-base-200">
+  <div bind:this={parentPreview}>
+    {#if parent}
+      <ChatComposeParent event={parent} clear={clearParent} verb="Replying to" />
+    {/if}
+  </div>
   <ChatCompose bind:this={compose} {onSubmit} />
 </div>

src/app/components/ChatMessage.svelte

@@ -27,12 +27,12 @@
 
   interface Props {
     event: TrustedEvent
-    replyTo?: any
+    replyTo: (event: TrustedEvent) => void
     pubkeys: string[]
     showPubkey?: boolean
   }
 
-  const {event, replyTo = undefined, pubkeys, showPubkey = false}: Props = $props()
+  const {event, replyTo, pubkeys, showPubkey = false}: Props = $props()
 
   const thunk = $thunks[event.id]
   const isOwn = event.pubkey === $pubkey
@@ -40,6 +40,8 @@
   const profileDisplay = deriveProfileDisplay(event.pubkey)
   const [_, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
 
+  const reply = () => replyTo(event)
+
   const onReactionClick = async (content: string, events: TrustedEvent[]) => {
     const reaction = events.find(e => e.pubkey === $pubkey)
     const template = reaction ? makeDelete({event: reaction}) : makeReaction({event, content})
@@ -49,7 +51,7 @@
 
   const openProfile = () => pushModal(ProfileDetail, {pubkey: event.pubkey})
 
-  const showMobileMenu = () => pushModal(ChatMessageMenuMobile, {event, pubkeys})
+  const showMobileMenu = () => pushModal(ChatMessageMenuMobile, {event, pubkeys, reply})
 
   const togglePopover = () => {
     if (popoverIsVisible) {
@@ -72,31 +74,33 @@
   class:chat-start={!isOwn}
   class:flex-row-reverse={!isOwn}
   class:chat-end={isOwn}>
-  <Tippy
-    bind:popover
-    component={ChatMessageMenu}
-    props={{event, pubkeys, popover, replyTo}}
-    params={{
-      interactive: true,
-      trigger: "manual",
-      onShow() {
-        popoverIsVisible = true
-      },
-      onHidden() {
-        popoverIsVisible = false
-      },
-    }}>
-    <button
-      type="button"
-      class="opacity-0 transition-all"
-      class:group-hover:opacity-100={!isMobile}
-      onclick={togglePopover}>
-      <Icon icon="menu-dots" size={4} />
-    </button>
-  </Tippy>
+  {#if !isMobile}
+    <Tippy
+      bind:popover
+      component={ChatMessageMenu}
+      props={{event, pubkeys, popover, replyTo}}
+      params={{
+        interactive: true,
+        trigger: "manual",
+        onShow() {
+          popoverIsVisible = true
+        },
+        onHidden() {
+          popoverIsVisible = false
+        },
+      }}>
+      <button
+        type="button"
+        class="opacity-0 transition-all"
+        class:group-hover:opacity-100={!isMobile}
+        onclick={togglePopover}>
+        <Icon icon="menu-dots" size={4} />
+      </button>
+    </Tippy>
+  {/if}
   <div class="flex min-w-0 flex-col" class:items-end={isOwn}>
     <TapTarget
-      class="bg-alt chat-bubble mx-1 flex cursor-auto flex-col gap-1 text-left lg:max-w-2xl"
+      class="bg-alt chat-bubble mx-1 mb-2 flex cursor-auto flex-col gap-1 text-left lg:max-w-2xl"
       onTap={showMobileMenu}>
       {#if showPubkey}
         <div class="flex items-center gap-2">

src/app/components/ChatMessageMenuMobile.svelte

@@ -9,7 +9,13 @@
   import {pushModal} from "@app/modal"
   import {clip} from "@app/toast"
 
-  const {event, pubkeys} = $props()
+  type Props = {
+    pubkeys: string[]
+    event: TrustedEvent
+    reply: () => void
+  }
+
+  const {event, pubkeys, reply}: Props = $props()
 
   const onEmoji = ((event: TrustedEvent, emoji: NativeEmoji) => {
     history.back()
@@ -18,6 +24,11 @@
 
   const showEmojiPicker = () => pushModal(EmojiPicker, {onClick: onEmoji}, {replaceState: true})
 
+  const sendReply = () => {
+    history.back()
+    reply()
+  }
+
   const copyText = () => {
     history.back()
     clip(event.content)
@@ -31,6 +42,10 @@
     <Icon size={4} icon="smile-circle" />
     Send Reaction
   </Button>
+  <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={copyText}>
     <Icon size={4} icon="copy" />
     Copy Text