From e36134f48efb95a85c23d511389d32f548c82159 Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Mon, 23 Sep 2024 11:04:49 -0400
Subject: [PATCH 01/22] feat: hide zoning button behind sv_cheats 1

---
 layout/hud/tab-menu.xml | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/layout/hud/tab-menu.xml b/layout/hud/tab-menu.xml
index 8fc829be..2d76d2d4 100644
--- a/layout/hud/tab-menu.xml
+++ b/layout/hud/tab-menu.xml
@@ -52,8 +52,10 @@
 			<Panel class="hud-tab-menu__stats">
 			</Panel>
 			
-			<Panel class="hud-tab-menu__enable-cursor">
-				<ToggleButton id="ZoningToggle" class="button h-align-left hud-tab-menu__zoning-button" convar="mom_zone_edit" />
+			<Panel id="TabMenuFooter" class="hud-tab-menu__enable-cursor">
+				<ConVarEnabler convar="sv_cheats" class="v-align-center" togglevisibility="true">
+					<ToggleButton id="ZoningToggle" class="button hud-tab-menu__zoning-button" convar="mom_zone_edit" />
+				</ConVarEnabler>
 				<Label class="hud-tab-menu__enable-cursor-tip" text="#HudTabMenu_EnableCursorTip"/> 
 			</Panel>
 		</Panel>

From ea70b4b2fc22af89c96c68de819e5e78b52c8715 Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Mon, 23 Sep 2024 11:05:06 -0400
Subject: [PATCH 02/22] feat: adjust zoning toggle alignment

---
 layout/hud/tab-menu.xml  | 2 +-
 styles/hud/tab-menu.scss | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/layout/hud/tab-menu.xml b/layout/hud/tab-menu.xml
index 2d76d2d4..8d271144 100644
--- a/layout/hud/tab-menu.xml
+++ b/layout/hud/tab-menu.xml
@@ -52,7 +52,7 @@
 			<Panel class="hud-tab-menu__stats">
 			</Panel>
 			
-			<Panel id="TabMenuFooter" class="hud-tab-menu__enable-cursor">
+			<Panel id="TabMenuFooter" class="hud-tab-menu__footer">
 				<ConVarEnabler convar="sv_cheats" class="v-align-center" togglevisibility="true">
 					<ToggleButton id="ZoningToggle" class="button hud-tab-menu__zoning-button" convar="mom_zone_edit" />
 				</ConVarEnabler>
diff --git a/styles/hud/tab-menu.scss b/styles/hud/tab-menu.scss
index 31fc55c6..7d048054 100644
--- a/styles/hud/tab-menu.scss
+++ b/styles/hud/tab-menu.scss
@@ -91,6 +91,9 @@
 	&__zoning-button {
 		height: $button-height;
 		width: height-percentage(100%);
+		margin: 2px;
+		horizontal-align: left;
+		vertical-align: center;
 		background-position: center;
 		background-repeat: no-repeat;
 		background-image: url('file://{images}/pencil-outline.svg');
@@ -102,7 +105,7 @@
 		}
 	}
 
-	&__enable-cursor {
+	&__footer {
 		border-top: 1px solid rgba(0, 0, 0, 0.4);
 		width: 100%;
 		padding-right: 24px;

From caafd13fe61d0447026cce3b7bc3b0f0d367c552 Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Fri, 22 Nov 2024 23:25:49 -0500
Subject: [PATCH 03/22] feat: hide tab menu header while zoning

---
 styles/hud/tab-menu.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/styles/hud/tab-menu.scss b/styles/hud/tab-menu.scss
index 7d048054..e9a9eb01 100644
--- a/styles/hud/tab-menu.scss
+++ b/styles/hud/tab-menu.scss
@@ -24,6 +24,10 @@
 		margin: 32px;
 		horizontal-align: left;
 		vertical-align: top;
+
+		& > .hud-tab-menu__wrapper > .hud-tab-menu__header {
+			visibility: collapse;
+		}
 	}
 
 	&__wrapper {

From 1afcfa7602382c18e744d37b73e240c3e0c1d20d Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Mon, 23 Sep 2024 11:23:01 -0400
Subject: [PATCH 04/22] feat: move grid snap below region properties

---
 layout/pages/zoning/zoning.xml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/layout/pages/zoning/zoning.xml b/layout/pages/zoning/zoning.xml
index 0cfcb029..6d677d57 100644
--- a/layout/pages/zoning/zoning.xml
+++ b/layout/pages/zoning/zoning.xml
@@ -146,9 +146,6 @@
 								</DropDown>
 							</Panel>
 					</Panel>
-					<Panel id="GridSlider" class="zoning__property">
-						<SettingsSlider text="#Zoning_GridSnapSize" class="zoning__slider" min="1" max="64" percentage="false" convar="mom_zone_grid" />
-					</Panel>
 					<Panel id="PropertyTabs" class="tabs">
 						<RadioButton group="ZoningRegion" class="tabs__tab" value="Points" selected="true" onactivate="ZoneMenuHandler.showRegionMenu('Points')" onmouseover="UiToolkitAPI.ShowTextTooltip('PropertyTabs', '#Zoning_RegionPoints_Tooltip');" onmouseout="UiToolkitAPI.HideTextTooltip();">
 							<Image src="file://{images}/vector-square-close.svg" class="tabs__icon" textureheight="48" />
@@ -235,6 +232,9 @@
 						</Panel>
 					</Panel>
 				</Panel>
+				<Panel id="GridSlider" class="zoning__property">
+					<SettingsSlider text="#Zoning_GridSnapSize" class="zoning__slider" min="1" max="64" percentage="false" convar="mom_zone_grid" />
+				</Panel>
 			</Panel>
 		</Panel>
 		<Panel class="zoning__button-box">

From 44c14c64db1d19a298a762cd9861cddb7ffb663f Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Mon, 23 Sep 2024 13:12:33 -0400
Subject: [PATCH 05/22] feat: lighten segment background in tracklist

---
 scripts/pages/zoning/zoning.ts  | 4 ++--
 styles/pages/zoning/zoning.scss | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/scripts/pages/zoning/zoning.ts b/scripts/pages/zoning/zoning.ts
index ca64dd67..c98f2e62 100644
--- a/scripts/pages/zoning/zoning.ts
+++ b/scripts/pages/zoning/zoning.ts
@@ -164,10 +164,10 @@ class ZoneMenuHandler {
 		container.SetHasClass('hide', !shouldExpand);
 		expandIcon.SetHasClass('hide', !shouldExpand);
 		collapseIcon.SetHasClass('hide', shouldExpand);
-		const parent = container.GetParent();
+		/*const parent = container.GetParent();
 		if (parent && parent.HasClass('zoning__tracklist-segment')) {
 			parent.SetHasClass('zoning__tracklist-segment--dark', shouldExpand);
-		}
+		}*/
 	}
 
 	createTrackEntry(parent: GenericPanel, entry: MainTrack | BonusTrack, name: string) {
diff --git a/styles/pages/zoning/zoning.scss b/styles/pages/zoning/zoning.scss
index 74304125..69f7cdf2 100644
--- a/styles/pages/zoning/zoning.scss
+++ b/styles/pages/zoning/zoning.scss
@@ -94,7 +94,7 @@ $medium: 28px;
 		flow-children: down;
 
 		&--dark {
-			background-color: $dark-700;
+			//background-color: $dark-100;
 		}
 	}
 

From 24a12e7b119616b981b3394862c4e7db566e6829 Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Mon, 23 Sep 2024 17:43:36 -0400
Subject: [PATCH 06/22] feat: delete button in tracklist

---
 layout/pages/zoning/zoning.xml  |  9 +++++++
 scripts/pages/zoning/zoning.ts  | 46 +++++++++++++++++++++++++--------
 styles/pages/zoning/zoning.scss | 20 ++++++++++++++
 3 files changed, 64 insertions(+), 11 deletions(-)

diff --git a/layout/pages/zoning/zoning.xml b/layout/pages/zoning/zoning.xml
index 6d677d57..87fe9755 100644
--- a/layout/pages/zoning/zoning.xml
+++ b/layout/pages/zoning/zoning.xml
@@ -18,6 +18,9 @@
 					<RadioButton id="SelectButton" class="zoning__tracklist-button" group="tracklist">
 						<Label id="Name" class="zoning__tracklist-label" />
 					</RadioButton>
+					<Button id="DeleteButton" class="zoning__tracklist-delete hide">
+						<Image class="zoning__tracklist-delete__icon" src="file://{images}/close-box-outline.svg" textureheight="24" />
+					</Button>
 				</Panel>
 				<Panel id="ChildContainer" class="w-full flow-down">
 					<Panel id="SegmentContainer" class="zoning__list-container" />
@@ -35,6 +38,9 @@
 					<RadioButton id="SelectButton" class="zoning__tracklist-button" group="tracklist">
 						<Label id="Name" class="zoning__tracklist-label" />
 					</RadioButton>
+					<Button id="DeleteButton" class="zoning__tracklist-delete hide">
+						<Image class="zoning__tracklist-delete__icon" src="file://{images}/close-box-outline.svg" textureheight="24" />
+					</Button>
 				</Panel>
 				<Panel id="ChildContainer" class="w-full flow-down">
 					<Panel id="CheckpointContainer" class="zoning__list-container" />
@@ -48,6 +54,9 @@
 					<RadioButton id="SelectButton" class="zoning__tracklist-button" group="tracklist">
 						<Label id="Name" class="zoning__tracklist-label" />
 					</RadioButton>
+					<Button id="DeleteButton" class="zoning__tracklist-delete hide">
+						<Image class="zoning__tracklist-delete__icon" src="file://{images}/close-box-outline.svg" textureheight="24" />
+					</Button>
 				</Panel>
 			</Panel>
 		</snippet>
diff --git a/scripts/pages/zoning/zoning.ts b/scripts/pages/zoning/zoning.ts
index c98f2e62..56207627 100644
--- a/scripts/pages/zoning/zoning.ts
+++ b/scripts/pages/zoning/zoning.ts
@@ -86,6 +86,7 @@ class ZoneMenuHandler {
 		segment: null as Segment | null,
 		zone: null as Zone | null
 	};
+	deleteButton: Button | null;
 	mapZoneData: MapZones | null;
 	filternameList: string[] | null;
 	teleDestList: string[] | null;
@@ -124,8 +125,6 @@ class ZoneMenuHandler {
 
 		if (!this.mapZoneData) return;
 
-		this.updateSelection(this.mapZoneData.tracks.main, null, null);
-
 		const entList: EntityList = this.panels.zoningMenu.getEntityList();
 		this.filternameList = entList.filter ?? [];
 		this.filternameList.unshift($.Localize('#Zoning_Filter_None'));
@@ -136,15 +135,21 @@ class ZoneMenuHandler {
 		this.teleDestList.unshift($.Localize('#Zoning_TPDest_None'));
 		this.populateDropdown(this.teleDestList, this.panels.regionTPDest, '', true);
 
-		this.showRegionMenu(RegionMenu.RESET);
-
 		this.createTrackEntry(this.panels.trackList, this.mapZoneData.tracks.main, 'Main');
 
-		if (!this.mapZoneData.tracks.bonuses || this.mapZoneData.tracks.bonuses.length === 0) return;
-		const tag = $.Localize('#Zoning_Bonus');
-		for (const [i, bonus] of this.mapZoneData.tracks.bonuses.entries()) {
-			this.createTrackEntry(this.panels.trackList, bonus, `${tag} ${i + 1}`);
+		if (this.mapZoneData.tracks.bonuses) {
+			const tag = $.Localize('#Zoning_Bonus');
+			for (const [i, bonus] of this.mapZoneData.tracks.bonuses.entries()) {
+				this.createTrackEntry(this.panels.trackList, bonus, `${tag} ${i + 1}`);
+			}
 		}
+
+		const mainTrackButton = this.panels.trackList.GetChild(0).FindChildTraverse<ToggleButton>('SelectButton');
+		mainTrackButton.SetSelected(true);
+
+		this.showRegionMenu(RegionMenu.RESET);
+
+		this.updateSelection(this.mapZoneData.tracks.main, null, null);
 	}
 
 	showZoneMenu() {
@@ -266,9 +271,24 @@ class ZoneMenuHandler {
 		}
 
 		const selectButton = newTracklistPanel.FindChildTraverse<ToggleButton>('SelectButton');
-		selectButton.SetPanelEvent('onactivate', () =>
-			this.updateSelection(selectionObj.track, selectionObj.segment, selectionObj.zone)
-		);
+		const deleteButton = newTracklistPanel.FindChildTraverse<Button>('DeleteButton');
+		if ('stagesEndAtStageStarts' in selectionObj.track && !selectionObj.segment && !selectionObj.zone) {
+			selectButton.SetPanelEvent('onactivate', () => {
+				this.deleteButton?.SetHasClass('hide', true);
+				this.updateSelection(selectionObj.track, selectionObj.segment, selectionObj.zone);
+				this.deleteButton = null;
+			});
+			deleteButton.DeleteAsync(0);
+		} else {
+			selectButton.SetPanelEvent('onactivate', () => {
+				this.deleteButton?.SetHasClass('hide', true);
+				this.updateSelection(selectionObj.track, selectionObj.segment, selectionObj.zone);
+				deleteButton?.SetHasClass('hide', false);
+				this.deleteButton = deleteButton;
+			});
+			deleteButton.SetPanelEvent('onactivate', () => this.showDeletePopup());
+		}
+
 		if (selectionObj.zone) {
 			selectButton.SetPanelEvent('ondblclick', () =>
 				this.panels.zoningMenu.moveToRegion(selectionObj.zone.regions[0])
@@ -910,6 +930,8 @@ class ZoneMenuHandler {
 				const index = this.mapZoneData.tracks.main.zones.segments.indexOf(this.selectedZone.segment);
 				this.mapZoneData.tracks.main.zones.segments.splice(index, 1);
 			}
+		} else if (this.selectedZone.track && this.selectedZone.zone) {
+			delete this.selectedZone.track.zones.end;
 		} else if (this.selectedZone.track) {
 			if ('stagesEndAtStageStarts' in this.selectedZone.track) {
 				$.Msg("Can't delete Main track!!!");
@@ -919,6 +941,7 @@ class ZoneMenuHandler {
 			}
 		}
 
+		this.deleteButton = null;
 		//hack: this can be a little more surgical
 		this.panels.trackList.RemoveAndDeleteChildren();
 		this.initMenu();
@@ -1030,6 +1053,7 @@ class ZoneMenuHandler {
 		const pointsTab = this.panels.propertyTabs.GetChild<RadioButton>(0);
 		if (menu === RegionMenu.RESET) {
 			pointsTab.SetSelected(true);
+			menu = RegionMenu.POINTS;
 		}
 		menu = menu ?? (pointsTab.GetSelectedButton().GetAttributeString('value', 'Points') as RegionMenu);
 		this.panels.pointsSection.visible = menu === RegionMenu.POINTS;
diff --git a/styles/pages/zoning/zoning.scss b/styles/pages/zoning/zoning.scss
index 69f7cdf2..f5acc897 100644
--- a/styles/pages/zoning/zoning.scss
+++ b/styles/pages/zoning/zoning.scss
@@ -75,6 +75,26 @@ $medium: 28px;
 		}
 	}
 
+	&__tracklist-delete {
+		vertical-align: center;
+		height: 16px;
+		tooltip-position: bottom;
+		transition: background-color 0.1s ease-in 0s;
+
+		&__icon {
+			height: 100%;
+			width: height-percentage(100%);
+			vertical-align: center;
+			horizontal-align: center;
+			img-shadow: $button-icon-shadow;
+			wash-color: $red;
+
+			&:hover {
+				wash-color: $white;
+			}
+		}
+	}
+
 	&__tracklist-track {
 		width: 100%;
 		margin-bottom: 1px;

From fa1ce828101fce7ca8f63469bf965c88d10c9e7e Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Wed, 25 Sep 2024 21:50:30 -0400
Subject: [PATCH 07/22] feat: update selection on object creation

---
 scripts/pages/zoning/zoning.ts | 82 +++++++++++++++++++++++++---------
 1 file changed, 62 insertions(+), 20 deletions(-)

diff --git a/scripts/pages/zoning/zoning.ts b/scripts/pages/zoning/zoning.ts
index 56207627..21761286 100644
--- a/scripts/pages/zoning/zoning.ts
+++ b/scripts/pages/zoning/zoning.ts
@@ -740,6 +740,15 @@ class ZoneMenuHandler {
 			`${$.Localize('#Zoning_Bonus')} ${this.mapZoneData.tracks.bonuses.length}`
 		);
 
+		const newBonusPanel = this.panels.trackList.GetChild(this.mapZoneData.tracks.bonuses.length);
+		const segmentContainer = newBonusPanel.FindChildTraverse('SegmentContainer');
+		const checkpointContainer = segmentContainer.FindChildTraverse('CheckpointContainer');
+		const selectButton = checkpointContainer.FindChildTraverse<ToggleButton>('SelectButton');
+
+		selectButton.SetSelected(true);
+
+		this.updateSelection(bonus, bonus.zones.segments[0], bonus.zones.segments[0].checkpoints[0]);
+
 		this.updateZones();
 	}
 
@@ -765,11 +774,20 @@ class ZoneMenuHandler {
 			segment: newSegment,
 			zone: null
 		});
-		this.addTracklistEntry(list, $.Localize('#Zoning_Start_Stage'), TracklistSnippet.CHECKPOINT, {
-			track: this.selectedZone.track,
-			segment: newSegment,
-			zone: newSegment.checkpoints[0]
-		});
+		const checkpointContainer = childContainer.FindChildTraverse<Panel>('CheckpointContainer');
+		this.addTracklistEntry(
+			checkpointContainer,
+			$.Localize('#Zoning_Start_Stage'),
+			TracklistSnippet.CHECKPOINT,
+			{
+				track: this.selectedZone.track,
+				segment: newSegment,
+				zone: newSegment.checkpoints[0]
+			},
+			true
+		);
+
+		this.updateSelection(this.selectedZone.track, newSegment, newSegment.checkpoints[0]);
 
 		this.updateZones();
 	}
@@ -795,11 +813,19 @@ class ZoneMenuHandler {
 		const selectedSegment = trackPanel.FindChildTraverse('SegmentContainer').GetChild(segmentIndex);
 		const checkpointsList = selectedSegment.FindChildTraverse('CheckpointContainer');
 		const id = `${$.Localize('#Zoning_Checkpoint')} ${this.selectedZone.segment.checkpoints.length - 1}`;
-		this.addTracklistEntry(checkpointsList, id, TracklistSnippet.CHECKPOINT, {
-			track: this.selectedZone.track,
-			segment: this.selectedZone.segment,
-			zone: newZone
-		});
+		this.addTracklistEntry(
+			checkpointsList,
+			id,
+			TracklistSnippet.CHECKPOINT,
+			{
+				track: this.selectedZone.track,
+				segment: this.selectedZone.segment,
+				zone: newZone
+			},
+			true
+		);
+
+		this.updateSelection(this.selectedZone.track, this.selectedZone.segment, newZone);
 
 		this.updateZones();
 	}
@@ -828,13 +854,21 @@ class ZoneMenuHandler {
 				this.updateSelection(this.selectedZone.track, null, endZone)
 			);
 		} else {
-			this.addTracklistEntry(endZoneContainer, $.Localize('#Zoning_EndZone'), TracklistSnippet.CHECKPOINT, {
-				track: this.selectedZone.track,
-				segment: null,
-				zone: endZone
-			});
+			this.addTracklistEntry(
+				endZoneContainer,
+				$.Localize('#Zoning_EndZone'),
+				TracklistSnippet.CHECKPOINT,
+				{
+					track: this.selectedZone.track,
+					segment: null,
+					zone: endZone
+				},
+				true
+			);
 		}
 
+		this.updateSelection(this.selectedZone.track, null, endZone);
+
 		this.updateZones();
 	}
 
@@ -863,11 +897,19 @@ class ZoneMenuHandler {
 		const selectedSegment = trackPanel.FindChildTraverse('SegmentContainer').GetChild(segmentIndex);
 		const cancelList = selectedSegment.FindChildTraverse('CancelContainer');
 		const id = `${$.Localize('#Zoning_CancelZone')} ${this.selectedZone.segment.cancel.length}`;
-		this.addTracklistEntry(cancelList, id, TracklistSnippet.CHECKPOINT, {
-			track: this.selectedZone.track,
-			segment: this.selectedZone.segment,
-			zone: newZone
-		});
+		this.addTracklistEntry(
+			cancelList,
+			id,
+			TracklistSnippet.CHECKPOINT,
+			{
+				track: this.selectedZone.track,
+				segment: this.selectedZone.segment,
+				zone: newZone
+			},
+			true
+		);
+
+		this.updateSelection(this.selectedZone.track, this.selectedZone.segment, newZone);
 
 		this.updateZones();
 	}

From c83fc74a41af7e0d9a39a4d2e249413f76c0944d Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Wed, 25 Sep 2024 21:53:32 -0400
Subject: [PATCH 08/22] feat: initialize tracklist expanded

---
 layout/pages/zoning/zoning.xml | 8 ++++----
 scripts/pages/zoning/zoning.ts | 2 --
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/layout/pages/zoning/zoning.xml b/layout/pages/zoning/zoning.xml
index 87fe9755..cc5f0777 100644
--- a/layout/pages/zoning/zoning.xml
+++ b/layout/pages/zoning/zoning.xml
@@ -12,8 +12,8 @@
 			<Panel class="zoning__tracklist-track">
 				<Panel id="Entry" class="zoning__tracklist-course-entry">
 					<Button id="CollapseButton" class="zoning__collapse-button">
-						<Image id="TracklistCollapseIcon" class="button__icon zoning__collapse-icon zoning__icon-green" src="file://{images}/add.svg" />
-						<Image id="TracklistExpandIcon" class="button__icon zoning__collapse-icon zoning__icon-red hide" src="file://{images}/subtract.svg" />
+						<Image id="TracklistCollapseIcon" class="button__icon zoning__collapse-icon zoning__icon-green hide" src="file://{images}/add.svg" />
+						<Image id="TracklistExpandIcon" class="button__icon zoning__collapse-icon zoning__icon-red" src="file://{images}/subtract.svg" />
 					</Button>
 					<RadioButton id="SelectButton" class="zoning__tracklist-button" group="tracklist">
 						<Label id="Name" class="zoning__tracklist-label" />
@@ -32,8 +32,8 @@
 			<Panel class="zoning__tracklist-segment">
 				<Panel id="Entry" class="zoning__tracklist-course-entry">
 					<Button id="CollapseButton" class="zoning__collapse-button">
-						<Image id="TracklistCollapseIcon" class="button__icon zoning__collapse-icon zoning__icon-green" src="file://{images}/add.svg" />
-						<Image id="TracklistExpandIcon" class="button__icon zoning__collapse-icon zoning__icon-red hide" src="file://{images}/subtract.svg" />
+						<Image id="TracklistCollapseIcon" class="button__icon zoning__collapse-icon zoning__icon-green hide" src="file://{images}/add.svg" />
+						<Image id="TracklistExpandIcon" class="button__icon zoning__collapse-icon zoning__icon-red" src="file://{images}/subtract.svg" />
 					</Button>
 					<RadioButton id="SelectButton" class="zoning__tracklist-button" group="tracklist">
 						<Label id="Name" class="zoning__tracklist-label" />
diff --git a/scripts/pages/zoning/zoning.ts b/scripts/pages/zoning/zoning.ts
index 21761286..1eeb196c 100644
--- a/scripts/pages/zoning/zoning.ts
+++ b/scripts/pages/zoning/zoning.ts
@@ -266,8 +266,6 @@ class ZoneMenuHandler {
 			collapseButton.SetPanelEvent('onactivate', () =>
 				this.toggleCollapse(childContainer, expandIcon, collapseIcon)
 			);
-
-			this.toggleCollapse(childContainer, expandIcon, collapseIcon);
 		}
 
 		const selectButton = newTracklistPanel.FindChildTraverse<ToggleButton>('SelectButton');

From 53b680be4f490d344b568c2ac14a566a3e75dc92 Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Thu, 26 Sep 2024 21:59:52 -0400
Subject: [PATCH 09/22] feat: move add... button to tracklist

---
 layout/pages/zoning/zoning.xml  | 33 +++++++++++++------
 scripts/pages/zoning/zoning.ts  | 57 +++++++++++++++++++++++++++------
 styles/pages/zoning/zoning.scss | 39 +++++++++++++---------
 3 files changed, 95 insertions(+), 34 deletions(-)

diff --git a/layout/pages/zoning/zoning.xml b/layout/pages/zoning/zoning.xml
index cc5f0777..67cb6aaa 100644
--- a/layout/pages/zoning/zoning.xml
+++ b/layout/pages/zoning/zoning.xml
@@ -22,14 +22,23 @@
 						<Image class="zoning__tracklist-delete__icon" src="file://{images}/close-box-outline.svg" textureheight="24" />
 					</Button>
 				</Panel>
-				<Panel id="ChildContainer" class="w-full flow-down">
-					<Panel id="SegmentContainer" class="zoning__list-container" />
-					<Panel id="EndZoneContainer" class="zoning__list-container" />
+				<Panel id="ChildContainer" class="zoning__list-container">
+					<Panel id="SegmentContainer" class="w-full flow-down" />
+					<Button id="AddSegmentButton" class="zoning__add-button">
+						<Label class="zoning__tracklist-label zoning__tracklist-label--add" text="#Zoning_NewSegment" />
+					</Button>
+					<Panel id="EndZoneContainer" class="w-full flow-down" />
+					<Button id="AddEndZoneButton" class="zoning__add-button">
+						<Label class="zoning__tracklist-label zoning__tracklist-label--add" text="#Zoning_NewEndZone" />
+					</Button>
 				</Panel>
+				<Button id="AddBonusButton" class="zoning__add-button hide" onactivate="ZoneMenuHandler.addBonus()">
+					<Label class="zoning__tracklist-label zoning__tracklist-label--add" text="#Zoning_NewBonus" />
+				</Button>
 			</Panel>
 		</snippet>
 		<snippet name="tracklist-segment">
-			<Panel class="zoning__tracklist-segment">
+			<Panel class="w-full flow-down">
 				<Panel id="Entry" class="zoning__tracklist-course-entry">
 					<Button id="CollapseButton" class="zoning__collapse-button">
 						<Image id="TracklistCollapseIcon" class="button__icon zoning__collapse-icon zoning__icon-green hide" src="file://{images}/add.svg" />
@@ -42,14 +51,20 @@
 						<Image class="zoning__tracklist-delete__icon" src="file://{images}/close-box-outline.svg" textureheight="24" />
 					</Button>
 				</Panel>
-				<Panel id="ChildContainer" class="w-full flow-down">
-					<Panel id="CheckpointContainer" class="zoning__list-container" />
-					<Panel id="CancelContainer" class="zoning__list-container" />
+				<Panel id="ChildContainer" class="zoning__list-container">
+					<Panel id="CheckpointContainer" class="zoning__tracklist-checkpoint" />
+					<Button id="AddCheckpointButton" class="zoning__add-button">
+						<Label class="zoning__tracklist-label zoning__tracklist-label--add" text="#Zoning_NewCheckpoint" />
+					</Button>
+					<Panel id="CancelContainer" class="zoning__tracklist-checkpoint" />
+					<Button id="AddCancelZoneButton" class="zoning__add-button">
+						<Label class="zoning__tracklist-label zoning__tracklist-label--add" text="#Zoning_NewCancelZone" />
+					</Button>
 				</Panel>
 			</Panel>
 		</snippet>
 		<snippet name="tracklist-checkpoint">
-			<Panel class="zoning__tracklist-checkpoint">
+			<Panel class="w-full flow-down">
 				<Panel id="Entry" class="zoning__tracklist-course-entry">
 					<RadioButton id="SelectButton" class="zoning__tracklist-button" group="tracklist">
 						<Label id="Name" class="zoning__tracklist-label" />
@@ -251,7 +266,7 @@
 				<Label class="button__text" text="#Zoning_Save" />
 			</Button>
 			<Button class="button ml-2 h-align-right" onactivate="ZoneMenuHandler.cancelEdit()">
-				<Label class="button__text" text="#Zoning_CancelEdit" />
+				<Label class="button__text" text="#Zoning_Discard" />
 			</Button>
 		</Panel>
 	</ZoneMenu>
diff --git a/scripts/pages/zoning/zoning.ts b/scripts/pages/zoning/zoning.ts
index 1eeb196c..c6229c69 100644
--- a/scripts/pages/zoning/zoning.ts
+++ b/scripts/pages/zoning/zoning.ts
@@ -135,7 +135,7 @@ class ZoneMenuHandler {
 		this.teleDestList.unshift($.Localize('#Zoning_TPDest_None'));
 		this.populateDropdown(this.teleDestList, this.panels.regionTPDest, '', true);
 
-		this.createTrackEntry(this.panels.trackList, this.mapZoneData.tracks.main, 'Main');
+		this.createTrackEntry(this.panels.trackList, this.mapZoneData.tracks.main, $.Localize('#Zoning_Main'));
 
 		if (this.mapZoneData.tracks.bonuses) {
 			const tag = $.Localize('#Zoning_Bonus');
@@ -144,6 +144,10 @@ class ZoneMenuHandler {
 			}
 		}
 
+		const lastTrack = this.panels.trackList.GetChild(this.mapZoneData.tracks.bonuses?.length ?? 0);
+		const addBonusButton = lastTrack.FindChildTraverse<Panel>('AddBonusButton');
+		addBonusButton.SetHasClass('hide', false);
+
 		const mainTrackButton = this.panels.trackList.GetChild(0).FindChildTraverse<ToggleButton>('SelectButton');
 		mainTrackButton.SetSelected(true);
 
@@ -224,15 +228,22 @@ class ZoneMenuHandler {
 					zone: zone
 				});
 			}
-			if (!segment.cancel || segment.cancel.length === 0) continue;
-			for (const [j, zone] of segment.cancel.entries()) {
-				const cancelId = `${cancelTag} ${j + 1}`;
-				this.addTracklistEntry(segmentCheckpointContainer, cancelId, TracklistSnippet.CHECKPOINT, {
-					track: entry,
-					segment: segment,
-					zone: zone
-				});
+			if (segment.cancel && segment.cancel.length > 0) {
+				const segmentCancelContainer = segmentChildContainer.FindChildTraverse<Panel>('CancelContainer');
+				for (const [j, zone] of segment.cancel.entries()) {
+					const cancelId = `${cancelTag} ${j + 1}`;
+					this.addTracklistEntry(segmentCancelContainer, cancelId, TracklistSnippet.CHECKPOINT, {
+						track: entry,
+						segment: segment,
+						zone: zone
+					});
+				}
 			}
+
+			const addCheckpointButton = segmentChildContainer.FindChildTraverse<Panel>('AddCheckpointButton');
+			const addCancelZoneButton = segmentChildContainer.FindChildTraverse<Panel>('AddCancelZoneButton');
+			addCheckpointButton.SetPanelEvent('onactivate', () => this.addCheckpoint());
+			addCancelZoneButton.SetPanelEvent('onactivate', () => this.addCancelZone());
 		}
 
 		if (entry.zones.end) {
@@ -243,6 +254,18 @@ class ZoneMenuHandler {
 				zone: entry.zones.end
 			});
 		}
+
+		const addSegmentButton = trackChildContainer.GetParent().FindChildTraverse<Panel>('AddSegmentButton');
+		const addEndZoneButton = trackChildContainer.GetParent().FindChildTraverse<Panel>('AddEndZoneButton');
+		if (!('stagesEndAtStageStarts' in entry)) {
+			addSegmentButton.DeleteAsync(0);
+		} else {
+			addSegmentButton.SetPanelEvent('onactivate', () => this.addSegment());
+		}
+		addEndZoneButton.SetPanelEvent('onactivate', () => this.addEndZone());
+		if (entry.zones.end) {
+			addEndZoneButton.SetHasClass('hide', true);
+		}
 	}
 
 	addTracklistEntry(
@@ -725,6 +748,11 @@ class ZoneMenuHandler {
 
 	addBonus() {
 		if (!this.mapZoneData) return;
+
+		const lastTrack = this.panels.trackList.GetChild(this.mapZoneData.tracks.bonuses?.length ?? 0);
+		const addBonusButton = lastTrack.FindChildTraverse<Panel>('AddBonusButton');
+		addBonusButton.SetHasClass('hide', true);
+
 		const bonus = this.createBonusTrack();
 		if (!this.mapZoneData.tracks.bonuses) {
 			this.mapZoneData.tracks.bonuses = [bonus];
@@ -745,6 +773,9 @@ class ZoneMenuHandler {
 
 		selectButton.SetSelected(true);
 
+		const newBonusButton = newBonusPanel.FindChildTraverse<Panel>('AddBonusButton');
+		newBonusButton.SetHasClass('hide', false);
+
 		this.updateSelection(bonus, bonus.zones.segments[0], bonus.zones.segments[0].checkpoints[0]);
 
 		this.updateZones();
@@ -767,7 +798,7 @@ class ZoneMenuHandler {
 		const mainTrack = this.panels.trackList.GetChild(0);
 		const segmentList = mainTrack.FindChildTraverse('SegmentContainer');
 		const id = `${$.Localize('#Zoning_Segment')} ${this.mapZoneData.tracks.main.zones.segments.length}`;
-		const list = this.addTracklistEntry(segmentList, id, TracklistSnippet.SEGMENT, {
+		const childContainer = this.addTracklistEntry(segmentList, id, TracklistSnippet.SEGMENT, {
 			track: this.mapZoneData.tracks.main,
 			segment: newSegment,
 			zone: null
@@ -865,6 +896,8 @@ class ZoneMenuHandler {
 			);
 		}
 
+		trackPanel.FindChildTraverse('AddEndZoneButton').SetHasClass('hide', true);
+
 		this.updateSelection(this.selectedZone.track, null, endZone);
 
 		this.updateZones();
@@ -978,6 +1011,10 @@ class ZoneMenuHandler {
 			} else {
 				const trackIndex = this.mapZoneData.tracks.bonuses.indexOf(this.selectedZone.track);
 				this.mapZoneData.tracks.bonuses.splice(trackIndex, 1);
+
+				const lastTrack = this.panels.trackList.GetChild(this.mapZoneData.tracks.bonuses?.length ?? 0);
+				const addBonusButton = lastTrack.FindChildTraverse<Panel>('AddBonusButton');
+				addBonusButton.SetHasClass('hide', true);
 			}
 		}
 
diff --git a/styles/pages/zoning/zoning.scss b/styles/pages/zoning/zoning.scss
index f5acc897..7d535048 100644
--- a/styles/pages/zoning/zoning.scss
+++ b/styles/pages/zoning/zoning.scss
@@ -1,6 +1,7 @@
 @use '../../config' as *;
 @use 'sass:color';
 
+$smaller: 12px;
 $small: 16px;
 $medium: 28px;
 
@@ -59,17 +60,18 @@ $medium: 28px;
 	}
 
 	&__tracklist-button {
-		padding: 3px 5px;
+		margin: 2px 2px;
+		padding: 2px 4px;
 
 		&:selected {
-			padding: 2px 4px;
+			margin: 1px 1px;
 			background-color: $light-200;
 			border: 1px solid $gray-800;
 			border-radius: 6px;
 		}
 
 		&:hover {
-			padding: 2px 4px;
+			margin: 1px 1px;
 			border: 1px solid $gray-800;
 			border-radius: 6px;
 		}
@@ -95,32 +97,40 @@ $medium: 28px;
 		}
 	}
 
+	&__add-button {
+		width: fit-children;
+		horizontal-align: left;
+		flow-children: right;
+		margin: 2px 20px;
+		padding: 2px 4px;
+
+		> Image {
+		}
+	}
+
 	&__tracklist-track {
 		width: 100%;
-		margin-bottom: 1px;
-		padding: 2px 6px;
 		flow-children: down;
 	}
 
 	&__tracklist-label {
 		font-size: $small;
+
+		&--add {
+			font-size: $smaller;
+			font-style: italic;
+			color: $gray-800;
+		}
 	}
 
 	&__tracklist-segment {
 		width: 100%;
-		margin-bottom: 1px;
-		padding: 2px 4px;
-		border-radius: 6px;
 		flow-children: down;
-
-		&--dark {
-			//background-color: $dark-100;
-		}
 	}
 
 	&__tracklist-checkpoint {
 		width: 100%;
-		margin: 2px 0px;
+		margin: 0px 18px;
 		flow-children: down;
 	}
 
@@ -131,8 +141,7 @@ $medium: 28px;
 
 	&__list-container {
 		width: 100%;
-		margin-left: 12px;
-		padding-left: 8px;
+		margin-left: 18px;
 		flow-children: down;
 	}
 

From 6bf24b5b10e0c58a0aa1b0e7769a60db83b34a2d Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Sun, 29 Sep 2024 22:41:35 -0400
Subject: [PATCH 10/22] feat: pass selection object to add end zone function

---
 scripts/pages/zoning/zoning.ts | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/scripts/pages/zoning/zoning.ts b/scripts/pages/zoning/zoning.ts
index c6229c69..f0f7e8f9 100644
--- a/scripts/pages/zoning/zoning.ts
+++ b/scripts/pages/zoning/zoning.ts
@@ -262,7 +262,7 @@ class ZoneMenuHandler {
 		} else {
 			addSegmentButton.SetPanelEvent('onactivate', () => this.addSegment());
 		}
-		addEndZoneButton.SetPanelEvent('onactivate', () => this.addEndZone());
+		addEndZoneButton.SetPanelEvent('onactivate', () => this.addEndZone(entry));
 		if (entry.zones.end) {
 			addEndZoneButton.SetHasClass('hide', true);
 		}
@@ -859,36 +859,35 @@ class ZoneMenuHandler {
 		this.updateZones();
 	}
 
-	addEndZone() {
+	addEndZone(track: MainTrack | BonusTrack) {
+		// TODO: fix this seleciton logic
 		if (!this.mapZoneData || !this.isSelectionValid().track) return;
 		if (this.isSelectionValid().defragBonus) {
 			$.Warning('Defrag Bonus must share zones with Main track!');
 			return;
 		}
 		const endZone = this.createZone();
-		this.selectedZone.track.zones.end = endZone;
+		track.zones.end = endZone;
 
 		let trackPanel: Panel;
-		if (this.selectedZone.track === this.mapZoneData.tracks.main) {
+		if (track === this.mapZoneData.tracks.main) {
 			trackPanel = this.panels.trackList.GetChild(0);
 		} else {
-			const bonusId = this.mapZoneData.tracks.bonuses.indexOf(this.selectedZone.track);
+			const bonusId = this.mapZoneData.tracks.bonuses.indexOf(track);
 			trackPanel = this.panels.trackList.GetChild(1 + bonusId);
 		}
 		const endZoneContainer = trackPanel.FindChildTraverse('EndZoneContainer');
 		const oldEnd = endZoneContainer.GetChild(0);
 		if (oldEnd) {
 			const selectButton = oldEnd.FindChildTraverse('SelectButton');
-			selectButton.SetPanelEvent('onactivate', () =>
-				this.updateSelection(this.selectedZone.track, null, endZone)
-			);
+			selectButton.SetPanelEvent('onactivate', () => this.updateSelection(track, null, endZone));
 		} else {
 			this.addTracklistEntry(
 				endZoneContainer,
 				$.Localize('#Zoning_EndZone'),
 				TracklistSnippet.CHECKPOINT,
 				{
-					track: this.selectedZone.track,
+					track: track,
 					segment: null,
 					zone: endZone
 				},
@@ -898,7 +897,7 @@ class ZoneMenuHandler {
 
 		trackPanel.FindChildTraverse('AddEndZoneButton').SetHasClass('hide', true);
 
-		this.updateSelection(this.selectedZone.track, null, endZone);
+		this.updateSelection(track, null, endZone);
 
 		this.updateZones();
 	}
@@ -961,7 +960,7 @@ class ZoneMenuHandler {
 			},
 			{
 				label: $.Localize('#Zoning_EndZone'),
-				jsCallback: () => this.addEndZone()
+				jsCallback: () => this.addEndZone(this.selectedZone.track)
 			},
 			{
 				label: $.Localize('#Zoning_CancelZone'),

From fcbc55fdef9caf5d5f7abfc3b05b141dea71d059 Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Tue, 1 Oct 2024 22:41:48 -0400
Subject: [PATCH 11/22] fix: defrag bonus styling

---
 scripts/pages/zoning/zoning.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/scripts/pages/zoning/zoning.ts b/scripts/pages/zoning/zoning.ts
index f0f7e8f9..a05129dd 100644
--- a/scripts/pages/zoning/zoning.ts
+++ b/scripts/pages/zoning/zoning.ts
@@ -1091,6 +1091,8 @@ class ZoneMenuHandler {
 		const trackPanel = this.panels.trackList.GetChild(1 + bonusIndex);
 		trackPanel.FindChildTraverse('CollapseButton').visible = false;
 		trackPanel.FindChildTraverse('ChildContainer').RemoveAndDeleteChildren();
+		// keep select button aligned with other tracks
+		trackPanel.FindChildTraverse('Entry').SetHasClass('zoning__tracklist-checkpoint', true);
 
 		this.updateZones();
 	}

From 0cf769c5d869e2946a5faf5269e29ca19bfd0038 Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Tue, 1 Oct 2024 23:29:05 -0400
Subject: [PATCH 12/22] refactor: add button functionality

---
 scripts/pages/zoning/zoning.ts | 176 +++++++++++++++------------------
 1 file changed, 80 insertions(+), 96 deletions(-)

diff --git a/scripts/pages/zoning/zoning.ts b/scripts/pages/zoning/zoning.ts
index a05129dd..69abc950 100644
--- a/scripts/pages/zoning/zoning.ts
+++ b/scripts/pages/zoning/zoning.ts
@@ -179,14 +179,14 @@ class ZoneMenuHandler {
 		}*/
 	}
 
-	createTrackEntry(parent: GenericPanel, entry: MainTrack | BonusTrack, name: string) {
+	createTrackEntry(parent: GenericPanel, track: MainTrack | BonusTrack, name: string) {
 		const trackChildContainer = this.addTracklistEntry(parent, name, TracklistSnippet.TRACK, {
-			track: entry,
+			track: track,
 			segment: null,
 			zone: null
 		});
 		if (trackChildContainer === null) return;
-		if (entry.zones === undefined) {
+		if (track.zones === undefined) {
 			trackChildContainer.RemoveAndDeleteChildren();
 			trackChildContainer.GetParent().FindChildTraverse('CollapseButton').visible = false;
 			return;
@@ -197,18 +197,19 @@ class ZoneMenuHandler {
 		const checkpointTag = $.Localize('#Zoning_Checkpoint');
 		const cancelTag = $.Localize('#Zoning_CancelZone');
 		const endTag = $.Localize('#Zoning_EndZone');
-		for (const [i, segment] of entry.zones.segments.entries()) {
+		for (const [i, segment] of track.zones.segments.entries()) {
 			const majorId = segment.name || `${segmentTag} ${i + 1}`;
 			const segmentChildContainer = this.addTracklistEntry(
 				trackSegmentContainer,
 				majorId,
 				TracklistSnippet.SEGMENT,
 				{
-					track: entry,
+					track: track,
 					segment: segment,
 					zone: null
 				}
 			);
+
 			if (segmentChildContainer === null) continue;
 			if (segment.checkpoints?.length === 0 && segment.cancel?.length === 0) {
 				trackChildContainer.FindChildTraverse<Panel>('CollapseButton').visible = false;
@@ -223,49 +224,33 @@ class ZoneMenuHandler {
 						? $.Localize('#Zoning_Start_Stage')
 						: $.Localize('#Zoning_Start_Track');
 				this.addTracklistEntry(segmentCheckpointContainer, minorId, TracklistSnippet.CHECKPOINT, {
-					track: entry,
+					track: track,
 					segment: segment,
 					zone: zone
 				});
 			}
+
+			const segmentCancelContainer = segmentChildContainer.FindChildTraverse<Panel>('CancelContainer');
 			if (segment.cancel && segment.cancel.length > 0) {
-				const segmentCancelContainer = segmentChildContainer.FindChildTraverse<Panel>('CancelContainer');
 				for (const [j, zone] of segment.cancel.entries()) {
 					const cancelId = `${cancelTag} ${j + 1}`;
 					this.addTracklistEntry(segmentCancelContainer, cancelId, TracklistSnippet.CHECKPOINT, {
-						track: entry,
+						track: track,
 						segment: segment,
 						zone: zone
 					});
 				}
 			}
-
-			const addCheckpointButton = segmentChildContainer.FindChildTraverse<Panel>('AddCheckpointButton');
-			const addCancelZoneButton = segmentChildContainer.FindChildTraverse<Panel>('AddCancelZoneButton');
-			addCheckpointButton.SetPanelEvent('onactivate', () => this.addCheckpoint());
-			addCancelZoneButton.SetPanelEvent('onactivate', () => this.addCancelZone());
 		}
 
-		if (entry.zones.end) {
+		if (track.zones.end) {
 			const trackEndZoneContainer = trackChildContainer.FindChildTraverse<Panel>('EndZoneContainer');
 			this.addTracklistEntry(trackEndZoneContainer, endTag, TracklistSnippet.CHECKPOINT, {
-				track: entry,
+				track: track,
 				segment: null,
-				zone: entry.zones.end
+				zone: track.zones.end
 			});
 		}
-
-		const addSegmentButton = trackChildContainer.GetParent().FindChildTraverse<Panel>('AddSegmentButton');
-		const addEndZoneButton = trackChildContainer.GetParent().FindChildTraverse<Panel>('AddEndZoneButton');
-		if (!('stagesEndAtStageStarts' in entry)) {
-			addSegmentButton.DeleteAsync(0);
-		} else {
-			addSegmentButton.SetPanelEvent('onactivate', () => this.addSegment());
-		}
-		addEndZoneButton.SetPanelEvent('onactivate', () => this.addEndZone(entry));
-		if (entry.zones.end) {
-			addEndZoneButton.SetHasClass('hide', true);
-		}
 	}
 
 	addTracklistEntry(
@@ -320,8 +305,43 @@ class ZoneMenuHandler {
 			);
 		}
 
+		if (snippet === TracklistSnippet.TRACK) {
+			const addSegmentButton = childContainer.FindChildTraverse<Panel>('AddSegmentButton');
+			const addEndZoneButton = childContainer.FindChildTraverse<Panel>('AddEndZoneButton');
+			if (!('stagesEndAtStageStarts' in selectionObj.track)) {
+				addSegmentButton.DeleteAsync(0);
+			} else {
+				addSegmentButton.SetPanelEvent('onactivate', () => this.addSegment());
+			}
+			addEndZoneButton.SetPanelEvent('onactivate', () => this.addEndZone(selectionObj.track));
+			if (selectionObj.track.zones.end) {
+				addEndZoneButton.SetHasClass('hide', true);
+			}
+		}
+
+		if (snippet === TracklistSnippet.SEGMENT) {
+			const addCheckpointButton = childContainer.FindChildTraverse<Panel>('AddCheckpointButton');
+			const addCancelZoneButton = childContainer.FindChildTraverse<Panel>('AddCancelZoneButton');
+			addCheckpointButton.SetPanelEvent('onactivate', () =>
+				this.addCheckpoint(
+					selectionObj.track,
+					selectionObj.segment,
+					childContainer.FindChildTraverse<Panel>('CheckpointContainer')
+				)
+			);
+			addCancelZoneButton.SetPanelEvent('onactivate', () =>
+				this.addCancelZone(
+					selectionObj.track,
+					selectionObj.segment,
+					childContainer.FindChildTraverse<Panel>('CancelContainer')
+				)
+			);
+		}
+
 		if (setActive) {
+			this.selectedZone = selectionObj;
 			selectButton.SetSelected(true);
+			this.updateSelection(selectionObj.track, selectionObj.segment, selectionObj.zone);
 		}
 
 		return childContainer;
@@ -331,7 +351,7 @@ class ZoneMenuHandler {
 		return {
 			zones: {
 				segments: [this.createSegment()],
-				end: this.createZone()
+				end: null
 			},
 			defragModifiers: 0
 		};
@@ -776,30 +796,22 @@ class ZoneMenuHandler {
 		const newBonusButton = newBonusPanel.FindChildTraverse<Panel>('AddBonusButton');
 		newBonusButton.SetHasClass('hide', false);
 
-		this.updateSelection(bonus, bonus.zones.segments[0], bonus.zones.segments[0].checkpoints[0]);
+		//this.updateSelection(bonus, bonus.zones.segments[0], bonus.zones.segments[0].checkpoints[0]);
 
 		this.updateZones();
 	}
 
 	addSegment() {
-		if (!this.mapZoneData || !this.isSelectionValid().track) return;
-		if (this.isSelectionValid().defragBonus) {
-			$.Msg('Defrag Bonus must share zones with Main track!');
-			return;
-		}
-		if (this.selectedZone.track !== this.mapZoneData.tracks.main) {
-			// warn player bonus tracks can't have segments!
-			$.Msg('WARNING: Bonus track selected. Bonus tracks cannot have stages!');
-			return;
-		}
+		if (!this.mapZoneData) return;
+
+		const mainTrack = this.mapZoneData.tracks.main;
 		const newSegment = this.createSegment();
-		this.mapZoneData.tracks.main.zones.segments.push(newSegment);
+		mainTrack.zones.segments.push(newSegment);
 
-		const mainTrack = this.panels.trackList.GetChild(0);
-		const segmentList = mainTrack.FindChildTraverse('SegmentContainer');
-		const id = `${$.Localize('#Zoning_Segment')} ${this.mapZoneData.tracks.main.zones.segments.length}`;
+		const segmentList = this.panels.trackList.GetChild(0)?.FindChildTraverse('SegmentContainer');
+		const id = `${$.Localize('#Zoning_Segment')} ${mainTrack.zones.segments.length}`;
 		const childContainer = this.addTracklistEntry(segmentList, id, TracklistSnippet.SEGMENT, {
-			track: this.mapZoneData.tracks.main,
+			track: mainTrack,
 			segment: newSegment,
 			zone: null
 		});
@@ -809,52 +821,38 @@ class ZoneMenuHandler {
 			$.Localize('#Zoning_Start_Stage'),
 			TracklistSnippet.CHECKPOINT,
 			{
-				track: this.selectedZone.track,
+				track: mainTrack,
 				segment: newSegment,
 				zone: newSegment.checkpoints[0]
 			},
 			true
 		);
 
-		this.updateSelection(this.selectedZone.track, newSegment, newSegment.checkpoints[0]);
+		//this.updateSelection(this.selectedZone.track, newSegment, newSegment.checkpoints[0]);
 
 		this.updateZones();
 	}
 
-	addCheckpoint() {
-		if (!this.mapZoneData || !this.isSelectionValid().segment) return;
-		if (this.isSelectionValid().defragBonus) {
-			$.Msg('Defrag Bonus must share zones with Main track!');
-			return;
-		}
-		const newZone = this.createZone();
-		this.selectedZone.segment!.checkpoints.push(newZone);
+	addCheckpoint(track: MainTrack | BonusTrack, segment: Segment, checkpointsList: Panel) {
+		if (!this.mapZoneData || !segment || !checkpointsList) return;
 
-		let trackPanel: Panel;
-		if (this.selectedZone.track === this.mapZoneData.tracks.main) {
-			trackPanel = this.panels.trackList.GetChild(0);
-		} else {
-			const bonusId = this.mapZoneData.tracks.bonuses.indexOf(this.selectedZone.track);
-			trackPanel = this.panels.trackList.GetChild(1 + bonusId);
-		}
+		const newZone = this.createZone();
+		segment.checkpoints.push(newZone);
 
-		const segmentIndex = this.selectedZone.track.zones.segments.indexOf(this.selectedZone.segment);
-		const selectedSegment = trackPanel.FindChildTraverse('SegmentContainer').GetChild(segmentIndex);
-		const checkpointsList = selectedSegment.FindChildTraverse('CheckpointContainer');
-		const id = `${$.Localize('#Zoning_Checkpoint')} ${this.selectedZone.segment.checkpoints.length - 1}`;
+		const id = `${$.Localize('#Zoning_Checkpoint')} ${segment.checkpoints.length - 1}`;
 		this.addTracklistEntry(
 			checkpointsList,
 			id,
 			TracklistSnippet.CHECKPOINT,
 			{
-				track: this.selectedZone.track,
-				segment: this.selectedZone.segment,
+				track: track,
+				segment: segment,
 				zone: newZone
 			},
 			true
 		);
 
-		this.updateSelection(this.selectedZone.track, this.selectedZone.segment, newZone);
+		//this.updateSelection(this.selectedZone.track, this.selectedZone.segment, newZone);
 
 		this.updateZones();
 	}
@@ -897,54 +895,40 @@ class ZoneMenuHandler {
 
 		trackPanel.FindChildTraverse('AddEndZoneButton').SetHasClass('hide', true);
 
-		this.updateSelection(track, null, endZone);
+		//this.updateSelection(track, null, endZone);
 
 		this.updateZones();
 	}
 
-	addCancelZone() {
-		if (!this.mapZoneData || !this.isSelectionValid().segment) return;
-		if (this.isSelectionValid().defragBonus) {
-			$.Msg('Defrag Bonus must share zones with Main track!');
-			return;
-		}
-		const newZone = this.createZone();
-		if (!this.selectedZone.segment.cancel) {
-			this.selectedZone.segment.cancel = [newZone];
-		} else {
-			this.selectedZone.segment.cancel.push(newZone);
-		}
+	addCancelZone(track: MainTrack | BonusTrack, segment: Segment, cancelList: Panel) {
+		if (!this.mapZoneData || !segment || !cancelList) return;
 
-		let trackPanel: Panel;
-		if (this.selectedZone.track === this.mapZoneData.tracks.main) {
-			trackPanel = this.panels.trackList.GetChild(0);
+		const newZone = this.createZone();
+		if (!segment.cancel) {
+			segment.cancel = [newZone];
 		} else {
-			const bonusId = this.mapZoneData.tracks.bonuses.indexOf(this.selectedZone.track);
-			trackPanel = this.panels.trackList.GetChild(1 + bonusId);
+			segment.cancel.push(newZone);
 		}
 
-		const segmentIndex = this.selectedZone.track.zones.segments.indexOf(this.selectedZone.segment);
-		const selectedSegment = trackPanel.FindChildTraverse('SegmentContainer').GetChild(segmentIndex);
-		const cancelList = selectedSegment.FindChildTraverse('CancelContainer');
-		const id = `${$.Localize('#Zoning_CancelZone')} ${this.selectedZone.segment.cancel.length}`;
+		const id = `${$.Localize('#Zoning_CancelZone')} ${segment.cancel.length}`;
 		this.addTracklistEntry(
 			cancelList,
 			id,
 			TracklistSnippet.CHECKPOINT,
 			{
-				track: this.selectedZone.track,
-				segment: this.selectedZone.segment,
+				track: track,
+				segment: segment,
 				zone: newZone
 			},
 			true
 		);
 
-		this.updateSelection(this.selectedZone.track, this.selectedZone.segment, newZone);
+		//this.updateSelection(this.selectedZone.track, this.selectedZone.segment, newZone);
 
 		this.updateZones();
 	}
 
-	showAddMenu() {
+	/*showAddMenu() {
 		UiToolkitAPI.ShowSimpleContextMenu('NewZoneButton', '', [
 			{
 				label: $.Localize('#Zoning_Bonus'),
@@ -967,7 +951,7 @@ class ZoneMenuHandler {
 				jsCallback: () => this.addCancelZone()
 			}
 		]);
-	}
+	}*/
 
 	showDeletePopup() {
 		UiToolkitAPI.ShowGenericPopupTwoOptionsBgStyle(

From e13549b173be26ed9b758edb87c12681408c16fe Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Wed, 2 Oct 2024 00:05:55 -0400
Subject: [PATCH 13/22] feat: set region height after placing corners

---
 scripts/pages/zoning/zoning.ts | 93 ++++++++++++++--------------------
 1 file changed, 38 insertions(+), 55 deletions(-)

diff --git a/scripts/pages/zoning/zoning.ts b/scripts/pages/zoning/zoning.ts
index 69abc950..af8f0bbb 100644
--- a/scripts/pages/zoning/zoning.ts
+++ b/scripts/pages/zoning/zoning.ts
@@ -107,7 +107,7 @@ class ZoneMenuHandler {
 				main: {
 					zones: {
 						segments: [this.createSegment()],
-						end: this.createZone()
+						end: null
 					},
 					stagesEndAtStageStarts: true
 				},
@@ -153,7 +153,7 @@ class ZoneMenuHandler {
 
 		this.showRegionMenu(RegionMenu.RESET);
 
-		this.updateSelection(this.mapZoneData.tracks.main, null, null);
+		this.updateSelection(this.mapZoneData.tracks.main, null, null, null);
 	}
 
 	showZoneMenu() {
@@ -173,10 +173,6 @@ class ZoneMenuHandler {
 		container.SetHasClass('hide', !shouldExpand);
 		expandIcon.SetHasClass('hide', !shouldExpand);
 		collapseIcon.SetHasClass('hide', shouldExpand);
-		/*const parent = container.GetParent();
-		if (parent && parent.HasClass('zoning__tracklist-segment')) {
-			parent.SetHasClass('zoning__tracklist-segment--dark', shouldExpand);
-		}*/
 	}
 
 	createTrackEntry(parent: GenericPanel, track: MainTrack | BonusTrack, name: string) {
@@ -280,17 +276,12 @@ class ZoneMenuHandler {
 		const deleteButton = newTracklistPanel.FindChildTraverse<Button>('DeleteButton');
 		if ('stagesEndAtStageStarts' in selectionObj.track && !selectionObj.segment && !selectionObj.zone) {
 			selectButton.SetPanelEvent('onactivate', () => {
-				this.deleteButton?.SetHasClass('hide', true);
-				this.updateSelection(selectionObj.track, selectionObj.segment, selectionObj.zone);
-				this.deleteButton = null;
+				this.updateSelection(selectionObj.track, selectionObj.segment, selectionObj.zone, null);
 			});
 			deleteButton.DeleteAsync(0);
 		} else {
 			selectButton.SetPanelEvent('onactivate', () => {
-				this.deleteButton?.SetHasClass('hide', true);
-				this.updateSelection(selectionObj.track, selectionObj.segment, selectionObj.zone);
-				deleteButton?.SetHasClass('hide', false);
-				this.deleteButton = deleteButton;
+				this.updateSelection(selectionObj.track, selectionObj.segment, selectionObj.zone, deleteButton);
 			});
 			deleteButton.SetPanelEvent('onactivate', () => this.showDeletePopup());
 		}
@@ -339,9 +330,11 @@ class ZoneMenuHandler {
 		}
 
 		if (setActive) {
-			this.selectedZone = selectionObj;
 			selectButton.SetSelected(true);
-			this.updateSelection(selectionObj.track, selectionObj.segment, selectionObj.zone);
+			this.updateSelection(selectionObj.track, selectionObj.segment, selectionObj.zone, deleteButton);
+			if (selectionObj.zone) {
+				this.pickCorners();
+			}
 		}
 
 		return childContainer;
@@ -379,7 +372,7 @@ class ZoneMenuHandler {
 		return {
 			points: [],
 			bottom: FLT_MAX,
-			height: DEFAULT_HEIGHT,
+			height: 0,
 			teleDestTargetname: ''
 		};
 	}
@@ -403,7 +396,8 @@ class ZoneMenuHandler {
 	updateSelection(
 		selectedTrack: MainTrack | BonusTrack | null,
 		selectedSegment: Segment | null,
-		selectedZone: Zone | null
+		selectedZone: Zone | null,
+		deleteButton: Button | null
 	) {
 		if (!selectedTrack) {
 			this.panels.propertiesTrack.visible = false;
@@ -421,6 +415,10 @@ class ZoneMenuHandler {
 		this.panels.propertiesSegment.visible = !validity.zone && validity.segment;
 		this.panels.propertiesZone.visible = validity.zone;
 
+		this.deleteButton?.SetHasClass('hide', true);
+		deleteButton?.SetHasClass('hide', false);
+		this.deleteButton = deleteButton;
+
 		this.populateZoneProperties();
 		this.populateSegmentProperties();
 		this.populateTrackProperties();
@@ -763,6 +761,13 @@ class ZoneMenuHandler {
 	onPickCanceled() {
 		this.pointPick = PickType.NONE;
 
+		if (this.isSelectionValid().zone) {
+			const regionIndex = this.panels.regionSelect.GetSelected().GetAttributeInt('value', -1);
+			const region = this.selectedZone.zone.regions[regionIndex];
+
+			if (region.points.length > 2 && region.height === 0) this.pickHeight();
+		}
+
 		this.updateZones();
 	}
 
@@ -790,15 +795,14 @@ class ZoneMenuHandler {
 		const segmentContainer = newBonusPanel.FindChildTraverse('SegmentContainer');
 		const checkpointContainer = segmentContainer.FindChildTraverse('CheckpointContainer');
 		const selectButton = checkpointContainer.FindChildTraverse<ToggleButton>('SelectButton');
-
-		selectButton.SetSelected(true);
+		const deleteButton = checkpointContainer.FindChildTraverse<Button>('DeleteButton');
 
 		const newBonusButton = newBonusPanel.FindChildTraverse<Panel>('AddBonusButton');
 		newBonusButton.SetHasClass('hide', false);
 
-		//this.updateSelection(bonus, bonus.zones.segments[0], bonus.zones.segments[0].checkpoints[0]);
-
-		this.updateZones();
+		selectButton.SetSelected(true);
+		this.updateSelection(bonus, bonus.zones.segments[0], bonus.zones.segments[0].checkpoints[0], deleteButton);
+		this.pickCorners();
 	}
 
 	addSegment() {
@@ -827,10 +831,6 @@ class ZoneMenuHandler {
 			},
 			true
 		);
-
-		//this.updateSelection(this.selectedZone.track, newSegment, newSegment.checkpoints[0]);
-
-		this.updateZones();
 	}
 
 	addCheckpoint(track: MainTrack | BonusTrack, segment: Segment, checkpointsList: Panel) {
@@ -851,10 +851,6 @@ class ZoneMenuHandler {
 			},
 			true
 		);
-
-		//this.updateSelection(this.selectedZone.track, this.selectedZone.segment, newZone);
-
-		this.updateZones();
 	}
 
 	addEndZone(track: MainTrack | BonusTrack) {
@@ -875,29 +871,20 @@ class ZoneMenuHandler {
 			trackPanel = this.panels.trackList.GetChild(1 + bonusId);
 		}
 		const endZoneContainer = trackPanel.FindChildTraverse('EndZoneContainer');
-		const oldEnd = endZoneContainer.GetChild(0);
-		if (oldEnd) {
-			const selectButton = oldEnd.FindChildTraverse('SelectButton');
-			selectButton.SetPanelEvent('onactivate', () => this.updateSelection(track, null, endZone));
-		} else {
-			this.addTracklistEntry(
-				endZoneContainer,
-				$.Localize('#Zoning_EndZone'),
-				TracklistSnippet.CHECKPOINT,
-				{
-					track: track,
-					segment: null,
-					zone: endZone
-				},
-				true
-			);
-		}
-
-		trackPanel.FindChildTraverse('AddEndZoneButton').SetHasClass('hide', true);
 
-		//this.updateSelection(track, null, endZone);
+		this.addTracklistEntry(
+			endZoneContainer,
+			$.Localize('#Zoning_EndZone'),
+			TracklistSnippet.CHECKPOINT,
+			{
+				track: track,
+				segment: null,
+				zone: endZone
+			},
+			true
+		);
 
-		this.updateZones();
+		trackPanel.FindChildTraverse('AddEndZoneButton').SetHasClass('hide', true);
 	}
 
 	addCancelZone(track: MainTrack | BonusTrack, segment: Segment, cancelList: Panel) {
@@ -922,10 +909,6 @@ class ZoneMenuHandler {
 			},
 			true
 		);
-
-		//this.updateSelection(this.selectedZone.track, this.selectedZone.segment, newZone);
-
-		this.updateZones();
 	}
 
 	/*showAddMenu() {

From dea754d26c17ecaa5820532e1cda1dec1f9f328c Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Tue, 8 Oct 2024 12:05:36 -0400
Subject: [PATCH 14/22] feat: remove Add... and Delete... buttons

---
 layout/pages/zoning/zoning.xml |  8 --------
 scripts/pages/zoning/zoning.ts | 25 -------------------------
 2 files changed, 33 deletions(-)

diff --git a/layout/pages/zoning/zoning.xml b/layout/pages/zoning/zoning.xml
index 67cb6aaa..10a403eb 100644
--- a/layout/pages/zoning/zoning.xml
+++ b/layout/pages/zoning/zoning.xml
@@ -94,14 +94,6 @@
             	<!-- Populated in js -->
         	</Panel>
 		</Panel>
-		<Panel class="zoning__button-box">
-			<Button id="NewZoneButton" class="button button--blue ml-2 h-align-right" onactivate="ZoneMenuHandler.showAddMenu()">
-				<Label class="button__text" text="#Zoning_New" />
-			</Button>
-			<Button class="button button--red ml-2 h-align-right" onactivate="ZoneMenuHandler.showDeletePopup()">
-				<Label class="button__text" text="#Zoning_Delete" />
-			</Button>
-		</Panel>
 		<Label id="PropertiesLabel" class="zoning__header" text="#Zoning_PropertiesLabel" />
 		<Panel id="PropertiesContainer" class="zoning__menu-section">
 			<Panel id="TrackProperties" class="zoning__property-container">
diff --git a/scripts/pages/zoning/zoning.ts b/scripts/pages/zoning/zoning.ts
index af8f0bbb..6aba4fbf 100644
--- a/scripts/pages/zoning/zoning.ts
+++ b/scripts/pages/zoning/zoning.ts
@@ -911,31 +911,6 @@ class ZoneMenuHandler {
 		);
 	}
 
-	/*showAddMenu() {
-		UiToolkitAPI.ShowSimpleContextMenu('NewZoneButton', '', [
-			{
-				label: $.Localize('#Zoning_Bonus'),
-				jsCallback: () => this.addBonus()
-			},
-			{
-				label: $.Localize('#Zoning_Segment'),
-				jsCallback: () => this.addSegment()
-			},
-			{
-				label: $.Localize('#Zoning_Checkpoint'),
-				jsCallback: () => this.addCheckpoint()
-			},
-			{
-				label: $.Localize('#Zoning_EndZone'),
-				jsCallback: () => this.addEndZone(this.selectedZone.track)
-			},
-			{
-				label: $.Localize('#Zoning_CancelZone'),
-				jsCallback: () => this.addCancelZone()
-			}
-		]);
-	}*/
-
 	showDeletePopup() {
 		UiToolkitAPI.ShowGenericPopupTwoOptionsBgStyle(
 			$.Localize('#Zoning_Delete'),

From b61e59187b14293890d099b2fe91399ad09f5abc Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Thu, 10 Oct 2024 22:06:21 -0400
Subject: [PATCH 15/22] fix: delete button reference error

---
 scripts/pages/zoning/zoning.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/scripts/pages/zoning/zoning.ts b/scripts/pages/zoning/zoning.ts
index 6aba4fbf..141e9efa 100644
--- a/scripts/pages/zoning/zoning.ts
+++ b/scripts/pages/zoning/zoning.ts
@@ -86,7 +86,7 @@ class ZoneMenuHandler {
 		segment: null as Segment | null,
 		zone: null as Zone | null
 	};
-	deleteButton: Button | null;
+	activeDeleteButton: Button | null;
 	mapZoneData: MapZones | null;
 	filternameList: string[] | null;
 	teleDestList: string[] | null;
@@ -166,6 +166,7 @@ class ZoneMenuHandler {
 		if (this.panels.trackList?.GetChildCount()) {
 			this.panels.trackList.RemoveAndDeleteChildren();
 		}
+		this.activeDeleteButton = null;
 	}
 
 	toggleCollapse(container: GenericPanel, expandIcon: Image, collapseIcon: Image) {
@@ -415,9 +416,9 @@ class ZoneMenuHandler {
 		this.panels.propertiesSegment.visible = !validity.zone && validity.segment;
 		this.panels.propertiesZone.visible = validity.zone;
 
-		this.deleteButton?.SetHasClass('hide', true);
+		this.activeDeleteButton?.SetHasClass('hide', true);
 		deleteButton?.SetHasClass('hide', false);
-		this.deleteButton = deleteButton;
+		this.activeDeleteButton = deleteButton;
 
 		this.populateZoneProperties();
 		this.populateSegmentProperties();
@@ -959,7 +960,7 @@ class ZoneMenuHandler {
 			}
 		}
 
-		this.deleteButton = null;
+		this.activeDeleteButton = null;
 		//hack: this can be a little more surgical
 		this.panels.trackList.RemoveAndDeleteChildren();
 		this.initMenu();

From 198f72bf2101d169536da94b8f4d494482ef0ca7 Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Thu, 10 Oct 2024 23:10:14 -0400
Subject: [PATCH 16/22] fix: tracklist hover sizing at not-1080p

---
 styles/pages/zoning/zoning.scss | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/styles/pages/zoning/zoning.scss b/styles/pages/zoning/zoning.scss
index 7d535048..b50b7cb6 100644
--- a/styles/pages/zoning/zoning.scss
+++ b/styles/pages/zoning/zoning.scss
@@ -60,20 +60,18 @@ $medium: 28px;
 	}
 
 	&__tracklist-button {
-		margin: 2px 2px;
+		margin: 1px 1px;
 		padding: 2px 4px;
+		border: 1px none;
+		border-radius: 6px;
 
 		&:selected {
-			margin: 1px 1px;
 			background-color: $light-200;
 			border: 1px solid $gray-800;
-			border-radius: 6px;
 		}
 
 		&:hover {
-			margin: 1px 1px;
 			border: 1px solid $gray-800;
-			border-radius: 6px;
 		}
 	}
 

From bf3c2153a1a20df419e2c14471e10e466198c1ec Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Fri, 11 Oct 2024 00:00:05 -0400
Subject: [PATCH 17/22] feat: do not create blank start zone on initial zone
 edit

---
 scripts/pages/zoning/zoning.ts | 41 +++++++++++++++++++++++++++++++---
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/scripts/pages/zoning/zoning.ts b/scripts/pages/zoning/zoning.ts
index 141e9efa..dde19b32 100644
--- a/scripts/pages/zoning/zoning.ts
+++ b/scripts/pages/zoning/zoning.ts
@@ -106,7 +106,7 @@ class ZoneMenuHandler {
 			tracks: {
 				main: {
 					zones: {
-						segments: [this.createSegment()],
+						segments: [this.createSegment(false)],
 						end: null
 					},
 					stagesEndAtStageStarts: true
@@ -137,6 +137,41 @@ class ZoneMenuHandler {
 
 		this.createTrackEntry(this.panels.trackList, this.mapZoneData.tracks.main, $.Localize('#Zoning_Main'));
 
+		// if the first segment has no start zone, show text to create start zone until a start zone has been made
+		if (this.mapZoneData.tracks.main.zones.segments[0]?.checkpoints.length === 0) {
+			const checkpointButton = this.panels.trackList
+				.GetChild(0)
+				?.FindChildTraverse<Button>('AddCheckpointButton');
+			const checkpointLabel = checkpointButton?.GetChild<Label>(0);
+			const startLabel = $.CreatePanel('Label', checkpointButton, '', {
+				class: 'zoning__tracklist-label zoning__tracklist-label--add'
+			});
+
+			checkpointLabel.SetHasClass('hide', true);
+			startLabel.text = $.Localize('#Zoning_CreateStart');
+
+			const checkpointList = this.panels.trackList.GetChild(0).FindChildTraverse<Panel>('CheckpointContainer');
+			checkpointButton.SetPanelEvent('onactivate', () => {
+				checkpointLabel.SetHasClass('hide', false);
+				startLabel.SetHasClass('hide', true);
+				this.addCheckpoint(
+					this.mapZoneData.tracks.main,
+					this.mapZoneData.tracks.main.zones.segments[0],
+					checkpointList
+				);
+
+				checkpointList.GetChild(0).FindChildTraverse<Label>('Name').text = $.Localize('#Zoning_Start_Track');
+
+				checkpointButton.SetPanelEvent('onactivate', () =>
+					this.addCheckpoint(
+						this.mapZoneData.tracks.main,
+						this.mapZoneData.tracks.main.zones.segments[0],
+						checkpointList
+					)
+				);
+			});
+		}
+
 		if (this.mapZoneData.tracks.bonuses) {
 			const tag = $.Localize('#Zoning_Bonus');
 			for (const [i, bonus] of this.mapZoneData.tracks.bonuses.entries()) {
@@ -351,12 +386,12 @@ class ZoneMenuHandler {
 		};
 	}
 
-	createSegment(): Segment {
+	createSegment(withStartZone: boolean = true): Segment {
 		return {
 			limitStartGroundSpeed: false,
 			checkpointsRequired: true,
 			checkpointsOrdered: true,
-			checkpoints: [this.createZone()],
+			checkpoints: withStartZone ? [this.createZone()] : [],
 			cancel: [],
 			name: ''
 		};

From 33aba1cb23a12c034ad5e589ccfb5e3a4b009c74 Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Sat, 21 Sep 2024 16:23:25 -0400
Subject: [PATCH 18/22] feat: draw zones while editing

---
 scripts/pages/zoning/zoning.ts | 101 ++++++++++++++++++++++++---------
 scripts/types-mom/apis.d.ts    |   2 +-
 2 files changed, 75 insertions(+), 28 deletions(-)

diff --git a/scripts/pages/zoning/zoning.ts b/scripts/pages/zoning/zoning.ts
index dde19b32..ec526980 100644
--- a/scripts/pages/zoning/zoning.ts
+++ b/scripts/pages/zoning/zoning.ts
@@ -195,6 +195,8 @@ class ZoneMenuHandler {
 		if (!this.mapZoneData || this.panels.trackList.GetChildCount() === 0) {
 			this.initMenu();
 		}
+
+		this.drawZones();
 	}
 
 	hideZoneMenu() {
@@ -458,6 +460,8 @@ class ZoneMenuHandler {
 		this.populateZoneProperties();
 		this.populateSegmentProperties();
 		this.populateTrackProperties();
+
+		this.drawZones();
 	}
 
 	populateZoneProperties() {
@@ -497,7 +501,7 @@ class ZoneMenuHandler {
 		const filterIndex = this.panels.filterSelect.GetSelected()?.GetAttributeInt('value', 0);
 		this.selectedZone.zone.filtername = filterIndex ? this.filternameList[filterIndex] : '';
 
-		this.updateZones();
+		this.drawZones();
 	}
 
 	populateRegionProperties() {
@@ -533,7 +537,7 @@ class ZoneMenuHandler {
 		this.panels.regionSelect.SetSelectedIndex(this.selectedZone.zone.regions.length - 1);
 		this.populateRegionProperties();
 
-		this.updateZones();
+		this.drawZones();
 	}
 
 	deleteRegion() {
@@ -546,7 +550,7 @@ class ZoneMenuHandler {
 		this.panels.regionSelect.SetSelectedIndex(0);
 		this.populateRegionProperties();
 
-		this.updateZones();
+		this.drawZones();
 	}
 
 	teleportToRegion() {
@@ -583,14 +587,14 @@ class ZoneMenuHandler {
 		xText.text = point[0].toFixed(2);
 		xText.SetPanelEvent('ontextentrysubmit', () => {
 			point[0] = Number.parseFloat(xText.text);
-			this.updateZones();
+			this.drawZones();
 		});
 
 		const yText = newRegionPoint.FindChildTraverse<TextEntry>('PointY');
 		yText.text = point[1].toFixed(2);
 		yText.SetPanelEvent('ontextentrysubmit', () => {
 			point[1] = Number.parseFloat(yText.text);
-			this.updateZones();
+			this.drawZones();
 		});
 	}
 
@@ -602,7 +606,7 @@ class ZoneMenuHandler {
 		this.selectedZone.zone?.regions[index].points.splice(n, 1);
 		point.DeleteAsync(0);
 
-		this.updateZones();
+		this.drawZones();
 	}
 
 	pickBottom() {
@@ -618,7 +622,7 @@ class ZoneMenuHandler {
 		const bottom = Number.parseFloat(this.panels.regionBottom.text);
 		region.bottom = Number.isNaN(bottom) ? 0 : bottom;
 
-		this.updateZones();
+		this.drawZones();
 	}
 
 	pickHeight() {
@@ -634,7 +638,7 @@ class ZoneMenuHandler {
 		const height = Number.parseFloat(this.panels.regionHeight.text);
 		region.height = Number.isNaN(height) ? 0 : height;
 
-		this.updateZones();
+		this.drawZones();
 	}
 
 	pickSafeHeight() {
@@ -650,7 +654,7 @@ class ZoneMenuHandler {
 		const height = Number.parseFloat(this.panels.regionSafeHeight.text);
 		region.safeHeight = Number.isNaN(height) ? 0 : height;
 
-		this.updateZones();
+		this.drawZones();
 	}
 
 	pickTeleDestPos() {
@@ -702,7 +706,7 @@ class ZoneMenuHandler {
 			this.setRegionTPDestTextEntriesActive(false);
 		}
 
-		this.updateZones();
+		this.drawZones();
 	}
 
 	setRegionTeleDestOrientation() {
@@ -718,7 +722,7 @@ class ZoneMenuHandler {
 		region.teleDestPos = [Number.isNaN(x) ? 0 : x, Number.isNaN(y) ? 0 : y, Number.isNaN(z) ? 0 : z];
 		region.teleDestYaw = Number.isNaN(yaw) ? 0 : yaw;
 
-		this.updateZones();
+		this.drawZones();
 	}
 
 	setRegionTPDestTextEntriesActive(enable: boolean) {
@@ -791,7 +795,7 @@ class ZoneMenuHandler {
 				break;
 		}
 
-		this.updateZones();
+		this.drawZones();
 	}
 
 	onPickCanceled() {
@@ -804,7 +808,7 @@ class ZoneMenuHandler {
 			if (region.points.length > 2 && region.height === 0) this.pickHeight();
 		}
 
-		this.updateZones();
+		this.drawZones();
 	}
 
 	addBonus() {
@@ -1000,7 +1004,7 @@ class ZoneMenuHandler {
 		this.panels.trackList.RemoveAndDeleteChildren();
 		this.initMenu();
 
-		this.updateZones();
+		this.drawZones();
 	}
 
 	setMaxVelocity() {
@@ -1008,14 +1012,14 @@ class ZoneMenuHandler {
 		const velocity = Number.parseFloat(this.panels.maxVelocity.text);
 		this.mapZoneData.maxVelocity = !Number.isNaN(velocity) && velocity > 0 ? velocity : 0;
 
-		this.updateZones();
+		this.drawZones();
 	}
 
 	setStageEndAtStageStarts() {
 		if (!this.isSelectionValid().track || !('stagesEndAtStageStarts' in this.selectedZone.track)) return;
 		this.selectedZone.track.stagesEndAtStageStarts = this.panels.stagesEndAtStageStarts.checked;
 
-		this.updateZones();
+		this.drawZones();
 	}
 
 	showDefragFlagMenu() {
@@ -1072,28 +1076,28 @@ class ZoneMenuHandler {
 		// keep select button aligned with other tracks
 		trackPanel.FindChildTraverse('Entry').SetHasClass('zoning__tracklist-checkpoint', true);
 
-		this.updateZones();
+		this.drawZones();
 	}
 
 	setLimitGroundSpeed() {
 		if (!this.isSelectionValid().segment) return;
 		this.selectedZone.segment!.limitStartGroundSpeed = this.panels.limitGroundSpeed.checked;
 
-		this.updateZones();
+		this.drawZones();
 	}
 
 	setCheckpointsOrdered() {
 		if (!this.isSelectionValid().segment) return;
 		this.selectedZone.segment!.checkpointsOrdered = this.panels.checkpointsOrdered.checked;
 
-		this.updateZones();
+		this.drawZones();
 	}
 
 	setCheckpointsRequired() {
 		if (!this.isSelectionValid().segment) return;
 		this.selectedZone.segment!.checkpointsRequired = this.panels.checkpointsRequired.checked;
 
-		this.updateZones();
+		this.drawZones();
 	}
 
 	setSegmentName() {
@@ -1102,7 +1106,7 @@ class ZoneMenuHandler {
 		// feat: later
 		// update segment name in trasklist tree
 
-		this.updateZones();
+		this.drawZones();
 	}
 
 	showRegionMenu(menu?: RegionMenu) {
@@ -1117,13 +1121,55 @@ class ZoneMenuHandler {
 		this.panels.teleportSection.visible = menu === RegionMenu.TELEPORT;
 	}
 
-	updateZones() {
+	drawZones() {
 		if (!this.mapZoneData) return;
+		if (!this.selectedZone) return;
 
-		// future: validation here
+		const renderRegions: ZoneEditorRegion[] = [];
 
-		this.mapZoneData.dataTimestamp = Date.now();
-		MomentumTimerAPI.SetActiveZoneDefs(this.mapZoneData);
+		const validity = this.isSelectionValid();
+		const regionIndex = validity.zone ? this.panels.regionSelect.GetSelected().GetAttributeInt('value', -1) : -1;
+
+		for (const [segmentNumber, segment] of this.selectedZone.track.zones.segments.entries()) {
+			if (segment.checkpoints.length > 0) {
+				for (const [checkpointNumber, checkpoint] of segment.checkpoints.entries()) {
+					for (const region of checkpoint.regions) {
+						renderRegions.push({
+							region: region,
+							renderMode:
+								checkpointNumber === 0
+									? segmentNumber === 0
+										? RegionRenderMode.START
+										: RegionRenderMode.MAJOR_CHECKPOINT
+									: RegionRenderMode.MINOR_CHECKPOINT,
+							editing: validity.zone && region === this.selectedZone.zone.regions[regionIndex]
+						});
+					}
+				}
+			}
+			if (segment.cancel && segment.cancel.length > 0) {
+				for (const cancel of segment.cancel) {
+					for (const region of cancel.regions) {
+						renderRegions.push({
+							region: region,
+							renderMode: RegionRenderMode.CANCEL,
+							editing: validity.zone && region === this.selectedZone.zone.regions[regionIndex]
+						});
+					}
+				}
+			}
+		}
+		if (this.selectedZone.track.zones.end && this.selectedZone.track.zones.end.regions.length > 0) {
+			for (const region of this.selectedZone.track.zones.end.regions) {
+				renderRegions.push({
+					region: region,
+					renderMode: RegionRenderMode.END,
+					editing: validity.zone && region === this.selectedZone.zone.regions[regionIndex]
+				});
+			}
+		}
+
+		this.panels.zoningMenu.drawRegions(renderRegions);
 	}
 
 	saveZones() {
@@ -1133,12 +1179,13 @@ class ZoneMenuHandler {
 	}
 
 	cancelEdit() {
+		this.activeDeleteButton = null;
 		this.panels.trackList.RemoveAndDeleteChildren();
 		this.mapZoneData = null;
 
-		MomentumTimerAPI.LoadZoneDefs();
-
+		MomentumTimerAPI.LoadZoneDefs(false);
 		this.initMenu();
+		this.drawZones();
 	}
 
 	isSelectionValid() {
diff --git a/scripts/types-mom/apis.d.ts b/scripts/types-mom/apis.d.ts
index 02f96454..c75aa65c 100644
--- a/scripts/types-mom/apis.d.ts
+++ b/scripts/types-mom/apis.d.ts
@@ -256,7 +256,7 @@ declare namespace MomentumTimerAPI {
 	function SaveZoneDefs(zoneDefs: Zones): void;
 
 	/** Load ZoneDefs from newzones file */
-	function LoadZoneDefs(): void;
+	function LoadZoneDefs(useLocal: boolean): boolean;
 }
 
 declare namespace MapCacheAPI {

From 9fb0315c2d908faf9245bcd01a1eed378fd3d77f Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Wed, 16 Oct 2024 14:05:07 -0400
Subject: [PATCH 19/22] feat: set active zone defs when leaving edit mode

---
 scripts/pages/zoning/zoning.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/scripts/pages/zoning/zoning.ts b/scripts/pages/zoning/zoning.ts
index ec526980..84847c3c 100644
--- a/scripts/pages/zoning/zoning.ts
+++ b/scripts/pages/zoning/zoning.ts
@@ -204,6 +204,8 @@ class ZoneMenuHandler {
 			this.panels.trackList.RemoveAndDeleteChildren();
 		}
 		this.activeDeleteButton = null;
+
+		MomentumTimerAPI.SetActiveZoneDefs(this.mapZoneData);
 	}
 
 	toggleCollapse(container: GenericPanel, expandIcon: Image, collapseIcon: Image) {

From ffacecddd6ca2279e3450940383386f4057f0ad2 Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Wed, 16 Oct 2024 14:29:38 -0400
Subject: [PATCH 20/22] feat: snap teleport dest yaw to nearest 15 degrees

---
 scripts/pages/zoning/zoning.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/scripts/pages/zoning/zoning.ts b/scripts/pages/zoning/zoning.ts
index 84847c3c..2d2b9999 100644
--- a/scripts/pages/zoning/zoning.ts
+++ b/scripts/pages/zoning/zoning.ts
@@ -6,6 +6,7 @@ const FORMAT_VERSION = 1;
 
 const FLT_MAX = 3.402823466e38;
 const DEFAULT_HEIGHT = 160;
+const ANGLE_SNAP = 15;
 
 export interface EntityList {
 	filter: string[];
@@ -792,8 +793,8 @@ class ZoneMenuHandler {
 				break;
 
 			case PickType.TELE_DEST_YAW:
-				region.teleDestYaw = MomentumPlayerAPI.GetAngles().y;
-				this.panels.regionTPYaw.text = region.teleDestYaw.toFixed(2);
+				region.teleDestYaw = Math.floor(MomentumPlayerAPI.GetAngles().y / ANGLE_SNAP + 0.5) * ANGLE_SNAP;
+				this.panels.regionTPYaw.text = region.teleDestYaw.toFixed(0);
 				break;
 		}
 

From 42a67701518a2e3f243a879e5b0dc9c97ee757a1 Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Wed, 16 Oct 2024 15:05:58 -0400
Subject: [PATCH 21/22] feat: pass point placement mode to c++

---
 scripts/pages/zoning/zoning.ts | 22 ++++++----------------
 scripts/types-mom/panels.d.ts  | 12 +++++++++++-
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/scripts/pages/zoning/zoning.ts b/scripts/pages/zoning/zoning.ts
index 2d2b9999..66bd0038 100644
--- a/scripts/pages/zoning/zoning.ts
+++ b/scripts/pages/zoning/zoning.ts
@@ -28,16 +28,6 @@ enum DefragFlags {
 	BFG = 1 << 5
 }
 
-enum PickType {
-	NONE,
-	CORNER,
-	BOTTOM,
-	HEIGHT,
-	SAFE_HEIGHT,
-	TELE_DEST_POS,
-	TELE_DEST_YAW
-}
-
 enum RegionMenu {
 	POINTS = 'Points',
 	PROPERTIES = 'Properties',
@@ -574,7 +564,7 @@ class ZoneMenuHandler {
 			region.points.length = 0;
 			this.panels.pointsList.RemoveAndDeleteChildren();
 		}
-		this.panels.zoningMenu.startPointPick(true);
+		this.panels.zoningMenu.startPointPick(this.pointPick);
 
 		this.panels.zoningMenu.setCornersFromRegion(region);
 	}
@@ -614,7 +604,7 @@ class ZoneMenuHandler {
 
 	pickBottom() {
 		this.pointPick = PickType.BOTTOM;
-		this.panels.zoningMenu.startPointPick(false);
+		this.panels.zoningMenu.startPointPick(this.pointPick);
 	}
 
 	setRegionBottom() {
@@ -630,7 +620,7 @@ class ZoneMenuHandler {
 
 	pickHeight() {
 		this.pointPick = PickType.HEIGHT;
-		this.panels.zoningMenu.startPointPick(false);
+		this.panels.zoningMenu.startPointPick(this.pointPick);
 	}
 
 	setRegionHeight() {
@@ -646,7 +636,7 @@ class ZoneMenuHandler {
 
 	pickSafeHeight() {
 		this.pointPick = PickType.SAFE_HEIGHT;
-		this.panels.zoningMenu.startPointPick(false);
+		this.panels.zoningMenu.startPointPick(this.pointPick);
 	}
 
 	setRegionSafeHeight() {
@@ -662,12 +652,12 @@ class ZoneMenuHandler {
 
 	pickTeleDestPos() {
 		this.pointPick = PickType.TELE_DEST_POS;
-		this.panels.zoningMenu.startPointPick(false);
+		this.panels.zoningMenu.startPointPick(this.pointPick);
 	}
 
 	pickTeleDestYaw() {
 		this.pointPick = PickType.TELE_DEST_YAW;
-		this.panels.zoningMenu.startPointPick(false);
+		this.panels.zoningMenu.startPointPick(this.pointPick);
 	}
 
 	updateRegionTPDest() {
diff --git a/scripts/types-mom/panels.d.ts b/scripts/types-mom/panels.d.ts
index dcdbccc8..57fa4f39 100644
--- a/scripts/types-mom/panels.d.ts
+++ b/scripts/types-mom/panels.d.ts
@@ -167,8 +167,18 @@ interface ZoneEditorLimits {
 	MAX_ZONES_ALL_TRACKS: number;
 }
 
+declare const enum PickType {
+	NONE = 0,
+	CORNER = 1,
+	BOTTOM = 2,
+	HEIGHT = 3,
+	SAFE_HEIGHT = 4,
+	TELE_DEST_POS = 5,
+	TELE_DEST_YAW = 6
+}
+
 interface ZoneMenu extends AbstractPanel<'ZoneMenu'> {
-	startPointPick(multiPick: boolean): void;
+	startPointPick(mode: PickType): void;
 
 	getEntityList(): import('pages/zoning/zoning').EntityList;
 

From 1a3bcfcbffc05e7f9bebd0581075989197ca1d76 Mon Sep 17 00:00:00 2001
From: PeenScreeker <bumperjumper569@gmail.com>
Date: Tue, 26 Nov 2024 15:20:14 -0500
Subject: [PATCH 22/22] fix: move const enums to zoning.ts

---
 scripts/pages/zoning/zoning.ts | 30 ++++++++++++++++++++++++++
 scripts/types-mom/panels.d.ts  | 39 ++++++----------------------------
 2 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/scripts/pages/zoning/zoning.ts b/scripts/pages/zoning/zoning.ts
index 66bd0038..0246b013 100644
--- a/scripts/pages/zoning/zoning.ts
+++ b/scripts/pages/zoning/zoning.ts
@@ -35,6 +35,36 @@ enum RegionMenu {
 	RESET = 'Reset'
 }
 
+export enum PickType {
+	NONE = 0,
+	CORNER = 1,
+	BOTTOM = 2,
+	HEIGHT = 3,
+	SAFE_HEIGHT = 4,
+	TELE_DEST_POS = 5,
+	TELE_DEST_YAW = 6
+}
+
+export enum RegionRenderMode {
+	NONE = 0,
+	START = 1,
+	START_WITH_SAFE_HEIGHT = 2,
+	TRACK_SWITCH = 3,
+	END = 4,
+	MAJOR_CHECKPOINT = 5,
+	MINOR_CHECKPOINT = 6,
+	CANCEL = 7
+}
+
+export enum RegionPolygonProblem {
+	INVALID_INPUT = -1,
+	NONE = 0,
+	POINTS_TOO_CLOSE = 1,
+	ANGLE_TOO_SMALL = 2,
+	COLINEAR_POINTS = 3,
+	SELF_INTERSECTING = 4
+}
+
 @PanelHandler()
 class ZoneMenuHandler {
 	readonly panels = {
diff --git a/scripts/types-mom/panels.d.ts b/scripts/types-mom/panels.d.ts
index 57fa4f39..5b806f12 100644
--- a/scripts/types-mom/panels.d.ts
+++ b/scripts/types-mom/panels.d.ts
@@ -132,29 +132,9 @@ interface MomHudDFJump extends AbstractHudPanel<'MomHudDFJump'> {}
 
 interface MomHudSynchronizer extends AbstractHudPanel<'MomHudSynchronizer'> {}
 
-declare const enum RegionRenderMode {
-	NONE = 0,
-	START = 1,
-	START_WITH_SAFE_HEIGHT = 2,
-	TRACK_SWITCH = 3,
-	END = 4,
-	MAJOR_CHECKPOINT = 5,
-	MINOR_CHECKPOINT = 6,
-	CANCEL = 7
-}
-
-declare const enum RegionPolygonProblem {
-	INVALID_INPUT = -1,
-	NONE = 0,
-	POINTS_TOO_CLOSE = 1,
-	ANGLE_TOO_SMALL = 2,
-	COLINEAR_POINTS = 3,
-	SELF_INTERSECTING = 4
-}
-
 interface ZoneEditorRegion {
 	region: import('common/web').Region;
-	renderMode: RegionRenderMode;
+	renderMode: import('pages/zoning/zoning').RegionRenderMode;
 	editing: boolean;
 }
 
@@ -167,18 +147,8 @@ interface ZoneEditorLimits {
 	MAX_ZONES_ALL_TRACKS: number;
 }
 
-declare const enum PickType {
-	NONE = 0,
-	CORNER = 1,
-	BOTTOM = 2,
-	HEIGHT = 3,
-	SAFE_HEIGHT = 4,
-	TELE_DEST_POS = 5,
-	TELE_DEST_YAW = 6
-}
-
 interface ZoneMenu extends AbstractPanel<'ZoneMenu'> {
-	startPointPick(mode: PickType): void;
+	startPointPick(mode: import('pages/zoning/zoning').PickType): void;
 
 	getEntityList(): import('pages/zoning/zoning').EntityList;
 
@@ -188,7 +158,10 @@ interface ZoneMenu extends AbstractPanel<'ZoneMenu'> {
 
 	drawRegions(editorRegions: ZoneEditorRegion[]): void;
 
-	validateRegionPolygon(points: import('common/web').Vector2D[], closed: boolean): RegionPolygonProblem;
+	validateRegionPolygon(
+		points: import('common/web').Vector2D[],
+		closed: boolean
+	): import('pages/zoning/zoning').RegionPolygonProblem;
 
 	getZoningLimits(): ZoneEditorLimits;
 }