From c88b6da23f6c77149540b93308056d976a623248 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Fri, 25 Oct 2024 16:59:12 -0700
Subject: [PATCH] Long press channel messages

---
 src/app/components/ChannelMessage.svelte   | 111 ++++++++++-----------
 src/app/components/PrimaryNav.svelte       |   2 +-
 src/assets/icons/Settings Minimalistic.svg |   4 +
 src/lib/components/Icon.svelte             |   2 +
 src/lib/components/LongPress.svelte        |   2 +-
 5 files changed, 59 insertions(+), 62 deletions(-)
 create mode 100644 src/assets/icons/Settings Minimalistic.svg

diff --git a/src/app/components/ChannelMessage.svelte b/src/app/components/ChannelMessage.svelte
index 59b7d0b..e2de12f 100644
--- a/src/app/components/ChannelMessage.svelte
+++ b/src/app/components/ChannelMessage.svelte
@@ -6,7 +6,7 @@
   import type {Thunk} from "@welshman/app"
   import {isMobile} from "@lib/html"
   import {slideAndFade, conditionalTransition} from "@lib/transition"
-  import Delay from "@lib/components/Delay.svelte"
+  import LongPress from "@lib/components/LongPress.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import Link from "@lib/components/Link.svelte"
   import Content from "@app/components/Content.svelte"
@@ -39,19 +39,14 @@
   const transition = conditionalTransition(thunk, slideAndFade)
 
   const onClick = () => {
-    if (inert) {
-      return
-    }
+    const root = $rootEvent || event
 
-    if (isMobile) {
-      pushModal(ChannelMessageMenuMobile, {url, event})
-    } else {
-      const root = $rootEvent || event
-
-      pushDrawer(ChannelConversation, {url, room, event: root})
-    }
+    pushDrawer(ChannelConversation, {url, room, event: root})
   }
 
+  const onLongPress = () =>
+    pushModal(ChannelMessageMenuMobile, {url, event})
+
   const onReactionClick = (content: string, events: TrustedEvent[]) => {
     const reaction = events.find(e => e.pubkey === $pubkey)
 
@@ -68,57 +63,53 @@
   }
 </script>
 
-<Delay>
-  <button
-    type="button"
-    in:transition
-    on:click={onClick}
-    class="group relative flex w-full flex-col gap-1 p-2 text-left transition-colors"
-    class:hover:bg-base-300={!inert}>
-    <div class="flex w-full gap-3">
+<LongPress
+  on:click={isMobile || inert ? null : onClick}
+  onLongPress={inert ? null : onLongPress}
+  class="group relative flex w-full flex-col gap-1 p-2 text-left transition-colors {inert ? 'hover:bg-base-300' : ''}">
+  <div class="flex w-full gap-3">
+    {#if showPubkey}
+      <Link external href={pubkeyLink(event.pubkey)} class="flex items-start">
+        <Avatar
+          src={$profile?.picture}
+          class="border border-solid border-base-content"
+          size={10} />
+      </Link>
+    {:else}
+      <div class="w-10 min-w-10 max-w-10" />
+    {/if}
+    <div class="-mt-1 flex-grow pr-1">
       {#if showPubkey}
-        <Link external href={pubkeyLink(event.pubkey)} class="flex items-start">
-          <Avatar
-            src={$profile?.picture}
-            class="border border-solid border-base-content"
-            size={10} />
-        </Link>
-      {:else}
-        <div class="w-10 min-w-10 max-w-10" />
-      {/if}
-      <div class="-mt-1 flex-grow pr-1">
-        {#if showPubkey}
-          <div class="flex items-center gap-2">
-            <Link
-              external
-              href={pubkeyLink(event.pubkey)}
-              class="text-sm font-bold"
-              style="color: {colorValue}">
-              {$profileDisplay}
-            </Link>
-            <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
-          </div>
-        {/if}
-        <div class="text-sm">
-          <Content {event} />
-          {#if thunk}
-            <ThunkStatus {thunk} />
-          {/if}
+        <div class="flex items-center gap-2">
+          <Link
+            external
+            href={pubkeyLink(event.pubkey)}
+            class="text-sm font-bold"
+            style="color: {colorValue}">
+            {$profileDisplay}
+          </Link>
+          <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
         </div>
+      {/if}
+      <div class="text-sm">
+        <Content {event} />
+        {#if thunk}
+          <ThunkStatus {thunk} />
+        {/if}
       </div>
     </div>
-    <div class="row-2 ml-12">
-      {#if !isHead}
-        <ReplySummary {event} />
-      {/if}
-      <ReactionSummary {event} {onReactionClick} />
-    </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}
-      on:click|stopPropagation>
-      <ChannelMessageEmojiButton {url} {room} {event} />
-      <ChannelMessageMenuButton {url} {event} />
-    </button>
+  </div>
+  <div class="row-2 ml-12">
+    {#if !isHead}
+      <ReplySummary {event} />
+    {/if}
+    <ReactionSummary {event} {onReactionClick} />
+  </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}
+    on:click|stopPropagation>
+    <ChannelMessageEmojiButton {url} {room} {event} />
+    <ChannelMessageMenuButton {url} {event} />
   </button>
-</Delay>
+</LongPress>
diff --git a/src/app/components/PrimaryNav.svelte b/src/app/components/PrimaryNav.svelte
index 7abae72..7077c89 100644
--- a/src/app/components/PrimaryNav.svelte
+++ b/src/app/components/PrimaryNav.svelte
@@ -88,7 +88,7 @@
         <Avatar icon="letter" class="!h-10 !w-10" />
       </PrimaryNavItem>
       <PrimaryNavItem title="Spaces" on:click={showSpacesMenu}>
-        <Avatar icon="add-circle" class="!h-10 !w-10" />
+        <Avatar icon="settings-minimalistic" class="!h-10 !w-10" />
       </PrimaryNavItem>
     </div>
     <PrimaryNavItem title="Settings" on:click={showSettingsMenu}>
diff --git a/src/assets/icons/Settings Minimalistic.svg b/src/assets/icons/Settings Minimalistic.svg
new file mode 100644
index 0000000..1e992ca
--- /dev/null
+++ b/src/assets/icons/Settings Minimalistic.svg	
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.84308 3.80211C9.8718 2.6007 10.8862 2 12 2C13.1138 2 14.1282 2.6007 16.1569 3.80211L16.8431 4.20846C18.8718 5.40987 19.8862 6.01057 20.4431 7C21 7.98943 21 9.19084 21 11.5937V12.4063C21 14.8092 21 16.0106 20.4431 17C19.8862 17.9894 18.8718 18.5901 16.8431 19.7915L16.1569 20.1979C14.1282 21.3993 13.1138 22 12 22C10.8862 22 9.8718 21.3993 7.84308 20.1979L7.15692 19.7915C5.1282 18.5901 4.11384 17.9894 3.55692 17C3 16.0106 3 14.8092 3 12.4063V11.5937C3 9.19084 3 7.98943 3.55692 7C4.11384 6.01057 5.1282 5.40987 7.15692 4.20846L7.84308 3.80211Z" stroke="#1C274C" stroke-width="1.5"/>
+<circle cx="12" cy="12" r="3" stroke="#1C274C" stroke-width="1.5"/>
+</svg>
diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte
index 1fa8816..236743c 100644
--- a/src/lib/components/Icon.svelte
+++ b/src/lib/components/Icon.svelte
@@ -64,6 +64,7 @@
   import Reply from "@assets/icons/Reply.svg?dataurl"
   import Server from "@assets/icons/Server.svg?dataurl"
   import Settings from "@assets/icons/Settings.svg?dataurl"
+  import SettingsMinimalistic from "@assets/icons/Settings Minimalistic.svg?dataurl"
   import TagHorizontal from "@assets/icons/Tag Horizontal.svg?dataurl"
   import ShareCircle from "@assets/icons/Share Circle.svg?dataurl"
   import ShopMinimalistic from "@assets/icons/Shop Minimalistic.svg?dataurl"
@@ -143,6 +144,7 @@
     "smile-circle": SmileCircle,
     server: Server,
     settings: Settings,
+    'settings-minimalistic': SettingsMinimalistic,
     "tag-horizontal": TagHorizontal,
     "trash-bin-2": TrashBin2,
     "ufo-3": UFO3,
diff --git a/src/lib/components/LongPress.svelte b/src/lib/components/LongPress.svelte
index 0e4c36c..fbb68c0 100644
--- a/src/lib/components/LongPress.svelte
+++ b/src/lib/components/LongPress.svelte
@@ -10,6 +10,6 @@
   let timeout: number
 </script>
 
-<div on:touchstart={onTouchStart} on:touchend={onTouchEnd} {...$$props}>
+<div role="button" tabindex="0" on:click on:touchstart={onTouchStart} on:touchend={onTouchEnd} {...$$props}>
   <slot />
 </div>