Use refactored three-part layout

Author: dabreegster

web/package-lock.json

@@ -12,11 +12,12 @@
   import { notNull } from "svelte-utils";
   import { Geocoder } from "svelte-utils/map";
   import {
-    DisableInteractiveLayers,
+    mapContents,
+    topContents,
+    sidebarContents,
     Layout,
-    layerId,
-    StreetView,
-  } from "./common";
+  } from "svelte-utils/top_bar_layout";
+  import { DisableInteractiveLayers, layerId, StreetView } from "./common";
   import DebugMode from "./DebugMode.svelte";
   import NeighbourhoodMode from "./edit/NeighbourhoodMode.svelte";
   import NetworkMode from "./NetworkMode.svelte";
@@ -25,13 +26,10 @@
   import SetBoundaryMode from "./SetBoundaryMode.svelte";
   import {
     app,
-    mapContents,
-    topContents,
     map as mapStore,
     showAbout,
     lightMode,
     mode,
-    sidebarContents,
     maptilerBasemap,
     maptilerApiKey,
     useLocalVite,

web/src/App.svelte

@@ -4,7 +4,7 @@
   import { Link, layerId, Popup } from "./common";
   import { PropertiesTable, notNull } from "svelte-utils";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
-  import SplitComponent from "./SplitComponent.svelte";
+  import { SplitComponent } from "svelte-utils/top_bar_layout";
   import { app, mode } from "./stores";
 </script>
 

web/src/DebugMode.svelte

@@ -8,7 +8,7 @@
   import { FillLayer, GeoJSON, hoverStateFilter } from "svelte-maplibre";
   import { layerId, Popup, Link } from "./common";
   import ModalFilterLayer from "./ModalFilterLayer.svelte";
-  import SplitComponent from "./SplitComponent.svelte";
+  import { SplitComponent } from "svelte-utils/top_bar_layout";
   import { lightMode, app, autosave, mode, projectName } from "./stores";
 
   // Note we do this to trigger a refresh when loading stuff

web/src/NetworkMode.svelte

@@ -6,7 +6,7 @@
   import { layerId, Link } from "./common";
   import ModalFilterLayer from "./ModalFilterLayer.svelte";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
-  import SplitComponent from "./SplitComponent.svelte";
+  import { SplitComponent } from "svelte-utils/top_bar_layout";
   import { app, mode, route_pt_a, route_pt_b, mainRoadPenalty } from "./stores";
 
   export let prevMode: "network" | "neighbourhood";

web/src/RouteMode.svelte

@@ -4,7 +4,7 @@
   import { notNull } from "svelte-utils";
   import RouteSnapperLayer from "./common/snapper/RouteSnapperLayer.svelte";
   import SnapPolygonControls from "./common/snapper/SnapPolygonControls.svelte";
-  import SplitComponent from "./SplitComponent.svelte";
+  import { SplitComponent } from "svelte-utils/top_bar_layout";
   import { autosave, app, mode, route_tool } from "./stores";
   import type { AreaProps } from "route-snapper-ts";
 

web/src/SetBoundaryMode.svelte

@@ -9,7 +9,7 @@
   import { notNull } from "svelte-utils";
   import ModalFilterLayer from "./ModalFilterLayer.svelte";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
-  import SplitComponent from "./SplitComponent.svelte";
+  import { SplitComponent } from "svelte-utils/top_bar_layout";
   import { app, map, mode } from "./stores";
 
   type State =

web/src/SplitComponent.svelte

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

web/src/ViewShortcutsMode.svelte

@@ -7,7 +7,7 @@
   import { type LayerClickInfo } from "svelte-maplibre";
   import { Popup, Link } from "../common";
   import RenderNeighbourhood from "../RenderNeighbourhood.svelte";
-  import SplitComponent from "../SplitComponent.svelte";
+  import { SplitComponent } from "svelte-utils/top_bar_layout";
   import {
     app,
     map,

web/src/common/Layout.svelte

@@ -47,10 +47,6 @@ export let useLocalVite: Writable<boolean> = writable(false);
 export let projectName: Writable<string> = writable("");
 export let showAbout: Writable<boolean> = writable(true);
 
-export let topContents: Writable<HTMLDivElement | null> = writable(null);
-export let sidebarContents: Writable<HTMLDivElement | null> = writable(null);
-export let mapContents: Writable<HTMLDivElement | null> = writable(null);
-
 export let app: Writable<LTN | null> = writable(null);
 export let route_tool: Writable<RouteTool | null> = writable(null);
 export let route_pt_a: Writable<LngLat> = writable(new LngLat(0, 0));

web/src/common/index.ts

@@ -5,7 +5,7 @@
   import { Link } from "../common";
   import { OverpassSelector } from "svelte-utils/overpass";
   import { PolygonToolLayer } from "maplibre-draw-polygon";
-  import SplitComponent from "../SplitComponent.svelte";
+  import { SplitComponent } from "svelte-utils/top_bar_layout";
   import {
     autosave,
     projectName,

web/src/edit/NeighbourhoodMode.svelte

@@ -4,7 +4,7 @@
   import editLight from "../../assets/edit_light.svg?url";
   import editDark from "../../assets/edit_dark.svg?url";
   import { Link } from "../common";
-  import SplitComponent from "../SplitComponent.svelte";
+  import { SplitComponent } from "svelte-utils/top_bar_layout";
   import {
     lightMode,
     app,