From 5f915271f8d5da97ec86b44d6233872960092653 Mon Sep 17 00:00:00 2001
From: Craig Jennings <c@cjennings.net>
Date: Mon, 15 Jun 2026 17:20:37 -0500
Subject: refactor(theme-studio): collapse assignment views into one dropdown
 panel

The assignment area was three stacked sections (color/code, ui faces, package faces), and package faces carried its own application selector. I merged them into one panel driven by a single dropdown: color/code assignments, ui faces, then a non-selectable "package faces" optgroup holding every app in order. Picking an entry swaps the left table and right preview, so only one view shows at a time.

curApp now reads the selected app from that dropdown, and the old appsel is gone. A #viewtest browser gate locks in the dropdown order, the optgroup, and the one-view-at-a-time switching.
---
 scripts/theme-studio/theme-studio.template.html | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

(limited to 'scripts/theme-studio/theme-studio.template.html')

diff --git a/scripts/theme-studio/theme-studio.template.html b/scripts/theme-studio/theme-studio.template.html
index 49c15509c..964724d9e 100644
--- a/scripts/theme-studio/theme-studio.template.html
+++ b/scripts/theme-studio/theme-studio.template.html
@@ -58,7 +58,9 @@ STYLES_CSS</style>
   <div class="pals" id="pals"></div>
   <div class="palwarn" id="palwarn"></div>
  </section>
-<h1>code/color assignments</h1>
+<h1>assignment</h1>
+<div class="pkgbar"><label style="color:#b4b1a2">view</label><select id="viewsel" class="chip" style="width:auto;font:bold 10pt monospace" onchange="onViewChange()"></select></div>
+<div id="view-code" class="viewblock">
 <div class="cols">
  <section class="pane">
   <div class="legctl"><button id="syntaxlocktoggle" class="fbtn" onclick="toggleAllLocks('syntax')" title="lock or unlock every syntax row">lock all</button><button class="fbtn" onclick="resetUnlocked()" title="reset to captured defaults, preserving locked rows">&#8635; reset</button><button class="fbtn" onclick="clearUnlocked()" title="erase, preserving locked rows">erase</button></div>
@@ -69,7 +71,8 @@ STYLES_CSS</style>
   <pre id="codepre"></pre>
  </section>
 </div>
-<h1>ui faces</h1>
+</div>
+<div id="view-ui" class="viewblock" style="display:none">
 <div class="cols stretch">
  <section class="pane">
   <div class="legctl"><button id="uilocktoggle" class="fbtn" onclick="toggleAllLocks('ui')" title="lock or unlock every UI face row">lock all</button><button class="fbtn" onclick="resetUnlockedUI()" title="reset to captured defaults, preserving locked rows">&#8635; reset</button><button class="fbtn" onclick="clearUnlockedUI()" title="erase, preserving locked rows">erase</button></div>
@@ -80,9 +83,9 @@ STYLES_CSS</style>
   <div id="mockframe" class="mock"></div>
  </section>
 </div>
-<h1>package faces</h1>
+</div>
+<div id="view-pkg" class="viewblock" style="display:none">
 <div class="pkgbar">
- <label style="color:#b4b1a2">application</label><select id="appsel" class="chip" style="width:auto;font:bold 10pt monospace"></select>
  <label style="color:#b4b1a2">filter</label><input id="pkgfilter" type="text" placeholder="face name" oninput="buildPkgTable()" style="background:#161412;border:1px solid #252321;color:#cdced1;border-radius:4px;padding:5px 8px;font:10pt monospace;width:160px">
  <button onclick="resetApp()" title="reset to captured defaults, preserving locked rows">&#8635; reset</button>
  <button id="pkglocktoggle" class="fbtn" onclick="toggleAllLocks('pkg')" title="lock or unlock every face row in the current package">lock all</button>
@@ -97,5 +100,6 @@ STYLES_CSS</style>
   <div id="pkgpreview" class="mock" style="overflow:auto;min-height:60vh"></div>
  </section>
 </div>
+</div>
 <script>
 APP_JS</script>
-- 
cgit v1.2.3