Add collapsible multi-column panels

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() {