From f8ae71a9624d4652c444941893a9e85d7b55190d Mon Sep 17 00:00:00 2001
From: Michael Mainguy <mike.mainguy@gmail.com>
Date: Tue, 18 Nov 2025 13:36:19 -0600
Subject: [PATCH] Implement Phase 5: Fly Mode toggle for VR config panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add Fly Mode toggle control:
- Single toggle button showing "Fly Mode Enabled" or "Fly Mode Disabled"
- 400px wide button with blue/gray color coding
- Wire up to appConfigInstance.setFlyMode()
- Update UI from config observable changes

Simplest section - just one boolean toggle, no value selection needed.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/menus/vrConfigPanel.ts | 50 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 48 insertions(+), 2 deletions(-)

diff --git a/src/menus/vrConfigPanel.ts b/src/menus/vrConfigPanel.ts
index e321c31..2fe03a0 100644
--- a/src/menus/vrConfigPanel.ts
+++ b/src/menus/vrConfigPanel.ts
@@ -61,6 +61,9 @@ export class VRConfigPanel {
     private _rotationSnapToggle: Button;
     private _rotationSnapButtons: Map<number, Button> = new Map();
 
+    // Fly Mode UI controls
+    private _flyModeToggle: Button;
+
     constructor(scene: Scene) {
         this._scene = scene || DefaultScene.Scene;
         this._logger.debug('VRConfigPanel constructor called');
@@ -234,6 +237,7 @@ export class VRConfigPanel {
 
         // Section 3: Fly Mode
         this._flyModeContent = this.createSectionContainer("Fly Mode");
+        this.buildFlyModeControls();
         this.addSeparator();
 
         // Section 4: Snap Turn
@@ -532,6 +536,43 @@ export class VRConfigPanel {
         });
     }
 
+    /**
+     * Build Fly Mode controls
+     */
+    private buildFlyModeControls(): void {
+        const flyModeEnabled = appConfigInstance.current.flyMode;
+
+        // Create horizontal container for toggle button
+        const toggleContainer = new StackPanel("flyModeToggleContainer");
+        toggleContainer.isVertical = false;
+        toggleContainer.width = "100%";
+        toggleContainer.height = "80px";
+        toggleContainer.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        this._flyModeContent.addControl(toggleContainer);
+
+        // Create toggle button
+        this._flyModeToggle = Button.CreateSimpleButton(
+            "flyModeToggle",
+            flyModeEnabled ? "Fly Mode Enabled" : "Fly Mode Disabled"
+        );
+        this._flyModeToggle.width = "400px";
+        this._flyModeToggle.height = "70px";
+        this._flyModeToggle.fontSize = 48;
+        this._flyModeToggle.color = "white";
+        this._flyModeToggle.background = flyModeEnabled ? "#4A9EFF" : "#666666";
+        this._flyModeToggle.thickness = 0;
+        this._flyModeToggle.cornerRadius = 10;
+        toggleContainer.addControl(this._flyModeToggle);
+
+        // Toggle button click handler
+        this._flyModeToggle.onPointerClickObservable.add(() => {
+            const newValue = !appConfigInstance.current.flyMode;
+            appConfigInstance.setFlyMode(newValue);
+            this._flyModeToggle.textBlock.text = newValue ? "Fly Mode Enabled" : "Fly Mode Disabled";
+            this._flyModeToggle.background = newValue ? "#4A9EFF" : "#666666";
+        });
+    }
+
     /**
      * Set up parenting to platform for world movement tracking
      */
@@ -575,8 +616,13 @@ export class VRConfigPanel {
             this.updateRotationSnapButtonStates(config.rotateSnap);
         }
 
-        // Phase 5-7 will add:
-        // - Fly mode UI update
+        // Update Fly Mode UI
+        if (this._flyModeToggle) {
+            this._flyModeToggle.textBlock.text = config.flyMode ? "Fly Mode Enabled" : "Fly Mode Disabled";
+            this._flyModeToggle.background = config.flyMode ? "#4A9EFF" : "#666666";
+        }
+
+        // Phase 6-7 will add:
         // - Snap turn UI update
         // - Label rendering mode UI update
     }