From 661eace1881f49ee892a7748b5545bc492a94fc6 Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Mon, 5 Feb 2024 09:46:53 +0000
Subject: [PATCH] More consistency with the top bar. #15

---
 web/src/DebugGJ.svelte                | 16 ++++++++--
 web/src/DebugMode.svelte              | 24 +++++++++++++--
 web/src/NetworkMode.svelte            |  4 +--
 web/src/RouteMode.svelte              |  4 +--
 web/src/SetBoundaryMode.svelte        | 42 +++++++++++++++++++++++++--
 web/src/ViewShortcutsMode.svelte      |  4 +--
 web/src/edit/NeighbourhoodMode.svelte |  4 +--
 web/src/title/TitleMode.svelte        |  5 +++-
 8 files changed, 87 insertions(+), 16 deletions(-)

diff --git a/web/src/DebugGJ.svelte b/web/src/DebugGJ.svelte
index 726811a..4f2436a 100644
--- a/web/src/DebugGJ.svelte
+++ b/web/src/DebugGJ.svelte
@@ -13,9 +13,21 @@
 </script>
 
 <SplitComponent>
-  <div slot="sidebar">
-    <h1>Debug GJ</h1>
+  <div slot="top">
+    <nav aria-label="breadcrumb">
+      <!-- svelte-ignore a11y-invalid-attribute -->
+      <ul>
+        <li>
+          <a href="#" on:click={() => ($mode = { mode: "title" })}
+            >Choose study area</a
+          >
+        </li>
+        <li>Debug route snapper</li>
+      </ul>
+    </nav>
+  </div>
 
+  <div slot="sidebar">
     <button on:click={() => ($mode = { mode: "network" })}>Back</button>
   </div>
 
diff --git a/web/src/DebugMode.svelte b/web/src/DebugMode.svelte
index 3e6d417..5f22be9 100644
--- a/web/src/DebugMode.svelte
+++ b/web/src/DebugMode.svelte
@@ -7,9 +7,29 @@
 </script>
 
 <SplitComponent>
-  <div slot="sidebar">
-    <h1>Debug mode</h1>
+  <div slot="top">
+    <nav aria-label="breadcrumb">
+      <!-- svelte-ignore a11y-invalid-attribute -->
+      <ul>
+        <li>
+          <a href="#" on:click={() => ($mode = { mode: "title" })}
+            >Choose study area</a
+          >
+        </li>
+        <li>
+          <a href="#" on:click={() => ($mode = { mode: "network" })}
+            >Pick neighbourhood</a
+          >
+        </li>
+        <li>
+          <a href="#" on:click={() => ($mode = { mode: "neighbourhood" })}>Editing modal filters</a>
+        </li>
+        <li>Debug mode</li>
+      </ul>
+    </nav>
+  </div>
 
+  <div slot="sidebar">
     <button on:click={() => ($mode = { mode: "neighbourhood" })}
       >Back to editing</button
     >
diff --git a/web/src/NetworkMode.svelte b/web/src/NetworkMode.svelte
index 9fb5339..7ed6b0b 100644
--- a/web/src/NetworkMode.svelte
+++ b/web/src/NetworkMode.svelte
@@ -41,10 +41,10 @@
       <ul>
         <li>
           <a href="#" on:click={() => ($mode = { mode: "title" })}
-            >Change study area</a
+            >Choose study area</a
           >
         </li>
-        <li>Define neighbourhood boundaries</li>
+        <li>Pick neighbourhood</li>
       </ul>
     </nav>
     <span style="display: flex">
diff --git a/web/src/RouteMode.svelte b/web/src/RouteMode.svelte
index 7c1bdb3..889aa55 100644
--- a/web/src/RouteMode.svelte
+++ b/web/src/RouteMode.svelte
@@ -46,12 +46,12 @@
       <ul>
         <li>
           <a href="#" on:click={() => ($mode = { mode: "title" })}
-            >Change study area</a
+            >Choose study area</a
           >
         </li>
         <li>
           <a href="#" on:click={() => ($mode = { mode: "network" })}
-            >Change neighbourhood</a
+            >Pick neighbourhood</a
           >
         </li>
         {#if prevMode == "neighbourhood"}
diff --git a/web/src/SetBoundaryMode.svelte b/web/src/SetBoundaryMode.svelte
index c0be68a..9542b70 100644
--- a/web/src/SetBoundaryMode.svelte
+++ b/web/src/SetBoundaryMode.svelte
@@ -15,10 +15,18 @@
     $route_tool!.startArea();
   }
 
+  // TODO When we click a link and nav away, clear state
+
   function onFailure() {
-    $mode = {
-      mode: "network",
-    };
+    if (existing) {
+      $mode = {
+        mode: "neighbourhood",
+      };
+    } else {
+      $mode = {
+        mode: "network",
+      };
+    }
     $route_tool!.clearEventListeners();
   }
 
@@ -41,6 +49,34 @@
 </script>
 
 <SplitComponent>
+  <div slot="top">
+    <nav aria-label="breadcrumb">
+      <!-- svelte-ignore a11y-invalid-attribute -->
+      <ul>
+        <li>
+          <a href="#" on:click={() => ($mode = { mode: "title" })}
+            >Choose study area</a
+          >
+        </li>
+        <li>
+          <a href="#" on:click={() => ($mode = { mode: "network" })}
+            >Pick neighbourhood</a
+          >
+        </li>
+        {#if existing}
+          <li>
+            <a href="#" on:click={() => ($mode = { mode: "neighbourhood" })}
+              >Editing modal filters</a
+            >
+          </li>
+          <li>Changing neighbourhood boundary</li>
+        {:else}
+          <li>Creating new neighbourhood boundary</li>
+        {/if}
+      </ul>
+    </nav>
+  </div>
+
   <div slot="sidebar">
     <h1>Draw your neighbourhood boundary for {name}</h1>
 
diff --git a/web/src/ViewShortcutsMode.svelte b/web/src/ViewShortcutsMode.svelte
index 69452d2..887de53 100644
--- a/web/src/ViewShortcutsMode.svelte
+++ b/web/src/ViewShortcutsMode.svelte
@@ -88,12 +88,12 @@
       <ul>
         <li>
           <a href="#" on:click={() => ($mode = { mode: "title" })}
-            >Change study area</a
+            >Choose study area</a
           >
         </li>
         <li>
           <a href="#" on:click={() => ($mode = { mode: "network" })}
-            >Change neighbourhood</a
+            >Pick neighbourhood</a
           >
         </li>
         <li>
diff --git a/web/src/edit/NeighbourhoodMode.svelte b/web/src/edit/NeighbourhoodMode.svelte
index 48901a5..818be4a 100644
--- a/web/src/edit/NeighbourhoodMode.svelte
+++ b/web/src/edit/NeighbourhoodMode.svelte
@@ -107,12 +107,12 @@
       <ul>
         <li>
           <a href="#" on:click={() => ($mode = { mode: "title" })}
-            >Change study area</a
+            >Choose study area</a
           >
         </li>
         <li>
           <a href="#" on:click={() => ($mode = { mode: "network" })}
-            >Change neighbourhood</a
+            >Pick neighbourhood</a
           >
         </li>
         <li>
diff --git a/web/src/title/TitleMode.svelte b/web/src/title/TitleMode.svelte
index 08ad73b..4f4476f 100644
--- a/web/src/title/TitleMode.svelte
+++ b/web/src/title/TitleMode.svelte
@@ -47,7 +47,10 @@
 
 <SplitComponent>
   <div slot="top">
-    <h1>Choose your study area</h1>
+    <nav aria-label="breadcrumb">
+      <ul>
+        <li>Choose study area</li>
+  </ul></nav>
   </div>
   <div slot="sidebar">
     <About />