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-lock.json

@@ -20,6 +20,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",
@@ -5578,15 +5579,11 @@
       }
     },
     "node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+      "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
       }
     },
     "node_modules/magic-string": {
@@ -7010,6 +7007,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/semver/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/serialize-javascript": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
@@ -12426,13 +12435,9 @@
       }
     },
     "lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "requires": {
-        "yallist": "^4.0.0"
-      }
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+      "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA=="
     },
     "magic-string": {
       "version": "0.26.7",
@@ -13443,6 +13448,17 @@
       "dev": true,
       "requires": {
         "lru-cache": "^6.0.0"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        }
       }
     },
     "serialize-javascript": {

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