Add real profile search

ROADMAP.md

@@ -1,8 +1,8 @@
 # Current
 
 - [ ] Add real search, it's a big hurdle for first-timers/anons
+- [ ] Check on RelayCard, it should automatically do the right thing for anon/pubkey
 - [ ] Remember message/chat status
-- [ ] Fix note nesting
 - [ ] Image classification
   - https://github.com/bhky/opennsfw2
 - [ ] Claim relays bounty

src/app/views/RelayList.svelte

@@ -35,7 +35,7 @@
     {/if}
     <div class="grid grid-cols-1 gap-4">
       {#each $relays as relay (relay.url)}
-        <RelayCard showControls {relay} />
+        <RelayCard showActions showControls {relay} />
       {/each}
     </div>
     <div class="flex flex-col gap-6" in:fly={{y: 20}}>
@@ -48,7 +48,11 @@
         Coracle automatically discovers relays as you browse the network. Adding more relays will
         generally make things quicker to load, at the expense of higher data usage.
       </p>
-      <RelaySearch />
+      <RelaySearch>
+        <div slot="item" let:relay>
+          <RelayCard showActions {relay} />
+        </div>
+      </RelaySearch>
     </div>
   </Content>
 </div>

src/app/views/Search.svelte

@@ -1,4 +1,5 @@
 <script>
+  import {debounce} from "throttle-debounce"
   import {identity, sortBy, prop} from "ramda"
   import {fuzzy} from "src/util/misc"
   import {modal} from "src/partials/state"
@@ -7,11 +8,14 @@
   import Content from "src/partials/Content.svelte"
   import BorderLeft from "src/partials/BorderLeft.svelte"
   import PersonInfo from "src/app/shared/PersonInfo.svelte"
+  import {getUserReadRelays} from "src/agent/relays"
+  import network from "src/agent/network"
   import {watch} from "src/agent/db"
   import user from "src/agent/user"
 
   let q
 
+  $: searchPeople(q)
   $: search = watch(["people", "topics"], (p, t) => {
     const topics = t
       .all()
@@ -33,6 +37,15 @@
     modal.push({type: "topic/feed", topic})
   }
 
+  const searchPeople = debounce(500, search => {
+    if (q.length > 2) {
+      network.load({
+        relays: getUserReadRelays(),
+        filter: [{kinds: [0], search, limit: 10}],
+      })
+    }
+  })
+
   document.title = "Search"
 </script>