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}

src/lib/components/PageBar.svelte

@@ -11,7 +11,7 @@
   const {...props}: Props = $props()
 </script>
 
-<div data-component="PageBar" class="cw top-sai fixed z-feature p-2">
+<div data-component="PageBar" class="cw top-sai fixed z-feature p-2 {props.class}">
   <div
     class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
     <div class="ellipsize flex items-center gap-4 whitespace-nowrap">

src/routes/discover/+page.svelte

@@ -31,7 +31,7 @@
   } from "@app/core/state"
   import {pushModal} from "@app/util/modal"
 
-  const openMenu = () => pushModal(SpaceAdd)
+  const openMenu = () => pushModal(SpaceAdd, {hideDiscover: true})
 
   const termUrl = $derived(tryCatch(() => normalizeRelayUrl(term)) || "")
 
@@ -121,6 +121,7 @@
           </label>
           <Button class="btn btn-primary" onclick={openMenu}>
             <Icon icon={AddCircle} />
+            <span class="hidden sm:inline">Add Space</span>
           </Button>
         </div>
         {#if showScanner}

src/routes/settings/profile/+page.svelte

@@ -9,7 +9,7 @@
   import Key from "@assets/icons/key-minimalistic.svg?dataurl"
   import LinkRound from "@assets/icons/link-round.svg?dataurl"
   import Copy from "@assets/icons/copy.svg?dataurl"
-  import Settings from "@assets/icons/settings-minimalistic.svg?dataurl"
+  import Settings from "@assets/icons/settings.svg?dataurl"
   import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
   import AltArrowUp from "@assets/icons/alt-arrow-up.svg?dataurl"
   import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"

src/routes/spaces/+page.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import SettingsMinimalistic from "@assets/icons/settings-minimalistic.svg?dataurl"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Page from "@lib/components/Page.svelte"
+  import PageBar from "@lib/components/PageBar.svelte"
+  import PageContent from "@lib/components/PageContent.svelte"
+  import MenuSpacesItem from "@app/components/MenuSpacesItem.svelte"
+  import SpaceAdd from "@app/components/SpaceAdd.svelte"
+  import {userSpaceUrls, PLATFORM_RELAYS} from "@app/core/state"
+  import {pushModal} from "@app/util/modal"
+
+  const addSpace = () => pushModal(SpaceAdd)
+</script>
+
+<Page class="cw-full">
+  <PageBar class="cw-full">
+    {#snippet icon()}
+      <div class="center">
+        <Icon icon={SettingsMinimalistic} />
+      </div>
+    {/snippet}
+    {#snippet title()}
+      <strong>Your Spaces</strong>
+    {/snippet}
+    {#snippet action()}
+      {#if $userSpaceUrls.length > 0 && PLATFORM_RELAYS.length === 0}
+        <Button class="btn btn-primary btn-sm" onclick={addSpace}>
+          <Icon icon={AddCircle} />
+          Add Space
+        </Button>
+      {/if}
+    {/snippet}
+  </PageBar>
+  <PageContent class="cw-full flex flex-col gap-2 p-2 pt-4">
+    {#each PLATFORM_RELAYS as url (url)}
+      <MenuSpacesItem {url} />
+    {:else}
+      {#each $userSpaceUrls as url (url)}
+        <MenuSpacesItem {url} />
+      {:else}
+        <div class="flex flex-col gap-8 items-center py-20">
+          <p>You haven't added any spaces yet!</p>
+          <Button class="btn btn-primary" onclick={addSpace}>
+            <Icon icon={AddCircle} />
+            Add a Space
+          </Button>
+        </div>
+      {/each}
+    {/each}
+  </PageContent>
+</Page>