add start chat FAB (#152)

Co-authored-by: Pratyush Mohanty <prat_09@noreply.coracle.social>
Co-committed-by: Pratyush Mohanty <prat_09@noreply.coracle.social>

src/routes/chat/+layout.svelte

@@ -5,15 +5,19 @@
   import {sleep} from "@welshman/lib"
   import {shouldUnwrap} from "@welshman/app"
   import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
+  import ChatSquarePlus from "@assets/icons/chat-square-plus.svg?dataurl"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
+  import FAB from "@lib/components/FAB.svelte"
   import SecondaryNav from "@lib/components/SecondaryNav.svelte"
   import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
   import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
   import ChatMenu from "@app/components/ChatMenu.svelte"
+  import ChatStart from "@app/components/ChatStart.svelte"
   import ChatItem from "@app/components/ChatItem.svelte"
   import {chatSearch} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
@@ -26,6 +30,8 @@
 
   const openMenu = () => pushModal(ChatMenu)
 
+  const startChat = () => pushModal(ChatStart)
+
   let term = $state("")
 
   const chats = $derived($chatSearch.searchOptions(term))
@@ -37,7 +43,7 @@
   })
 </script>
 
-<SecondaryNav>
+<SecondaryNav class="relative">
   <SecondaryNavSection>
     <SecondaryNavHeader>
       Chats
@@ -45,11 +51,15 @@
         <Icon icon={MenuDots} />
       </Button>
     </SecondaryNavHeader>
+    <Button class="btn btn-primary w-full row-2 min-h-0 h-[30px]" onclick={startChat}>
+      <Icon icon={AddCircle} />
+      Start New Chat
+    </Button>
+    <label class="input input-sm input-bordered flex items-center gap-2">
+      <Icon icon={Magnifier} />
+      <input bind:value={term} class="grow" type="text" />
+    </label>
   </SecondaryNavSection>
-  <label class="input input-sm input-bordered mx-6 -mt-4 mb-2 flex items-center gap-2">
-    <Icon icon={Magnifier} />
-    <input bind:value={term} class="grow" type="text" />
-  </label>
   <div class="overflow-auto">
     {#each chats as { id, pubkeys, messages } (id)}
       <ChatItem {id} {pubkeys} {messages} />
@@ -66,3 +76,9 @@
     {@render children?.()}
   {/key}
 </Page>
+
+{#if !$page.params.chat}
+  <FAB onclick={startChat}>
+    <Icon icon={ChatSquarePlus} size={7} />
+  </FAB>
+{/if}