Long press channel messages

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) {
+    const root = $rootEvent || event
-      return
-    }
 
-    if (isMobile) {
+    pushDrawer(ChannelConversation, {url, room, event: root})
-      pushModal(ChannelMessageMenuMobile, {url, event})
-    } else {
-      const root = $rootEvent || event
-
-      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>
+<LongPress
-  <button
+  on:click={isMobile || inert ? null : onClick}
-    type="button"
+  onLongPress={inert ? null : onLongPress}
-    in:transition
+  class="group relative flex w-full flex-col gap-1 p-2 text-left transition-colors {inert ? 'hover:bg-base-300' : ''}">
-    on:click={onClick}
+  <div class="flex w-full gap-3">
-    class="group relative flex w-full flex-col gap-1 p-2 text-left transition-colors"
+    {#if showPubkey}
-    class:hover:bg-base-300={!inert}>
+      <Link external href={pubkeyLink(event.pubkey)} class="flex items-start">
-    <div class="flex w-full gap-3">
+        <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">
+        <div class="flex items-center gap-2">
-          <Avatar
+          <Link
-            src={$profile?.picture}
+            external
-            class="border border-solid border-base-content"
+            href={pubkeyLink(event.pubkey)}
-            size={10} />
+            class="text-sm font-bold"
-        </Link>
+            style="color: {colorValue}">
-      {:else}
+            {$profileDisplay}
-        <div class="w-10 min-w-10 max-w-10" />
+          </Link>
-      {/if}
+          <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
-      <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>
+      {/if}
+      <div class="text-sm">
+        <Content {event} />
+        {#if thunk}
+          <ThunkStatus {thunk} />
+        {/if}
       </div>
     </div>
-    <div class="row-2 ml-12">
+  </div>
-      {#if !isHead}
+  <div class="row-2 ml-12">
-        <ReplySummary {event} />
+    {#if !isHead}
-      {/if}
+      <ReplySummary {event} />
-      <ReactionSummary {event} {onReactionClick} />
+    {/if}
-    </div>
+    <ReactionSummary {event} {onReactionClick} />
-    <button
+  </div>
-      class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all"
+  <button
-      class:group-hover:opacity-100={!isMobile}
+    class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all"
-      on:click|stopPropagation>
+    class:group-hover:opacity-100={!isMobile}
-      <ChannelMessageEmojiButton {url} {room} {event} />
+    on:click|stopPropagation>
-      <ChannelMessageMenuButton {url} {event} />
+    <ChannelMessageEmojiButton {url} {room} {event} />
-    </button>
+    <ChannelMessageMenuButton {url} {event} />
   </button>
-</Delay>
+</LongPress>

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}>

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>

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,

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>