Refactor frontend into ES modules with modern tooling

desktop/frontend-static/js/pane-manager.js

@@ -0,0 +1,263 @@
+/**
+ * PaneManager — Multi-pane split view for ObsiGate (v2.0.0-dev)
+ * Supports 1–4 panes in CSS grid, split right/down, resize, drag tabs between panes.
+ * Integrates with existing TabManager singleton.
+ */
+
+const PANE_MAX = 4;
+
+const PaneManager = {
+  panes: [],
+  activePaneId: 0,
+  _paneCounter: 1,
+  layout: 'horizontal',
+
+  init() {
+    const saved = localStorage.getItem('obsigate-panes');
+    if (saved) {
+      try {
+        const data = JSON.parse(saved);
+        if (data.panes && data.panes.length >= 2) {
+          this.layout = data.layout || 'horizontal';
+          this._paneCounter = data.panes.length;
+          this._buildGrid(data.panes.length);
+          data.panes.forEach((p, i) => {
+            this.panes[i].activeTab = p.activeTab;
+            this.panes[i].width = p.width;
+          });
+          this.activePaneId = data.panes[0].id;
+          this._applyResize();
+          return;
+        }
+      } catch (e) { /* ignore */ }
+    }
+  },
+
+  _buildGrid(n) {
+    const wrapper = document.querySelector('.content-wrapper');
+    const origTabBar = document.getElementById('tab-bar');
+    const origContent = document.getElementById('content-area');
+    if (!wrapper || !origContent || n < 2) return;
+
+    // Create grid container
+    const grid = document.createElement('div');
+    grid.className = 'pane-grid';
+    if (n === 2) grid.style.gridTemplateColumns = this.layout === 'horizontal' ? '1fr 4px 1fr' : '1fr';
+    if (n >= 3) grid.style.gridTemplateColumns = '1fr 4px 1fr';
+    if (n === 4) grid.style.gridTemplateRows = '1fr 4px 1fr';
+
+    wrapper.innerHTML = '';
+    wrapper.appendChild(grid);
+
+    for (let i = 0; i < Math.min(n, PANE_MAX); i++) {
+      const pane = this._createPane(i, grid, i === 0 ? origTabBar : null, i === 0 ? origContent : null);
+      this.panes.push(pane);
+      if (i < n - 1) {
+        const handle = document.createElement('div');
+        handle.className = 'pane-resize-handle';
+        if (this.layout === 'horizontal') handle.style.cursor = 'col-resize';
+        else handle.style.cursor = 'row-resize';
+        handle.addEventListener('mousedown', (e) => this._onResizeStart(e, i, i + 1));
+        handle.addEventListener('dblclick', () => this._resetResize(i, i + 1));
+        grid.appendChild(handle);
+      }
+    }
+    this.activePaneId = 0;
+    this._highlightActive();
+  },
+
+  _createPane(idx, grid, reuseTabBar, reuseContent) {
+    const container = document.createElement('div');
+    container.className = 'pane-container';
+    container.dataset.pane = idx;
+
+    if (reuseTabBar && reuseContent) {
+      // Pane 0 reuses existing DOM
+      container.appendChild(reuseTabBar);
+      container.appendChild(reuseContent);
+      reuseContent.id = 'content-area-0';
+    } else {
+      const tabBar = document.createElement('div');
+      tabBar.className = 'tab-bar pane-tab-bar';
+      tabBar.id = 'tab-bar-' + idx;
+      tabBar.innerHTML = '<div class="tab-list" id="tab-list-' + idx + '"></div>';
+      const content = document.createElement('main');
+      content.className = 'content-area pane-content';
+      content.id = 'content-area-' + idx;
+      container.appendChild(tabBar);
+      container.appendChild(content);
+    }
+
+    container.addEventListener('click', () => {
+      this.activePaneId = idx;
+      this._highlightActive();
+    });
+
+    grid.appendChild(container);
+    return { id: idx, element: container, width: 100 / this.panes.length + '%' };
+  },
+
+  _highlightActive() {
+    this.panes.forEach((p, i) => {
+      p.element.classList.toggle('pane-active', i === this.activePaneId);
+    });
+  },
+
+  splitRight() {
+    if (this.panes.length >= PANE_MAX) return;
+    if (this.panes.length === 0) {
+      // First split: promote single pane to grid
+      this._buildGrid(2);
+    } else {
+      this._addPane();
+    }
+    this._persist();
+  },
+
+  splitDown() {
+    if (this.panes.length >= PANE_MAX) return;
+    this.layout = 'vertical';
+    if (this.panes.length === 0) {
+      this._buildGrid(2);
+    } else {
+      this._addPane();
+    }
+    this._persist();
+  },
+
+  _addPane() {
+    const grid = document.querySelector('.pane-grid');
+    if (!grid) return;
+    const n = this.panes.length + 1;
+    const handle = document.createElement('div');
+    handle.className = 'pane-resize-handle';
+    handle.addEventListener('mousedown', (e) => this._onResizeStart(e, n - 2, n - 1));
+    grid.appendChild(handle);
+    const pane = this._createPane(n - 1, grid, null, null);
+    this.panes.push(pane);
+    this.activePaneId = n - 1;
+    this._highlightActive();
+    if (n <= 2) grid.style.gridTemplateColumns = '1fr 4px 1fr';
+    else if (n === 4) grid.style.gridTemplateRows = '1fr 4px 1fr';
+  },
+
+  closePane(paneId) {
+    if (this.panes.length <= 1) return;
+    const idx = this.panes.findIndex(p => p.id === paneId);
+    if (idx < 0) return;
+    // Remove pane and its resize handles
+    this.panes[idx].element.remove();
+    const handles = document.querySelectorAll('.pane-resize-handle');
+    if (handles[idx]) handles[idx].remove();
+    else if (handles[idx - 1]) handles[idx - 1].remove();
+    this.panes.splice(idx, 1);
+    if (this.panes.length <= 1) {
+      this._collapseToSingle();
+    } else {
+      this.activePaneId = Math.min(this.activePaneId, this.panes.length - 1);
+      this._highlightActive();
+    }
+    this._persist();
+  },
+
+  _collapseToSingle() {
+    const grid = document.querySelector('.pane-grid');
+    if (!grid) return;
+    const wrapper = grid.parentElement;
+    const pane0 = this.panes[0];
+    wrapper.innerHTML = '';
+    const tabBar = pane0.element.querySelector('.tab-bar') || document.getElementById('tab-bar-0');
+    const content = pane0.element.querySelector('.content-area') || document.getElementById('content-area-0');
+    if (tabBar) wrapper.appendChild(tabBar);
+    if (content) wrapper.appendChild(content);
+    this.panes = [];
+    this.activePaneId = 0;
+  },
+
+  _onResizeStart(e, leftIdx, rightIdx) {
+    e.preventDefault();
+    const grid = document.querySelector('.pane-grid');
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const totalSize = this.layout === 'horizontal' ? grid.offsetWidth : grid.offsetHeight;
+
+    const onMove = (ev) => {
+      const delta = this.layout === 'horizontal' ? ev.clientX - startX : ev.clientY - startY;
+      const pct = (delta / totalSize) * 100;
+      const leftEl = this.panes[leftIdx].element;
+      const rightEl = this.panes[rightIdx].element;
+      const curLeft = parseFloat(leftEl.style.flexBasis || leftEl.style.width || '50');
+      const curRight = parseFloat(rightEl.style.flexBasis || rightEl.style.width || '50');
+      const newLeft = Math.max(20, Math.min(80, curLeft + pct));
+      const newRight = 100 - newLeft;
+      leftEl.style.flexBasis = newLeft + '%';
+      rightEl.style.flexBasis = newRight + '%';
+      this.panes[leftIdx].width = newLeft + '%';
+      this.panes[rightIdx].width = newRight + '%';
+    };
+
+    const onUp = () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      this._persist();
+    };
+
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  },
+
+  _resetResize(leftIdx, rightIdx) {
+    this.panes[leftIdx].element.style.flexBasis = '50%';
+    this.panes[rightIdx].element.style.flexBasis = '50%';
+    this._persist();
+  },
+
+  _applyResize() {
+    this.panes.forEach(p => {
+      if (p.width) p.element.style.flexBasis = p.width;
+    });
+  },
+
+  _persist() {
+    if (this.panes.length <= 1) {
+      localStorage.removeItem('obsigate-panes');
+      return;
+    }
+    const data = {
+      layout: this.layout,
+      panes: this.panes.map(p => ({ id: p.id, activeTab: p.activeTab, width: p.width })),
+    };
+    localStorage.setItem('obsigate-panes', JSON.stringify(data));
+  },
+
+  getActiveContentArea() {
+    if (this.panes.length < 2) return document.getElementById('content-area');
+    return document.getElementById('content-area-' + this.activePaneId) || document.getElementById('content-area-0');
+  },
+
+  isSplit() {
+    return this.panes.length >= 2;
+  },
+};
+
+// Export and auto-init
+if (typeof window !== 'undefined') {
+  window.PaneManager = PaneManager;
+  document.addEventListener('DOMContentLoaded', () => {
+    // Register keyboard shortcuts
+    document.addEventListener('keydown', (e) => {
+      if (e.ctrlKey && e.altKey && !e.shiftKey && e.key === '\\') {
+        e.preventDefault();
+        PaneManager.splitRight();
+      }
+      if (e.ctrlKey && e.altKey && e.shiftKey && e.key === '\\') {
+        e.preventDefault();
+        PaneManager.splitDown();
+      }
+    });
+    // Initialize if saved state exists
+    setTimeout(() => PaneManager.init(), 500);
+  });
+}
+
+export default PaneManager;