Render mentions in notes

README.md

@@ -1,5 +1,6 @@
 Bugs
 
+- [ ] Add setting to disable previews
 - [ ] Completely redo notes fetching, it's buggy as heck
 - [ ] Add alerts for replies to posts the user liked
 - [ ] Support bech32 keys/add guide on how to convert

src/partials/Note.svelte

@@ -5,7 +5,8 @@
   import {slide} from 'svelte/transition'
   import {navigate} from 'svelte-routing'
   import {ellipsize} from 'hurdak/src/core'
-  import {hasParent, toHtml, findLink} from 'src/util/html'
+  import {hasParent, findLink} from 'src/util/html'
+  import {renderNote} from 'src/util/notes'
   import Preview from 'src/partials/Preview.svelte'
   import Anchor from 'src/partials/Anchor.svelte'
   import {dispatch} from "src/state/dispatch"
@@ -118,11 +119,7 @@
     </p>
     {:else}
     <p class="text-ellipsis overflow-hidden">
-      {#if note.content.length > 500 && !showEntire}
-        {ellipsize(note.content, 500)}
-      {:else}
-        {@html toHtml(note.content)}
-      {/if}
+      {@html renderNote(note, {showEntire})}
       {#if link}
       <div class="mt-2" on:click={e => e.stopPropagation()}>
         <Preview endpoint={`${$settings.dufflepudUrl}/link/preview`} url={link} />

src/routes/ChatRoom.svelte

@@ -4,8 +4,7 @@
   import {navigate} from 'svelte-routing'
   import {prop, uniq, pluck, reverse, uniqBy, sortBy, last} from 'ramda'
   import {formatTimestamp} from 'src/util/misc'
-  import {toHtml} from 'src/util/html'
-  import {createScroller} from 'src/util/notes'
+  import {createScroller, renderNote} from 'src/util/notes'
   import UserBadge from 'src/partials/UserBadge.svelte'
   import {Listener, Cursor, epoch} from 'src/state/nostr'
   import {accounts, ensureAccounts} from 'src/state/app'
@@ -145,7 +144,7 @@
                 <p class="text-sm text-light">{formatTimestamp(m.created_at)}</p>
               </div>
               {/if}
-              <div class="ml-6">{@html toHtml(m.content)}</div>
+              <div class="ml-6">{@html renderNote(m, {showEntire: true})}</div>
             </li>
           {/each}
         </ul>

src/routes/UserDetail.svelte

@@ -82,7 +82,7 @@
 </div>
 <Tabs tabs={['notes', 'likes', 'network']} {activeTab} {setActiveTab} />
 {#if activeTab === 'notes'}
-<Notes notes={notes} filter={console.log({kinds: [1], authors: [pubkey]}) || {kinds: [1], authors: [pubkey]}} />
+<Notes notes={notes} filter={{kinds: [1], authors: [pubkey]}} />
 {:else if activeTab === 'likes'}
 <Likes notes={likes} author={pubkey} />
 {:else if activeTab === 'network'}

src/util/html.js

@@ -72,11 +72,3 @@ export const escapeHtml = html => {
 }
 
 export const findLink = t => first(t.match(/https?:\/\/([\w.-]+)[^ ]*/))
-
-export const toHtml = content => {
-  return escapeHtml(content)
-    .replace(/\n/g, '<br />')
-    .replace(/https?:\/\/([\w.-]+)[^ ]*/g, (url, domain) => {
-      return `<a href="${url}" target="_blank noopener" class="underline">${domain}</a>`
-    })
-}

src/util/notes.js

@@ -1,12 +1,32 @@
 import {identity, uniq, concat, propEq, uniqBy, prop, groupBy, find, last, pluck} from 'ramda'
 import {debounce} from 'throttle-debounce'
 import {get} from 'svelte/store'
-import {switcherFn, createMap} from 'hurdak/lib/hurdak'
+import {switcherFn, ellipsize, createMap} from 'hurdak/lib/hurdak'
 import {timedelta, sleep} from "src/util/misc"
+import {escapeHtml} from 'src/util/html'
 import {user} from 'src/state/user'
 import {epoch, filterMatches, Listener, channels, findReply, findRoot} from 'src/state/nostr'
 import {accounts, ensureAccounts} from 'src/state/app'
 
+export const renderNote = (note, {showEntire = false}) => {
+  const shouldEllipsize = note.content.length > 500 && !showEntire
+  const content = shouldEllipsize ? ellipsize(note.content, 500) : note.content
+  const $accounts = get(accounts)
+
+  return escapeHtml(content)
+    .replace(/\n/g, '<br />')
+    .replace(/https?:\/\/([\w.-]+)[^ ]*/g, (url, domain) => {
+      return `<a href="${url}" target="_blank noopener" class="underline">${domain}</a>`
+    })
+    .replace(/#\[(\d+)\]/g, (tag, i) => {
+      const pubkey = note.tags[parseInt(i)][1]
+      const user = $accounts[pubkey]
+      const name = user?.name || pubkey.slice(0, 8)
+
+      return `@<a href="/users/${pubkey}/notes" class="underline">${name}</a>`
+    })
+}
+
 export const getMuffleValue = pubkey => {
   const $user = get(user)