Add mobile layout

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>