Move routes around, tweak navigation, fix CardButton

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>

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>

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>

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>

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>

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>