Improve scrolling, discover page

src/routes/discover/+page.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {derived} from 'svelte/store'
-  import Masonry from "svelte-bricks"
   import {addToMapKey, dec, gt, inc} from "@welshman/lib"
   import type {Relay} from "@welshman/app"
-  import {relays, createSearch} from "@welshman/app"
+  import {relays, createSearch, relaySelections} from "@welshman/app"
   import {createScroller} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -53,13 +52,12 @@
     },
   })
 
-  $: results = relaySearch.searchOptions(term).slice(0, limit)
-
   onMount(() => {
     discoverRelays($memberships)
+    discoverRelays($relaySelections)
 
     const scroller = createScroller({
-      element: element.closest(".overflow-auto")!,
+      element,
       onScroll: () => {
         limit += 20
       },
@@ -80,45 +78,40 @@
     <Icon icon="magnifer" />
     <input bind:value={term} class="grow" type="text" placeholder="Search for spaces..." />
   </label>
-  <Masonry
-    animate={false}
-    items={results}
-    minColWidth={300}
-    maxColWidth={800}
-    gap={16}
-    idKey="url"
-    let:item={relay}>
+  {#each relaySearch.searchOptions(term).slice(0, limit) as relay (relay.url)}
     <Button
-      class="card2 bg-alt flex flex-col gap-2 text-left shadow-xl transition-all hover:shadow-2xl hover:brightness-[1.1]"
+      class="card2 bg-alt col-4 text-left shadow-xl transition-all hover:shadow-2xl hover:brightness-[1.1]"
       on:click={() => openSpace(relay.url)}>
-      <div class="flex gap-4 relative">
-        <div class="relative">
-          <div class="avatar relative">
-            <div
-              class="center !flex h-12 w-12 min-w-12 rounded-full border-2 border-solid border-base-300 bg-base-300">
-              {#if relay.profile?.icon}
-                <img alt="" src={relay.profile.icon} />
-              {:else}
-                <Icon icon="ghost" size={5} />
-              {/if}
+      <div class="col-2">
+        <div class="flex gap-4 relative">
+          <div class="relative">
+            <div class="avatar relative">
+              <div
+                class="center !flex h-12 w-12 min-w-12 rounded-full border-2 border-solid border-base-300 bg-base-300">
+                {#if relay.profile?.icon}
+                  <img alt="" src={relay.profile.icon} />
+                {:else}
+                  <Icon icon="ghost" size={5} />
+                {/if}
+              </div>
             </div>
+            {#if getMembershipUrls($userMembership).includes(relay.url)}
+              <div
+                class="absolute -right-1 -top-1 tooltip h-5 w-5 rounded-full bg-primary"
+                data-tip="You are already a member of this space.">
+                <Icon icon="check-circle" class="scale-110" />
+              </div>
+            {/if}
+          </div>
+          <div>
+            <h2 class="text-xl ellipsize whitespace-nowrap">
+              <RelayName url={relay.url} />
+            </h2>
+            <p class="text-sm opacity-75">{relay.url}</p>
           </div>
-          {#if getMembershipUrls($userMembership).includes(relay.url)}
-            <div
-              class="absolute -right-1 -top-1 tooltip h-5 w-5 rounded-full bg-primary"
-              data-tip="You are already a member of this space.">
-              <Icon icon="check-circle" class="scale-110" />
-            </div>
-          {/if}
-        </div>
-        <div>
-          <h2 class="text-xl ellipsize whitespace-nowrap">
-            <RelayName url={relay.url} />
-          </h2>
-          <p class="text-sm opacity-75">{relay.url}</p>
         </div>
+        <RelayDescription url={relay.url} />
       </div>
-      <RelayDescription url={relay.url} />
       {#if gt($wotGraph.get(relay.url)?.size, 0)}
         <div class="row-2 card2 card2-sm bg-alt">
           Members:
@@ -126,5 +119,5 @@
         </div>
       {/if}
     </Button>
-  </Masonry>
+  {/each}
 </div>