Add mobile layout

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