Clean up reaction buttons, cache relays for performance

ROADMAP.md

@@ -1,5 +1,7 @@
 # Current
 
+- [ ] formatTimestamp is expensive, cache it by assigning to events
+- [ ] Fix hover on notes in modal
 - [ ] Show loading/success on zap invoice screen
 - [ ] Fix iOS/safari/firefox
 - [ ] Show more link on long notes (rather than just an ellipsis)

package.json

@@ -38,6 +38,7 @@
     "husky": "^8.0.3",
     "localforage": "^1.10.0",
     "localforage-memoryStorageDriver": "^0.9.2",
+    "lru-cache": "^7.18.3",
     "nostr-tools": "^1.7.4",
     "npm-run-all": "^4.1.5",
     "qr-scanner": "^1.4.2",

src/agent/keys.ts

@@ -9,25 +9,6 @@ const privkey = synced('agent/keys/privkey')
 const getExtension = () => (window as {nostr?: any}).nostr
 const canSign = () => ['privkey', 'extension'].includes(get(method))
 
-// For backwards compatibility, if method isn't set but we're logged in, set it
-setTimeout(() => {
-  method.update($method => {
-    if ($method) {
-      return $method
-    }
-
-    if (get(privkey)) {
-      return 'privkey'
-    }
-
-    if (get(pubkey)) {
-      return getExtension() ? 'extension' : 'pubkey'
-    }
-
-    return null
-  })
-}, 100)
-
 const login = ($method, key) => {
   method.set($method)
 

src/agent/relays.ts

@@ -1,4 +1,5 @@
 import type {Relay} from 'src/util/types'
+import LRUCache from 'lru-cache'
 import {warn} from 'src/util/logger'
 import {filter, pipe, pick, groupBy, objOf, map, assoc, sortBy, uniqBy, prop} from 'ramda'
 import {first, createMap} from 'hurdak/lib/hurdak'
@@ -49,11 +50,19 @@ export const initializeRelayList = async () => {
 
 // Pubkey relays
 
+const _getPubkeyRelaysCache = new LRUCache({max: 1000})
+
 export const getPubkeyRelays = (pubkey, mode = null, routes = null) => {
   const filter = mode ? {pubkey, mode} : {pubkey}
-  const filteredRoutes = routes || database.routes.all(filter)
+  const key = [mode, pubkey].join(':')
 
-  return sortByScore(map(pick(['url', 'score']), filteredRoutes))
+  let result = routes || _getPubkeyRelaysCache.get(key)
+  if (!result) {
+     result = database.routes.all(filter)
+     _getPubkeyRelaysCache.set(key, result)
+  }
+
+  return sortByScore(map(pick(['url', 'score']), result))
 }
 
 export const getPubkeyReadRelays = pubkey => getPubkeyRelays(pubkey, 'read')

src/views/notes/Note.svelte

@@ -392,26 +392,26 @@
         </div>
         <div class="flex justify-between text-light">
           <div class="flex">
-            <button class="w-16" on:click|stopPropagation={startReply}>
+            <button class="w-16 text-left" on:click|stopPropagation={startReply}>
               <i class="fa fa-reply cursor-pointer" />
               {$repliesCount}
             </button>
-            <button class="w-16" class:text-accent={like}
+            <button class="w-16 text-left" class:text-accent={like}
               on:click|stopPropagation={() => like ? deleteReaction(like) : react("+")}>
               <i class={cx('fa fa-heart cursor-pointer', {'fa-beat fa-beat-custom': like})} />
               {$likesCount}
             </button>
-            <button class="w-20" class:text-accent={zapped} on:click|stopPropagation={startZap}>
+            <button class="w-20 text-left" class:text-accent={zapped} on:click|stopPropagation={startZap}>
               <i class={cx("fa fa-bolt cursor-pointer", {'pointer-events-none opacity-50': !canZap})} />
               {formatSats($zapsTotal)}
             </button>
-            <button class="w-16"  on:click|stopPropagation={() => react("-")}>
+            <button class="w-16 text-left"  on:click|stopPropagation={() => react("-")}>
               <i class="fa fa-flag cursor-pointer" />
               {$flagsCount}
             </button>
           </div>
           <div
-            class="cursor-pointer flex gap-1 items-center"
+            class="cursor-pointer gap-1 items-center hidden sm:flex"
             on:click|stopPropagation={() => { showRelays = true }}>
             <i class="fa fa-server" />
             <div