start of UI fixes

src/lib/components/BottomSheet.svelte

@@ -15,12 +15,37 @@
         await echoMessage(message.id);
         echoed = true;
     }
+
+    let startY = 0; // where the swipe started
+
+    function startDrag(e) {
+        startY = e.clientY; // remember the starting y position
+        window.addEventListener('pointerup', endDrag, { once: true }); // wait for them to let go
+    }
+
+    function endDrag(e) {
+        const diff = e.clientY - startY; // how far down they dragged
+        // if they dragged down more than 60px, close the sheet
+        if (diff > 60) {
+            mapStore.set({ selectedMessage: null, composing: false });
+        }
+    }
 </script>
 
 <!-- if message exists, sheet is visible -->
 <div class="sheet" class:visible={!!message}>
     {#if message}
-        <div class="handle">    </div>
+        <!-- drag this down to close the sheet -->
+        <!-- bigger invisible area so the bar is actually easy to grab -->
+        <div
+            class="handle-area"
+            role="button"
+            tabindex="0"
+            aria-label="drag down to close"
+            onpointerdown={startDrag}
+        >
+            <div class="handle"></div>
+        </div>
         <div class="content">
             {#if message.imageUrl}
                 <img class="message-img" src={message.imageUrl} alt="message attachment" />
@@ -64,12 +89,19 @@
         transform: translateY(0);
     }
 
+    .handle-area {
+        display: flex;
+        justify-content: center;
+        padding: 12px 0;
+        margin-bottom: 0.25rem;
+        touch-action: none; /* stop the browser from treating the drag as a page scroll */
+    }
+
     .handle {
         width: 40px;
         height: 4px;
         background: #ddd;
         border-radius: 2px;
-        margin: 0 auto 1rem;
     }
 
     .message-text {

src/lib/components/MapView.Svelte

@@ -8,7 +8,7 @@
     // export let longitude;
     // ^ this didn't work for some reason, so instead we get the props like this: (based on internet research this is the fix)
     let { lat, lng } = $props();
-s
+
     let mapDiv;
     let map = $state(null);
 

src/routes/+page.svelte

@@ -72,6 +72,7 @@
 {#if !$mapStore.composing}
     <button
     class="fab"
+    class:shifted={isMobile && $mapStore.selectedMessage}
     onclick={() => mapStore.set(
         {selectedMessage: null, composing: true })}>
     +
@@ -119,6 +120,12 @@
     align-items:center;
     justify-content: center;
     line-height: 1;
+    transition: bottom 0.35s cubic-bezier(0.32, 0.72, 0, 1); /* match the sheet's slide timing */
+}
+
+/* lift it above the bottom sheet so it doesn't get covered, x position stays the same */
+.fab.shifted {
+    bottom: 35vh;
 }
 
 </style>