making pins clickable + adding the corresponding panels/buttons

src/routes/+page.svelte

@@ -4,12 +4,19 @@
 
     import { getNearbyMessages } from '$lib/firebase/messages.js';
     import { messagesStore } from '$lib/stores/messagesStore.js';
+    import { mapStore } from '$lib/stores/mapStore.js';
 
+    import BottomSheet from '$lib/components/BottomSheet.svelte';
+    import SidePanel from '$lib/components/SidePanel.svelte';
 
     let lat = $state();
     let lng = $state();
     let error = $state();
 
+    let windowWidth = $state(0);
+
+    let isMobile = $derived(windowWidth < 768);
+
     onMount(() => {
         if (!navigator.geolocation) {
             error = "Your browser doesn't support geolocation :(";
@@ -37,6 +44,8 @@
     
 </script>
 
+<svelte:window bind:innerWidth={windowWidth} /> <!--this sends the windowWidth to our mobile checker -->
+
 {#if error}
     <p class="error">{error}</p>
 {:else if lat && lng}
@@ -45,6 +54,18 @@
     <p class="loading">Looking for you...</p>
 {/if}
 
+<!-- map must fill the whole screen-->
+ {#if lat && lng}
+    <MapView {lat} {lng} />
+{/if}
+
+<!-- show the right panel based on mobile or desktop-->
+{#if windowWidth < 768}
+    <BottomSheet message={$mapStore.selectedMessage} />
+{:else}
+    <SidePanel message={$mapStore.selectedMessage} />
+{/if}
+
 <style>
 :global(body) {
     margin: 0;