Add collapsible multi-column panels

public/app.js

@@ -50,6 +50,9 @@ const testLocalDbButton = document.querySelector("#testLocalDbButton");
 const localDbTestResult = document.querySelector("#localDbTestResult");
 const lightContrastSelect = document.querySelector("#lightContrastSelect");
 const darkContrastSelect = document.querySelector("#darkContrastSelect");
+const catalogScreen = document.querySelector(".catalog-screen");
+const secondaryPanelToggle = document.querySelector("#secondaryPanelToggle");
+const mainWorkspaceToggle = document.querySelector("#mainWorkspaceToggle");
 const nativeFetch = window.fetch.bind(window);
 window.fetch = (input, init = {}) => {
     const url = typeof input === "string" ? input : input.url;
@@ -164,6 +167,8 @@ loadProductButton.addEventListener("click", loadProductInfoForCurrentProduct);
 findSourcesButton.addEventListener("click", findSourcesForCurrentProduct);
 getPicturesButton.addEventListener("click", getPicturesForCurrentProduct);
 parserDrawerToggle.addEventListener("click", toggleParserDrawer);
+secondaryPanelToggle.addEventListener("click", toggleSecondaryPanel);
+mainWorkspaceToggle.addEventListener("click", toggleMainWorkspace);
 sidebarOpenButton.addEventListener("click", openSidebar);
 sidebarCloseButton.addEventListener("click", closeSidebar);
 sidebarOverlay.addEventListener("click", closeSidebar);
@@ -855,6 +860,7 @@ function openSidebar() {
     sidebarOpenButton.hidden = true;
     sidebarOpenButton.setAttribute("aria-expanded", "true");
     sidebarDrawer.setAttribute("aria-hidden", "false");
+    catalogScreen.classList.remove("sidebar-collapsed");
 }
 function closeSidebar() {
     sidebarDrawer.classList.remove("is-open");
@@ -862,6 +868,21 @@ function closeSidebar() {
     sidebarOpenButton.hidden = false;
     sidebarOpenButton.setAttribute("aria-expanded", "false");
     sidebarDrawer.setAttribute("aria-hidden", "true");
+    catalogScreen.classList.add("sidebar-collapsed");
+}
+function toggleSecondaryPanel() {
+    const isCollapsed = catalogScreen.classList.toggle("secondary-collapsed");
+    secondaryPanelToggle.setAttribute("aria-expanded", String(!isCollapsed));
+    secondaryPanelToggle.setAttribute("aria-label", isCollapsed ? "Expand product details" : "Collapse product details");
+    secondaryPanelToggle.title = isCollapsed ? "Expand product details" : "Collapse product details";
+    secondaryPanelToggle.textContent = isCollapsed ? "›" : "‹";
+}
+function toggleMainWorkspace() {
+    const isCollapsed = catalogScreen.classList.toggle("workspace-collapsed");
+    mainWorkspaceToggle.setAttribute("aria-expanded", String(!isCollapsed));
+    mainWorkspaceToggle.setAttribute("aria-label", isCollapsed ? "Expand main workspace" : "Collapse main workspace");
+    mainWorkspaceToggle.title = isCollapsed ? "Expand main workspace" : "Collapse main workspace";
+    mainWorkspaceToggle.textContent = isCollapsed ? "‹" : "›";
 }
 function loadTheme() {
     const isDark = localStorage.getItem("catalog-maker:theme") === "dark";

public/app.ts

@@ -50,6 +50,9 @@ const testLocalDbButton = document.querySelector("#testLocalDbButton");
 const localDbTestResult = document.querySelector("#localDbTestResult");
 const lightContrastSelect = document.querySelector("#lightContrastSelect");
 const darkContrastSelect = document.querySelector("#darkContrastSelect");
+const catalogScreen = document.querySelector(".catalog-screen");
+const secondaryPanelToggle = document.querySelector("#secondaryPanelToggle");
+const mainWorkspaceToggle = document.querySelector("#mainWorkspaceToggle");
 
 const nativeFetch = window.fetch.bind(window);
 window.fetch = (input, init = {}) => {
@@ -170,6 +173,8 @@ loadProductButton.addEventListener("click", loadProductInfoForCurrentProduct);
 findSourcesButton.addEventListener("click", findSourcesForCurrentProduct);
 getPicturesButton.addEventListener("click", getPicturesForCurrentProduct);
 parserDrawerToggle.addEventListener("click", toggleParserDrawer);
+secondaryPanelToggle.addEventListener("click", toggleSecondaryPanel);
+mainWorkspaceToggle.addEventListener("click", toggleMainWorkspace);
 sidebarOpenButton.addEventListener("click", openSidebar);
 sidebarCloseButton.addEventListener("click", closeSidebar);
 sidebarOverlay.addEventListener("click", closeSidebar);
@@ -942,6 +947,7 @@ function openSidebar() {
   sidebarOpenButton.hidden = true;
   sidebarOpenButton.setAttribute("aria-expanded", "true");
   sidebarDrawer.setAttribute("aria-hidden", "false");
+  catalogScreen.classList.remove("sidebar-collapsed");
 }
 
 function closeSidebar() {
@@ -950,6 +956,23 @@ function closeSidebar() {
   sidebarOpenButton.hidden = false;
   sidebarOpenButton.setAttribute("aria-expanded", "false");
   sidebarDrawer.setAttribute("aria-hidden", "true");
+  catalogScreen.classList.add("sidebar-collapsed");
+}
+
+function toggleSecondaryPanel() {
+  const isCollapsed = catalogScreen.classList.toggle("secondary-collapsed");
+  secondaryPanelToggle.setAttribute("aria-expanded", String(!isCollapsed));
+  secondaryPanelToggle.setAttribute("aria-label", isCollapsed ? "Expand product details" : "Collapse product details");
+  secondaryPanelToggle.title = isCollapsed ? "Expand product details" : "Collapse product details";
+  secondaryPanelToggle.textContent = isCollapsed ? "›" : "‹";
+}
+
+function toggleMainWorkspace() {
+  const isCollapsed = catalogScreen.classList.toggle("workspace-collapsed");
+  mainWorkspaceToggle.setAttribute("aria-expanded", String(!isCollapsed));
+  mainWorkspaceToggle.setAttribute("aria-label", isCollapsed ? "Expand main workspace" : "Collapse main workspace");
+  mainWorkspaceToggle.title = isCollapsed ? "Expand main workspace" : "Collapse main workspace";
+  mainWorkspaceToggle.textContent = isCollapsed ? "‹" : "›";
 }
 
 function loadTheme() {

public/index.html

@@ -97,12 +97,20 @@
       </aside>
 
       <section class="product-panel secondary-panel" aria-label="Product details">
+        <div class="column-header">
+          <span>Product details</span>
+          <button class="column-toggle" id="secondaryPanelToggle" type="button" aria-expanded="true" aria-controls="fieldGrid" aria-label="Collapse product details" title="Collapse product details">‹</button>
+        </div>
         <div class="field-grid" id="fieldGrid"></div>
       </section>
 
       <section class="data-panel main-workspace" aria-label="Catalog workspace">
+        <div class="column-header workspace-header">
+          <span>Main workspace</span>
+          <button class="column-toggle" id="mainWorkspaceToggle" type="button" aria-expanded="true" aria-controls="variantGrid" aria-label="Collapse main workspace" title="Collapse main workspace">›</button>
+        </div>
         <div class="table-wrap">
-          <div class="variant-grid" role="table" aria-label="Product combinations">
+          <div class="variant-grid" id="variantGrid" role="table" aria-label="Product combinations">
             <div class="variant-header" id="variantHeader" role="row"></div>
             <div class="variant-rows" id="variantRows" role="rowgroup">
               <div class="empty-row" id="emptyTableMessage" role="row">Select manufacturer to load data.</div>