Add mobile layout

src/app.css

@@ -52,13 +52,20 @@
 }
 
 .bg-alt,
-.bg-alt .bg-alt .bg-alt {
-  @apply bg-base-100;
+.bg-alt .bg-alt .bg-alt,
+.hover\:bg-alt:hover,
+.bg-alt .bg-alt .hover\:bg-alt:hover,
+.bg-alt .bg-alt.hover\:bg-alt:hover {
+  @apply bg-base-100 transition-colors;
 }
 
 .bg-alt .bg-alt,
-.bg-alt .bg-alt .bg-alt .bg-alt {
-  @apply bg-base-300;
+.bg-alt .bg-alt .bg-alt .bg-alt,
+.bg-alt .hover\:bg-alt:hover,
+.bg-alt .bg-alt .bg-alt .hover\:bg-alt:hover,
+.bg-alt.hover\:bg-alt:hover,
+.bg-alt .bg-alt .bg-alt.hover\:bg-alt:hover {
+  @apply bg-base-300 transition-colors;
 }
 
 .card2 {
@@ -78,7 +85,7 @@
 }
 
 .content {
-  @apply m-auto w-full max-w-3xl p-12;
+  @apply m-auto w-full max-w-3xl p-4 sm:p-8 md:p-12;
 }
 
 .heading {

src/app/components/InfoHandle.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import Button from "@lib/components/Button.svelte"
   import Link from "@lib/components/Link.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
 </script>
 
 <div class="column gap-4">
-  <div class="py-2">
-    <h1 class="heading">What is a nostr address?</h1>
-  </div>
+  <ModalHeader>
+    <div slot="title">What is a nostr address?</div>
+  </ModalHeader>
   <p>
     Flotilla hosts spaces on the <Link external href="https://nostr.com/" class="underline"
       >Nostr protocol</Link

src/app/components/InfoNostr.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
 </script>
 
 <div class="column gap-4">
-  <div class="py-2">
-    <h1 class="heading">What is Nostr?</h1>
-  </div>
+  <ModalHeader>
+    <div slot="title">What is nostr?</div>
+  </ModalHeader>
   <p>
     <Link external href="https://nostr.com/">Nostr</Link> is way to build social apps that talk to eachother.
     Users own their social identity instead of renting it from a tech company, and can bring it with

src/app/components/InfoRelay.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import Button from "@lib/components/Button.svelte"
   import Link from "@lib/components/Link.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
 </script>
 
 <div class="column gap-4">
-  <div class="py-2">
-    <h1 class="heading">What is a relay?</h1>
-  </div>
+  <ModalHeader>
+    <div slot="title">What is a relay?</div>
+  </ModalHeader>
   <p>
     Flotilla hosts spaces on the <Link external href="https://nostr.com/" class="underline"
       >Nostr protocol</Link

src/app/components/MenuHome.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import {goto} from '$app/navigation'
+  import Icon from '@lib/components/Icon.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>
+
+<div class="menu column gap-2">
+  <Link href="/home/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">
+    <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">
+    <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">
+    <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/MenuSettings.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import {goto} from '$app/navigation'
+  import Icon from '@lib/components/Icon.svelte'
+  import Link from '@lib/components/Link.svelte'
+  import Button from '@lib/components/Button.svelte'
+  import CardButton from '@lib/components/CardButton.svelte'
+  import LogOut from "@app/components/LogOut.svelte"
+  import {pushModal} from "@app/modal"
+
+  const back = () => history.back()
+
+  const logout = () => pushModal(LogOut)
+</script>
+
+<div class="menu column gap-2">
+  <Link href="/settings/profile">
+    <CardButton>
+      <div slot="icon"><Icon icon="user-circle" size={7} /></div>
+      <div slot="title">Profile</div>
+      <div slot="info">Customize your profile</div>
+    </CardButton>
+  </Link>
+  <Link href="/settings/relays">
+    <CardButton>
+      <div slot="icon"><Icon icon="remote-controller-minimalistic" size={7} /></div>
+      <div slot="title">Relays</div>
+      <div slot="info">Control how Flotilla talks to the network</div>
+    </CardButton>
+  </Link>
+  <Link href="/settings">
+    <CardButton>
+      <div slot="icon"><Icon icon="notes-minimalistic" size={7} /></div>
+      <div slot="title">Settings</div>
+      <div slot="info">Get into the details about how Flotilla works</div>
+    </CardButton>
+  </Link>
+  <Link href="/settings/about">
+    <CardButton>
+      <div slot="icon"><Icon icon="chat-round" size={7} /></div>
+      <div slot="title">About</div>
+      <div slot="info">Learn about Flotilla and support the developer</div>
+    </CardButton>
+  </Link>
+  <Button on:click={logout} class="btn btn-error">
+    <Icon icon="exit" /> Log Out
+  </Button>
+</div>

src/app/components/MenuSpaces.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import {page} from '$app/stores'
+  import {goto} from '$app/navigation'
+  import Icon from '@lib/components/Icon.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 SpaceExit from "@app/components/SpaceExit.svelte"
+  import SpaceJoin from "@app/components/SpaceJoin.svelte"
+  import RoomCreate from "@app/components/RoomCreate.svelte"
+  import {GENERAL, userMembership, decodeNRelay, getMembershipRoomsByUrl, getMembershipUrls, roomsByUrl} from "@app/state"
+  import {makeSpacePath} from "@app/routes"
+  import {pushModal} from "@app/modal"
+
+  let space = $page.params?.nrelay ? decodeNRelay($page.params?.nrelay) : undefined
+  let showSettings = false
+
+  const resetSpace = () => {
+    space = ""
+  }
+
+  const setSpace = (url: string) => {
+    space = url
+  }
+
+  const openSettings = () => {
+    showSettings = true
+  }
+
+  const closeSettings = () => {
+    showSettings = false
+  }
+
+  const createSpace = () => pushModal(SpaceCreateExternal)
+
+  const browseSpaces = () => goto("/discover")
+
+  const leaveSpace = () => pushModal(SpaceExit, {url: space})
+
+  const joinSpace = () => pushModal(SpaceJoin, {url: space})
+
+  const addRoom = () => pushModal(RoomCreate, {url: space})
+
+  $: rooms = space ? getMembershipRoomsByUrl(space, $userMembership) : []
+  $: allRooms = $roomsByUrl.get(space || "") || []
+  $: otherRooms = allRooms.filter(room => !rooms.concat(GENERAL).includes(room))
+</script>
+
+<div class="menu column gap-2">
+  {#if showSettings}
+    <Button on:click={closeSettings} class="flex items-center gap-2 text-lg mb-4">
+      <Icon icon="alt-arrow-left" size={7} />
+      Go Back
+    </Button>
+    {#if getMembershipUrls($userMembership).includes(space || "")}
+      <Button on:click={leaveSpace} class="btn btn-error">
+        <Icon icon="exit" />
+        Leave Space
+      </Button>
+    {:else}
+      <Button on:click={joinSpace} class="btn btn-primary">
+        <Icon icon="login-2" />
+        Join Space
+      </Button>
+    {/if}
+  {:else if space}
+    <Button on:click={resetSpace} class="flex items-center gap-2 text-lg mb-4">
+      <Icon icon="alt-arrow-left" size={7} />
+      Back to Spaces
+    </Button>
+    <div class="grid 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">
+        <Icon icon="calendar-minimalistic" /> Calendar
+      </Link>
+      {#each rooms as room, i (room)}
+        <Link href={makeSpacePath(space, room)} class="btn btn-neutral">
+          <Icon icon="hashtag" />
+          {room}
+        </Link>
+      {/each}
+      {#each otherRooms as room, i (room)}
+        <Link href={makeSpacePath(space, room)} class="btn">
+          <Icon icon="hashtag" />
+          {room}
+        </Link>
+      {/each}
+    </div>
+    <div class="grid grid-cols-2 gap-2">
+      <Button on:click={addRoom} class="btn btn-primary">
+        <Icon icon="add-circle" />
+        Create Room
+      </Button>
+      <Button on:click={openSettings} class="btn">
+        <Icon icon="settings" /> Space Settings
+      </Button>
+    </div>
+  {:else}
+    {#each getMembershipUrls($userMembership) as url (url)}
+      <Button on:click={() => setSpace(url)}>
+        <CardButton>
+          <div slot="icon"><SpaceAvatar {url} /></div>
+          <div slot="title"><RelayName {url} /></div>
+          <div slot="info"><RelayDescription {url} /></div>
+        </CardButton>
+      </Button>
+    {/each}
+    {#if getMembershipUrls($userMembership).length > 0}
+      <Divider />
+    {/if}
+    <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>
+  {/if}
+</div>

src/app/components/PrimaryNav.svelte

@@ -6,11 +6,20 @@
   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"
   import {pushModal} from "@app/modal"
   import {makeSpacePath, getPrimaryNavItemIndex} from "@app/routes"
 
   const addSpace = () => pushModal(SpaceAdd)
+
+  const showHomeMenu = () => pushModal(MenuHome)
+
+  const showSpacesMenu = () => pushModal(MenuSpaces)
+
+  const showSettingsMenu = () => pushModal(MenuSettings)
 </script>
 
 <div class="relative w-14 flex-shrink-0 bg-base-100 pt-4 hidden sm:block">
@@ -43,13 +52,13 @@
 
 <div class="fixed bottom-0 left-0 right-0 h-14 bg-base-100 sm:hidden z-nav">
   <div class="flex justify-between max-w-sm m-auto px-2">
-    <PrimaryNavItem title="Home" href="/home">
+    <PrimaryNavItem title="Home" on:click={showHomeMenu}>
       <Avatar icon="home-smile" class="!h-10 !w-10" />
     </PrimaryNavItem>
-    <PrimaryNavItem title="Spaces" href="/spaces">
+    <PrimaryNavItem title="Spaces" on:click={showSpacesMenu}>
       <SpaceAvatar />
     </PrimaryNavItem>
-    <PrimaryNavItem title="Settings" href="/settings/profile">
+    <PrimaryNavItem title="Settings" on:click={showSettingsMenu}>
       <Avatar icon="settings" class="!h-10 !w-10" />
     </PrimaryNavItem>
   </div>

src/app/components/RoomCreate.svelte

@@ -5,6 +5,7 @@
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
   import {addRoomMembership} from "@app/commands"
   import {makeSpacePath} from "@app/routes"
 
@@ -32,10 +33,12 @@
 </script>
 
 <form class="column gap-4" on:submit|preventDefault={create}>
-  <h1 class="heading">Create a Room</h1>
-  <p class="text-center">
-    On <span class="text-primary">{displayRelayUrl(url)}</span>
-  </p>
+  <ModalHeader>
+    <div slot="title">Create a Room</div>
+    <div slot="info">
+      On <span class="text-primary">{displayRelayUrl(url)}</span>
+    </div>
+  </ModalHeader>
   <Field>
     <p slot="label">Room Name</p>
     <label class="input input-bordered flex w-full items-center gap-2" slot="input">

src/app/components/SpaceAdd.svelte

@@ -2,6 +2,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import CardButton from "@lib/components/CardButton.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
   import SpaceCreateExternal from "@app/components/SpaceCreateExternal.svelte"
   import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
   import {pushModal} from "@app/modal"
@@ -12,12 +13,12 @@
 </script>
 
 <div class="column gap-4">
-  <div class="py-2">
-    <h1 class="heading">Add a Space</h1>
-    <p class="text-center">
+  <ModalHeader>
+    <div slot="title">Add a Space</div>
+    <div slot="info">
       Spaces are places where communities come together to work, play, and hang out.
-    </p>
-  </div>
+    </div>
+  </ModalHeader>
   <Button on:click={startCreate}>
     <CardButton>
       <div slot="icon"><Icon icon="add-circle" size={7} /></div>

src/app/components/SpaceCreate.svelte

@@ -3,6 +3,7 @@
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
   import Icon from "@lib/components/Icon.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
   import InfoRelay from "@app/components/InfoRelay.svelte"
   import SpaceCreateFinish from "@app/components/SpaceCreateFinish.svelte"
   import {pushModal} from "@app/modal"
@@ -17,10 +18,12 @@
 </script>
 
 <form class="column gap-4" on:submit|preventDefault={next}>
-  <div class="py-2">
-    <h1 class="heading">Customize your Space</h1>
-    <p class="text-center">Give people a few details to go on. You can always change this later.</p>
-  </div>
+  <ModalHeader>
+    <div slot="title">Customize your Space</div>
+    <div slot="info">
+      Give people a few details to go on. You can always change this later.
+    </div>
+  </ModalHeader>
   <div class="flex justify-center py-2">
     <InputProfilePicture bind:file />
   </div>

src/app/components/SpaceCreateExternal.svelte

@@ -2,6 +2,7 @@
   import Button from "@lib/components/Button.svelte"
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
   import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
   import {pushModal} from "@app/modal"
 
@@ -14,10 +15,12 @@
 </script>
 
 <form class="column gap-4" on:submit|preventDefault={next}>
-  <div class="py-2">
-    <h1 class="heading">Create a Space</h1>
-    <p class="text-center">Host your own space, for your community.</p>
-  </div>
+  <ModalHeader>
+    <div slot="title">Create a Space</div>
+    <div slot="info">
+      Host your own space, for your community.
+    </div>
+  </ModalHeader>
   <p>
     <Link class="text-primary" external href="https://relay.tools">relay.tools</Link> is a third-party
     service that allows anyone to run their own relay for use with Flotilla, or any other nostr-compatible

src/app/components/SpaceInviteAccept.svelte

@@ -8,6 +8,7 @@
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
   import Icon from "@lib/components/Icon.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
   import InfoRelay from "@app/components/InfoRelay.svelte"
   import {pushToast} from "@app/toast"
   import {pushModal} from "@app/modal"
@@ -55,10 +56,10 @@
 </script>
 
 <form class="column gap-4" on:submit|preventDefault={join}>
-  <div class="py-2">
-    <h1 class="heading">Join a Space</h1>
-    <p class="text-center">Enter an invite code below to join an existing space.</p>
-  </div>
+  <ModalHeader>
+    <div slot="title">Join a Space</div>
+    <div slot="info">Enter an invite code below to join an existing space.</div>
+  </ModalHeader>
   <Field>
     <p slot="label">Invite code*</p>
     <label class="input input-bordered flex w-full items-center gap-2" slot="input">

src/app/components/SpaceJoin.svelte

@@ -3,6 +3,7 @@
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
   import {clearModal} from "@app/modal"
   import {addSpaceMembership} from "@app/commands"
 
@@ -30,10 +31,14 @@
 </script>
 
 <form class="column gap-4" on:submit|preventDefault={join}>
-  <h1 class="heading">
-    Joining <span class="text-primary">{displayRelayUrl(url)}</span>
-  </h1>
-  <p class="text-center">Are you sure you'd like to join this space?</p>
+  <ModalHeader>
+    <div slot="title">
+      Joining <span class="text-primary">{displayRelayUrl(url)}</span>
+    </div>
+    <div slot="info">
+      Are you sure you'd like to join this space?
+    </div>
+  </ModalHeader>
   <div class="flex flex-row items-center justify-between gap-4">
     <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />

src/app/components/ThreadItem.svelte

@@ -15,14 +15,14 @@
 </script>
 
 <div class="flex flex-col items-end">
-  <NoteCard event={root} class="card2 w-full">
+  <NoteCard event={root} class="card2 bg-alt w-full">
     <div class="ml-12">
       <Content event={root} />
     </div>
   </NoteCard>
   <Link
     href={entityLink(nevent)}
-    class="btn btn-neutral -mt-6 mr-4 flex items-center gap-2 rounded-full">
+    class="btn btn-neutral -mt-6 mr-4 flex items-center gap-2 rounded-full z-feature">
     <Icon icon="chat-round" />
     <span>{replies.length}</span>
   </Link>

src/app/state.ts

@@ -60,7 +60,7 @@ import {
 } from "@welshman/app"
 import type {AppSyncOpts} from "@welshman/app"
 import type {SubscribeRequestWithHandlers} from "@welshman/net"
-import {deriveEvents, deriveEventsMapped, withGetter} from "@welshman/store"
+import {throttled, deriveEvents, deriveEventsMapped, withGetter} from "@welshman/store"
 
 export const ROOM = "~"
 
@@ -401,33 +401,36 @@ export type Thread = {
 
 export const notes = deriveEvents(repository, {filters: [{kinds: [NOTE]}]})
 
-export const threadsByUrl = derived([trackerStore, notes], ([$tracker, $notes]) => {
-  const threadsByUrl = new Map<string, Thread[]>()
-  const [parents, children] = partition(e => getAncestorTags(e.tags).replies.length === 0, $notes)
+export const threadsByUrl = derived(
+  [throttled(300, trackerStore), throttled(300, notes)],
+  ([$tracker, $notes]) => {
+    const threadsByUrl = new Map<string, Thread[]>()
+    const [parents, children] = partition(e => getAncestorTags(e.tags).replies.length === 0, $notes)
 
-  for (const event of parents) {
-    for (const url of $tracker.getRelays(event.id)) {
-      pushToMapKey(threadsByUrl, url, {root: event, replies: []})
-    }
-  }
-
-  for (const event of children) {
-    const [id] = getAncestorTagValues(event.tags).replies
-
-    for (const url of $tracker.getRelays(event.id)) {
-      const threads = threadsByUrl.get(url) || []
-      const thread = threads.find(thread => thread.root.id === id)
-
-      if (!thread) {
-        continue
+    for (const event of parents) {
+      for (const url of $tracker.getRelays(event.id)) {
+        pushToMapKey(threadsByUrl, url, {root: event, replies: []})
       }
-
-      thread.replies.push(event)
     }
-  }
 
-  return threadsByUrl
-})
+    for (const event of children) {
+      const [id] = getAncestorTagValues(event.tags).replies
+
+      for (const url of $tracker.getRelays(event.id)) {
+        const threads = threadsByUrl.get(url) || []
+        const thread = threads.find(thread => thread.root.id === id)
+
+        if (!thread) {
+          continue
+        }
+
+        thread.replies.push(event)
+      }
+    }
+
+    return threadsByUrl
+  }
+)
 
 // Rooms
 

src/lib/components/CardButton.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <div class="btn btn-neutral btn-lg h-24 text-left w-full">
-  <div class="flex gap-6 flex-row justify-between items-center w-full {$$props.class}">
+  <div class="flex gap-2 flex-row justify-between items-center w-full {$$props.class}">
     <div class="flex gap-6 items-center">
       <div class="w-12 center">
         <slot name="icon" />

src/lib/components/ModalHeader.svelte

@@ -0,0 +1,4 @@
+<div class="column gap-2 py-4 max-w-xs m-auto">
+  <h1 class="heading"><slot name="title" /></h1>
+  <p class="text-center"><slot name="info" /></p>
+</div>

src/lib/components/Page.svelte

@@ -1,3 +1,3 @@
-<div class="max-h-screen flex-grow overflow-auto bg-base-200 pb-12 sm:pb-0">
+<div class="max-h-screen flex-grow overflow-auto bg-base-200 mb-2 pb-12 sm:mb-0 sm:pb-0">
   <slot />
 </div>

src/lib/components/PageBar.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Icon from '@lib/components/Icon.svelte'
+  import Button from '@lib/components/Button.svelte'
+
+  const back = () => history.back()
+</script>
+
+<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-4">
+      <slot name="icon" />
+      <slot name="title" />
+    </div>
+    <slot name="action" />
+  </div>
+</div>

src/lib/components/PageHeader.svelte

@@ -0,0 +1,5 @@
+<div class="column gap-4 py-12">
+  <h1 class="superheading"><slot name="title" /></h1>
+  <p class="text-center"><slot name="info" /></p>
+</div>
+

src/lib/components/SecondaryNav.svelte

@@ -1,3 +1,3 @@
-<div class="flex max-h-screen w-60 flex-shrink-0 flex-col gap-1 bg-base-300">
+<div class="max-h-screen w-60 flex-shrink-0 flex-col gap-1 bg-base-300 hidden sm:flex">
   <slot />
 </div>

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">