Improve quote rendering

src/app/components/ChatEnable.svelte

@@ -10,6 +10,8 @@
   import {canDecrypt, PLATFORM_NAME, ensureUnwrapped} from "@app/state"
   import {clearModals} from "@app/modal"
 
+  export let next
+
   let loading = false
 
   const enableChat = async () => {
@@ -20,7 +22,7 @@
     }
 
     clearModals()
-    goto("/chat")
+    goto(next)
   }
 
   const submit = async () => {
@@ -38,16 +40,16 @@
 
 <form class="column gap-4" on:submit|preventDefault={submit}>
   <ModalHeader>
-    <div slot="title">Enable Chat</div>
-    <div slot="info">Do you want to enable direct messages?</div>
+    <div slot="title">Enable Messages</div>
+    <div slot="info">Do you want to enable notes and direct messages?</div>
   </ModalHeader>
   <p>
-    By default, direct messages are disabled, since loading them requires
+    By default, notes and direct messages are disabled, since loading them requires
     {PLATFORM_NAME} to download and decrypt a lot of data.
   </p>
   <p>
-    If you'd like to enable direct messages, please make sure your signer is set up to to
-    auto-approve requests to decrypt data.
+    If you'd like to enable them, please make sure your signer is set up to to auto-approve requests
+    to decrypt data.
   </p>
   <ModalFooter>
     <Button class="btn btn-link" on:click={back}>
@@ -55,7 +57,7 @@
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={loading}>
-      <Spinner {loading}>Enable Chat</Spinner>
+      <Spinner {loading}>Enable Messages</Spinner>
       <Icon icon="alt-arrow-right" />
     </Button>
   </ModalFooter>

src/app/components/Content.svelte

@@ -4,7 +4,7 @@
   import {
     parse,
     truncate,
-    render as renderParsed,
+    renderAsHtml,
     isText,
     isTopic,
     isCode,
@@ -146,10 +146,10 @@
             </Link>
           {/if}
         {:else if isEllipsis(parsed) && expandInline}
-          {@html renderParsed(parsed)}
+          {@html renderAsHtml(parsed)}
           <button type="button" class="text-sm underline"> Read more </button>
         {:else}
-          {@html renderParsed(parsed)}
+          {@html renderAsHtml(parsed)}
         {/if}
       {/each}
     </div>

src/app/components/ContentQuote.svelte

@@ -2,12 +2,13 @@
   import {nip19} from "nostr-tools"
   import {goto} from "$app/navigation"
   import {ctx, nthEq} from "@welshman/lib"
+  import {tracker, repository} from "@welshman/app"
   import {Address, DIRECT_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 {deriveEvent, entityLink, MESSAGE, THREAD} from "@app/state"
-  import {makeThreadPath} from "@app/routes"
+  import {deriveEvent, entityLink, ROOM, MESSAGE, THREAD} from "@app/state"
+  import {makeThreadPath, makeRoomPath} from "@app/routes"
 
   export let value
   export let event
@@ -41,13 +42,27 @@
     return Boolean(element)
   }
 
+  const openMessage = (url: string, room: string, id: string) => {
+    const event = repository.getEvent(id)
+
+    if (event) {
+      goto(makeRoomPath(url, room))
+
+      // TODO: if the event doesn't immediately load, this won't work. Scroll up until it's found
+      setTimeout(() => scrollToEvent(id), 300)
+    }
+
+    return Boolean(event)
+  }
+
   const onClick = (e: Event) => {
     if ($quote) {
       if ($quote.kind === DIRECT_MESSAGE) {
         return scrollToEvent($quote.id)
       }
 
-      const [room, url] = $quote.tags.find(nthEq(0, "~"))?.slice(1) || []
+      const [url] = tracker.getRelays($quote.id)
+      const room = $quote.tags.find(nthEq(0, ROOM))?.[1]
 
       if (url && room) {
         if ($quote.kind === THREAD) {
@@ -55,7 +70,7 @@
         }
 
         if ($quote.kind === MESSAGE) {
-          return scrollToEvent($quote.id)
+          return scrollToEvent($quote.id) || openMessage(url, room, $quote.id)
         }
 
         const kind = $quote.tags.find(nthEq(0, "K"))?.[1]
@@ -67,7 +82,7 @@
           }
 
           if (parseInt(kind) === MESSAGE) {
-            return scrollToEvent(id)
+            return scrollToEvent(id) || openMessage(url, room, id)
           }
         }
       }

src/app/components/NoteItem.svelte

@@ -29,7 +29,7 @@
 <NoteCard {event} class="card2 bg-alt">
   <Content {event} expandMode="inline" />
   <div class="flex w-full justify-between gap-2">
-    <ReactionSummary relays={[url]} {event} {onReactionClick}>
+    <ReactionSummary relays={[url]} {event} {onReactionClick} reactionClass="tooltip-right">
       <EmojiButton {onEmoji} class="btn btn-neutral btn-xs h-[26px] rounded-box">
         <Icon icon="smile-circle" size={4} />
       </EmojiButton>

src/app/components/PrimaryNav.svelte

@@ -28,7 +28,9 @@
 
   const showSettingsMenu = () => pushModal(MenuSettings)
 
-  const openChat = () => ($canDecrypt ? goto("/chat") : pushModal(ChatEnable))
+  const openNotes = () => ($canDecrypt ? goto("/notes") : pushModal(ChatEnable, {next: "/notes"}))
+
+  const openChat = () => ($canDecrypt ? goto("/chat") : pushModal(ChatEnable, {next: "/chat"}))
 </script>
 
 <div class="relative z-nav hidden w-14 flex-shrink-0 bg-base-200 pt-4 md:block">
@@ -57,7 +59,7 @@
         class="tooltip-right">
         <Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
       </PrimaryNavItem>
-      <PrimaryNavItem title="Notes" href="/notes" class="tooltip-right">
+      <PrimaryNavItem title="Notes" on:click={openNotes} class="tooltip-right">
         <Avatar icon="notes-minimalistic" class="!h-10 !w-10" />
       </PrimaryNavItem>
       <PrimaryNavItem

src/app/components/ThreadItem.svelte

@@ -16,12 +16,18 @@
 </script>
 
 <Link class="col-2 card2 bg-alt w-full cursor-pointer" href={makeThreadPath(url, event.id)}>
-  <div class="flex w-full items-center justify-between gap-2">
-    <p class="text-xl">{title}</p>
-    <p class="text-sm opacity-75">
+  {#if title}
+    <div class="flex w-full items-center justify-between gap-2">
+      <p class="text-xl">{title}</p>
+      <p class="text-sm opacity-75">
+        {formatTimestamp(event.created_at)}
+      </p>
+    </div>
+  {:else}
+    <p class="-mb-3 h-0 text-end text-xs opacity-75">
       {formatTimestamp(event.created_at)}
     </p>
-  </div>
+  {/if}
   <Content {event} expandMode="inline" />
   <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">
     <span class="whitespace-nowrap py-1 text-sm opacity-75">