Flesh out people tab

src/routes/discover/+page.svelte

@@ -10,16 +10,18 @@
 
   let term = ""
   let limit = 20
-
-  const loadMore = async () => {
-    limit += 20
-  }
+  let element: Element
 
   $: relays = $relaySearch.searchOptions(term).slice(0, limit)
 
   onMount(() => {
     const sub = discoverRelays()
-    const scroller = createScroller(loadMore)
+    const scroller = createScroller({
+      element: element.closest('.max-h-screen')!,
+      onScroll: () => {
+        limit += 20
+      },
+    })
 
     return () => {
       sub.close()
@@ -28,7 +30,7 @@
   })
 </script>
 
-<div class="content column gap-4">
+<div class="content column gap-4" bind:this={element}>
   <h1 class="superheading mt-20">Discover Spaces</h1>
   <p class="text-center">Find communities all across the nostr network</p>
   <label class="input input-bordered flex w-full items-center gap-2">

src/routes/home/+layout.svelte

@@ -21,11 +21,6 @@
       </SecondaryNavItem>
     </div>
     <div in:fly={{delay: 100}}>
-      <SecondaryNavItem href="/home/notes">
-        <Icon icon="clipboard-text" /> Saved Notes
-      </SecondaryNavItem>
-    </div>
-    <div in:fly={{delay: 150}}>
       <SecondaryNavHeader>
         Chats
         <div class="cursor-pointer">

src/routes/home/people/+page.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import {onMount} from 'svelte'
+  import {createScroller} from '@lib/html'
+  import Icon from '@lib/components/Icon.svelte'
+  import {shuffle} from '@welshman/lib'
+  import {getListValues} from '@welshman/util'
+  import {profileSearch, userFollows} from '@welshman/app'
+  import PeopleItem from '@app/components/PeopleItem.svelte'
+
+  const defaultPubkeys = shuffle(getListValues("p", $userFollows))
+
+  let term = ""
+  let limit = 10
+  let element: Element
+
+  $: pubkeys = term
+    ? $profileSearch.searchValues(term)
+    : defaultPubkeys
+
+  onMount(() => {
+    const scroller = createScroller({
+      element: element.closest('.max-h-screen')!,
+      onScroll: () => {
+        limit += 10
+      },
+    })
+
+    return () => scroller.stop()
+  })
+</script>
+
+
+<div class="content column gap-4" bind:this={element}>
+  <h1 class="superheading mt-20">People</h1>
+  <p class="text-center">Get the latest from people in your network</p>
+  <label class="input input-bordered flex w-full items-center gap-2">
+    <Icon icon="magnifer" />
+    <input bind:value={term} class="grow" type="text" placeholder="Search for people..." />
+  </label>
+  <div class="flex flex-col gap-2">
+    {#each pubkeys.slice(0, limit) as pubkey (pubkey)}
+      <PeopleItem {pubkey} />
+    {/each}
+  </div>
+</div>