Tweak mobile space menu

src/app/components/MenuSpaces.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-  import Compass from "@assets/icons/compass.svg?dataurl"
-  import Icon from "@lib/components/Icon.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 {userSpaceUrls, PLATFORM_RELAYS} from "@app/core/state"
-</script>
-
-<div class="column menu gap-2">
-  {#each PLATFORM_RELAYS as url (url)}
-    <MenuSpacesItem {url} />
-  {:else}
-    {#if $userSpaceUrls.length > 0}
-      {#each $userSpaceUrls as url (url)}
-        <MenuSpacesItem {url} />
-      {/each}
-      <Divider />
-    {/if}
-    <Link href="/discover">
-      <CardButton class="btn-neutral">
-        {#snippet icon()}
-          <div><Icon icon={Compass} size={7} /></div>
-        {/snippet}
-        {#snippet title()}
-          <div>Explore Spaces</div>
-        {/snippet}
-        {#snippet info()}
-          <div>Join create, or browse spaces</div>
-        {/snippet}
-      </CardButton>
-    </Link>
-  {/each}
-</div>

src/app/components/PrimaryNav.svelte

@@ -7,9 +7,7 @@
   import Avatar from "@lib/components/Avatar.svelte"
   import Divider from "@lib/components/Divider.svelte"
   import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
-  import SpaceAdd from "@app/components/SpaceAdd.svelte"
   import ChatEnable from "@app/components/ChatEnable.svelte"
-  import MenuSpaces from "@app/components/MenuSpaces.svelte"
   import MenuOtherSpaces from "@app/components/MenuOtherSpaces.svelte"
   import MenuSettings from "@app/components/MenuSettings.svelte"
   import PrimaryNavItemSpace from "@app/components/PrimaryNavItemSpace.svelte"
@@ -31,9 +29,6 @@
 
   const {children}: Props = $props()
 
-  const showSpacesMenu = () =>
-    $userSpaceUrls.length > 0 ? pushModal(MenuSpaces) : pushModal(SpaceAdd)
-
   const showOtherSpacesMenu = () => pushModal(MenuOtherSpaces, {urls: secondarySpaceUrls})
 
   const showSettingsMenu = () => pushModal(MenuSettings)
@@ -118,7 +113,7 @@
 <div
   class="border-top bottom-sai fixed left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
   <div class="content-padding-x content-sizing flex justify-between px-2">
-    <div class="flex gap-2 sm:gap-8">
+    <div class="flex gap-2 sm:gap-6">
       <PrimaryNavItem title="Home" href="/home">
         <Avatar icon={HomeSmile} class="!h-10 !w-10" />
       </PrimaryNavItem>
@@ -129,10 +124,7 @@
         <Avatar icon={Letter} class="!h-10 !w-10" />
       </PrimaryNavItem>
       {#if PLATFORM_RELAYS.length !== 1}
-        <PrimaryNavItem
-          title="Spaces"
-          onclick={showSpacesMenu}
-          notification={anySpaceNotifications}>
+        <PrimaryNavItem title="Spaces" href="/spaces" notification={anySpaceNotifications}>
           <Avatar icon={SettingsMinimalistic} class="!h-10 !w-10" />
         </PrimaryNavItem>
       {/if}

src/app/components/SpaceAdd.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import Login from "@assets/icons/login-3.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
+  import Compass from "@assets/icons/compass.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"
@@ -9,12 +11,18 @@
   import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
   import {pushModal} from "@app/util/modal"
 
+  type Props = {
+    hideDiscover?: boolean
+  }
+
+  const {hideDiscover}: Props = $props()
+
   const startCreate = () => pushModal(SpaceCreateExternal)
 
   const startJoin = () => pushModal(SpaceInviteAccept)
 </script>
 
-<div class="column gap-4">
+<div class="column gap-2">
   <ModalHeader>
     {#snippet title()}
       <div>Add a Space</div>
@@ -23,8 +31,23 @@
       <div>Spaces are places where communities come together to work, play, and hang out.</div>
     {/snippet}
   </ModalHeader>
+  {#if !hideDiscover}
+    <Link href="/discover">
+      <CardButton class="btn-primary">
+        {#snippet icon()}
+          <div><Icon icon={Compass} size={7} /></div>
+        {/snippet}
+        {#snippet title()}
+          <div>Explore Spaces</div>
+        {/snippet}
+        {#snippet info()}
+          <div>Join create, or browse spaces</div>
+        {/snippet}
+      </CardButton>
+    </Link>
+  {/if}
   <Button onclick={startJoin}>
-    <CardButton class="btn-primary">
+    <CardButton class={hideDiscover ? "btn-primary" : "btn-neutral"}>
       {#snippet icon()}
         <div><Icon icon={Login} size={7} /></div>
       {/snippet}