Move routes around, tweak navigation, fix CardButton

src/app/components/ChatItem.svelte

@@ -10,6 +10,7 @@
   import ProfileName from "@app/components/ProfileName.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
+  import {makeChatPath} from '@app/routes'
 
   export let id: string
   export let pubkeys: string[]
@@ -28,9 +29,9 @@
 </script>
 
 <div
-  class="cursor-pointer border-t border-solid border-base-100 px-6 py-2 transition-colors hover:bg-base-100"
+  class="cursor-pointer border-t border-solid border-base-100 px-6 py-2 transition-colors hover:bg-base-100 {$$props.class}"
   class:bg-base-100={active}>
-  <Link class="flex flex-col justify-start gap-1" href="/home/{id}">
+  <Link class="flex flex-col justify-start gap-1" href={makeChatPath(pubkeys)}>
     <div class="flex justify-between gap-2">
       <div class="flex min-w-0 items-center gap-2">
         {#if others.length === 1}

src/app/components/MenuHome.svelte

@@ -1,32 +1,36 @@
 <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="/home/people">
+  <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="/home/network">
+  <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="/home/notes">
+  <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="/home/chats">
+  <Link href="/chats">
     <CardButton>
       <div slot="icon"><Icon icon="chat-round" size={7} /></div>
       <div slot="title">Chats</div>

src/app/components/MenuSpaces.svelte

@@ -10,10 +10,11 @@
   import SpaceAvatar from "@app/components/SpaceAvatar.svelte"
   import RelayName from "@app/components/RelayName.svelte"
   import RelayDescription from "@app/components/RelayDescription.svelte"
-  import SpaceAdd from "@app/components/SpaceAdd.svelte"
   import SpaceExit from "@app/components/SpaceExit.svelte"
   import SpaceJoin from "@app/components/SpaceJoin.svelte"
   import RoomCreate from "@app/components/RoomCreate.svelte"
+  import SpaceCreateExternal from "@app/components/SpaceCreateExternal.svelte"
+  import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
   import {
     GENERAL,
     userMembership,
@@ -30,6 +31,10 @@
 
   const assertNotNil = <T,>(x: T) => x!
 
+  const startCreate = () => pushModal(SpaceCreateExternal)
+
+  const startJoin = () => pushModal(SpaceInviteAccept)
+
   const resetSpace = () => {
     space = ""
   }
@@ -46,8 +51,6 @@
     showSettings = false
   }
 
-  const addSpace = () => pushModal(SpaceAdd)
-
   const browseSpaces = () => goto("/discover")
 
   const leaveSpace = () => pushModal(SpaceExit, {url: space})
@@ -82,10 +85,11 @@
       Go Back
     </Button>
   {:else if space}
-    <p class="mb-4 text-center text-2xl">
-      Actions for <span class="text-primary">{displayRelayUrl(space)}</span>
+    <p class="mb-4 text-2xl center gap-2">
+      <Icon icon="remote-controller-minimalistic" size={7} />
+      <span class="text-primary">{displayRelayUrl(space)}</span>
     </p>
-    <div class="grid grid-cols-3 gap-2">
+    <div class="grid sm:grid-cols-3 gap-2">
       <Link href={makeSpacePath(space)} class="btn btn-neutral">
         <Icon icon="chat-round" /> Chat
       </Link>
@@ -108,7 +112,7 @@
         </Link>
       {/each}
     </div>
-    <div class="grid grid-cols-2 gap-2">
+    <div class="grid sm:grid-cols-2 gap-2">
       <Button on:click={addRoom} class="btn btn-primary">
         <Icon icon="add-circle" />
         Create Room
@@ -134,18 +138,25 @@
     {#if getMembershipUrls($userMembership).length > 0}
       <Divider />
     {/if}
-    <Button on:click={addSpace}>
+    <Button on:click={startJoin}>
       <CardButton>
-        <div slot="icon"><Icon icon="add-circle" size={7} /></div>
-        <div slot="title">Add a space</div>
-        <div slot="info">Invite all your friends, do life together.</div>
+        <div slot="icon"><Icon icon="login-2" size={7} /></div>
+        <div slot="title">Join a space</div>
+        <div slot="info">Enter an invite code or url to join an existing space.</div>
       </CardButton>
     </Button>
-    <Button on:click={browseSpaces}>
+    <Link href="/discover">
       <CardButton>
         <div slot="icon"><Icon icon="compass" size={7} /></div>
-        <div slot="title">Discover spaces</div>
-        <div slot="info">Find a community based on your hobbies or interests.</div>
+        <div slot="title">Find a space</div>
+        <div slot="info">Browse spaces on the discover page.</div>
+      </CardButton>
+    </Link>
+    <Button on:click={startCreate}>
+      <CardButton>
+        <div slot="icon"><Icon icon="add-circle" size={7} /></div>
+        <div slot="title">Create a space</div>
+        <div slot="info">Just a few questions and you'll be on your way.</div>
       </CardButton>
     </Button>
   {/if}

src/app/components/PeopleItem.svelte

@@ -28,8 +28,6 @@
   const filters: Filter[] = [{kinds: [NOTE], authors: [pubkey], since: ago(WEEK)}]
   const events = deriveEvents(repository, {filters})
 
-  const onClick = () => pushDrawer(ProfileDetail, {pubkey})
-
   $: roots = $events.filter(e => getAncestorTags(e.tags).replies.length === 0)
 
   onMount(async () => {
@@ -44,7 +42,7 @@
   })
 </script>
 
-<Button class="card2 bg-alt flex flex-col shadow-xl" on:click={onClick}>
+<div class="card2 bg-alt flex flex-col shadow-xl">
   <Profile {pubkey} />
   <ProfileInfo {pubkey} />
   {#if roots.length > 0}
@@ -53,7 +51,7 @@
     {@const nevent = nip19.neventEncode({id: event.id, relays})}
     {@const following = getPubkeyTagValues(getListTags($userFollows)).includes(pubkey)}
     <div class="divider" />
-    <button type="button" class="chat chat-start flex cursor-default" on:click|stopPropagation>
+    <button type="button" class="chat chat-start flex cursor-default max-w-full ml-2" on:click|stopPropagation>
       <div class="bg-alt col-4 chat-bubble text-left">
         <Content showEntire hideMedia={!following} {event} />
         <Link external href={entityLink(nevent)} class="row-2 group justify-end whitespace-nowrap">
@@ -71,4 +69,4 @@
       </div>
     </div>
   {/if}
-</Button>
+</div>

src/app/components/PrimaryNav.svelte

@@ -21,12 +21,9 @@
   const showSettingsMenu = () => pushModal(MenuSettings)
 </script>
 
-<div class="relative hidden w-14 flex-shrink-0 bg-base-100 pt-4 md:block">
+<div class="relative hidden w-14 flex-shrink-0 bg-base-200 pt-4 md:block">
   <div class="flex h-full flex-col justify-between">
     <div>
-      <PrimaryNavItem href="/home/people" class="tooltip-right">
-        <Avatar icon="home-smile" class="!h-10 !w-10" />
-      </PrimaryNavItem>
       {#if import.meta.env.VITE_PLATFORM_RELAY}
         <PrimaryNavItem
           title={displayRelayUrl(import.meta.env.VITE_PLATFORM_RELAY)}
@@ -52,11 +49,17 @@
       {/if}
     </div>
     <div>
-      <PrimaryNavItem title="Profile" href="/settings/profile" class="tooltip-right">
+      <PrimaryNavItem title="Settings" href="/settings/profile" class="tooltip-right">
         <Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
       </PrimaryNavItem>
-      <PrimaryNavItem title="Settings" href="/settings/relays" class="tooltip-right">
-        <Avatar icon="settings" class="!h-10 !w-10" />
+      <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>
     </div>
   </div>
@@ -68,17 +71,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="Home" on:click={showHomeMenu}>
-        <Avatar icon="home-smile" class="!h-10 !w-10" />
-      </PrimaryNavItem>
       <PrimaryNavItem title="Spaces" on:click={showSpacesMenu}>
         <SpaceAvatar />
       </PrimaryNavItem>
-      <PrimaryNavItem title="Settings" on:click={showSettingsMenu}>
-        <Avatar icon="settings" class="!h-10 !w-10" />
+      <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>
     </div>
-    <PrimaryNavItem noActive title="Settings" href="/settings/profile">
+    <PrimaryNavItem noActive title="Settings" on:click={showSettingsMenu}>
       <Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
     </PrimaryNavItem>
   </div>

src/app/routes.ts

@@ -12,7 +12,7 @@ export const makeSpacePath = (url: string, extra = "") => {
   return path
 }
 
-export const makeChatPath = (pubkeys: string[]) => `/home/${makeChatId(pubkeys)}`
+export const makeChatPath = (pubkeys: string[]) => `/chat/${makeChatId(pubkeys)}`
 
 export const getPrimaryNavItem = ($page: Page) => $page.route?.id?.split("/")[1]