From dea34f96eccbbae88edd4a5954815ced0aad8e35 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Mon, 21 Oct 2024 13:18:48 -0700
Subject: [PATCH] Move routes around, tweak navigation, fix CardButton

---
 src/app.css                                   | 12 -----
 src/app/components/ChatItem.svelte            |  5 +-
 src/app/components/MenuHome.svelte            | 12 +++--
 src/app/components/MenuSpaces.svelte          | 39 +++++++++-----
 src/app/components/PeopleItem.svelte          |  8 ++-
 src/app/components/PrimaryNav.svelte          | 29 +++++-----
 src/app/routes.ts                             |  2 +-
 src/assets/icons/Letter.svg                   |  4 ++
 src/lib/components/CardButton.svelte          | 26 ++++-----
 src/lib/components/Divider.svelte             |  6 ++-
 src/lib/components/Icon.svelte                |  2 +
 src/lib/components/Page.svelte                |  2 +-
 src/lib/html.ts                               |  4 +-
 src/routes/{home => chat}/+layout.svelte      | 18 ++-----
 src/routes/{home/chats => chat}/+page.svelte  | 42 +++++++++------
 src/routes/{home => chat}/[chat]/+page.svelte |  0
 src/routes/home/+page.svelte                  |  4 +-
 src/routes/{home => }/network/+page.svelte    | 53 ++++++++++---------
 src/routes/{home => }/people/+page.svelte     |  9 ++--
 src/routes/settings/about/+page.svelte        |  2 +-
 20 files changed, 149 insertions(+), 130 deletions(-)
 create mode 100644 src/assets/icons/Letter.svg
 rename src/routes/{home => chat}/+layout.svelte (85%)
 rename src/routes/{home/chats => chat}/+page.svelte (60%)
 rename src/routes/{home => chat}/[chat]/+page.svelte (100%)
 rename src/routes/{home => }/network/+page.svelte (73%)
 rename src/routes/{home => }/people/+page.svelte (82%)

diff --git a/src/app.css b/src/app.css
index 7224373..d46f322 100644
--- a/src/app.css
+++ b/src/app.css
@@ -116,18 +116,6 @@
   @apply m-auto w-full max-w-3xl p-4 sm:p-8 md:p-12;
 }
 
-.content-t {
-  @apply pt-4 sm:pt-8 md:pt-12;
-}
-
-.content-b {
-  @apply pb-4 sm:pb-8 md:pb-12;
-}
-
-.content-x {
-  @apply px-4 sm:px-8 md:px-12;
-}
-
 .heading {
   @apply text-center text-2xl;
 }
diff --git a/src/app/components/ChatItem.svelte b/src/app/components/ChatItem.svelte
index 727a9af..430f5ca 100644
--- a/src/app/components/ChatItem.svelte
+++ b/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}
diff --git a/src/app/components/MenuHome.svelte b/src/app/components/MenuHome.svelte
index 5e03e9b..47e343f 100644
--- a/src/app/components/MenuHome.svelte
+++ b/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>
diff --git a/src/app/components/MenuSpaces.svelte b/src/app/components/MenuSpaces.svelte
index ccfd042..08eb67e 100644
--- a/src/app/components/MenuSpaces.svelte
+++ b/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}
diff --git a/src/app/components/PeopleItem.svelte b/src/app/components/PeopleItem.svelte
index 8598ea0..50db92a 100644
--- a/src/app/components/PeopleItem.svelte
+++ b/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>
diff --git a/src/app/components/PrimaryNav.svelte b/src/app/components/PrimaryNav.svelte
index e674aa7..e6492db 100644
--- a/src/app/components/PrimaryNav.svelte
+++ b/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>
diff --git a/src/app/routes.ts b/src/app/routes.ts
index 0d544ef..2f16c93 100644
--- a/src/app/routes.ts
+++ b/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]
 
diff --git a/src/assets/icons/Letter.svg b/src/assets/icons/Letter.svg
new file mode 100644
index 0000000..f3b9ad9
--- /dev/null
+++ b/src/assets/icons/Letter.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12C22 15.7712 22 17.6569 20.8284 18.8284C19.6569 20 17.7712 20 14 20H10C6.22876 20 4.34315 20 3.17157 18.8284C2 17.6569 2 15.7712 2 12Z" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M6 8L8.1589 9.79908C9.99553 11.3296 10.9139 12.0949 12 12.0949C13.0861 12.0949 14.0045 11.3296 15.8411 9.79908L18 8" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/lib/components/CardButton.svelte b/src/lib/components/CardButton.svelte
index eb63dd1..0d0610a 100644
--- a/src/lib/components/CardButton.svelte
+++ b/src/lib/components/CardButton.svelte
@@ -2,19 +2,21 @@
   import Icon from "@lib/components/Icon.svelte"
 </script>
 
-<div class="btn btn-neutral btn-lg h-24 w-full text-left">
-  <div class="flex w-full flex-row items-center justify-between gap-2 {$$props.class}">
-    <div class="flex items-center gap-6">
-      <div class="center w-12">
-        <slot name="icon" />
-      </div>
-      <div class="flex flex-grow flex-col gap-2">
-        <p class="text-bold"><slot name="title" /></p>
-        <p class="text-xs"><slot name="info" /></p>
-      </div>
+<div class="btn btn-neutral h-[unset] flex flex-nowrap w-full text-left py-4 {$$props.class}">
+  <div class="flex flex-row items-start gap-1 flex-grow">
+    <div class="w-12 h-14 flex items-center flex-shrink-0">
+      <slot name="icon" />
     </div>
-    <div class="center w-12">
-      <Icon size={7} icon="alt-arrow-right" />
+    <div class="flex flex-col gap-1">
+      <p class="text-lg text-bold pt-2">
+        <slot name="title" />
+      </p>
+      <p class="text-sm">
+        <slot name="info" />
+      </p>
     </div>
   </div>
+  <div class="w-14 h-14 flex items-center justify-end">
+    <Icon size={7} icon="alt-arrow-right" />
+  </div>
 </div>
diff --git a/src/lib/components/Divider.svelte b/src/lib/components/Divider.svelte
index a1a73b7..b7a37d9 100644
--- a/src/lib/components/Divider.svelte
+++ b/src/lib/components/Divider.svelte
@@ -1,5 +1,7 @@
 <div class="flex items-center gap-2 p-2 text-xs uppercase opacity-50">
   <div class="h-px flex-grow bg-base-content opacity-25" />
-  <p><slot /></p>
-  <div class="h-px flex-grow bg-base-content opacity-25" />
+  {#if $$slots.default}
+    <p><slot /></p>
+    <div class="h-px flex-grow bg-base-content opacity-25" />
+  {/if}
 </div>
diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte
index 92a95d7..1fa8816 100644
--- a/src/lib/components/Icon.svelte
+++ b/src/lib/components/Icon.svelte
@@ -48,6 +48,7 @@
   import InfoSquare from "@assets/icons/Info Square.svg?dataurl"
   import Key from "@assets/icons/Key.svg?dataurl"
   import KeyMinimalisticSquare3 from "@assets/icons/Key Minimalistic Square 3.svg?dataurl"
+  import Letter from "@assets/icons/Letter.svg?dataurl"
   import LinkRound from "@assets/icons/Link Round.svg?dataurl"
   import Login from "@assets/icons/Login.svg?dataurl"
   import Login2 from "@assets/icons/Login 2.svg?dataurl"
@@ -123,6 +124,7 @@
     "info-square": InfoSquare,
     key: Key,
     "key-minimalistic-square-3": KeyMinimalisticSquare3,
+    letter: Letter,
     "link-round": LinkRound,
     login: Login,
     "login-2": Login2,
diff --git a/src/lib/components/Page.svelte b/src/lib/components/Page.svelte
index 2111f9e..9a66dd6 100644
--- a/src/lib/components/Page.svelte
+++ b/src/lib/components/Page.svelte
@@ -1,3 +1,3 @@
-<div class="scroll-container max-h-screen flex-grow overflow-auto bg-base-200 pb-14 md:pb-0">
+<div class="scroll-container max-h-screen flex-grow overflow-auto bg-base-200 pb-14 md:pb-0 {$$props.class}">
   <slot />
 </div>
diff --git a/src/lib/html.ts b/src/lib/html.ts
index f0d6e76..a29e741 100644
--- a/src/lib/html.ts
+++ b/src/lib/html.ts
@@ -34,7 +34,9 @@ export const createScroller = ({
   let done = false
 
   const check = async () => {
-    const container = element.closest(".scroll-container")
+    const container = element.classList.contains('scroll-container')
+      ? element
+      : element.closest(".scroll-container")
 
     if (container) {
       // While we have empty space, fill it
diff --git a/src/routes/home/+layout.svelte b/src/routes/chat/+layout.svelte
similarity index 85%
rename from src/routes/home/+layout.svelte
rename to src/routes/chat/+layout.svelte
index f4b9ba5..8be5204 100644
--- a/src/routes/home/+layout.svelte
+++ b/src/routes/chat/+layout.svelte
@@ -15,6 +15,7 @@
   import ChatStart from "@app/components/ChatStart.svelte"
   import ChatItem from "@app/components/ChatItem.svelte"
   import {chatSearch, pullConservatively} from "@app/state"
+  import {makeChatPath} from "@app/routes"
   import {pushModal} from "@app/modal"
 
   const startChat = () => pushModal(ChatStart)
@@ -22,6 +23,7 @@
   let term = ""
 
   $: chats = $chatSearch.searchOptions(term).filter(c => c.pubkeys.length > 1)
+  $: notesPath = makeChatPath([$pubkey!])
 
   onMount(() => {
     const filter = {kinds: [WRAP], "#p": [$pubkey!]}
@@ -37,21 +39,11 @@
 <SecondaryNav>
   <SecondaryNavSection>
     <div in:fly>
-      <SecondaryNavItem href="/home/people">
-        <Icon icon="user-heart" /> People
-      </SecondaryNavItem>
-    </div>
-    <div in:fly={{delay: 50}}>
-      <SecondaryNavItem href="/home/network">
-        <Icon icon="share-circle" /> Network
-      </SecondaryNavItem>
-    </div>
-    <div in:fly={{delay: 100}}>
-      <SecondaryNavItem href="/home/notes">
+      <SecondaryNavItem href={notesPath}>
         <Icon icon="notes-minimalistic" /> Your Notes
       </SecondaryNavItem>
     </div>
-    <div in:fly={{delay: 150}}>
+    <div in:fly={{delay: 50}}>
       <SecondaryNavHeader>
         Chats
         <Button on:click={startChat}>
@@ -62,7 +54,7 @@
   </SecondaryNavSection>
   <label
     class="input input-sm input-bordered mx-6 -mt-4 mb-2 flex items-center gap-2"
-    in:fly={{delay: 200}}>
+    in:fly={{delay: 100}}>
     <Icon icon="magnifer" />
     <input bind:value={term} class="grow" type="text" />
   </label>
diff --git a/src/routes/home/chats/+page.svelte b/src/routes/chat/+page.svelte
similarity index 60%
rename from src/routes/home/chats/+page.svelte
rename to src/routes/chat/+page.svelte
index e049094..b641b0d 100644
--- a/src/routes/home/chats/+page.svelte
+++ b/src/routes/chat/+page.svelte
@@ -3,7 +3,6 @@
   import {ctx, ago} from "@welshman/lib"
   import {WRAP} from "@welshman/util"
   import {pubkey, subscribe} from "@welshman/app"
-  import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ChatItem from "@app/components/ChatItem.svelte"
@@ -30,9 +29,20 @@
   })
 </script>
 
-<div class="content column gap-2">
-  <div class="row-2 min-w-0 items-center">
-    <label class="input input-bordered flex flex-grow items-center gap-2" in:fly={{delay: 250}}>
+<div class="min-h-screen hidden md:hero">
+  <div class="hero-content col-2 text-center">
+    <p class="row-2 text-lg">
+      <Icon icon="info-circle" />
+      No conversation selected.
+    </p>
+    <p>
+      Click on a conversation in the sidebar, or <Button class="link" on:click={startChat}>start a new one</Button>.
+    </p>
+  </div>
+</div>
+<div class="content col-2">
+  <div class="row-2 min-w-0 items-center flex-grow">
+    <label class="input input-bordered flex flex-grow items-center gap-2">
       <Icon icon="magnifer" />
       <input bind:value={term} class="grow" type="text" placeholder="Search for conversations..." />
     </label>
@@ -40,17 +50,15 @@
       <Icon icon="add-circle" />
     </Button>
   </div>
-  <div class="column gap-2 overflow-auto">
-    {#each chats as { id, pubkeys, messages } (id)}
-      <ChatItem {id} {pubkeys} {messages} />
-    {:else}
-      <div class="py-20 max-w-sm col-4 items-center m-auto text-center">
-        <p>No chats found! Try starting one up.</p>
-        <Button class="btn btn-primary" on:click={startChat}>
-          <Icon icon="add-circle" />
-          Start a Chat
-        </Button>
-      </div>
-    {/each}
-  </div>
+  {#each chats as { id, pubkeys, messages } (id)}
+    <ChatItem {id} {pubkeys} {messages} class="bg-alt card2" />
+  {:else}
+    <div class="py-20 max-w-sm col-4 items-center m-auto text-center">
+      <p>No chats found! Try starting one up.</p>
+      <Button class="btn btn-primary" on:click={startChat}>
+        <Icon icon="add-circle" />
+        Start a Chat
+      </Button>
+    </div>
+  {/each}
 </div>
diff --git a/src/routes/home/[chat]/+page.svelte b/src/routes/chat/[chat]/+page.svelte
similarity index 100%
rename from src/routes/home/[chat]/+page.svelte
rename to src/routes/chat/[chat]/+page.svelte
diff --git a/src/routes/home/+page.svelte b/src/routes/home/+page.svelte
index 7954c4f..fb84fc7 100644
--- a/src/routes/home/+page.svelte
+++ b/src/routes/home/+page.svelte
@@ -12,7 +12,7 @@
   const startChat = () => pushModal(ChatStart)
 </script>
 
-<div class="hero min-h-screen bg-base-200">
+<div class="hero min-h-screen">
   <div class="hero-content">
     <div class="column content gap-4">
       <h1 class="text-center text-5xl">Welcome to</h1>
@@ -32,7 +32,7 @@
             <div slot="info">Find a community based on your hobbies or interests.</div>
           </CardButton>
         </Link>
-        <Link href="/home/people">
+        <Link href="/people">
           <CardButton>
             <div slot="icon"><Icon icon="plain" size={7} /></div>
             <div slot="title">Browse the network</div>
diff --git a/src/routes/home/network/+page.svelte b/src/routes/network/+page.svelte
similarity index 73%
rename from src/routes/home/network/+page.svelte
rename to src/routes/network/+page.svelte
index d7608ad..22bd436 100644
--- a/src/routes/home/network/+page.svelte
+++ b/src/routes/network/+page.svelte
@@ -14,6 +14,7 @@
   import {deriveEvents} from "@welshman/store"
   import {repository, userFollows, load} from "@welshman/app"
   import Link from "@lib/components/Link.svelte"
+  import Page from "@lib/components/Page.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
@@ -59,7 +60,7 @@
 
     const scroller = createScroller({
       element,
-      onScroll: () => {
+      onScroll: async () => {
         const seen = new Set(events.map(e => e.id))
         const eligible = sortBy(
           scoreEvent,
@@ -74,28 +75,30 @@
   })
 </script>
 
-<div class="content column gap-4" bind:this={element}>
-  {#await loading}
-    <div class="center my-20">
-      <Spinner loading>Loading posts from people you follow...</Spinner>
-    </div>
-  {:then}
-    <div class="flex flex-col gap-2">
-      {#each events as event (event.id)}
-        <NoteCard {event} class="card2 bg-alt w-full">
-          <div class="ml-12">
-            <Content {event} />
+<Page>
+  <div class="content column gap-4" bind:this={element}>
+    {#await loading}
+      <div class="center my-20">
+        <Spinner loading>Loading posts from people you follow...</Spinner>
+      </div>
+    {:then}
+      <div class="flex flex-col gap-2">
+        {#each events as event (event.id)}
+          <NoteCard {event} class="card2 bg-alt w-full">
+            <div class="ml-12">
+              <Content {event} />
+            </div>
+          </NoteCard>
+        {:else}
+          <div class="py-20 max-w-sm col-4 items-center m-auto text-center">
+            <p>No activity found! Try following a few more people.</p>
+            <Link class="btn btn-primary" href="/people">
+              <Icon icon="user-heart" />
+              Browse Profiles
+            </Link>
           </div>
-        </NoteCard>
-      {:else}
-        <div class="py-20 max-w-sm col-4 items-center m-auto text-center">
-          <p>No activity found! Try following a few more people.</p>
-          <Link class="btn btn-primary" href="/home/people">
-            <Icon icon="user-heart" />
-            Browse Profiles
-          </Link>
-        </div>
-      {/each}
-    </div>
-  {/await}
-</div>
+        {/each}
+      </div>
+    {/await}
+  </div>
+</Page>
diff --git a/src/routes/home/people/+page.svelte b/src/routes/people/+page.svelte
similarity index 82%
rename from src/routes/home/people/+page.svelte
rename to src/routes/people/+page.svelte
index 24ba47e..6f86612 100644
--- a/src/routes/home/people/+page.svelte
+++ b/src/routes/people/+page.svelte
@@ -3,6 +3,7 @@
   import {createScroller} from "@lib/html"
   import {profileSearch} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
+  import Page from "@lib/components/Page.svelte"
   import PeopleItem from "@app/components/PeopleItem.svelte"
   import {getDefaultPubkeys} from "@app/state"
 
@@ -26,16 +27,14 @@
   })
 </script>
 
-<div class="m-auto w-full max-w-3xl column content-t" bind:this={element}>
-  <div class="content-x flex-grow">
+<Page>
+  <div class="content col-2" bind:this={element}>
     <label class="input input-bordered flex w-full items-center gap-2">
       <Icon icon="magnifer" />
       <input bind:value={term} class="grow" type="text" placeholder="Search for people..." />
     </label>
-  </div>
-  <div class="content-b content-x flex flex-col gap-2 overflow-auto pt-2">
     {#each pubkeys.slice(0, limit) as pubkey (pubkey)}
       <PeopleItem {pubkey} />
     {/each}
   </div>
-</div>
+</Page>
diff --git a/src/routes/settings/about/+page.svelte b/src/routes/settings/about/+page.svelte
index f7a3a79..ac63343 100644
--- a/src/routes/settings/about/+page.svelte
+++ b/src/routes/settings/about/+page.svelte
@@ -29,7 +29,7 @@
           <p class="sm:h-16">Having problems? Let us know.</p>
           <Link
             class="btn btn-primary"
-            href="/home/97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322">
+            href="/chat/97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322">
             Chat with the Developer
           </Link>
         </div>