big restructure

web/js/components/app-toggle-aside-panels.js

@@ -1,3 +1,5 @@
+import { requireEl, warnOnce } from '../core/app-dom.js';
+
 export function initAsidePanels(options = {}) {
   const {
     barSelector = '.aside-icon-bar',
@@ -8,23 +10,38 @@ export function initAsidePanels(options = {}) {
     persistSidebarStateOnActivate = true
   } = options;
 
-  const bar = document.querySelector(barSelector);
+  const bar = requireEl(barSelector, { module: 'aside-panels' });
   if (!bar) return;
 
   const tabs = Array.from(bar.querySelectorAll('[data-aside-target]'));
-  if (!tabs.length) return;
+  if (!tabs.length) {
+    warnOnce('UI_EL_MISSING', 'No aside tabs found', { module: 'aside-panels' });
+    return;
+  }
+  const shortcutItems = Array.from(bar.querySelectorAll('[data-aside-target], [data-aside-shortcut]'));
 
   const panels = Array.from(document.querySelectorAll(panelSelector));
+  if (!panels.length) {
+    warnOnce('UI_EL_MISSING', 'No aside panels found', { module: 'aside-panels' });
+  }
   const titleEl = document.querySelector(titleSelector);
   const toolsHost = document.querySelector(toolsSelector);
   const sidebarController = window.AppSidebar || null;
   const defaultTitle = titleEl?.dataset.asideTitleDefault || titleEl?.textContent || '';
   const storageKey = bar.dataset.asideStorage || '';
+  const isMac = /(Mac|iPhone|iPad|iPod)/i.test(navigator.platform || navigator.userAgent);
+  const shortcutPrefix = isMac ? '⌘' : 'Ctrl+';
 
   const getPanelKey = (panel) => panel?.dataset?.asidePanel || '';
   const getTabKey = (tab) => tab?.dataset?.asideTarget || '';
   const getPanelTools = (panel) => panel?.querySelector('[data-aside-panel-tools]') || null;
   const getTabHref = (tab) => tab?.dataset?.asideHref || '';
+  const isEditableTarget = (target) => {
+    if (!target) return false;
+    if (target.isContentEditable) return true;
+    const tag = target.tagName;
+    return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';
+  };
 
   const initPanelDetails = (panel) => {
     if (!panel || panel.dataset.detailsBound === '1') return;
@@ -101,6 +118,9 @@ export function initAsidePanels(options = {}) {
 
   const openSidebar = (persist) => {
     if (!revealSidebarOnActivate || !sidebarController) return;
+    if (typeof sidebarController.isHidden === 'function' && sidebarController.isHidden()) {
+      sidebarController.show({ persist });
+    }
     if (!sidebarController.isCollapsed()) return;
     sidebarController.open({ persist });
   };
@@ -152,6 +172,19 @@ export function initAsidePanels(options = {}) {
   };
 
   setActive(getInitialKey(), { fromUser: false });
+  document.documentElement.classList.remove('aside-pending');
+  window.AppAsidePanels = {
+    setActive,
+    open: (key) => setActive(key, { fromUser: true })
+  };
+
+  shortcutItems.forEach((item, idx) => {
+    const base = item.dataset.tooltipBase || item.getAttribute('data-tooltip') || item.getAttribute('aria-label') || '';
+    if (!base) return;
+    const shortcutKey = idx === 9 ? '0' : String(idx + 1);
+    item.dataset.tooltipBase = base;
+    item.setAttribute('data-tooltip', `${base} (${shortcutPrefix}${shortcutKey})`);
+  });
 
   tabs.forEach((tab) => {
     tab.addEventListener('click', (event) => {
@@ -176,12 +209,29 @@ export function initAsidePanels(options = {}) {
         return;
       }
       if (isActive && sidebarController) {
-        sidebarController.close({ persist: true });
+        if (sidebarController.isHidden?.()) {
+          sidebarController.show({ persist: true });
+        } else if (typeof sidebarController.hide === 'function') {
+          sidebarController.hide({ persist: true });
+        }
         return;
       }
       setActive(key, { fromUser: true });
     });
   });
+
+  document.addEventListener('keydown', (event) => {
+    if (!(event.metaKey || event.ctrlKey)) return;
+    if (event.altKey) return;
+    if (isEditableTarget(event.target)) return;
+    const key = event.key;
+    if (!/^[0-9]$/.test(key)) return;
+    const index = key === '0' ? 9 : (Number.parseInt(key, 10) - 1);
+    if (index < 0 || index >= shortcutItems.length) return;
+    event.preventDefault();
+    shortcutItems[index].click();
+  });
+
 }
 
 if (document.readyState === 'loading') {