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

Author: ToolboxAid

GameFoundryStudio/assets/partials/header-nav.html

@@ -7,23 +7,26 @@
     <nav class="nav-links" aria-label="Main navigation">
       <div class="nav-item">
         <a data-nav-link data-route="tools" href="tools/index.html">Toolbox &#9662;</a>
-        <div class="sub-menu">
-          <a data-nav-link data-route="ai-assistant" href="tools/ai-assistant.html">AI Assistant</a>
-          <a data-nav-link data-route="animation-studio" href="tools/animation-studio.html">Animation Studio</a>
-          <a data-nav-link data-route="asset-studio" href="tools/asset-studio.html">Asset Studio</a>
-          <a data-nav-link data-route="code-studio" href="tools/code-studio.html">Code Studio</a>
-          <a data-nav-link data-route="game-builder" href="tools/game-builder.html">Game Builder</a>
-          <a data-nav-link data-route="game-design-studio" href="tools/game-design-studio.html">Game Design Studio</a>
-          <a data-nav-link data-route="input-studio" href="tools/input-studio.html">Input Studio</a>
-          <a data-nav-link data-route="localization-studio" href="tools/localization-studio/index.html">Localization Studio</a>
-          <a data-nav-link data-route="midi-studio" href="tools/midi-studio.html">MIDI Studio</a>
-          <a data-nav-link data-route="object-vector-studio" href="tools/object-vector-studio.html">Object Vector Studio</a>
-          <a data-nav-link data-route="palette-manager" href="tools/palette-manager.html">Palette Manager</a>
-          <a data-nav-link data-route="particle-studio" href="tools/particle-studio.html">Particle Studio</a>
-          <a data-nav-link data-route="publisher" href="tools/publisher.html">Publish Studio</a>
-          <a data-nav-link data-route="sound-studio" href="tools/sound-studio.html">Sound Studio</a>
-          <a data-nav-link data-route="storage-inspector" href="tools/storage-inspector.html">Storage Inspector</a>
-          <a data-nav-link data-route="world-vector-studio" href="tools/world-vector-studio.html">World Vector Studio</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>
+            <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>
+            <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>
         </div>
       </div>
       <div class="nav-item">

docs/dev/reports/toolbox_header_menu_structure_correction.md

@@ -0,0 +1,66 @@
+# PR_26152_254 Toolbox Header Menu Structure Correction
+
+Status: PASS
+
+## Scope
+
+- Corrected the user-facing header Toolbox submenu structure.
+- Kept internal `tools/` paths, toolState names, tool registry names, and technical contract names unchanged.
+- Did not modify `tools/tools-page-accordions.js`.
+- Did not rebuild tools or touch samples.
+
+## Header Menu Structure
+
+- Toolbox
+  - Objects
+    - Vector
+    - Sprite
+    - Animated Sprite
+    - UI
+  - Worlds
+    - Vector
+    - Tilemap
+    - Isometric
+    - Hybrid
+  - Audio
+  - Input
+  - AI
+  - Colors
+  - Assets
+
+## Lanes Executed
+
+- header/navigation: updated `GameFoundryStudio/assets/partials/header-nav.html`.
+- workspace-contract: validated the header/navigation/toolbox grep in Workspace V2 targeted Playwright.
+- 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"`
+
+## Results
+
+- `git diff --check`: PASS with line-ending warnings only.
+- `npm run test:workspace-v2 -- --grep "header|navigation|toolbox"`: PASS, 2 Playwright tests passed.
+
+## Manual Validation
+
+- Open any public/root page that loads `GameFoundryStudio/assets/partials/header-nav.html`.
+- Hover or focus the Toolbox header menu.
+- Confirm the menu shows Objects with Vector, Sprite, Animated Sprite, UI.
+- Confirm the menu shows Worlds with Vector, Tilemap, Isometric, Hybrid.
+- Confirm Audio, Input, AI, Colors, and Assets appear as top-level Toolbox entries.
+- Confirm no `tools/` path or technical toolState naming changed.
+
+## Blocker Scope
+
+- None found in the targeted header/navigation correction lane.
+

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1285,6 +1285,35 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("[data-nav-link][data-route='tools']")).toContainText("Toolbox");
       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]"))
+          .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"))
+      }));
+
+      expect(headerToolboxMenu.groups).toEqual([
+        {
+          label: "Objects",
+          items: ["Vector", "Sprite", "Animated Sprite", "UI"],
+          routes: ["object-vector-studio", "asset-studio", "animation-studio", "code-studio"]
+        },
+        {
+          label: "Worlds",
+          items: ["Vector", "Tilemap", "Isometric", "Hybrid"],
+          routes: ["world-vector-studio", "game-builder", "particle-studio", "game-design-studio"]
+        }
+      ]);
+      expect(headerToolboxMenu.sections).toEqual(["Audio", "Input", "AI", "Colors", "Assets"]);
+      expect(headerToolboxMenu.sectionRoutes).toEqual(["sound-studio", "input-studio", "ai-assistant", "palette-manager", "storage-inspector"]);
 
       await page.locator("[data-tools-sort='grouped']").click();
       const toolboxState = await page.evaluate(() => ({