Replace long press with tap target

src/app/components/ChannelMessage.svelte

@@ -11,7 +11,7 @@
     formatTimestampAsTime,
   } from "@welshman/app"
   import {isMobile} from "@lib/html"
-  import LongPress from "@lib/components/LongPress.svelte"
+  import TapTarget from "@lib/components/TapTarget.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -45,7 +45,7 @@
 
   const reply = () => replyTo(event)
 
-  const onLongPress = () => pushModal(ChannelMessageMenuMobile, {url, event, reply})
+  const onTap = () => pushModal(ChannelMessageMenuMobile, {url, event, reply})
 
   const openProfile = () => pushModal(ProfileDetail, {pubkey: event.pubkey})
 
@@ -60,9 +60,9 @@
   }
 </script>
 
-<LongPress
+<TapTarget
   data-event={event.id}
-  onLongPress={inert ? null : onLongPress}
+  onTap={inert ? null : onTap}
   class="group relative flex w-full cursor-default flex-col p-2 pb-3 text-left">
   <div class="flex w-full gap-3 overflow-auto">
     {#if showPubkey}
@@ -110,4 +110,4 @@
     {/if}
     <ChannelMessageMenuButton {url} {event} />
   </button>
-</LongPress>
+</TapTarget>

src/app/components/ChatMessage.svelte

@@ -13,7 +13,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
-  import LongPress from "@lib/components/LongPress.svelte"
+  import TapTarget from "@lib/components/TapTarget.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import Content from "@app/components/Content.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
@@ -95,9 +95,9 @@
     </button>
   </Tippy>
   <div class="flex min-w-0 flex-col" class:items-end={isOwn}>
-    <LongPress
+    <TapTarget
       class="bg-alt chat-bubble mx-1 flex cursor-auto flex-col gap-1 text-left lg:max-w-2xl"
-      onLongPress={showMobileMenu}>
+      onTap={showMobileMenu}>
       {#if showPubkey}
         <div class="flex items-center gap-2">
           {#if !isOwn}
@@ -120,7 +120,7 @@
       <div class="text-sm">
         <Content showEntire {event} />
       </div>
-    </LongPress>
+    </TapTarget>
     <div class="row-2 z-feature -mt-1 ml-4">
       <ReactionSummary {event} {onReactionClick} noTooltip />
     </div>

src/lib/components/LongPress.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  const {children, onLongPress, ...restProps} = $props()
-
-  const ontouchstart = (event: any) => {
-    touch = event.touches[0]
-    timeout = setTimeout(onLongPress, 500)
-  }
-
-  const ontouchmove = (event: any) => {
-    const curTouch = event.touches[0]
-
-    if (Math.abs(curTouch.clientX - touch.clientX) > 30) {
-      clearTimeout(timeout)
-    }
-
-    if (Math.abs(curTouch.clientY - touch.clientY) > 30) {
-      clearTimeout(timeout)
-    }
-  }
-
-  const ontouchend = () => clearTimeout(timeout)
-
-  let touch: Touch
-  let timeout: any
-</script>
-
-<div role="button" tabindex="0" {ontouchstart} {ontouchmove} {ontouchend} {...restProps}>
-  {@render children()}
-</div>

src/lib/components/TapTarget.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import {isMobile} from "@lib/html"
+
+  const {children, onTap, ...restProps} = $props()
+
+  const onclick = (event: MouseEvent) => {
+    if (isMobile) {
+      onTap(event)
+    }
+  }
+</script>
+
+<div role="button" tabindex="0" {onclick} {...restProps}>
+  {@render children()}
+</div>