From bfb608bef38669fefdcbef25e6fa18a4221d9311 Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Fri, 27 Dec 2024 15:19:03 +0000
Subject: [PATCH] Put the project name in the URL and auto-load from that when
 possible

---
 web/src/App.svelte                      |  2 +-
 web/src/AutoBoundariesMode.svelte       |  2 +-
 web/src/DebugMode.svelte                |  2 +-
 web/src/ImpactOneDestinationMode.svelte |  2 +-
 web/src/NetworkMode.svelte              |  2 +-
 web/src/RouteMode.svelte                |  2 +-
 web/src/SetBoundaryMode.svelte          |  2 +-
 web/src/ViewShortcutsMode.svelte        |  2 +-
 web/src/edit/NeighbourhoodMode.svelte   |  2 +-
 web/src/stores.ts                       |  3 ++-
 web/src/title/NewProjectMode.svelte     |  2 +-
 web/src/title/TitleMode.svelte          | 22 +++++++++++++++++++---
 web/src/title/loader.ts                 |  5 +++++
 13 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index af9ed2a..d3b4351 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -140,7 +140,7 @@
       <Geocoder {map} apiKey={maptilerApiKey} />
       <div bind:this={mapDiv} />
       {#if $mode.mode == "title"}
-        <TitleMode {wasmReady} />
+        <TitleMode {wasmReady} firstLoad={$mode.firstLoad} />
       {:else if $mode.mode == "new-project"}
         <NewProjectMode />
       {/if}
diff --git a/web/src/AutoBoundariesMode.svelte b/web/src/AutoBoundariesMode.svelte
index 47c1d82..f30218f 100644
--- a/web/src/AutoBoundariesMode.svelte
+++ b/web/src/AutoBoundariesMode.svelte
@@ -78,7 +78,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title" })}>
+          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
             Choose project
           </Link>
         </li>
diff --git a/web/src/DebugMode.svelte b/web/src/DebugMode.svelte
index ec16979..8a9dcf3 100644
--- a/web/src/DebugMode.svelte
+++ b/web/src/DebugMode.svelte
@@ -14,7 +14,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title" })}>
+          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
             Choose project
           </Link>
         </li>
diff --git a/web/src/ImpactOneDestinationMode.svelte b/web/src/ImpactOneDestinationMode.svelte
index 6d763e9..05ab115 100644
--- a/web/src/ImpactOneDestinationMode.svelte
+++ b/web/src/ImpactOneDestinationMode.svelte
@@ -67,7 +67,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title" })}>
+          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
             Choose project
           </Link>
         </li>
diff --git a/web/src/NetworkMode.svelte b/web/src/NetworkMode.svelte
index 367e5d4..3d7a229 100644
--- a/web/src/NetworkMode.svelte
+++ b/web/src/NetworkMode.svelte
@@ -84,7 +84,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title" })}>
+          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
             Choose project
           </Link>
         </li>
diff --git a/web/src/RouteMode.svelte b/web/src/RouteMode.svelte
index 8d3e668..6511d08 100644
--- a/web/src/RouteMode.svelte
+++ b/web/src/RouteMode.svelte
@@ -31,7 +31,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title" })}>
+          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
             Choose project
           </Link>
         </li>
diff --git a/web/src/SetBoundaryMode.svelte b/web/src/SetBoundaryMode.svelte
index a15a2df..d6c1f05 100644
--- a/web/src/SetBoundaryMode.svelte
+++ b/web/src/SetBoundaryMode.svelte
@@ -67,7 +67,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title" })}>
+          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
             Choose project
           </Link>
         </li>
diff --git a/web/src/ViewShortcutsMode.svelte b/web/src/ViewShortcutsMode.svelte
index 8c4a068..3751fd4 100644
--- a/web/src/ViewShortcutsMode.svelte
+++ b/web/src/ViewShortcutsMode.svelte
@@ -86,7 +86,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title" })}>
+          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
             Choose project
           </Link>
         </li>
diff --git a/web/src/edit/NeighbourhoodMode.svelte b/web/src/edit/NeighbourhoodMode.svelte
index a1a4f83..0d5b979 100644
--- a/web/src/edit/NeighbourhoodMode.svelte
+++ b/web/src/edit/NeighbourhoodMode.svelte
@@ -142,7 +142,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title" })}>
+          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
             Choose project
           </Link>
         </li>
diff --git a/web/src/stores.ts b/web/src/stores.ts
index 146ae13..6f7bd28 100644
--- a/web/src/stores.ts
+++ b/web/src/stores.ts
@@ -9,6 +9,7 @@ export const maptilerApiKey = "MZEJTanw3WpxRvt7qDfo";
 export type Mode =
   | {
       mode: "title";
+      firstLoad: boolean;
     }
   | {
       mode: "new-project";
@@ -57,7 +58,7 @@ export let mainRoadPenalty: Writable<number> = writable(1.0);
 // A way for different components to know when internal app state has changed
 // and they might need to rerender
 export let mutationCounter: Writable<number> = writable(1);
-export let mode: Writable<Mode> = writable({ mode: "title" });
+export let mode: Writable<Mode> = writable({ mode: "title", firstLoad: true });
 export let filterType: Writable<string> = writable("walk_cycle_only");
 export let animateShortcuts = writable(false);
 export let editPerimeterRoads = writable(false);
diff --git a/web/src/title/NewProjectMode.svelte b/web/src/title/NewProjectMode.svelte
index 6ef53e3..4eafdbb 100644
--- a/web/src/title/NewProjectMode.svelte
+++ b/web/src/title/NewProjectMode.svelte
@@ -74,7 +74,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title" })}>
+          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
             Choose project
           </Link>
         </li>
diff --git a/web/src/title/TitleMode.svelte b/web/src/title/TitleMode.svelte
index b1b66a7..36e6bc8 100644
--- a/web/src/title/TitleMode.svelte
+++ b/web/src/title/TitleMode.svelte
@@ -9,13 +9,29 @@
   import { loadFromLocalStorage } from "./loader";
 
   export let wasmReady: boolean;
+  export let firstLoad: boolean;
 
   let loading = "";
 
   // When other modes reset here, they can't clear state without a race condition
-  $app = null;
-  $routeTool = null;
-  $projectName = "";
+  {
+    $app = null;
+    $routeTool = null;
+    $projectName = "";
+
+    if (firstLoad) {
+      let params = new URLSearchParams(window.location.search);
+      let loadProject = params.get("project");
+      if (loadProject) {
+        loadFromLocalStorage(loadProject);
+      }
+    } else {
+      // Update the URL
+      let url = new URL(window.location.href);
+      url.searchParams.delete("project");
+      window.history.replaceState(null, "", url.toString());
+    }
+  }
 
   let projectList = getProjectList();
 
diff --git a/web/src/title/loader.ts b/web/src/title/loader.ts
index d2e182f..98b0218 100644
--- a/web/src/title/loader.ts
+++ b/web/src/title/loader.ts
@@ -94,6 +94,11 @@ export function afterProjectLoaded() {
   route_pt_a.set(randomPoint());
   route_pt_b.set(randomPoint());
   one_destination.set(randomPoint());
+
+  // Update the URL
+  let url = new URL(window.location.href);
+  url.searchParams.set("project", get(projectName));
+  window.history.replaceState(null, "", url.toString());
 }
 
 function randomPoint(): LngLat {