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">
-          <Avatar icon={AddSquare} class="!h-10 !w-10" />
+        <PrimaryNavItem title="Add a Space" href="/discover" class="tooltip-right">
+          <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}