Use help modal instead of inline text

Author: dabreegster

web/assets/help.svg

@@ -4,7 +4,7 @@
   import { downloadGeneratedFile, notNull } from "svelte-utils";
   import type { Feature } from "geojson";
   import { FillLayer, GeoJSON, hoverStateFilter } from "svelte-maplibre";
-  import { layerId, Popup, Link } from "./common";
+  import { layerId, Popup, Link, HelpButton } from "./common";
   import ModalFilterLayer from "./ModalFilterLayer.svelte";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
   import { app, autosave, mode, projectName } from "./stores";
@@ -72,7 +72,22 @@
             Choose project
           </Link>
         </li>
-        <li>Pick neighbourhood</li>
+        <li>
+          Pick neighbourhood
+          <HelpButton>
+            <p>
+              Inside the neighbourhood you define, the goal is to eliminate (or
+              deliberately permit) through-traffic. An appropriate neighbourhood
+              boundary depends on many factors. The simplest approach is to find
+              the area bounded on all sides by "main" roads, which are designed
+              for higher traffic volumes. There are many other considerations,
+              though -- maybe severances like rivers or rail should be part of a
+              boundary. Bridges and tunnels near a boundary may be confusing as
+              well. And note that your boundary may not match the conventional
+              definition of "neighbourhood."
+            </p>
+          </HelpButton>
+        </li>
       </ul>
     </nav>
     <nav>
@@ -87,21 +102,8 @@
       </ul>
     </nav>
   </div>
-  <div slot="sidebar">
-    <details>
-      <summary>Help</summary>
-      <p>
-        Inside the neighbourhood you define, the goal is to eliminate (or
-        deliberately permit) through-traffic. An appropriate neighbourhood
-        boundary depends on many factors. The simplest approach is to find the
-        area bounded on all sides by "main" roads, which are designed for higher
-        traffic volumes. There are many other considerations, though -- maybe
-        severances like rivers or rail should be part of a boundary. Bridges and
-        tunnels near a boundary may be confusing as well. And note that your
-        boundary may not match the conventional definition of "neighbourhood."
-      </p>
-    </details>
 
+  <div slot="sidebar">
     <div><Link on:click={newBoundary}>Draw a new boundary</Link></div>
     <div>
       <Link on:click={() => ($mode = { mode: "auto-boundaries" })}>

web/package-lock.json

@@ -0,0 +1,30 @@
+<script lang="ts">
+  // This launches a modal when clicked. The user should put the modal contents
+  // as a slot beneath this component.
+  import icon from "../../assets/help.svg?url";
+  import { Modal } from "svelte-utils";
+
+  let show = false;
+</script>
+
+<button on:click={() => (show = true)}>
+  <img src={icon} title="Help" alt="Help" />
+</button>
+
+{#if show}
+  <Modal on:close={() => (show = false)}>
+    <h2>Help</h2>
+    <slot />
+  </Modal>
+{/if}
+
+<style>
+  button {
+    background: none;
+    border: 1px solid rgba(0, 0, 0, 0);
+  }
+
+  button:hover {
+    border: 1px solid black;
+  }
+</style>

web/src/NetworkMode.svelte

@@ -1,5 +1,6 @@
 export { default as BasemapPicker } from "./BasemapPicker.svelte";
 export { default as DisableInteractiveLayers } from "./DisableInteractiveLayers.svelte";
+export { default as HelpButton } from "./HelpButton.svelte";
 export { default as Link } from "./Link.svelte";
 export { default as Popup } from "./Popup.svelte";
 export { default as StreetView } from "./StreetView.svelte";

web/src/common/HelpButton.svelte

@@ -5,7 +5,7 @@
   import type { LngLat } from "maplibre-gl";
   import { onDestroy } from "svelte";
   import { type LayerClickInfo } from "svelte-maplibre";
-  import { Popup, Link } from "../common";
+  import { Popup, Link, HelpButton } from "../common";
   import RenderNeighbourhood from "../RenderNeighbourhood.svelte";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
   import {
@@ -141,7 +141,18 @@
             Pick neighbourhood
           </Link>
         </li>
-        <li>Editing</li>
+        <li>
+          Editing
+          <HelpButton>
+            <p>
+              Now that you've defined a neighbourhood boundary, you can see the
+              possible shortcuts that vehicles are currently able to take
+              through it. You can add a new modal filter to try and solve this.
+              The colored "cell" areas show what's reachable for drivers without
+              leaving the boundary you've drawn.
+            </p>
+          </HelpButton>
+        </li>
       </ul>
     </nav>
     <nav>
@@ -183,17 +194,6 @@
       , with an area of {gjInput.area_km2.toFixed(1)} km²
     </p>
 
-    <details>
-      <summary>Help</summary>
-      <p>
-        Now that you've defined a neighbourhood boundary, you can see the
-        possible shortcuts that vehicles are currently able to take through it.
-        You can add a new modal filter to try and solve this. The colored "cell"
-        areas show what's reachable for drivers without leaving the boundary
-        you've drawn.
-      </p>
-    </details>
-
     {#if numDisconnectedCells > 0}
       <mark>
         Some parts of the neighbourhood aren't reachable by drivers, shown in