Minor dom cleanup

1 files changed, 41 insertions, 50 deletions

diff --git a/app/main.js b/app/main.js
index 5bd3534..6f5f7b7 100644
--- a/app/main.js
+++ b/app/main.js
@@ -34,8 +34,8 @@ export class App {
 	#controls;
 	/** @type {HTMLDialogElement|null} */
 	#modal = null;
-	/** @type {number | null} */
-	#modalTimer = null;
+	/** @type {number | undefined} */
+	#modalTimer = undefined;
 	/** @type {boolean} */
 	#persistent = false;
 	/** @type {string} */
@@ -51,38 +51,7 @@ export class App {
 			margin: "0",
 		});
 
-		const loading = App.createLoading();
-
-		// Create main content container
-		const mainContainer = Dom.div({
-			styles: {
-				display: "flex",
-				flex: "1",
-				overflow: "hidden",
-			},
-		});
-
-		// Create map container
-		const mapContainer = Dom.div({
-			styles: {
-				display: "flex",
-				flex: "1",
-				flexDirection: "column",
-				minWidth: "0", // Prevents flex overflow
-			},
-		});
-
-		const stats = Dom.div({
-			styles: {
-				background: "#fff",
-				borderTop: "1px solid #ddd",
-				flexShrink: "0",
-				fontSize: "0.95rem",
-				padding: "0.75rem 1rem",
-			},
-		});
-
-		const controls = App.buildControls(
+		this.#controls = App.buildControls(
 			this.#filters,
 			this.#weights,
 			() => this.#applyFilters(),
@@ -100,13 +69,6 @@ export class App {
 			},
 		);
 
-		// Build layout hierarchy
-		mainContainer.append(controls, mapContainer);
-		document.body.append(loading, mainContainer);
-
-		this.#stats = stats;
-		this.#controls = controls;
-
 		this.#map = new MapEl({
 			onHouseClick: (houseId, persistent) => this.#showHouseModal(houseId, persistent),
 			onHouseHover: (houseId, hide) => {
@@ -118,16 +80,19 @@ export class App {
 			},
 		});
 
-		mapContainer.append(this.#map.svg, stats);
-		this.#initialize(loading);
-	}
+		this.#stats = Dom.div({
+			id: "stats",
+			styles: {
+				background: "#fff",
+				borderTop: "1px solid #ddd",
+				flexShrink: "0",
+				fontSize: "0.95rem",
+				padding: "0.75rem 1rem",
+			},
+		});
 
-	/**
-	 * Create loading indicator
-	 * @returns {HTMLElement}
-	 */
-	static createLoading() {
-		return Dom.div({
+		const loading = Dom.div({
+			id: "loading",
 			styles: {
 				background: "white",
 				borderRadius: "8px",
@@ -144,6 +109,32 @@ export class App {
 			},
 			textContent: "Loading data…",
 		});
+
+		document.body.append(
+			loading,
+			Dom.div({
+				children: [
+					this.#controls,
+					Dom.div({
+						children: [this.#map.svg, this.#stats],
+						id: "map-container",
+						styles: {
+							display: "flex",
+							flex: "1",
+							flexDirection: "column",
+							minWidth: "0", // Prevents flex overflow
+						},
+					}),
+				],
+				id: "main",
+				styles: {
+					display: "flex",
+					flex: "1",
+					overflow: "hidden",
+				},
+			}),
+		);
+		this.#initialize(loading);
 	}
 
 	/**