Handle touch move

src/app/components/ChannelMessage.svelte

@@ -101,7 +101,7 @@
   </div>
   <div class="row-2 ml-12">
     {#if !isHead}
-      <ReplySummary {event} />
+      <ReplySummary {event} on:click={onClick} />
     {/if}
     <ReactionSummary {event} {onReactionClick} />
   </div>

src/app/components/ReplySummary.svelte

@@ -10,8 +10,8 @@
 </script>
 
 {#if $replies.length > 0}
-  <div class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full">
+  <button type="button" on:click class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full">
     <Icon icon="reply" />
     {$replies.length}
-  </div>
+  </button>
 {/if}

src/lib/components/LongPress.svelte

@@ -1,15 +1,29 @@
 <script lang="ts">
   export let onLongPress
 
-  const onTouchStart = () => {
+  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: number
 </script>
 
-<div role="button" tabindex="0" on:click on:touchstart={onTouchStart} on:touchend={onTouchEnd} {...$$props}>
+<div role="button" tabindex="0" on:click on:touchstart={onTouchStart} on:touchmove={onTouchMove} on:touchend={onTouchEnd} {...$$props}>
   <slot />
 </div>