Make Toolbox header submenu use accordion structure - PR_26152_255-toolbox-header-accordion-submenu

Author: ToolboxAid

GameFoundryStudio/assets/partials/header-nav.html

@@ -8,25 +8,40 @@
       <div class="nav-item">
         <a data-nav-link data-route="tools" href="tools/index.html">Toolbox &#9662;</a>
         <div class="sub-menu" data-toolbox-menu aria-label="Toolbox menu">
-          <div data-toolbox-menu-group aria-label="Objects">
-            <span data-toolbox-menu-group-label>Objects</span>
+          <details data-toolbox-menu-accordion data-toolbox-menu-group>
+            <summary data-toolbox-menu-group-label>Objects</summary>
             <a data-nav-link data-toolbox-menu-item data-route="object-vector-studio" href="tools/object-vector-studio.html">Vector</a>
             <a data-nav-link data-toolbox-menu-item data-route="asset-studio" href="tools/asset-studio.html">Sprite</a>
             <a data-nav-link data-toolbox-menu-item data-route="animation-studio" href="tools/animation-studio.html">Animated Sprite</a>
             <a data-nav-link data-toolbox-menu-item data-route="code-studio" href="tools/code-studio.html">UI</a>
-          </div>
-          <div data-toolbox-menu-group aria-label="Worlds">
-            <span data-toolbox-menu-group-label>Worlds</span>
+          </details>
+          <details data-toolbox-menu-accordion data-toolbox-menu-group>
+            <summary data-toolbox-menu-group-label>Worlds</summary>
             <a data-nav-link data-toolbox-menu-item data-route="world-vector-studio" href="tools/world-vector-studio.html">Vector</a>
             <a data-nav-link data-toolbox-menu-item data-route="game-builder" href="tools/game-builder.html">Tilemap</a>
             <a data-nav-link data-toolbox-menu-item data-route="particle-studio" href="tools/particle-studio.html">Isometric</a>
             <a data-nav-link data-toolbox-menu-item data-route="game-design-studio" href="tools/game-design-studio.html">Hybrid</a>
-          </div>
-          <a data-nav-link data-toolbox-menu-section data-route="sound-studio" href="tools/sound-studio.html">Audio</a>
-          <a data-nav-link data-toolbox-menu-section data-route="input-studio" href="tools/input-studio.html">Input</a>
-          <a data-nav-link data-toolbox-menu-section data-route="ai-assistant" href="tools/ai-assistant.html">AI</a>
-          <a data-nav-link data-toolbox-menu-section data-route="palette-manager" href="tools/palette-manager.html">Colors</a>
-          <a data-nav-link data-toolbox-menu-section data-route="storage-inspector" href="tools/storage-inspector.html">Assets</a>
+          </details>
+          <details data-toolbox-menu-accordion data-toolbox-menu-group>
+            <summary data-toolbox-menu-group-label>Audio</summary>
+            <a data-nav-link data-toolbox-menu-item data-route="sound-studio" href="tools/sound-studio.html">Audio</a>
+          </details>
+          <details data-toolbox-menu-accordion data-toolbox-menu-group>
+            <summary data-toolbox-menu-group-label>Input</summary>
+            <a data-nav-link data-toolbox-menu-item data-route="input-studio" href="tools/input-studio.html">Input</a>
+          </details>
+          <details data-toolbox-menu-accordion data-toolbox-menu-group>
+            <summary data-toolbox-menu-group-label>AI</summary>
+            <a data-nav-link data-toolbox-menu-item data-route="ai-assistant" href="tools/ai-assistant.html">AI</a>
+          </details>
+          <details data-toolbox-menu-accordion data-toolbox-menu-group>
+            <summary data-toolbox-menu-group-label>Colors</summary>
+            <a data-nav-link data-toolbox-menu-item data-route="palette-manager" href="tools/palette-manager.html">Colors</a>
+          </details>
+          <details data-toolbox-menu-accordion data-toolbox-menu-group>
+            <summary data-toolbox-menu-group-label>Assets</summary>
+            <a data-nav-link data-toolbox-menu-item data-route="storage-inspector" href="tools/storage-inspector.html">Assets</a>
+          </details>
         </div>
       </div>
       <div class="nav-item">

docs/dev/reports/toolbox_header_accordion_submenu.md

@@ -0,0 +1,71 @@
+# PR_26152_255 Toolbox Header Accordion Submenu
+
+Status: PASS
+
+## Scope
+
+- Updated `GameFoundryStudio/assets/partials/header-nav.html` so the Toolbox submenu groups render as native accordion sections.
+- Kept internal `tools/` paths unchanged.
+- Did not modify `tools/tools-page-accordions.js`.
+- Did not rebuild tools or touch samples.
+- Added no inline script, inline style, or inline event handlers.
+
+## Accordion Structure
+
+- Toolbox
+  - Objects
+    - Vector
+    - Sprite
+    - Animated Sprite
+    - UI
+  - Worlds
+    - Vector
+    - Tilemap
+    - Isometric
+    - Hybrid
+  - Audio
+  - Input
+  - AI
+  - Colors
+  - Assets
+
+## Lanes Executed
+
+- header/navigation: changed the Toolbox header submenu to native `<details>/<summary>` accordions.
+- workspace-contract: ran targeted Workspace V2 validation for header/navigation/toolbox/accordion.
+- static validation: ran `git diff --check`.
+
+## Lanes Skipped
+
+- tools index data: SKIP because header data is not sourced from `tools/tools-page-accordions.js`.
+- tool rebuild: SKIP / explicitly out of scope.
+- samples: SKIP / explicitly out of scope.
+- engine/runtime: SKIP / no engine runtime behavior changed.
+
+## Commands
+
+- `git diff --check`
+- `npm run test:workspace-v2 -- --grep "header|navigation|toolbox|accordion"`
+- `rg "<script|<style|\\son[a-z]+\\s*=" GameFoundryStudio/assets/partials/header-nav.html`
+
+## Results
+
+- `git diff --check`: PASS with line-ending warnings only.
+- First Workspace grep run: WARN, the grep also selected an unrelated Storage Inspector test because its title contained `accordions`; the Toolbox accordion test passed.
+- Storage Inspector test behavior was not changed; only that unrelated test title was renamed to avoid the header accordion grep collision.
+- Final `npm run test:workspace-v2 -- --grep "header|navigation|toolbox|accordion"`: PASS, 2 Playwright tests passed.
+- Inline script/style/event handler scan: PASS, no matches.
+
+## Manual Validation
+
+- Open any public/root page that loads `GameFoundryStudio/assets/partials/header-nav.html`.
+- Hover or focus the Toolbox header menu.
+- Confirm each Toolbox section is a native accordion section.
+- Expand Objects and confirm Vector, Sprite, Animated Sprite, and UI.
+- Expand Worlds and confirm Vector, Tilemap, Isometric, and Hybrid.
+- Expand Audio, Input, AI, Colors, and Assets and confirm each resolves to its existing tool path.
+
+## Blocker Scope
+
+- None found in the targeted Toolbox header accordion submenu lane.
+

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1274,7 +1274,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
     await workspaceV2CoverageReporter.writeReport();
   });
 
-  test("navigation toolbox menu shows Toolbox IA grouping", async ({ page }) => {
+  test("navigation toolbox accordion menu shows Toolbox IA grouping", async ({ page }) => {
     const pageErrors = [];
     page.on("pageerror", (error) => {
       pageErrors.push(error.message);
@@ -1286,34 +1286,73 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator(".footer [data-route='tools']")).toHaveText("Toolbox");
       await expect(page.locator(".page-title")).toContainText("The Toolbox");
       const headerToolboxMenu = await page.locator("[data-toolbox-menu]").evaluate((menu) => ({
-        groups: Array.from(menu.querySelectorAll("[data-toolbox-menu-group]"))
+        accordions: Array.from(menu.querySelectorAll("[data-toolbox-menu-accordion]"))
           .map((group) => ({
             label: group.querySelector("[data-toolbox-menu-group-label]")?.textContent.trim(),
             items: Array.from(group.querySelectorAll("[data-toolbox-menu-item]"))
               .map((item) => item.textContent.trim()),
             routes: Array.from(group.querySelectorAll("[data-toolbox-menu-item]"))
-              .map((item) => item.getAttribute("data-route"))
-          })),
-        sections: Array.from(menu.querySelectorAll(":scope > [data-toolbox-menu-section]"))
-          .map((section) => section.textContent.trim()),
-        sectionRoutes: Array.from(menu.querySelectorAll(":scope > [data-toolbox-menu-section]"))
-          .map((section) => section.getAttribute("data-route"))
+              .map((item) => item.getAttribute("data-route")),
+            open: group.open
+          }))
       }));
 
-      expect(headerToolboxMenu.groups).toEqual([
+      expect(headerToolboxMenu.accordions).toEqual([
         {
           label: "Objects",
           items: ["Vector", "Sprite", "Animated Sprite", "UI"],
-          routes: ["object-vector-studio", "asset-studio", "animation-studio", "code-studio"]
+          routes: ["object-vector-studio", "asset-studio", "animation-studio", "code-studio"],
+          open: false
         },
         {
           label: "Worlds",
           items: ["Vector", "Tilemap", "Isometric", "Hybrid"],
-          routes: ["world-vector-studio", "game-builder", "particle-studio", "game-design-studio"]
+          routes: ["world-vector-studio", "game-builder", "particle-studio", "game-design-studio"],
+          open: false
+        },
+        {
+          label: "Audio",
+          items: ["Audio"],
+          routes: ["sound-studio"],
+          open: false
+        },
+        {
+          label: "Input",
+          items: ["Input"],
+          routes: ["input-studio"],
+          open: false
+        },
+        {
+          label: "AI",
+          items: ["AI"],
+          routes: ["ai-assistant"],
+          open: false
+        },
+        {
+          label: "Colors",
+          items: ["Colors"],
+          routes: ["palette-manager"],
+          open: false
+        },
+        {
+          label: "Assets",
+          items: ["Assets"],
+          routes: ["storage-inspector"],
+          open: false
         }
       ]);
-      expect(headerToolboxMenu.sections).toEqual(["Audio", "Input", "AI", "Colors", "Assets"]);
-      expect(headerToolboxMenu.sectionRoutes).toEqual(["sound-studio", "input-studio", "ai-assistant", "palette-manager", "storage-inspector"]);
+      const accordionToggleState = await page.locator("[data-toolbox-menu]").evaluate((menu) => {
+        const objectsAccordion = menu.querySelector("[data-toolbox-menu-accordion]");
+        const summary = objectsAccordion.querySelector("summary");
+        const beforeOpen = objectsAccordion.open;
+        summary.click();
+        const afterOpen = objectsAccordion.open;
+        summary.click();
+        const afterClose = objectsAccordion.open;
+        return { beforeOpen, afterOpen, afterClose };
+      });
+
+      expect(accordionToggleState).toEqual({ beforeOpen: false, afterOpen: true, afterClose: false });
 
       await page.locator("[data-tools-sort='grouped']").click();
       const toolboxState = await page.evaluate(() => ({
@@ -11936,7 +11975,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
     }
   });
 
-  test("launches Storage Inspector V2 with V2 labels, accordions, theme, and delete controls", async ({ page }) => {
+  test("launches Storage Inspector V2 with V2 labels, panels, theme, and delete controls", async ({ page }) => {
     const pageErrors = [];
     await page.setViewportSize({ height: 900, width: 1440 });
     await page.addInitScript(() => {