Add mobile layout

src/routes/discover/+page.svelte

@@ -4,6 +4,7 @@
   import {relaySearch} from "@welshman/app"
   import {createScroller} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
+  import PageHeader from "@lib/components/PageHeader.svelte"
   import RelayName from "@app/components/RelayName.svelte"
   import RelayDescription from "@app/components/RelayDescription.svelte"
   import {makeSpacePath} from "@app/routes"
@@ -32,8 +33,10 @@
 </script>
 
 <div class="content column gap-4" bind:this={element}>
-  <h1 class="superheading mt-20">Discover Spaces</h1>
-  <p class="text-center">Find communities all across the nostr network</p>
+  <PageHeader>
+    <div slot="title">Discover Spaces</div>
+    <div slot="info">Find communities all across the nostr network</div>
+  </PageHeader>
   <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 spaces..." />

src/routes/discover/themes/+page.svelte

@@ -3,6 +3,7 @@
   import {identity} from "@welshman/lib"
   import {createSearch} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
+  import PageHeader from "@lib/components/PageHeader.svelte"
   import {theme} from "@app/theme"
 
   let term = ""
@@ -11,8 +12,10 @@
 </script>
 
 <div class="content column gap-4">
-  <h1 class="superheading mt-20">Discover Themes</h1>
-  <p class="text-center">Make your community feel like home</p>
+  <PageHeader>
+    <div slot="title">Discover Themes</div>
+    <div slot="info">Make your community feel like home</div>
+  </PageHeader>
   <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 themes..." />

src/routes/home/[chat]/+page.svelte

@@ -83,26 +83,26 @@
 </script>
 
 <div class="relative flex h-screen flex-col">
-  <div class="relative z-feature mx-2 rounded-xl pt-4">
-    <div
-      class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
-      <div class="flex items-center gap-2">
-        {#if others.length === 0}
-          Your notes
-        {:else if others.length === 1}
-          <ProfileCircle pubkey={others[0]} size={5} />
-          <Name pubkey={others[0]} />
-        {:else}
-          <ProfileCircles pubkeys={others} size={5} />
-          <p class="overflow-hidden text-ellipsis whitespace-nowrap">
+  {#if others.length > 0}
+    <div class="relative z-feature mx-2 rounded-xl pt-4">
+      <div
+        class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
+        <div class="flex items-center gap-2">
+          {#if others.length === 1}
+            <ProfileCircle pubkey={others[0]} size={5} />
             <Name pubkey={others[0]} />
-            and {others.length - 1}
-            {others.length > 2 ? "others" : "other"}
-          </p>
-        {/if}
+          {:else}
+            <ProfileCircles pubkeys={others} size={5} />
+            <p class="overflow-hidden text-ellipsis whitespace-nowrap">
+              <Name pubkey={others[0]} />
+              and {others.length - 1}
+              {others.length > 2 ? "others" : "other"}
+            </p>
+          {/if}
+        </div>
       </div>
     </div>
-  </div>
+  {/if}
   <div class="-mt-2 flex flex-grow flex-col-reverse overflow-auto py-2">
     {#each elements as { type, id, value, showPubkey } (id)}
       {#if type === "date"}
@@ -123,7 +123,5 @@
       </Spinner>
     </p>
   </div>
-  <div class="shadow-top-xl border-t border-solid border-base-100 bg-base-100">
-    <ChatCompose {onSubmit} />
-  </div>
+  <ChatCompose {onSubmit} />
 </div>

src/routes/home/chats/+page.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import {onMount} from "svelte"
+  import {page} from "$app/stores"
+  import {ctx, ago, remove} 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 Page from "@lib/components/Page.svelte"
+  import Link from "@lib/components/Link.svelte"
+  import Button from "@lib/components/Button.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 Name from "@app/components/Name.svelte"
+  import ProfileCircle from "@app/components/ProfileCircle.svelte"
+  import ProfileCircles from "@app/components/ProfileCircles.svelte"
+  import ChatStart from "@app/components/ChatStart.svelte"
+  import {chatSearch, pullConservatively} from "@app/state"
+  import {pushModal} from "@app/modal"
+
+  let term = ""
+
+  $: chats = $chatSearch.searchOptions(term).filter(c => c.pubkeys.length > 1)
+
+  onMount(() => {
+    const filter = {kinds: [WRAP], "#p": [$pubkey!]}
+    const sub = subscribe({filters: [{...filter, since: ago(30)}]})
+
+    pullConservatively({
+      filters: [filter],
+      relays: ctx.app.router.InboxRelays().getUrls(),
+    })
+
+    return () => sub.close()
+  })
+</script>
+
+<div class="content column gap-2">
+  <label class="input input-bordered flex items-center gap-2 mb-2" in:fly={{delay: 250}}>
+    <Icon icon="magnifer" />
+    <input bind:value={term} class="grow" type="text" placeholder="Search for conversations..." />
+  </label>
+  <div class="overflow-auto column gap-2">
+    {#each chats as { id, pubkeys, messages }, i (id)}
+      {@const message = messages[0]}
+      {@const others = remove($pubkey, pubkeys)}
+      <div class="cursor-pointer card2 bg-alt hover:bg-alt px-6 py-2 transition-colors">
+        <Link class="flex flex-col justify-start gap-1" href="/home/{id}">
+          <div class="flex items-center gap-2">
+            {#if others.length === 1}
+              <ProfileCircle pubkey={others[0]} size={5} />
+              <Name pubkey={others[0]} />
+            {:else}
+              <ProfileCircles pubkeys={others} size={5} />
+              <p class="overflow-hidden text-ellipsis whitespace-nowrap">
+                <Name pubkey={others[0]} />
+                and {others.length - 1}
+                {others.length > 2 ? "others" : "other"}
+              </p>
+            {/if}
+          </div>
+          <p class="overflow-hidden text-ellipsis whitespace-nowrap text-sm">
+            {message.content}
+          </p>
+        </Link>
+      </div>
+    {/each}
+  </div>
+</div>

src/routes/home/people/+page.svelte

@@ -28,8 +28,8 @@
 </script>
 
 <div class="content column gap-4" bind:this={element}>
-  <h1 class="superheading mt-20">People</h1>
-  <p class="text-center">Get the latest from people in your network</p>
+  <h1 class="superheading mt-20 hidden sm:block">People</h1>
+  <p class="text-center hidden sm:block">Get the latest from people in your network</p>
   <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..." />

src/routes/settings/about/+page.svelte

@@ -9,7 +9,7 @@
     pushDrawer(ProfileDetail, {pubkey: '97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322'})
 </script>
 
-<div class="hero min-h-screen bg-base-200">
+<div class="mt-8 sm:hero min-h-screen bg-base-200">
   <div class="hero-content">
     <div class="column content gap-6">
       <p class="text-center text-2xl">Thanks for using</p>

src/routes/spaces/+page.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-  import {goto} from '$app/navigation'
-  import Icon from '@lib/components/Icon.svelte'
-  import Page from '@lib/components/Page.svelte'
-  import Link from '@lib/components/Link.svelte'
-  import Button from '@lib/components/Button.svelte'
-  import Divider from '@lib/components/Divider.svelte'
-  import CardButton from '@lib/components/CardButton.svelte'
-  import SpaceAvatar from "@app/components/SpaceAvatar.svelte"
-  import RelayName from "@app/components/RelayName.svelte"
-  import RelayDescription from "@app/components/RelayDescription.svelte"
-  import SpaceCreateExternal from "@app/components/SpaceCreateExternal.svelte"
-  import {userMembership, getMembershipUrls} from "@app/state"
-  import {makeSpacePath} from "@app/routes"
-  import {pushModal} from "@app/modal"
-
-  const createSpace = () => pushModal(SpaceCreateExternal)
-
-  const browseSpaces = () => goto("/discover")
-</script>
-
-<Page>
-  <div class="content column gap-4">
-    <h1 class="superheading mt-20">Spaces</h1>
-    <p class="text-center">Jump back in to your community, or find a new one</p>
-    <div class="flex flex-col gap-2">
-      {#each getMembershipUrls($userMembership) as url (url)}
-        <Link href={makeSpacePath(url)}>
-          <CardButton>
-            <div slot="icon"><SpaceAvatar {url} /></div>
-            <div slot="title"><RelayName {url} /></div>
-            <div slot="info"><RelayDescription {url} /></div>
-          </CardButton>
-        </Link>
-      {/each}
-      <Divider />
-      <Button on:click={createSpace}>
-        <CardButton>
-          <div slot="icon"><Icon icon="add-circle" size={7} /></div>
-          <div slot="title">Create a space</div>
-          <div slot="info">Invite all your friends, do life together.</div>
-        </CardButton>
-      </Button>
-      <Button on:click={browseSpaces}>
-        <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>
-        </CardButton>
-      </Button>
-    </div>
-  </div>
-</Page>

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

@@ -16,7 +16,7 @@
   import SpaceExit from "@app/components/SpaceExit.svelte"
   import SpaceJoin from "@app/components/SpaceJoin.svelte"
   import RoomCreate from "@app/components/RoomCreate.svelte"
-  import {getMembershipRoomsByUrl, userMembership, pullConservatively, roomsByUrl, decodeNRelay, GENERAL, MESSAGE} from "@app/state"
+  import {getMembershipRoomsByUrl, getMembershipUrls, userMembership, pullConservatively, roomsByUrl, decodeNRelay, GENERAL, MESSAGE} from "@app/state"
   import {pushModal} from "@app/modal"
   import {makeSpacePath} from "@app/routes"
 
@@ -74,7 +74,7 @@
             <ul
               transition:fly
               class="menu absolute z-popover mt-2 w-full rounded-box bg-base-100 p-2 shadow-xl">
-              {#if getMembershipRoomsByUrl(url, $userMembership)}
+              {#if getMembershipUrls($userMembership).includes(url)}
                 <li class="text-error">
                   <Button on:click={leaveSpace}>
                     <Icon icon="exit" />
@@ -101,7 +101,7 @@
       </div>
       <div in:fly={{delay: getDelay(true)}}>
         <SecondaryNavItem href={makeSpacePath(url, "threads")}>
-          <Icon icon="notes-minimalistic" /> Notes
+          <Icon icon="notes-minimalistic" /> Threads
         </SecondaryNavItem>
       </div>
       <div in:fly={{delay: getDelay()}}>

src/routes/spaces/[nrelay]/[[room]]/+page.svelte

@@ -17,6 +17,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
+  import PageBar from "@lib/components/PageBar.svelte"
   import Divider from "@lib/components/Divider.svelte"
   import ChannelMessage from "@app/components/ChannelMessage.svelte"
   import ChannelCompose from "@app/components/ChannelCompose.svelte"
@@ -81,13 +82,12 @@
 </script>
 
 <div class="relative flex h-full flex-col">
-  <div class="relative z-feature mx-2 rounded-xl pt-4">
-    <div
-      class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
-      <div class="flex items-center gap-2">
-        <Icon icon="hashtag" />
-        <strong>{room}</strong>
-      </div>
+  <PageBar>
+    <div slot="icon" class="center">
+      <Icon icon="hashtag" />
+    </div>
+    <strong slot="title">{room}</strong>
+    <div slot="action">
       {#if room !== GENERAL}
         {#if getMembershipRoomsByUrl(url, $userMembership).includes(room)}
           <Button class="btn btn-neutral btn-sm" on:click={() => removeRoomMembership(url, room)}>
@@ -102,7 +102,7 @@
         {/if}
       {/if}
     </div>
-  </div>
+  </PageBar>
   <div class="-mt-2 flex flex-grow flex-col-reverse overflow-auto py-2">
     {#each elements as { type, id, value, showPubkey } (id)}
       {#if type === "date"}
@@ -123,7 +123,5 @@
       </Spinner>
     </p>
   </div>
-  <div class="shadow-top-xl border-t border-solid border-base-100 bg-base-100">
-    <ChannelCompose {onSubmit} />
-  </div>
+  <ChannelCompose {onSubmit} />
 </div>

src/routes/spaces/[nrelay]/calendar/+page.svelte

@@ -6,6 +6,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
+  import PageBar from "@lib/components/PageBar.svelte"
   import Divider from "@lib/components/Divider.svelte"
   import EventItem from "@app/components/EventItem.svelte"
   import EventCreate from "@app/components/EventCreate.svelte"
@@ -41,15 +42,12 @@
 </script>
 
 <div class="relative flex h-screen flex-col">
-  <div class="relative z-feature mx-2 rounded-xl pt-4">
-    <div
-      class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
-      <div class="flex items-center gap-2">
-        <Icon icon="calendar-minimalistic" />
-        <strong>Calendar</strong>
-      </div>
+  <PageBar>
+    <div slot="icon" class="center">
+      <Icon icon="calendar-minimalistic" />
     </div>
-  </div>
+    <strong slot="title">Calendar</strong>
+  </PageBar>
   <div class="flex flex-grow flex-col gap-2 overflow-auto p-2">
     {#each items as { event, dateDisplay }, i (event.id)}
       {#if dateDisplay}
@@ -68,7 +66,7 @@
     </p>
   </div>
   <Button
-    class="tooltip tooltip-left fixed bottom-4 right-4 p-1"
+    class="tooltip tooltip-left fixed bottom-16 sm:bottom-4 right-2 sm:right-4 p-1 z-feature"
     data-tip="Create an Event"
     on:click={createEvent}>
     <div class="btn btn-circle btn-primary flex h-12 w-12 items-center justify-center">

src/routes/spaces/[nrelay]/threads/+page.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
+  import {onMount} from 'svelte'
   import {page} from "$app/stores"
   import {sortBy} from "@welshman/lib"
+  import {createScroller} from '@lib/html'
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import PageBar from "@lib/components/PageBar.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import ThreadItem from "@app/components/ThreadItem.svelte"
   import ThreadCreate from "@app/components/ThreadCreate.svelte"
@@ -13,27 +16,37 @@
 
   const createThread = () => pushModal(ThreadCreate, {url})
 
+  let limit = 10
   let loading = true
+  let element: Element
 
   $: threads = sortBy(thread => -thread.root.created_at, $threadsByUrl.get(url) || [])
 
+  onMount(() => {
+    const scroller = createScroller({
+      element: element.closest('.max-h-screen')!,
+      onScroll: async () => {
+        limit += 10
+      }
+    })
+
+    return () => scroller.stop()
+  })
+
   setTimeout(() => {
     loading = false
   }, 3000)
 </script>
 
-<div class="relative flex h-screen flex-col">
-  <div class="relative z-feature mx-2 rounded-xl pt-4">
-    <div
-      class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
-      <div class="flex items-center gap-2">
-        <Icon icon="notes-minimalistic" />
-        <strong>Threads</strong>
-      </div>
+<div class="relative flex h-screen flex-col" bind:this={element}>
+  <PageBar>
+    <div slot="icon" class="center">
+      <Icon icon="notes-minimalistic" />
     </div>
-  </div>
+    <strong slot="title">Threads</strong>
+  </PageBar>
   <div class="flex flex-grow flex-col gap-2 overflow-auto p-2">
-    {#each threads as { root, replies } (root.id)}
+    {#each threads.slice(0, 10) as { root, replies } (root.id)}
       <ThreadItem {root} {replies} />
     {/each}
     <p class="flex h-10 items-center justify-center py-20">
@@ -47,7 +60,7 @@
     </p>
   </div>
   <Button
-    class="tooltip tooltip-left fixed bottom-4 right-4 p-1"
+    class="tooltip tooltip-left fixed bottom-16 sm:bottom-4 right-2 sm:right-4 p-1 z-feature"
     data-tip="Create an Event"
     on:click={createThread}>
     <div class="btn btn-circle btn-primary flex h-12 w-12 items-center justify-center">