Fix a few bugs

ROADMAP.md

@@ -1,5 +1,9 @@
 # Current
 
+- [ ] Relays bounty
+  - [x] Ability to click into a relay's global feed
+  - [x] Ability to filter feeds by relay
+  - [ ] Ability to create custom feeds
 - [ ] Fix tag-style event mentions. Probably transform all mentions into entities in parse
 - [ ] Fix performance issues
   - [ ] https://github.com/techfort/LokiJS

src/App.svelte

@@ -57,6 +57,7 @@
   import PrivKeyLogin from "src/views/login/PrivKeyLogin.svelte"
   import PubKeyLogin from "src/views/login/PubKeyLogin.svelte"
   import Onboarding from "src/views/onboarding/Onboarding.svelte"
+  import ForegroundButtons from "src/views/notes/ForegroundButtons.svelte"
   import NoteCreate from "src/views/notes/NoteCreate.svelte"
   import NoteDetail from "src/views/notes/NoteDetail.svelte"
   import PersonList from "src/views/person/PersonList.svelte"
@@ -67,7 +68,7 @@
 
   Object.assign(window, {cmd, user, keys, network, pool, sync, tables, bech32ToHex, hexToBech32})
 
-  export let url = ""
+  export let url = location.pathname
 
   let ready = false
   let scrollY
@@ -121,6 +122,8 @@
 
     // Log usage on navigate
     const unsubHistory = globalHistory.listen(({location}) => {
+      url = location.pathname
+
       if (!location.hash) {
         logUsage(btoa(["page", getPageName()].join(":")))
       }
@@ -258,6 +261,10 @@
       </div>
     {/if}
 
+    {#if !url.match(/messages|chat|relays$|keys|settings|logout$/)}
+      <ForegroundButtons />
+    {/if}
+
     <SideNav />
     <TopNav />
 

src/agent/pool.ts

@@ -279,7 +279,7 @@ async function subscribe({relays, filter, onEvent, onEose}: SubscribeOpts) {
 
   Meta.onSubscriptionStart(urls)
 
-  executor.subscribe(filters, {
+  const sub = executor.subscribe(filters, {
     onEvent: (url, event) => {
       const seen_on = seen.get(event.id)
 
@@ -328,6 +328,7 @@ async function subscribe({relays, filter, onEvent, onEose}: SubscribeOpts) {
     unsub: () => {
       log(`Closing subscription`, filters)
 
+      sub.unsubscribe()
       executor.target.cleanup()
 
       Meta.onSubscriptionEnd(urls)

src/app/ui.ts

@@ -148,3 +148,7 @@ export const getThemeVariables = $theme =>
   Object.entries(getThemeColors($theme))
     .map(([k, v]) => `--${k}: ${v};`)
     .join("\n")
+
+// Global relay setting
+
+export const globalRelay = writable(null)

src/partials/Popover.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type {Placement} from "tippy.js"
   import "tippy.js/dist/tippy.css"
   import "tippy.js/animations/shift-away.css"
   import tippy from "tippy.js"
@@ -6,6 +7,7 @@
 
   export let theme = "dark"
   export let triggerType = "click"
+  export let placement = "top"
 
   let trigger
   let tooltip
@@ -14,6 +16,7 @@
   onMount(() => {
     instance = tippy(trigger, {
       theme,
+      placement: placement as Placement,
       appendTo: () => document.body,
       allowHTML: true,
       interactive: true,

src/routes/Feeds.svelte

@@ -4,7 +4,6 @@
   import Anchor from "src/partials/Anchor.svelte"
   import Content from "src/partials/Content.svelte"
   import Tabs from "src/partials/Tabs.svelte"
-  import NewNoteButton from "src/views/notes/NewNoteButton.svelte"
   import Follows from "src/views/feed/Follows.svelte"
   import Network from "src/views/feed/Network.svelte"
   import user from "src/agent/user"
@@ -34,5 +33,3 @@
     {/if}
   </div>
 </Content>
-
-<NewNoteButton />

src/routes/MessagesDetail.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import cx from "classnames"
   import {assoc} from "ramda"
-  import {renameProp} from "hurdak/lib/hurdak"
   import {toHex, displayPerson} from "src/util/nostr"
   import {now, formatTimestamp} from "src/util/misc"
   import {Tags} from "src/util/nostr"
@@ -33,14 +32,15 @@
   }
 
   const decryptMessages = async events => {
+    const results = []
     // Gotta do it in serial because of extension limitations
     for (const event of events) {
       const key = event.pubkey === pubkey ? pubkey : Tags.from(event).type("p").values().first()
 
-      event.decryptedContent = await crypt.decrypt(key, event.content)
+      results.push({...event, content: await crypt.decrypt(key, event.content)})
     }
 
-    return events.map(renameProp("decryptedContent", "content"))
+    return results
   }
 
   const getFilters = extra => [
@@ -107,7 +107,9 @@
         "rounded-bl-none bg-gray-7": message.person.pubkey !== user.getPubkey(),
       })}>
       <div class="break-words">
-        <NoteContent showEntire note={message} />
+        {#if typeof message.content === "string"}
+          <NoteContent showEntire note={message} />
+        {/if}
       </div>
       <small
         class="mt-1"

src/routes/PersonDetail.svelte

@@ -12,7 +12,6 @@
   import Content from "src/partials/Content.svelte"
   import OverflowMenu from "src/partials/OverflowMenu.svelte"
   import Spinner from "src/partials/Spinner.svelte"
-  import NewNoteButton from "src/views/notes/NewNoteButton.svelte"
   import Notes from "src/views/person/Notes.svelte"
   import Likes from "src/views/person/Likes.svelte"
   import Relays from "src/views/person/Relays.svelte"
@@ -223,5 +222,3 @@
     {/if}
   {/if}
 </Content>
-
-<NewNoteButton {pubkey} />

src/util/html.ts

@@ -158,7 +158,7 @@ export const parseContent = content => {
     }
 
     const urlMatch = tail.match(
-      /^((http|ws)s?:\/\/)?[-a-z0-9@:%_\+~#=\.]+\.[a-z]{1,6}[-a-z0-9:%_\+~#\?!&\/=;\.]*/gi
+      /^((http|ws)s?:\/\/)?[-a-z0-9@:%_\+~#=\.]+\.[a-z]{1,6}[-a-z0-9:%_\+~#\?&\/=;\.]*/gi
     )
 
     // Skip url if it's just the end of a filepath

src/views/feed/Feed.svelte

@@ -10,7 +10,7 @@
   import Note from "src/views/notes/Note.svelte"
   import user from "src/agent/user"
   import network from "src/agent/network"
-  import {modal} from "src/app/ui"
+  import {modal, globalRelay} from "src/app/ui"
   import {mergeParents} from "src/app"
 
   export let filter
@@ -101,7 +101,7 @@
 
       // Wait for this page to load before trying again
       await network.load({
-        relays,
+        relays: $globalRelay ? [{url: $globalRelay}] : relays,
         filter: mergeFilter(filter, cursor.getFilter()),
         onChunk,
       })
@@ -133,7 +133,9 @@
 
   <div class="flex flex-col gap-4">
     {#each notes as note (note.id)}
-      <Note depth={2} {note} />
+      {#if !$globalRelay || note.seen_on.includes($globalRelay)}
+        <Note depth={2} {note} />
+      {/if}
     {/each}
   </div>
 

src/views/notes/ForegroundButtons.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import {fly} from "svelte/transition"
+  import {displayRelay} from "src/util/nostr"
+  import Anchor from "src/partials/Anchor.svelte"
+  import Popover from "src/partials/Popover.svelte"
+  import user from "src/agent/user"
+  import {modal, globalRelay} from "src/app/ui"
+
+  export let pubkey = null
+
+  const {canPublish} = user
+</script>
+
+<div class="fixed bottom-0 right-0 z-10 m-8 flex flex-col items-center gap-3">
+  {#if $globalRelay}
+    <Popover triggerType="mouseenter" placement="left">
+      <div
+        slot="trigger"
+        transition:fly|local={{y: 20}}
+        class="transition-transform hover:scale-105">
+        <Anchor type="button-circle" on:click={() => globalRelay.set(null)}>
+          <i class="fa fa-filter-circle-xmark mt-1" />
+        </Anchor>
+      </div>
+      <div slot="tooltip">
+        Limiting results to {displayRelay({url: $globalRelay})}
+      </div>
+    </Popover>
+  {/if}
+
+  {#if $canPublish}
+    <button
+      class="color-white flex h-16 w-16 items-center justify-center rounded-full
+            border border-accent-light bg-accent text-white shadow-2xl
+            transition-all hover:scale-105 hover:bg-accent-light"
+      on:click={() => modal.set({type: "note/create", pubkey})}>
+      <span class="fa-sold fa-plus fa-2xl" />
+    </button>
+  {/if}
+</div>

src/views/notes/NewNoteButton.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-  import user from "src/agent/user"
-  import {modal} from "src/app/ui"
-
-  export let pubkey = null
-
-  const {canPublish} = user
-</script>
-
-{#if $canPublish}
-  <div class="fixed bottom-0 right-0 z-10 m-8">
-    <button
-      class="color-white flex h-16 w-16 items-center justify-center rounded-full
-            border border-accent-light bg-accent text-white shadow-2xl
-            transition-all hover:bg-accent-light"
-      on:click={() => modal.set({type: "note/create", pubkey})}>
-      <span class="fa-sold fa-plus fa-2xl" />
-    </button>
-  </div>
-{/if}

src/views/notes/Note.svelte

@@ -6,8 +6,16 @@
   import {tweened} from "svelte/motion"
   import {slide} from "svelte/transition"
   import {quantify} from "hurdak/lib/hurdak"
-  import {Tags, findRootId, findReplyId, displayPerson, isLike} from "src/util/nostr"
-  import {formatTimestamp, now, tryJson, formatSats, fetchJson} from "src/util/misc"
+  import {Tags, displayRelay, findRootId, findReplyId, displayPerson, isLike} from "src/util/nostr"
+  import {
+    stringToHue,
+    hsl,
+    formatTimestamp,
+    now,
+    tryJson,
+    formatSats,
+    fetchJson,
+  } from "src/util/misc"
   import {isMobile, copyToClipboard} from "src/util/html"
   import {invoiceAmount} from "src/util/lightning"
   import QRCode from "src/partials/QRCode.svelte"
@@ -36,7 +44,7 @@
   import {getPersonWithFallback} from "src/agent/tables"
   import {watch} from "src/agent/storage"
   import cmd from "src/agent/cmd"
-  import {routes} from "src/app/ui"
+  import {routes, globalRelay} from "src/app/ui"
   import {publishWithToast} from "src/app"
   import NoteContent from "src/views/notes/NoteContent.svelte"
 
@@ -357,7 +365,7 @@
 <svelte:body on:click={onBodyClick} />
 
 {#if $person}
-  <div bind:this={noteContainer} class="note relative">
+  <div bind:this={noteContainer} class="note group relative">
     <Card class="relative flex gap-4" on:click={onClick} {interactive} {invertColors}>
       {#if !showParent}
         <div
@@ -445,8 +453,27 @@
                 {formatSats($zapsTotal)}
               </button>
             </div>
-            <div on:click|stopPropagation>
-              <OverflowMenu {actions} />
+            <div on:click|stopPropagation class="flex items-center">
+              {#if pool.forceUrls.length === 0}
+                <div class="hidden group-hover:flex">
+                  {#each note.seen_on as url}
+                    <Popover triggerType="mouseenter">
+                      <div slot="trigger" class="p-1">
+                        <div
+                          class="h-3 w-3 rounded-full border border-solid border-gray-6"
+                          style={`background: ${hsl(stringToHue(url))}`}
+                          on:click={() => globalRelay.set(url)} />
+                      </div>
+                      <div slot="tooltip">
+                        {displayRelay({url})}
+                      </div>
+                    </Popover>
+                  {/each}
+                </div>
+              {/if}
+              <div class="ml-2">
+                <OverflowMenu {actions} />
+              </div>
             </div>
           </div>
         </div>

src/views/notes/NoteContent.svelte

@@ -64,7 +64,8 @@
     if (typeof value === "string") {
       l += value.length
 
-      if (shouldTruncate && l > maxLength && type !== "newline") {
+      // Content[i] may be undefined if we're on a linebreak that was spliced out
+      if (content[i] && shouldTruncate && l > maxLength && type !== "newline") {
         content[i].value = value.trim()
         content.splice(i + 1, content.length, {type: "text", value: "..."})
         break