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/lib/components/FAB.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type {Snippet} from "svelte"
+  import cx from "classnames"
+  import Button from "@lib/components/Button.svelte"
+
+  const {
+    onclick = () => {},
+    className = "",
+    children,
+  }: {
+    onclick?: () => void
+    className?: string
+    children?: Snippet
+  } = $props()
+</script>
+
+<div class={cx("fixed bottom-20 right-4 z-nav hide-on-keyboard md:hidden", className)}>
+  <Button
+    class="btn btn-primary border-none shadow-xl hover:opacity-90 transition-all size-[50px] rounded-xl p-0"
+    {onclick}>
+    <div class="flex items-center justify-center">
+      {@render children?.()}
+    </div>
+  </Button>
+</div>

src/lib/components/SecondaryNavHeader.svelte

@@ -6,6 +6,6 @@
   const {children}: Props = $props()
 </script>
 
-<div class="flex items-center justify-between px-4 py-2 text-sm font-bold uppercase">
+<div class="flex items-center justify-between px-1 py-2 text-sm font-bold uppercase">
   {@render children?.()}
 </div>

src/lib/components/SecondaryNavSection.svelte

@@ -7,6 +7,6 @@
   const {...props}: Props = $props()
 </script>
 
-<div class="flex flex-col gap-1 px-2 py-2 {props.class}">
+<div class="flex flex-col gap-3 px-2 py-2 {props.class}">
   {@render props.children?.()}
 </div>