Cleanup help button and action buttons on project list and neighbourh…

…ood list

This introduces the "lucid" icon font, which apparently ultimately just
generates SVGs but they've devised a nice API so that you can tweak the
coloring (and stroke width).

Using our build system (vite) it's efficient about which assets get
included.

web/package.json

@@ -30,6 +30,7 @@
   "dependencies": {
     "@picocss/pico": "^2.0.6",
     "@turf/along": "^7.1",
+    "lucide-svelte": "^0.475.0",
     "route-snapper": "^0.4.9",
     "route-snapper-ts": "^0.0.8",
     "svelte-maplibre": "^0.9.14",

web/src/App.svelte

@@ -207,3 +207,61 @@
     </MapLibre>
   </div>
 </Layout>
+
+<style>
+  :global(.pico .icon-btn.destructive),
+  :global(.icon-btn.destructive) {
+    background-color: #dc2626;
+  }
+
+  :global(.pico .icon-btn),
+  :global(.icon-btn) {
+    margin: 0;
+    height: 36px;
+    width: 36px;
+    aspect-ratio: 1;
+    padding: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :global(.pico .icon-btn):hover,
+  :global(.icon-btn):hover {
+    background-color: #ddd;
+  }
+
+  :global(.pico .icon-btn.destructive):hover,
+  :global(.icon-btn.destructive):hover {
+    background-color: #891717;
+  }
+
+  :global(.pico .icon-btn svg),
+  :global(.icon-btn svg) {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  :global(.pico nav[aria-label="breadcrumb"] ul) {
+    margin-left: 4px;
+  }
+
+  :global(.pico nav[aria-label="breadcrumb"] ul > li) {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  :global(.pico nav[aria-label="breadcrumb"] ul li:before) {
+    /* pico overrides to reconcile breadcrumb li becoming `flex` */
+    display: none;
+  }
+
+  :global(.pico nav[aria-label="breadcrumb"] ul li:not(:last-child)::after) {
+    /* pico overrides to reconcile breadcrumb li becoming `flex` */
+    position: static;
+    margin-right: -32px;
+    margin-left: -16px;
+  }
+</style>

web/src/PickNeighbourhoodMode.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
   import type { Feature, FeatureCollection } from "geojson";
+  import { Pencil, Trash2 } from "lucide-svelte";
   import { FillLayer, GeoJSON, hoverStateFilter } from "svelte-maplibre";
   import { downloadGeneratedFile, notNull } from "svelte-utils";
   import { Popup } from "svelte-utils/map";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
-  import deleteIcon from "../assets/delete.svg?url";
-  import editIcon from "../assets/edit.svg?url";
   import { HelpButton, layerId, Link } from "./common";
   import { pickNeighbourhoodName } from "./common/pick_names";
   import { ModalFilterLayer } from "./layers";
@@ -174,18 +173,22 @@
             <Link on:click={() => pickNeighbourhood(name)}>
               {name}
             </Link>
-            <button
-              class="secondary"
-              on:click={() => renameNeighbourhood(name)}
-            >
-              <img src={editIcon} alt="Rename neighbourhood" />
-            </button>
-            <button
-              class="secondary"
-              on:click={() => deleteNeighbourhood(name)}
-            >
-              <img src={deleteIcon} alt="Delete neighbourhood" />
-            </button>
+            <span style="display: flex; gap: 16px;">
+              <button
+                class="outline icon-btn"
+                aria-label="Rename neighbourhood"
+                on:click={() => renameNeighbourhood(name)}
+              >
+                <Pencil color="black" />
+              </button>
+              <button
+                class="icon-btn destructive"
+                aria-label="Delete neighbourhood"
+                on:click={() => deleteNeighbourhood(name)}
+              >
+                <Trash2 color="white" />
+              </button>
+            </span>
           </span>
         </li>
       {/each}

web/src/common/HelpButton.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   // This launches a modal when clicked. The user should put the modal contents
   // as a slot beneath this component.
+  import { CircleHelp } from "lucide-svelte";
   import { Modal } from "svelte-utils";
-  import icon from "../../assets/help.svg?url";
 
   let show = false;
 </script>
 
-<button class="help" on:click={() => (show = true)}>
-  <img src={icon} title="Help" alt="Help" />
+<button class="icon-btn help" aria-label="Help" on:click={() => (show = true)}>
+  <CircleHelp color="black" />
 </button>
 
 {#if show}
@@ -21,10 +21,16 @@
 <style>
   button.help {
     background: none;
-    border: 1px solid rgba(0, 0, 0, 0);
+    border: none;
   }
 
-  button:hover {
-    border: 1px solid black;
+  /* 
+  special considerations so that the help button doesn't exapnd the
+  height of the breadcrums
+  */
+  :global(.pico nav[aria-label="breadcrumb"] ul > li) button.help {
+    height: 30px;
+    padding: 2px;
+    width: auto;
   }
 </style>

web/src/title/TitleMode.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
+  import { Pencil, Trash2 } from "lucide-svelte";
   import { Loading } from "svelte-utils";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
-  import deleteIcon from "../../assets/delete.svg?url";
-  import editIcon from "../../assets/edit.svg?url";
   import { Link } from "../common";
   import { routeTool } from "../common/draw_area/stores";
   import { backend, map, mode, projectName } from "../stores";
@@ -136,18 +135,22 @@
                 <Link on:click={() => loadProject(project)}>
                   {project.slice("ltn_".length)}
                 </Link>
-                <button
-                  class="secondary"
-                  on:click={() => renameProject(project)}
-                >
-                  <img src={editIcon} alt="Rename project" />
-                </button>
-                <button
-                  class="secondary"
-                  on:click={() => deleteProject(project)}
-                >
-                  <img src={deleteIcon} alt="Delete project" />
-                </button>
+                <span style="display: flex; gap: 16px;">
+                  <button
+                    class="outline icon-btn"
+                    aria-label="Rename project"
+                    on:click={() => renameProject(project)}
+                  >
+                    <Pencil color="black" />
+                  </button>
+                  <button
+                    class="icon-btn destructive"
+                    aria-label="Delete project"
+                    on:click={() => deleteProject(project)}
+                  >
+                    <Trash2 color="white" />
+                  </button>
+                </span>
               </span>
             </li>
           {/each}