From 5b451629b6c42da40156cb9bf02e4176f02362d0 Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Mon, 24 Jul 2023 10:59:42 +0100
Subject: [PATCH] Consolidate 3 layer-like controls

---
 src/lib/Legend.svelte          | 90 +++++++++++++++-------------------
 src/pages/App.svelte           | 22 ++++++---
 src/pages/BrowseSchemes.svelte |  2 -
 3 files changed, 53 insertions(+), 61 deletions(-)

diff --git a/src/lib/Legend.svelte b/src/lib/Legend.svelte
index a73505e52..5578c751b 100644
--- a/src/lib/Legend.svelte
+++ b/src/lib/Legend.svelte
@@ -6,54 +6,42 @@
   export let schema: Schema;
 </script>
 
-<div>
-  <CollapsibleCard label="Objects" open>
-    <ul>
-      {#if schema == "planning"}
-        <li>
-          <ColorLegend color={colors.preapp} />
-          Preapp
-        </li>
-        <li>
-          <ColorLegend color={colors.outline} />
-          Outline
-        </li>
-        <li>
-          <ColorLegend color={colors["reserved matters"]} />
-          Reserved matters
-        </li>
-        <li>
-          <ColorLegend color={colors["local plan"]} />
-          Local plan
-        </li>
-      {:else}
-        <li>
-          <ColorLegend color={colors.area} />
-          Areas
-        </li>
-        <li>
-          <ColorLegend color={colors.route} />
-          Routes
-        </li>
-        <li>
-          <ColorLegend color={colors.crossing} />
-          Crossings
-        </li>
-        <li>
-          <ColorLegend color={colors.other} />
-          Other
-        </li>
-      {/if}
-    </ul>
-  </CollapsibleCard>
-</div>
-
-<style>
-  div {
-    position: absolute;
-    left: 10px;
-    top: 60px;
-    background-color: white;
-    padding: 16px;
-  }
-</style>
+<CollapsibleCard label="Legend">
+  <ul>
+    {#if schema == "planning"}
+      <li>
+        <ColorLegend color={colors.preapp} />
+        Preapp
+      </li>
+      <li>
+        <ColorLegend color={colors.outline} />
+        Outline
+      </li>
+      <li>
+        <ColorLegend color={colors["reserved matters"]} />
+        Reserved matters
+      </li>
+      <li>
+        <ColorLegend color={colors["local plan"]} />
+        Local plan
+      </li>
+    {:else}
+      <li>
+        <ColorLegend color={colors.area} />
+        Areas
+      </li>
+      <li>
+        <ColorLegend color={colors.route} />
+        Routes
+      </li>
+      <li>
+        <ColorLegend color={colors.crossing} />
+        Crossings
+      </li>
+      <li>
+        <ColorLegend color={colors.other} />
+        Other
+      </li>
+    {/if}
+  </ul>
+</CollapsibleCard>
diff --git a/src/pages/App.svelte b/src/pages/App.svelte
index 0d26aa881..05189ea26 100644
--- a/src/pages/App.svelte
+++ b/src/pages/App.svelte
@@ -7,7 +7,12 @@
   import { onMount } from "svelte";
   import authoritiesUrl from "../../assets/authorities.geojson?url";
   import BoundaryLayer from "../lib/BoundaryLayer.svelte";
-  import { BaselayerSwitcher, Layout, ZoomOutMap } from "../lib/common";
+  import {
+    BaselayerSwitcher,
+    CollapsibleCard,
+    Layout,
+    ZoomOutMap,
+  } from "../lib/common";
   import HoverLayer from "../lib/draw/HoverLayer.svelte";
   import InterventionLayer from "../lib/draw/InterventionLayer.svelte";
   import Toolbox from "../lib/draw/Toolbox.svelte";
@@ -111,8 +116,6 @@
     <EntireScheme {authorityName} {schema} />
     <hr />
     <InterventionList {schema} />
-    <hr />
-    <ContextualLayers />
   </div>
   <div slot="main">
     <Map {style}>
@@ -120,10 +123,13 @@
       <InterventionLayer {schema} />
       <HoverLayer />
       <Toolbox {routeSnapperUrl} {schema} />
-      <div class="bottom-left">
-        <BaselayerSwitcher {style} />
+      <div class="top-left">
+        <CollapsibleCard label="Layers">
+          <Legend {schema} />
+          <BaselayerSwitcher {style} />
+          <ContextualLayers />
+        </CollapsibleCard>
       </div>
-      <Legend {schema} />
     </Map>
   </div>
 </Layout>
@@ -132,10 +138,10 @@
 <Instructions bind:open={showInstructions} {schema} />
 
 <style>
-  .bottom-left {
+  .top-left {
     position: absolute;
     left: 10px;
-    bottom: 50px;
+    top: 60px;
     background-color: white;
     padding: 16px;
   }
diff --git a/src/pages/BrowseSchemes.svelte b/src/pages/BrowseSchemes.svelte
index 100dc483d..1452f17ce 100644
--- a/src/pages/BrowseSchemes.svelte
+++ b/src/pages/BrowseSchemes.svelte
@@ -19,7 +19,6 @@
   import PmTiles from "../lib/common/PmTiles.svelte";
   import InterventionLayer from "../lib/draw/InterventionLayer.svelte";
   import { CheckboxGroup, ErrorMessage, SecondaryButton } from "../lib/govuk";
-  import Legend from "../lib/Legend.svelte";
   import MapLibreMap from "../lib/Map.svelte";
   import { bbox, emptyGeojson, prettyPrintMeters } from "../maplibre_helpers";
   import { gjScheme, map } from "../stores";
@@ -100,7 +99,6 @@
     <PmTiles />
     <MapLibreMap {style}>
       <InterventionLayer {schema} />
-      <Legend {schema} />
       <MapTooltips
         layers={[
           "interventions-points",