More nav tweaking

src/app/components/MenuHome.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-  import {pubkey} from "@welshman/app"
-  import Icon from "@lib/components/Icon.svelte"
-  import Link from "@lib/components/Link.svelte"
-  import CardButton from "@lib/components/CardButton.svelte"
-  import {makeChatPath} from "@app/routes"
-
-  $: notesPath = makeChatPath([$pubkey!])
-</script>
-
-<div class="column menu gap-2">
-  <Link href="/people">
-    <CardButton>
-      <div slot="icon"><Icon icon="user-heart" size={7} /></div>
-      <div slot="title">People</div>
-      <div slot="info">Search for people on the network</div>
-    </CardButton>
-  </Link>
-  <Link href="/network">
-    <CardButton>
-      <div slot="icon"><Icon icon="share-circle" size={7} /></div>
-      <div slot="title">Network</div>
-      <div slot="info">Browse posts from your network</div>
-    </CardButton>
-  </Link>
-  <Link href={notesPath}>
-    <CardButton>
-      <div slot="icon"><Icon icon="notes-minimalistic" size={7} /></div>
-      <div slot="title">Notes</div>
-      <div slot="info">Keep track of your notes</div>
-    </CardButton>
-  </Link>
-  <Link href="/chats">
-    <CardButton>
-      <div slot="icon"><Icon icon="chat-round" size={7} /></div>
-      <div slot="title">Chats</div>
-      <div slot="info">Keep in touch with encrypted chat</div>
-    </CardButton>
-  </Link>
-</div>

src/app/components/MenuSpaces.svelte

@@ -90,14 +90,11 @@
       <span class="text-primary">{displayRelayUrl(space)}</span>
     </p>
     <div class="grid sm:grid-cols-3 gap-2">
-      <Link href={makeSpacePath(space)} class="btn btn-neutral">
-        <Icon icon="chat-round" /> Chat
-      </Link>
       <Link href={makeSpacePath(space, "threads")} class="btn btn-neutral">
         <Icon icon="notes-minimalistic" /> Threads
       </Link>
-      <Link href={makeSpacePath(space, "calendar")} class="btn btn-neutral">
+      <Link href={makeSpacePath(space)} class="btn btn-neutral">
-        <Icon icon="calendar-minimalistic" /> Calendar
+        <Icon icon="hashtag" /> {GENERAL}
       </Link>
       {#each rooms as room, i (room)}
         <Link href={makeSpacePath(space, room)} class="btn btn-neutral">

src/app/components/PrimaryNav.svelte

@@ -5,7 +5,6 @@
   import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
   import SpaceAdd from "@app/components/SpaceAdd.svelte"
   import SpaceAvatar from "@app/components/SpaceAvatar.svelte"
-  import MenuHome from "@app/components/MenuHome.svelte"
   import MenuSpaces from "@app/components/MenuSpaces.svelte"
   import MenuSettings from "@app/components/MenuSettings.svelte"
   import {userMembership, getMembershipUrls} from "@app/state"
@@ -14,8 +13,6 @@
 
   const addSpace = () => pushModal(SpaceAdd)
 
-  const showHomeMenu = () => pushModal(MenuHome)
-
   const showSpacesMenu = () => pushModal(MenuSpaces)
 
   const showSettingsMenu = () => pushModal(MenuSettings)
@@ -49,18 +46,18 @@
       {/if}
     </div>
     <div>
-      <PrimaryNavItem title="Settings" href="/settings/profile" class="tooltip-right">
+      <PrimaryNavItem title="Settings" href="/settings/profile" prefix="/settings" class="tooltip-right">
         <Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
       </PrimaryNavItem>
-      <PrimaryNavItem title="People" href="/people" class="tooltip-right">
-        <Avatar icon="user-heart" class="!h-10 !w-10" />
-      </PrimaryNavItem>
       <PrimaryNavItem title="Threads" href="/network" class="tooltip-right">
         <Avatar icon="notes-minimalistic" class="!h-10 !w-10" />
       </PrimaryNavItem>
       <PrimaryNavItem title="Messages" href="/chat" class="tooltip-right">
         <Avatar icon="letter" class="!h-10 !w-10" />
       </PrimaryNavItem>
+      <PrimaryNavItem title="Search" href="/people" class="tooltip-right">
+        <Avatar icon="magnifer" class="!h-10 !w-10" />
+      </PrimaryNavItem>
     </div>
   </div>
 </div>
@@ -71,17 +68,17 @@
   class="border-top fixed bottom-0 left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
   <div class="m-auto flex max-w-md justify-between px-2">
     <div class="flex gap-4 sm:gap-8">
-      <PrimaryNavItem title="Spaces" on:click={showSpacesMenu}>
+      <PrimaryNavItem title="Search" href="/people">
-        <SpaceAvatar />
+        <Avatar icon="magnifer" class="!h-10 !w-10" />
-      </PrimaryNavItem>
-      <PrimaryNavItem title="People" href="/people">
-        <Avatar icon="user-heart" class="!h-10 !w-10" />
       </PrimaryNavItem>
       <PrimaryNavItem title="Messages" href="/chat">
         <Avatar icon="letter" class="!h-10 !w-10" />
       </PrimaryNavItem>
+      <PrimaryNavItem title="Spaces" on:click={showSpacesMenu}>
+        <SpaceAvatar />
+      </PrimaryNavItem>
     </div>
-    <PrimaryNavItem noActive title="Settings" on:click={showSettingsMenu}>
+    <PrimaryNavItem title="Settings" on:click={showSettingsMenu}>
       <Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
     </PrimaryNavItem>
   </div>

src/lib/components/PrimaryNavItem.svelte

@@ -4,11 +4,9 @@
 
   export let title = ""
   export let href = ""
-  export let noActive = false
+  export let prefix = ""
 
-  $: itemSegment = href.split("/")[1]
+  $: active = $page.url?.pathname?.startsWith(prefix || href || "bogus")
-  $: currentSegment = $page.route?.id?.split("/")[1]
-  $: active = itemSegment === currentSegment && !noActive
 </script>
 
 {#if href}

src/routes/spaces/[relay]/+layout.svelte

@@ -110,30 +110,20 @@
             </Popover>
           {/if}
         </div>
-        <div class="my-3 h-px bg-base-200" />
-        <div in:fly>
-          <SecondaryNavItem href={makeSpacePath(url)}>
-            <Icon icon="chat-round" /> Chat
-          </SecondaryNavItem>
-        </div>
         <div in:fly={{delay: getDelay(true)}}>
           <SecondaryNavItem href={makeSpacePath(url, "threads")}>
             <Icon icon="notes-minimalistic" /> Threads
           </SecondaryNavItem>
         </div>
-        <!--
+        <div transition:slide={{delay: getDelay()}}>
-        <div in:fly={{delay: getDelay()}}>
+          <div class="h-2" />
-          <SecondaryNavItem href={makeSpacePath(url, "calendar")}>
+          <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
-            <Icon icon="calendar-minimalistic" /> Calendar
+        </div>
+        <div transition:slide={{delay: getDelay()}}>
+          <SecondaryNavItem href={makeSpacePath(url)}>
+            <Icon icon="hashtag" /> {GENERAL}
           </SecondaryNavItem>
         </div>
-        -->
-        {#if rooms.length > 0}
-          <div transition:slide={{delay: getDelay()}}>
-            <div class="h-2" />
-            <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
-          </div>
-        {/if}
         {#each rooms as room, i (room)}
           <div transition:slide={{delay: getDelay()}}>
             <SecondaryNavItem href={makeSpacePath(url, room)}>