Generalize goToMessage

src/app/components/ContentQuote.svelte

@@ -1,26 +1,14 @@
 <script lang="ts">
   import * as nip19 from "nostr-tools/nip19"
-  import {goto} from "$app/navigation"
-  import {nthEq} from "@welshman/lib"
   import {Router} from "@welshman/router"
-  import {tracker, repository} from "@welshman/app"
   import type {TrustedEvent} from "@welshman/util"
-  import {
-    Address,
-    getTagValue,
-    DIRECT_MESSAGE,
-    DIRECT_MESSAGE_FILE,
-    MESSAGE,
-    THREAD,
-    EVENT_TIME,
-  } from "@welshman/util"
-  import {scrollToEvent} from "@lib/html"
+  import {Address, MESSAGE} from "@welshman/util"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
   import NoteContent from "@app/components/NoteContent.svelte"
-  import {deriveEvent, entityLink, ROOM} from "@app/state"
-  import {makeThreadPath, makeSpacePath, makeCalendarPath, makeRoomPath} from "@app/routes"
+  import {deriveEvent, entityLink} from "@app/state"
+  import {goToEvent} from "@app/routes"
 
   type Props = {
     value: any
@@ -46,60 +34,12 @@
     ? nip19.neventEncode({id, relays: mergedRelays})
     : new Address(kind, pubkey, identifier, mergedRelays).toNaddr()
 
-  const openMessage = (url: string, room: string | undefined, id: string) => {
-    const event = repository.getEvent(id)
-    const path = room ? makeRoomPath(url, room) : makeSpacePath(url, "chat")
-
-    if (event) {
-      goto(path)
-      scrollToEvent(id)
-    }
-
-    return Boolean(event)
-  }
-
   const onclick = () => {
     if ($quote) {
-      if ($quote.kind === DIRECT_MESSAGE || $quote.kind === DIRECT_MESSAGE_FILE) {
-        return scrollToEvent($quote.id)
-      }
-
-      const [url] = tracker.getRelays($quote.id)
-      const room = getTagValue(ROOM, $quote.tags)
-
-      if (url) {
-        if ($quote.kind === THREAD) {
-          return goto(makeThreadPath(url, $quote.id))
-        }
-
-        if ($quote.kind === EVENT_TIME) {
-          return goto(makeCalendarPath(url, $quote.id))
-        }
-
-        if ($quote.kind === MESSAGE) {
-          return scrollToEvent($quote.id) || openMessage(url, room, $quote.id)
-        }
-
-        const kind = $quote.tags.find(nthEq(0, "K"))?.[1]
-        const id = $quote.tags.find(nthEq(0, "E"))?.[1]
-
-        if (id && kind) {
-          if (parseInt(kind) === THREAD) {
-            return goto(makeThreadPath(url, id))
-          }
-
-          if (parseInt(kind) === EVENT_TIME) {
-            return goto(makeCalendarPath(url, id))
-          }
-
-          if (parseInt(kind) === MESSAGE) {
-            return scrollToEvent(id) || openMessage(url, room, id)
-          }
-        }
-      }
+      goToEvent($quote)
+    } else {
+      window.open(entityLink(entity))
     }
-
-    window.open(entityLink(entity))
   }
 </script>
 

src/app/components/SpaceRecentActivity.svelte

@@ -10,6 +10,7 @@
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
   import {deriveEventsForUrl} from "@app/state"
+  import {goToEvent} from "@app/routes"
 
   type Props = {
     url: string
@@ -80,7 +81,7 @@
         </div>
       {:else}
         {#each $conversations.slice(0, limit) as { room, events, latest, earliest, participants } (latest.id)}
-          <div class="card2 bg-alt">
+          <Button class="card2 bg-alt" onclick={() => goToEvent(earliest)}>
             <div class="flex flex-col gap-3">
               <div class="flex items-start gap-3">
                 <ProfileCircle pubkey={earliest.pubkey} size={10} />
@@ -94,30 +95,35 @@
                 </div>
               </div>
               <div class="ml-13 flex items-center justify-between">
-                <div class="flex items-center gap-4">
-                  <span class="flex items-center gap-2 text-sm opacity-70">
-                    <Icon icon="alt-arrow-left" size={4} />
+                <div class="flex gap-1">
+                  <Icon icon="alt-arrow-left" />
+                  <span class="text-sm opacity-70">
                     {events.length} messages
                   </span>
-                  <div class="flex -space-x-2">
-                    <ProfileCircles pubkeys={participants} size={6} />
-                  </div>
                 </div>
-                <span class="text-sm opacity-50">
-                  {formatTimestamp(latest.created_at)}
-                </span>
+                <div class="flex gap-2">
+                  <ProfileCircles pubkeys={participants} size={6} />
+                  <span class="text-sm opacity-70">
+                    {participants.length} participants
+                  </span>
+                </div>
               </div>
-              <div class="card2 bg-alt">
+              <Button class="card2 bg-alt" onclick={() => goToEvent(latest)}>
                 <div class="flex flex-col gap-2">
-                  <div class="flex items-center gap-2 text-sm opacity-70">
-                    <ProfileCircle pubkey={latest.pubkey} size={5} />
-                    <span class="font-medium">Latest reply:</span>
+                  <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-2 text-sm opacity-70">
+                      <ProfileCircle pubkey={latest.pubkey} size={5} />
+                      <span class="font-medium">Latest reply:</span>
+                    </div>
+                    <span class="text-xs opacity-50">
+                      {formatTimestamp(latest.created_at)}
+                    </span>
                   </div>
                   <Content minimalQuote minLength={100} maxLength={200} event={latest} />
                 </div>
-              </div>
+              </Button>
             </div>
-          </div>
+          </Button>
         {/each}
         {#if $conversations.length > limit}
           <Button class="btn btn-primary" onclick={viewMore}>

src/app/routes.ts

@@ -1,6 +1,19 @@
 import type {Page} from "@sveltejs/kit"
+import {goto} from "$app/navigation"
+import {nthEq, sleep} from "@welshman/lib"
+import type {TrustedEvent} from "@welshman/util"
+import {tracker} from "@welshman/app"
+import {scrollToEvent} from "@lib/html"
 import {identity} from "@welshman/lib"
-import {makeChatId, decodeRelay, encodeRelay, userRoomsByUrl} from "@app/state"
+import {
+  getTagValue,
+  DIRECT_MESSAGE,
+  DIRECT_MESSAGE_FILE,
+  MESSAGE,
+  THREAD,
+  EVENT_TIME,
+} from "@welshman/util"
+import {makeChatId, decodeRelay, encodeRelay, userRoomsByUrl, ROOM} from "@app/state"
 
 export const makeSpacePath = (url: string, ...extra: (string | undefined)[]) => {
   let path = `/spaces/${encodeRelay(url)}`
@@ -46,3 +59,50 @@ export const getPrimaryNavItemIndex = ($page: Page) => {
       return 0
   }
 }
+
+export const goToMessage = async (url: string, room: string | undefined, id: string) => {
+  await goto(room ? makeRoomPath(url, room) : makeSpacePath(url, "chat"))
+  await sleep(300)
+
+  return scrollToEvent(id)
+}
+
+export const goToEvent = async (event: TrustedEvent) => {
+  if (event.kind === DIRECT_MESSAGE || event.kind === DIRECT_MESSAGE_FILE) {
+    return await scrollToEvent(event.id)
+  }
+
+  const [url] = tracker.getRelays(event.id)
+  const room = getTagValue(ROOM, event.tags)
+
+  if (url) {
+    if (event.kind === THREAD) {
+      return goto(makeThreadPath(url, event.id))
+    }
+
+    if (event.kind === EVENT_TIME) {
+      return goto(makeCalendarPath(url, event.id))
+    }
+
+    if (event.kind === MESSAGE) {
+      return goToMessage(url, room, event.id)
+    }
+
+    const kind = event.tags.find(nthEq(0, "K"))?.[1]
+    const id = event.tags.find(nthEq(0, "E"))?.[1]
+
+    if (id && kind) {
+      if (parseInt(kind) === THREAD) {
+        return goto(makeThreadPath(url, id))
+      }
+
+      if (parseInt(kind) === EVENT_TIME) {
+        return goto(makeCalendarPath(url, id))
+      }
+
+      if (parseInt(kind) === MESSAGE) {
+        return goToMessage(url, room, id)
+      }
+    }
+  }
+}

src/lib/html.ts

@@ -100,7 +100,7 @@ export const isIntersecting = async (element: Element) =>
     observer.observe(element)
   })
 
-export const scrollToEvent = async (id: string) => {
+export const scrollToEvent = async (id: string, attempts = 3): Promise<boolean> => {
   const element = document.querySelector(`[data-event="${id}"]`) as any
 
   if (element) {
@@ -114,6 +114,8 @@ export const scrollToEvent = async (id: string) => {
     setTimeout(() => {
       element.style = ""
     }, 800 + 400)
+
+    return true
   } else {
     const lastElement = last(Array.from(document.querySelectorAll("[data-event]")))
 
@@ -123,6 +125,10 @@ export const scrollToEvent = async (id: string) => {
 
     await sleep(300)
 
-    scrollToEvent(id)
+    if (attempts > 0) {
+      return scrollToEvent(id, attempts - 1)
+    } else {
+      return false
+    }
   }
 }