From a0adb8b14be116c5380ec59970a8a336ddcb70fb Mon Sep 17 00:00:00 2001
From: w1n5t0n <w1n5t0n@lnfinitemonkeys.org>
Date: Sun, 22 Mar 2026 11:07:38 +0200
Subject: [PATCH] fix(playground): move Visual/Synth toggle into bottom toolbar
 in immersive UI

Relocated the output mode toggle from a floating top-right position into
the bottom floating bar where it's more discoverable. Removed the
duplicate toggle from the expanded sheet. Compact pill-toggle-sm style
fits the toolbar layout.
---
 playground/a-immersive.html    | 18 ++++--------------
 playground/css/a-immersive.css | 32 ++++++--------------------------
 playground/js/a-app.js         | 15 +++------------
 3 files changed, 13 insertions(+), 52 deletions(-)

diff --git a/playground/a-immersive.html b/playground/a-immersive.html
index 3df0926..7586852 100644
--- a/playground/a-immersive.html
+++ b/playground/a-immersive.html
@@ -30,12 +30,6 @@
     </div>
   </div>
 
-  <!-- Output mode toggle (floating, top-right) -->
-  <div class="output-toggle-float" id="output-toggle-float">
-    <button class="otf-opt active" data-mode="visual">Visual</button>
-    <button class="otf-opt" data-mode="synth">Synth</button>
-  </div>
-
   <!-- Fullscreen flow field canvas -->
   <canvas id="vis-canvas"></canvas>
 
@@ -67,6 +61,10 @@
   <div class="bottom-sheet collapsed" id="bottom-sheet">
     <!-- Floating mode bar (sticky inside sheet) -->
     <div class="floating-bar" id="floating-bar">
+      <div class="pill-toggle pill-toggle-sm" id="output-toggle-float">
+        <button class="pill-opt active" data-mode="visual">Visual</button>
+        <button class="pill-opt" data-mode="synth">Synth</button>
+      </div>
       <button class="float-btn accent" id="btn-train-bar" title="Train on examples">Train</button>
       <button class="float-btn" id="btn-randomize-bar" title="Randomize weights">Randomize</button>
       <button class="float-btn" id="btn-clear-examples-bar" title="Clear examples">Clear Ex</button>
@@ -81,14 +79,6 @@
 
     <!-- Sheet content -->
     <div class="sheet-content" id="sheet-content">
-      <!-- Output mode toggle -->
-      <div class="mode-row">
-        <div class="pill-toggle" id="output-toggle">
-          <button class="pill-opt active" data-mode="visual">Visual</button>
-          <button class="pill-opt" data-mode="synth">Synth</button>
-        </div>
-      </div>
-
       <!-- Examples mode actions -->
       <div class="action-row" id="examples-actions">
         <button class="action-btn" id="btn-add-example">Add Example</button>
diff --git a/playground/css/a-immersive.css b/playground/css/a-immersive.css
index b141e5c..ce062a9 100644
--- a/playground/css/a-immersive.css
+++ b/playground/css/a-immersive.css
@@ -64,35 +64,15 @@ html, body {
 }
 
 /* ---- Output mode toggle (floating) ---- */
-.output-toggle-float {
-  position: fixed;
-  top: 30px;
-  right: 12px;
-  z-index: 30;
-  display: flex;
-  border-radius: 6px;
+.pill-toggle-sm {
+  border-radius: 4px;
   overflow: hidden;
-  border: 1px solid var(--glass-border);
-  background: var(--glass-bg);
-  backdrop-filter: blur(var(--glass-blur));
-  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid rgba(255, 255, 255, 0.08);
 }
 
-.otf-opt {
-  padding: 6px 14px;
-  font-size: 12px;
-  font-family: inherit;
-  color: var(--text-dim);
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.otf-opt.active {
-  background: var(--accent-dim);
-  color: var(--accent);
-  font-weight: 600;
+.pill-toggle-sm .pill-opt {
+  padding: 3px 10px;
+  font-size: 11px;
 }
 
 /* ---- Fullscreen canvas ---- */
diff --git a/playground/js/a-app.js b/playground/js/a-app.js
index 60915d9..85a53e4 100644
--- a/playground/js/a-app.js
+++ b/playground/js/a-app.js
@@ -738,16 +738,8 @@ function wireBottomSheet() {
 
 // ---- Controls wiring ----
 function wireControls() {
-  // Output mode toggle (sheet)
-  document.querySelectorAll('#output-toggle .pill-opt').forEach(btn => {
-    btn.addEventListener('click', () => {
-      syncOutputToggles(btn.dataset.mode);
-      setOutputMode(btn.dataset.mode);
-    });
-  });
-
-  // Output mode toggle (floating)
-  document.querySelectorAll('#output-toggle-float .otf-opt').forEach(btn => {
+  // Output mode toggle (floating bar)
+  document.querySelectorAll('#output-toggle-float .pill-opt').forEach(btn => {
     btn.addEventListener('click', () => {
       syncOutputToggles(btn.dataset.mode);
       setOutputMode(btn.dataset.mode);
@@ -778,8 +770,7 @@ function wireControls() {
 }
 
 function syncOutputToggles(mode) {
-  document.querySelectorAll('#output-toggle .pill-opt').forEach(b => b.classList.toggle('active', b.dataset.mode === mode));
-  document.querySelectorAll('#output-toggle-float .otf-opt').forEach(b => b.classList.toggle('active', b.dataset.mode === mode));
+  document.querySelectorAll('#output-toggle-float .pill-opt').forEach(b => b.classList.toggle('active', b.dataset.mode === mode));
 }
 
 function setOutputMode(mode) {