Add mobile layout

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