From 673c181d59a300bdf40e66f26f7b304115b5113c Mon Sep 17 00:00:00 2001
From: QIU SHENGMING <Kero64@126.com>
Date: Thu, 1 Oct 2026 22:00:54 +0800
Subject: [PATCH] Fold the slot and app tables away instead of one long page

Sixteen app rows (most of them empty or holding something that is not an app) plus five slot rows made the column long enough to be annoying, so each table is now a details pane: the firmware slots start open, the app list starts folded, and the state that used to sit in its own row moved into the summary line. Same ids, so loadSlots and loadApps are untouched. A front-end test asserts both panes exist and that the app list starts folded.
---
 tools/test_webui.py |  8 ++++++++
 tools/webui.py      | 15 +++++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/tools/test_webui.py b/tools/test_webui.py
index e59d953..db76008 100644
--- a/tools/test_webui.py
+++ b/tools/test_webui.py
@@ -1153,6 +1153,14 @@ class TestAppsFrontEnd(unittest.TestCase):
     def test_the_page_says_where_the_apps_live(self):
         self.assertIn("0x102000", self.page)
 
+    def test_the_two_tables_fold_away(self):
+        """Sixteen app rows and five slot rows made the page one long column."""
+        self.assertIn("<details class=\"pane\"", self.page)
+        self.assertRegex(self.page, r"<summary>Overlay apps")
+        self.assertRegex(self.page, r"<summary>Firmware slots")
+        # the app list starts folded: most of its rows are not apps
+        self.assertIn("<details class=\"pane\">", self.page)
+        self.assertIn("<details class=\"pane\" open>", self.page)
     def test_the_page_never_asks_for_a_serial_port_or_audio(self):
         # WebSerial is how upstream installs these; here the image is edited directly, so
         # a permission prompt would be asking for something this page never uses.
diff --git a/tools/webui.py b/tools/webui.py
index 8216455..49732a7 100644
--- a/tools/webui.py
+++ b/tools/webui.py
@@ -941,6 +941,11 @@ def render_index(scale: int) -> str:
   #slottable button:hover {{ background:#343b44; }}
   .mini {{ margin-left:1em; }}
   .mini input {{ margin-left:0.5em; }}
+  /* The two tables made one long column; each folds, and the app list starts folded
+     because most of its sixteen rows are empty or hold something that is not an app. */
+  details.pane {{ margin:6px 0; }}
+  details.pane > summary {{ cursor:pointer; color:#c9d1d9; font-size:13px; padding:2px 0; }}
+  details.pane > summary:hover {{ color:#fff; }}
   #logtext {{ height:180px; min-height:180px; overflow-y:auto; margin:6px 0 0;
              padding:8px; background:#0d1117; border:1px solid #2d333b;
              border-radius:6px; white-space:pre-wrap; word-break:break-all;
@@ -965,17 +970,18 @@ def render_index(scale: int) -> str:
     <span id="fwstate">-</span>
     <span class="hint">or drop a .bin anywhere on the page</span>
   </div>
+  <details class="pane" open>
+  <summary>Firmware slots <span id="flashstate">-</span></summary>
   <div class="fwbar">
-    <label>Firmware slots</label>
-    <span id="flashstate">-</span>
     <label class="mini">flash image<input type="file" id="flashfile" accept=".img,.bin"></label>
     <span class="hint">the multi-system slots live in the external flash;
     write a .bin into one, then press Multiboot</span>
   </div>
   <table id="slottable"><tbody></tbody></table>
+  </details>
+  <details class="pane">
+  <summary>Overlay apps <span id="appstate">-</span></summary>
   <div class="fwbar">
-    <label>Overlay apps</label>
-    <span id="appstate">-</span>
     <button id="appask" title="ask the running firmware what it sees in each app slot">Ask the radio</button>
     <span class="hint">the Labs edition's apps live in the same external flash (16 slots
     from 0x102000; the firmware's menu lists the first eight, numbered 1..8). Pick a .app for a slot to
@@ -983,6 +989,7 @@ def render_index(scale: int) -> str:
     radio and MENU to run it</span>
   </div>
   <table id="apptable"><tbody></tbody></table>
+  </details>
   <div class="screenwrap" id="screenwrap">
     <img id="screen" src="/stream" alt="radio LCD"
          width="{128 * scale}" height="{64 * scale}">