From 81672080f564450591b79ef3526ad3b71c3078f7 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 24 Oct 2024 16:28:56 -0700
Subject: [PATCH] Add long press for chat messages

---
 src/app/components/ChatMessage.svelte         | 22 +++++++---
 .../components/ChatMessageMenuMobile.svelte   | 43 +++++++++++++++++++
 src/app/components/EventInfo.svelte           |  6 +--
 src/lib/components/FieldInline.svelte         |  2 +-
 src/lib/components/LongPress.svelte           | 15 +++++++
 src/routes/+layout.svelte                     |  1 +
 6 files changed, 80 insertions(+), 9 deletions(-)
 create mode 100644 src/app/components/ChatMessageMenuMobile.svelte
 create mode 100644 src/lib/components/LongPress.svelte

diff --git a/src/app/components/ChatMessage.svelte b/src/app/components/ChatMessage.svelte
index a829e161..f94dc005 100644
--- a/src/app/components/ChatMessage.svelte
+++ b/src/app/components/ChatMessage.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
+  import {onMount} from 'svelte'
   import {type Instance} from "tippy.js"
   import {hash} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {deriveProfile, deriveProfileDisplay, formatTimestampAsTime, pubkey} from "@welshman/app"
   import type {MergedThunk} from "@welshman/app"
+  import {isMobile} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
+  import LongPress from "@lib/components/LongPress.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import Button from "@lib/components/Button.svelte"
   import Content from "@app/components/Content.svelte"
@@ -14,8 +17,10 @@
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
   import ThunkStatus from "@app/components/ThunkStatus.svelte"
   import ChatMessageMenu from "@app/components/ChatMessageMenu.svelte"
+  import ChatMessageMenuMobile from "@app/components/ChatMessageMenuMobile.svelte"
   import {colors, pubkeyLink} from "@app/state"
   import {makeDelete, makeReaction, sendWrapped} from "@app/commands"
+  import {pushModal} from "@app/modal"
 
   export let event: TrustedEvent
   export let thunk: MergedThunk
@@ -33,6 +38,9 @@
     await sendWrapped({template, pubkeys})
   }
 
+  const showMobileMenu = () =>
+    pushModal(ChatMessageMenuMobile, {event})
+
   const togglePopover = () => {
     if (popoverIsVisible) {
       popover.hide()
@@ -67,12 +75,16 @@
         popoverIsVisible = false
       },
     }}>
-    <Button class="opacity-0 transition-all group-hover:opacity-100" on:click={togglePopover}>
+    <button
+      type="button"
+      class="opacity-0 transition-all"
+      class:group-hover:opacity-100={!isMobile}
+      on:click={togglePopover}>
       <Icon icon="menu-dots" size={4} />
-    </Button>
+    </button>
   </Tippy>
   <div class="flex flex-col">
-    <div class="chat-bubble mx-1 max-w-sm">
+    <LongPress class="text-left chat-bubble mx-1 max-w-sm" onLongPress={showMobileMenu}>
       <div class="flex w-full items-start gap-2">
         {#if showPubkey}
           <Link external href={pubkeyLink(event.pubkey)}>
@@ -100,8 +112,8 @@
           </div>
         </div>
       </div>
-    </div>
-    <div class="row-2 ml-12">
+    </LongPress>
+    <div class="row-2 ml-4 -mt-1 z-feature">
       <ReplySummary {event} />
       <ReactionSummary {event} {onReactionClick} />
     </div>
diff --git a/src/app/components/ChatMessageMenuMobile.svelte b/src/app/components/ChatMessageMenuMobile.svelte
new file mode 100644
index 00000000..60c5027e
--- /dev/null
+++ b/src/app/components/ChatMessageMenuMobile.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type {NativeEmoji} from "emoji-picker-element/shared"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import EmojiPicker from "@lib/components/EmojiPicker.svelte"
+  import ChatMessageEmojiButton from "@app/components/ChatMessageEmojiButton.svelte"
+  import EventInfo from "@app/components/EventInfo.svelte"
+  import {makeReaction, sendWrapped} from "@app/commands"
+  import {pushModal} from "@app/modal"
+  import {clip} from "@app/toast"
+
+  export let event
+  export let pubkeys
+
+  const onEmoji = (emoji: NativeEmoji) => {
+    history.back()
+    sendWrapped({template: makeReaction({event, content: emoji.unicode}), pubkeys})
+  }
+
+  const showEmojiPicker = () => pushModal(EmojiPicker, {onClick: onEmoji}, {replaceState: true})
+
+  const copyText = () => {
+    history.back()
+    clip(event.content)
+  }
+
+  const showInfo = () => pushModal(EventInfo, {event}, {replaceState: true})
+</script>
+
+<div class="col-2">
+  <Button class="btn btn-primary w-full" on:click={showEmojiPicker}>
+    <Icon size={4} icon="smile-circle" />
+    Send Reaction
+  </Button>
+  <Button class="btn btn-neutral w-full" on:click={copyText}>
+    <Icon size={4} icon="copy" />
+    Copy Text
+  </Button>
+  <Button class="btn btn-neutral" on:click={showInfo}>
+    <Icon size={4} icon="code-2" />
+    Message Details
+  </Button>
+</div>
diff --git a/src/app/components/EventInfo.svelte b/src/app/components/EventInfo.svelte
index 89ff4c3a..597a711d 100644
--- a/src/app/components/EventInfo.svelte
+++ b/src/app/components/EventInfo.svelte
@@ -25,7 +25,7 @@
     <p slot="label">Event ID</p>
     <label class="input input-bordered flex w-full items-center gap-2" slot="input">
       <Icon icon="file" />
-      <input type="text" class="ellipsize grow" value={note1} />
+      <input type="text" class="ellipsize min-w-0 grow" value={note1} />
       <Button on:click={copyId} class="flex items-center">
         <Icon icon="copy" />
       </Button>
@@ -35,14 +35,14 @@
     <p slot="label">Author Pubkey</p>
     <label class="input input-bordered flex w-full items-center gap-2" slot="input">
       <Icon icon="user-circle" />
-      <input type="text" class="ellipsize grow" value={npub1} />
+      <input type="text" class="ellipsize min-w-0 grow" value={npub1} />
       <Button on:click={copyPubkey} class="flex items-center">
         <Icon icon="copy" />
       </Button>
     </label>
   </FieldInline>
   <div class="relative">
-    <pre class="card2 card2-sm bg-alt overflow-auto"><code>{json}</code></pre>
+    <pre class="card2 card2-sm bg-alt overflow-auto text-xs"><code>{json}</code></pre>
     <p class="absolute right-2 top-2 flex flex-grow items-center justify-between">
       <Button on:click={copyJson} class="btn btn-neutral btn-sm flex items-center">
         <Icon icon="copy" /> Copy
diff --git a/src/lib/components/FieldInline.svelte b/src/lib/components/FieldInline.svelte
index c15cffcd..5017ce5c 100644
--- a/src/lib/components/FieldInline.svelte
+++ b/src/lib/components/FieldInline.svelte
@@ -1,4 +1,4 @@
-<div class="grid grid-cols-2 gap-2 {$$props.class}">
+<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 {$$props.class}">
   <label class="flex items-center gap-2 font-bold">
     <slot name="label" />
   </label>
diff --git a/src/lib/components/LongPress.svelte b/src/lib/components/LongPress.svelte
new file mode 100644
index 00000000..0e4c36cb
--- /dev/null
+++ b/src/lib/components/LongPress.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  export let onLongPress
+
+  const onTouchStart = () => {
+    timeout = setTimeout(onLongPress, 500)
+  }
+
+  const onTouchEnd = () => clearTimeout(timeout)
+
+  let timeout: number
+</script>
+
+<div on:touchstart={onTouchStart} on:touchend={onTouchEnd} {...$$props}>
+  <slot />
+</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 61c7cdeb..70ddd46a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import "@src/app.css"
+  import 'long-press-event'
   import {onMount} from "svelte"
   import {get} from "svelte/store"
   import {dev} from "$app/environment"