Add chat start dialog

src/routes/home/+layout.svelte

@@ -2,11 +2,16 @@
   import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.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 ChatStart from "@app/components/ChatStart.svelte"
   import {chats} from '@app/state'
+  import {pushModal} from '@app/modal'
+
+  const startChat = () => pushModal(ChatStart)
 </script>
 
 <SecondaryNav>
@@ -29,9 +34,9 @@
     <div in:fly={{delay: 150}}>
       <SecondaryNavHeader>
         Chats
-        <div class="cursor-pointer">
+        <Button on:click={startChat}>
           <Icon icon="add-circle" />
-        </div>
+        </Button>
       </SecondaryNavHeader>
     </div>
     {#each $chats as {id, pubkeys}, i (id)}