leave a message functionallity (sheet and fab)

src/routes/+page.svelte

@@ -9,6 +9,8 @@
     import BottomSheet from '$lib/components/BottomSheet.svelte';
     import SidePanel from '$lib/components/SidePanel.svelte';
 
+    import ComposeSheet from '$lib/components/ComposeSheet.svelte';
+
     let lat = $state();
     let lng = $state();
     let error = $state();
@@ -66,6 +68,22 @@
     <SidePanel message={$mapStore.selectedMessage} />
 {/if}
 
+<!--floating action button for adding a message-->
+{#if !$mapStore.composing}
+    <button
+    class="fab"
+    onclick={() => mapStore.set(
+        {selectedMessage: null, composing: true })}>
+    +
+    </button>
+{/if}
+
+<!--compose sheet (making a message)-->
+{#if $mapStore.composing}
+    <ComposeSheet {lat} {lng} />
+{/if}
+
+
 <style>
 :global(body) {
     margin: 0;
@@ -82,4 +100,25 @@
     color: #666;
 
 }
+
+.fab {
+    position: fixed;
+    bottom: 2rem;
+    right: 1.5rem;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background: #111;
+    color: white;
+    font-size: 1.8rem;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
+    z-index: 150;
+    display: flex;
+    align-items:center;
+    justify-content: center;
+    line-height: 1;
+}
+
 </style>