Rework navigation

src/app/components/PrimaryNav.svelte

@@ -36,14 +36,6 @@
 
   const addSpace = () => pushModal(SpaceAdd)
 
-  const gotoHome = () => goto("/home")
-
-  const gotoSpaces = () => goto("/spaces")
-
-  const gotoSpace = (nom: string) => goto(`/spaces/${nom}`)
-
-  const gotoSettings = () => goto("/settings")
-
   let element: HTMLElement
 
   // Set the active highlight element to the offset of the nav item we're focused on
@@ -63,7 +55,7 @@
     style={`top: ${$activeOffset}px`} />
   <div class="flex h-full flex-col justify-between">
     <div>
-      <PrimaryNavItem on:click={gotoHome}>
+      <PrimaryNavItem href="/home">
         <Avatar
           src={$userProfile?.picture}
           class="!h-10 !w-10 border border-solid border-base-300"
@@ -71,7 +63,7 @@
       </PrimaryNavItem>
       {#each $userGroupsByNom.entries() as [nom, qualifiedGroups] (nom)}
         {@const qualifiedGroup = qualifiedGroups[0]}
-        <PrimaryNavItem title={qualifiedGroup?.group.name} on:click={() => gotoSpace(nom)}>
+        <PrimaryNavItem title={qualifiedGroup?.group.name} href="/spaces/{nom}">
           <div class="w-10 rounded-full border border-solid border-base-300">
             <img alt={qualifiedGroup?.group.name} src={qualifiedGroup?.group.picture} />
           </div>
@@ -82,14 +74,14 @@
           <Icon size={7} icon="add-circle" />
         </div>
       </PrimaryNavItem>
-      <PrimaryNavItem title="Browse Spaces" on:click={gotoSpaces}>
+      <PrimaryNavItem title="Discover Spaces" href="/discover">
         <div class="!flex w-10 items-center justify-center">
           <Icon size={6} icon="compass-big" />
         </div>
       </PrimaryNavItem>
     </div>
     <div>
-      <PrimaryNavItem title="Settings" on:click={gotoSettings}>
+      <PrimaryNavItem title="Settings" href="/settings">
         <div class="!flex w-10 items-center justify-center">
           <Icon size={7} icon="settings" />
         </div>

src/app/components/SecondaryNav.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-  import {page} from "$app/stores"
-  import {fly} from "@lib/transition"
-  import Icon from "@lib/components/Icon.svelte"
-  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
-  import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
-  import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
-  import SecondaryNavForSpace from "@app/components/SecondaryNavForSpace.svelte"
-  import {getPrimaryNavItem} from "@app/routes"
-</script>
-
-<div class="flex w-60 flex-col gap-1 bg-base-300">
-  {#if getPrimaryNavItem($page) === "discover"}
-    <SecondaryNavSection>
-      <div in:fly>
-        <SecondaryNavItem href="/spaces">
-          <Icon icon="widget" /> Spaces
-        </SecondaryNavItem>
-      </div>
-      <div in:fly={{delay: 50}}>
-        <SecondaryNavItem href="/themes">
-          <Icon icon="pallete-2" /> Themes
-        </SecondaryNavItem>
-      </div>
-    </SecondaryNavSection>
-  {:else if getPrimaryNavItem($page) === "space"}
-    {#key $page.params.nom}
-      <SecondaryNavForSpace nom={$page.params.nom} />
-    {/key}
-  {:else if getPrimaryNavItem($page) === "settings"}
-    <!-- pass -->
-  {:else}
-    <SecondaryNavSection>
-      <div in:fly>
-        <SecondaryNavItem href="/home">
-          <Icon icon="home-smile" /> Home
-        </SecondaryNavItem>
-      </div>
-      <div in:fly={{delay: 50}}>
-        <SecondaryNavItem href="/people">
-          <Icon icon="user-heart" /> People
-        </SecondaryNavItem>
-      </div>
-      <div in:fly={{delay: 100}}>
-        <SecondaryNavItem href="/notes">
-          <Icon icon="clipboard-text" /> Saved Notes
-        </SecondaryNavItem>
-      </div>
-      <div in:fly={{delay: 150}}>
-        <SecondaryNavHeader>
-          Conversations
-          <div class="cursor-pointer">
-            <Icon icon="add-circle" />
-          </div>
-        </SecondaryNavHeader>
-      </div>
-    </SecondaryNavSection>
-  {/if}
-</div>

src/app/components/SecondaryNavForSpace.svelte

@@ -1,70 +0,0 @@
-<script lang="ts">
-  import {goto} from "$app/navigation"
-  import {fly} from "@lib/transition"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import Popover from "@lib/components/Popover.svelte"
-  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
-  import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
-  import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
-  import SpaceExit from "@app/components/SpaceExit.svelte"
-  import {deriveGroup} from "@app/state"
-  import {pushModal} from "@app/modal"
-  import {removeGroupMemberships} from "@app/commands"
-
-  export let nom
-
-  const group = deriveGroup(nom)
-
-  const openMenu = () => {
-    showMenu = true
-  }
-
-  const toggleMenu = () => {
-    showMenu = !showMenu
-  }
-
-  const leaveSpace = () => pushModal(SpaceExit, {nom})
-
-  let showMenu = false
-</script>
-
-<SecondaryNavSection>
-  <div>
-    <SecondaryNavItem class="w-full !justify-between" on:click={openMenu}>
-      <strong>{$group?.name || "[no name]"}</strong>
-      <Icon icon="alt-arrow-down" />
-    </SecondaryNavItem>
-    {#if showMenu}
-      <Popover onClose={toggleMenu}>
-        <ul
-          transition:fly|local
-          class="menu absolute z-popover mt-2 w-full rounded-box bg-base-100 p-2 shadow-xl">
-          <li class="text-error">
-            <Button on:click={leaveSpace}>
-              <Icon icon="exit" />
-              Leave Space
-            </Button>
-          </li>
-        </ul>
-      </Popover>
-    {/if}
-  </div>
-  <div class="h-2" />
-  <SecondaryNavHeader>
-    Rooms
-    <div class="cursor-pointer">
-      <Icon icon="add-circle" />
-    </div>
-  </SecondaryNavHeader>
-  <div in:fly>
-    <SecondaryNavItem href="/spaces">
-      <Icon icon="hashtag" /> Spaces
-    </SecondaryNavItem>
-  </div>
-  <div in:fly={{delay: 50}}>
-    <SecondaryNavItem href="/themes">
-      <Icon icon="hashtag" /> Themes
-    </SecondaryNavItem>
-  </div>
-</SecondaryNavSection>

src/app/components/SpaceExit.svelte

@@ -38,9 +38,7 @@
   <h1 class="heading">
     You are leaving <span class="text-primary">{$group?.name || "[no name]"}</span>
   </h1>
-  <p class="text-center">
+  <p class="text-center">Are you sure you want to leave?</p>
-    Are you sure you want to leave?
-  </p>
   <div class="flex flex-row items-center justify-between gap-4">
     <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />

src/app/components/SpaceJoin.svelte

@@ -15,7 +15,7 @@
 
   const back = () => history.back()
 
-  const browse = () => goto("/spaces")
+  const browse = () => goto("/discover")
 
   const joinQualifiedGroup = async (id: string) => {
     const [url, nom] = splitGroupId(id)

src/app/routes.ts

@@ -3,18 +3,13 @@ import {userGroupsByNom} from "@app/state"
 
 export const makeSpacePath = (nom: string) => `/spaces/${nom}`
 
-export const getPrimaryNavItem = ($page: Page) => {
+export const getPrimaryNavItem = ($page: Page) => $page.route?.id?.split("/")[1]
-  if ($page.route?.id?.match("^/(spaces|themes)$")) return "discover"
-  if ($page.route?.id?.startsWith("/spaces")) return "space"
-  if ($page.route?.id?.startsWith("/settings")) return "settings"
-  return "home"
-}
 
 export const getPrimaryNavItemIndex = ($page: Page) => {
   switch (getPrimaryNavItem($page)) {
     case "discover":
       return userGroupsByNom.get().size + 2
-    case "space":
+    case "spaces":
       return Array.from(userGroupsByNom.get().keys()).findIndex(nom => nom === $page.params.nom) + 1
     case "settings":
       return userGroupsByNom.get().size + 3

src/lib/components/Page.svelte

@@ -0,0 +1,3 @@
+<div class="max-h-screen flex-grow overflow-auto bg-base-200">
+  <slot />
+</div>

src/lib/components/PrimaryNavItem.svelte

@@ -2,13 +2,25 @@
   import Button from "@lib/components/Button.svelte"
 
   export let title = ""
+  export let href = ""
 </script>
 
-<Button on:click class="relative z-nav-item flex h-14 w-14 items-center justify-center">
+{#if href}
-  <div
+  <a {href} class="relative z-nav-item flex h-14 w-14 items-center justify-center">
-    class="avatar tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
+    <div
-    class:tooltip={title}
+      class="avatar tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
-    data-tip={title}>
+      class:tooltip={title}
-    <slot />
+      data-tip={title}>
-  </div>
+      <slot />
-</Button>
+    </div>
+  </a>
+{:else}
+  <Button on:click class="relative z-nav-item flex h-14 w-14 items-center justify-center">
+    <div
+      class="avatar tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
+      class:tooltip={title}
+      data-tip={title}>
+      <slot />
+    </div>
+  </Button>
+{/if}

src/lib/components/SecondaryNav.svelte

@@ -0,0 +1,3 @@
+<div class="flex w-60 flex-col gap-1 bg-base-300">
+  <slot />
+</div>

src/routes/+layout.svelte

@@ -8,7 +8,6 @@
   import Toast from "@app/components/Toast.svelte"
   import Landing from "@app/components/Landing.svelte"
   import PrimaryNav from "@app/components/PrimaryNav.svelte"
-  import SecondaryNav from "@app/components/SecondaryNav.svelte"
   import {modals, clearModal} from "@app/modal"
   import {theme} from "@app/theme"
   import {session, sessions, pk, repository} from "@app/base"
@@ -65,10 +64,7 @@
   <div data-theme={$theme}>
     <div class="flex h-screen">
       <PrimaryNav />
-      <SecondaryNav />
+      <slot />
-      <div class="max-h-screen flex-grow overflow-auto bg-base-200">
-        <slot />
-      </div>
     </div>
     <dialog bind:this={dialog} class="modal modal-bottom !z-modal sm:modal-middle">
       {#if prev}

src/routes/discover/+layout.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import {fly} from "@lib/transition"
+  import Icon from "@lib/components/Icon.svelte"
+  import Page from "@lib/components/Page.svelte"
+  import SecondaryNav from "@lib/components/SecondaryNav.svelte"
+  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
+  import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
+</script>
+
+<SecondaryNav>
+  <SecondaryNavSection>
+    <div in:fly>
+      <SecondaryNavItem href="/spaces">
+        <Icon icon="widget" /> Spaces
+      </SecondaryNavItem>
+    </div>
+    <div in:fly={{delay: 50}}>
+      <SecondaryNavItem href="/themes">
+        <Icon icon="pallete-2" /> Themes
+      </SecondaryNavItem>
+    </div>
+  </SecondaryNavSection>
+</SecondaryNav>
+
+<Page>
+  <slot />
+</Page>

src/routes/home/+layout.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import {fly} from "@lib/transition"
+  import Icon from "@lib/components/Icon.svelte"
+  import Page from "@lib/components/Page.svelte"
+  import SecondaryNav from "@lib/components/SecondaryNav.svelte"
+  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
+  import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
+  import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
+</script>
+
+<SecondaryNav>
+  <SecondaryNavSection>
+    <div in:fly>
+      <SecondaryNavItem href="/home">
+        <Icon icon="home-smile" /> Home
+      </SecondaryNavItem>
+    </div>
+    <div in:fly={{delay: 50}}>
+      <SecondaryNavItem href="/home/people">
+        <Icon icon="user-heart" /> People
+      </SecondaryNavItem>
+    </div>
+    <div in:fly={{delay: 100}}>
+      <SecondaryNavItem href="/home/notes">
+        <Icon icon="clipboard-text" /> Saved Notes
+      </SecondaryNavItem>
+    </div>
+    <div in:fly={{delay: 150}}>
+      <SecondaryNavHeader>
+        Conversations
+        <div class="cursor-pointer">
+          <Icon icon="add-circle" />
+        </div>
+      </SecondaryNavHeader>
+    </div>
+  </SecondaryNavSection>
+</SecondaryNav>
+
+<Page>
+  <slot />
+</Page>

src/routes/home/+page.svelte

@@ -6,7 +6,7 @@
 
   const createSpace = () => pushModal(SpaceCreate)
 
-  const browseSpaces = () => goto("/spaces")
+  const browseSpaces = () => goto("/discover")
 </script>
 
 <div class="hero min-h-screen bg-base-200">

src/routes/spaces/+layout.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import {goto} from "$app/navigation"
+  import {fly} from "@lib/transition"
+  import Icon from "@lib/components/Icon.svelte"
+  import Page from "@lib/components/Page.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Popover from "@lib/components/Popover.svelte"
+  import SecondaryNav from "@lib/components/SecondaryNav.svelte"
+  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
+  import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
+  import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
+  import SpaceExit from "@app/components/SpaceExit.svelte"
+  import {deriveGroup} from "@app/state"
+  import {pushModal} from "@app/modal"
+  import {removeGroupMemberships} from "@app/commands"
+
+  export let nom
+
+  const group = deriveGroup(nom)
+
+  const openMenu = () => {
+    showMenu = true
+  }
+
+  const toggleMenu = () => {
+    showMenu = !showMenu
+  }
+
+  const leaveSpace = () => pushModal(SpaceExit, {nom})
+
+  let showMenu = false
+</script>
+
+<SecondaryNav>
+  <SecondaryNavSection>
+    <div>
+      <SecondaryNavItem class="w-full !justify-between" on:click={openMenu}>
+        <strong>{$group?.name || "[no name]"}</strong>
+        <Icon icon="alt-arrow-down" />
+      </SecondaryNavItem>
+      {#if showMenu}
+        <Popover onClose={toggleMenu}>
+          <ul
+            transition:fly|local
+            class="menu absolute z-popover mt-2 w-full rounded-box bg-base-100 p-2 shadow-xl">
+            <li class="text-error">
+              <Button on:click={leaveSpace}>
+                <Icon icon="exit" />
+                Leave Space
+              </Button>
+            </li>
+          </ul>
+        </Popover>
+      {/if}
+    </div>
+    <div class="h-2" />
+    <SecondaryNavHeader>
+      Rooms
+      <div class="cursor-pointer">
+        <Icon icon="add-circle" />
+      </div>
+    </SecondaryNavHeader>
+    <div in:fly|local>
+      <SecondaryNavItem href="/invalid">
+        <Icon icon="hashtag" /> Spaces
+      </SecondaryNavItem>
+    </div>
+    <div in:fly|local={{delay: 50}}>
+      <SecondaryNavItem href="/invalid">
+        <Icon icon="hashtag" /> Themes
+      </SecondaryNavItem>
+    </div>
+  </SecondaryNavSection>
+</SecondaryNav>
+
+<Page>
+  <slot />
+</Page>