Link directly to discover page

src/app/components/MenuSpaces.svelte

@@ -1,15 +1,11 @@
 <script lang="ts">
-  import Login from "@assets/icons/login-3.svg?dataurl"
+  import Compass from "@assets/icons/compass.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
+  import Link from "@lib/components/Link.svelte"
   import Divider from "@lib/components/Divider.svelte"
   import CardButton from "@lib/components/CardButton.svelte"
   import MenuSpacesItem from "@app/components/MenuSpacesItem.svelte"
-  import SpaceAdd from "@app/components/SpaceAdd.svelte"
   import {userRoomsByUrl, PLATFORM_RELAYS} from "@app/core/state"
-  import {pushModal} from "@app/util/modal"
-
-  const addSpace = () => pushModal(SpaceAdd)
 </script>
 
 <div class="column menu gap-2">
@@ -22,18 +18,18 @@
       {/each}
       <Divider />
     {/if}
-    <Button onclick={addSpace}>
+    <Link href="/discover">
       <CardButton class="dark:btn-neutral">
         {#snippet icon()}
-          <div><Icon icon={Login} size={7} /></div>
+          <div><Icon icon={Compass} size={7} /></div>
         {/snippet}
         {#snippet title()}
-          <div>Add a space</div>
+          <div>Explore Spaces</div>
         {/snippet}
         {#snippet info()}
-          <div>Join or create a new space</div>
+          <div>Join create, or browse spaces</div>
         {/snippet}
       </CardButton>
-    </Button>
+    </Link>
   {/each}
 </div>

src/app/components/PrimaryNav.svelte

@@ -18,7 +18,7 @@
   import {makeSpacePath} from "@app/util/routes"
   import {notifications} from "@app/util/notifications"
   import Widget from "@assets/icons/widget.svg?dataurl"
-  import AddSquare from "@assets/icons/add-square.svg?dataurl"
+  import Compass from "@assets/icons/compass.svg?dataurl"
   import Letter from "@assets/icons/letter.svg?dataurl"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
   import HomeSmile from "@assets/icons/home-smile.svg?dataurl"
@@ -31,8 +31,6 @@
 
   const {children}: Props = $props()
 
-  const addSpace = () => pushModal(SpaceAdd)
-
   const showSpacesMenu = () => (spaceUrls.length > 0 ? pushModal(MenuSpaces) : pushModal(SpaceAdd))
 
   const showOtherSpacesMenu = () => pushModal(MenuOtherSpaces, {urls: secondarySpaceUrls})
@@ -83,8 +81,8 @@
             <Avatar icon={Widget} class="!h-10 !w-10" />
           </PrimaryNavItem>
         {/if}
-        <PrimaryNavItem title="Add Space" onclick={addSpace} class="tooltip-right">
+        <PrimaryNavItem title="Add a Space" href="/discover" class="tooltip-right">
-          <Avatar icon={AddSquare} class="!h-10 !w-10" />
+          <Avatar icon={Compass} class="!h-10 !w-10" />
         </PrimaryNavItem>
       {/each}
     </div>

src/app/components/SpaceAdd.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-  import Compass from "@assets/icons/compass-big.svg?dataurl"
   import Login from "@assets/icons/login-3.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
-  import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
   import CardButton from "@lib/components/CardButton.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
@@ -25,21 +23,8 @@
       <div>Spaces are places where communities come together to work, play, and hang out.</div>
     {/snippet}
   </ModalHeader>
-  <Link href="/discover">
-    <CardButton class="btn-primary">
-      {#snippet icon()}
-        <div><Icon icon={Compass} size={7} /></div>
-      {/snippet}
-      {#snippet title()}
-        <div>Discover spaces</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Browse spaces on the discover page.</div>
-      {/snippet}
-    </CardButton>
-  </Link>
   <Button onclick={startJoin}>
-    <CardButton class="dark:btn-neutral">
+    <CardButton class="btn-primary">
       {#snippet icon()}
         <div><Icon icon={Login} size={7} /></div>
       {/snippet}

src/routes/discover/+page.svelte

@@ -1,24 +1,31 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {dec} from "@welshman/lib"
+  import {dec, tryCatch} from "@welshman/lib"
-  import {ROOMS} from "@welshman/util"
+  import {ROOMS, normalizeRelayUrl, isRelayUrl} from "@welshman/util"
   import {Router} from "@welshman/router"
   import {load} from "@welshman/net"
   import type {Relay} from "@welshman/app"
   import {relays, createSearch, loadRelay, loadRelaySelections} from "@welshman/app"
   import {createScroller} from "@lib/html"
   import {fly} from "@lib/transition"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import PageHeader from "@lib/components/PageHeader.svelte"
+  import ContentSearch from "@lib/components/ContentSearch.svelte"
+  import SpaceAdd from "@app/components/SpaceAdd.svelte"
   import RelaySummary from "@app/components/RelaySummary.svelte"
   import SpaceCheck from "@app/components/SpaceCheck.svelte"
   import {getMembershipUrls, loadMembership, defaultPubkeys, membersByUrl} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
 
+  const openMenu = () => pushModal(SpaceAdd)
+
+  const termUrl = $derived(tryCatch(() => normalizeRelayUrl(term)) || "")
+
   const discoverRelays = () =>
     Promise.all([
       load({
@@ -37,7 +44,7 @@
 
   const relaySearch = $derived(
     createSearch(
-      $relays.filter(r => $membersByUrl.has(r.url)),
+      $relays.filter(r => $membersByUrl.has(r.url) && r.url !== termUrl),
       {
         getValue: (relay: Relay) => relay.url,
         sortFn: ({score, item}) => {
@@ -76,7 +83,8 @@
 </script>
 
 <Page class="cw-full">
-  <div class="content column gap-4" bind:this={element}>
+  <ContentSearch>
+    {#snippet input()}
       <PageHeader>
         {#snippet title()}
           Discover Spaces
@@ -85,10 +93,27 @@
           Find communities all across the nostr network
         {/snippet}
       </PageHeader>
-    <label class="input input-bordered flex w-full items-center gap-2">
+      <div class="row-2 min-w-0 flex-grow items-center">
+        <label class="input input-bordered flex flex-grow items-center gap-2">
           <Icon icon={Magnifier} />
           <input bind:value={term} class="grow" type="text" placeholder="Search for spaces..." />
         </label>
+        <Button class="btn btn-primary" onclick={openMenu}>
+          <Icon icon={AddCircle} />
+        </Button>
+      </div>
+    {/snippet}
+    {#snippet content()}
+      <div class="col-2 scroll-container" bind:this={element}>
+        {#key termUrl}
+          {#if isRelayUrl(termUrl)}
+            <Button
+              class="card2 bg-alt shadow-xl transition-all hover:shadow-2xl hover:dark:brightness-[1.1]"
+              onclick={() => openSpace(termUrl)}>
+              <RelaySummary url={termUrl} />
+            </Button>
+          {/if}
+        {/key}
         {#each relaySearch.searchOptions(term).slice(0, limit) as relay (relay.url)}
           <Button
             class="card2 bg-alt shadow-xl transition-all hover:shadow-2xl hover:dark:brightness-[1.1]"
@@ -102,4 +127,6 @@
           </div>
         {/await}
       </div>
+    {/snippet}
+  </ContentSearch>
 </Page>