feat: map sorting and separate filter

src/routes/+layout.svelte

@@ -5,7 +5,7 @@
     import { invalidate } from "$app/navigation";
 
     let { data, children } = $props();
-    let { session, supabase } = $derived(data);
+    let { session, supabase, route } = $derived(data);
 
     onMount(() => {
         posthog.init("phc_hTnel2Q8GKo0TgIBnFWBueJW1ATmCG9tJOtETnQTUdY", {
@@ -19,6 +19,13 @@
         });
         return () => data.subscription.unsubscribe();
     });
+    $effect(() => {
+        if (route.id === "/filter") {
+            document.body.classList.add("coloured");
+        } else {
+            document.body.classList.remove("coloured");
+        }
+    });
 </script>
 
 <svelte:head>
@@ -33,6 +40,7 @@
         margin: 0;
         padding: 0;
         width: 100%;
+        min-height: 100vh;
     }
 
     :global(html) {
@@ -40,6 +48,10 @@
         color: #eaffeb;
     }
 
+    :global(body.coloured) {
+        background: linear-gradient(-77deg, #2e4653, #223a37);
+    }
+
     :global(*) {
         box-sizing: border-box;
         font-family: Inter;