Split state for searching people and notes

src/App.svelte

@@ -76,7 +76,11 @@
 <Router {url}>
   <div use:links class="h-full">
     <div class="pt-16 text-white h-full">
-      <Route path="/search" component={Search} />
+      <Route path="/search/:type" let:params>
+        {#key params.type}
+        <Search {...params} />
+        {/key}
+      </Route>
       <Route path="/notes" component={Notes} />
       <Route path="/notes/new" component={NoteCreate} />
       <Route path="/chat" component={Chat} />
@@ -115,7 +119,7 @@
       </li>
       {/if}
       <li class="cursor-pointer">
-        <a class="block px-4 py-2 hover:bg-accent transition-all" href="/search">
+        <a class="block px-4 py-2 hover:bg-accent transition-all" href="/search/people">
           <i class="fa-solid fa-search mr-2" /> Search
         </a>
       </li>

src/partials/UserBadge.svelte

@@ -7,6 +7,6 @@
   <div
     class="overflow-hidden w-4 h-4 rounded-full bg-cover bg-center shrink-0 border border-solid border-white"
     style="background-image: url({user.picture})" />
-  <span class="text-lg font-bold">{user.name || ''}</span>
+  <span class="text-lg font-bold">{user.name || user.pubkey.slice(0, 8)}</span>
 </a>
 {/if}

src/routes/Search.svelte

@@ -2,18 +2,19 @@
   import {onMount, onDestroy} from 'svelte'
   import {writable} from 'svelte/store'
   import {fly} from 'svelte/transition'
-  import {uniqBy, identity, uniq, pluck, prop} from 'ramda'
+  import {uniqBy, pluck, prop} from 'ramda'
   import {fuzzy} from "src/util/misc"
   import Anchor from "src/partials/Anchor.svelte"
   import Input from "src/partials/Input.svelte"
   import Spinner from "src/partials/Spinner.svelte"
   import Note from "src/partials/Note.svelte"
   import {relays, Cursor} from "src/state/nostr"
-  import {createScroller, accounts, annotateNotes, modal} from "src/state/app"
+  import {user} from "src/state/user"
+  import {createScroller, ensureAccounts, accounts, annotateNotes, modal} from "src/state/app"
 
-  const notes = writable([])
-  const people = writable([])
-  let type = writable('people')
+  export let type
+
+  const data = writable([])
   let q = ''
   let search
   let results
@@ -21,11 +22,7 @@
   let scroller
   let modalUnsub
 
-  $: search = (
-    $type === 'people'
-      ? fuzzy($people, {keys: ["name", "about"]})
-      : fuzzy($notes, {keys: ["content"]})
-  )
+  $: search = fuzzy($data, {keys: type === 'people' ? ["name", "about", "pubkey"] : ["content"]})
 
   $: {
     scroller?.start()
@@ -33,17 +30,17 @@
   }
 
   onMount(async () => {
-    cursor = new Cursor({kinds: [1]})
+    cursor = new Cursor({kinds: type === 'people' ? [0] : [1]})
     scroller = createScroller(cursor, async chunk => {
-      const annotated = await annotateNotes(chunk)
-      const keys = uniq(pluck('pubkey', chunk))
+      if (type === 'people') {
+        await ensureAccounts(pluck('pubkey', chunk))
 
-      notes.update($notes => uniqBy(prop('id'), $notes.concat(annotated)))
-      people.update($people => {
-        $people = $people.concat(keys.map(k => $accounts[k]).filter(identity))
+        data.set(Object.values($accounts))
+      } else {
+        const annotated = await annotateNotes(chunk)
 
-        return uniqBy(prop('pubkey'), $people)
-      })
+        data.update($data => uniqBy(prop('id'), $data.concat(annotated)))
+      }
     })
 
     // When a modal opens, suspend our subscriptions
@@ -69,49 +66,57 @@
 
 <ul class="border-b border-solid border-dark flex max-w-xl m-auto pt-2" in:fly={{y: 20}}>
   <li
-    class="px-8 py-4 cursor-pointer hover:border-b border-solid border-medium"
-    class:border-b={$type === 'people'}
-    on:click={() => type.set('people')}>
-    People
+    class="cursor-pointer hover:border-b border-solid border-medium"
+    class:border-b={type === 'people'}>
+    <a class="block px-8 py-4 " href="/search/people">People</a>
   </li>
   <li
-    class="px-8 py-4 cursor-pointer hover:border-b border-solid border-medium"
-    class:border-b={$type === 'notes'}
-    on:click={() => type.set('notes')}>
-    Notes
+    class="cursor-pointer hover:border-b border-solid border-medium"
+    class:border-b={type === 'notes'}>
+    <a class="block px-8 py-4 " href="/search/notes">Notes</a>
   </li>
 </ul>
 
 <div class="max-w-xl m-auto mt-4" in:fly={{y: 20}}>
-  <Input bind:value={q} placeholder="Search for {$type}">
+  <Input bind:value={q} placeholder="Search for {type}">
     <i slot="before" class="fa-solid fa-search" />
   </Input>
 </div>
 
+{#if type === 'people'}
 <ul class="py-8 flex flex-col gap-2 max-w-xl m-auto">
-  {#each (results || []) as e (e.id || e.pubkey)}
+  {#each (results || []) as e (e.pubkey)}
+    {#if e.pubkey !== $user.pubkey}
     <li in:fly={{y: 20}}>
-      {#if e.isAccount}
       <a href="/users/{e.pubkey}" class="flex gap-4 my-4">
         <div
           class="overflow-hidden w-12 h-12 rounded-full bg-cover bg-center shrink-0 border border-solid border-white"
           style="background-image: url({e.picture})" />
         <div class="flex-grow">
-          <h1 class="text-2xl">{e.name}</h1>
+          <h1 class="text-2xl">{e.name || e.pubkey.slice(0, 8)}</h1>
           <p>{e.about || ''}</p>
         </div>
       </a>
-      {:else}
+    <li>
+    {/if}
+  {/each}
+</ul>
+{/if}
+
+{#if type === 'notes'}
+<ul class="py-8 flex flex-col gap-2 max-w-xl m-auto">
+  {#each (results || []) as e (e.id)}
+    <li in:fly={{y: 20}}>
       <Note interactive note={e} />
       {#each e.replies as r (r.id)}
       <div class="ml-6 border-l border-solid border-medium">
         <Note interactive isReply note={r} />
       </div>
       {/each}
-      {/if}
     </li>
   {/each}
 </ul>
+{/if}
 
 <!-- This will always be sitting at the bottom in case infinite scrolling can't keep up -->
 <Spinner />

src/state/app.js

@@ -41,7 +41,7 @@ export const ensureAccounts = async (pubkeys, {force = false} = {}) => {
   )
 
   if (pubkeys.length) {
-    const events = await channels.getter.all({kinds: [0], authors: pubkeys})
+    const events = await channels.getter.all({kinds: [0], authors: uniq(pubkeys)})
 
     await accounts.update($accounts => {
       events.forEach(e => {
@@ -50,7 +50,7 @@ export const ensureAccounts = async (pubkeys, {force = false} = {}) => {
           ...$accounts[e.pubkey],
           ...JSON.parse(e.content),
           refreshed: now(),
-          isAccount: true,
+          isUser: true,
         }
       })