@mooncompany/uplink-chat 0.5.0

package/public/js/split-resize.js

@@ -0,0 +1,211 @@
+/**
+ * Split View Drag Resize Handler
+ * Manages the drag handle for resizing split-view panes
+ * Targets .split-chat-container (the flex container inside .app)
+ */
+
+import { UplinkCore } from './core.js';
+
+const STORAGE_KEY = 'uplink-split-ratio';
+const MIN_RATIO = 0.3;
+const MAX_RATIO = 0.7;
+
+let isDragging = false;
+let container = null;
+
+/**
+ * Initialize drag resize functionality
+ */
+function init() {
+  const handle = document.getElementById('splitDragHandle');
+  container = document.getElementById('splitChatContainer');
+  
+  if (!handle || !container) {
+    console.warn('[split-resize] Required elements not found');
+    return;
+  }
+
+  // Restore saved ratio
+  restoreRatio();
+
+  // Mouse events
+  handle.addEventListener('mousedown', handleMouseDown);
+  document.addEventListener('mousemove', handleMouseMove);
+  document.addEventListener('mouseup', handleMouseUp);
+
+  // Touch events for tablets
+  handle.addEventListener('touchstart', handleTouchStart, { passive: false });
+  document.addEventListener('touchmove', handleTouchMove, { passive: false });
+  document.addEventListener('touchend', handleTouchEnd);
+
+  // Keyboard accessibility (arrow keys to resize)
+  handle.addEventListener('keydown', handleKeyDown);
+  handle.setAttribute('tabindex', '0');
+  handle.setAttribute('role', 'separator');
+}
+
+/**
+ * Restore split ratio from localStorage
+ */
+function restoreRatio() {
+  try {
+    const savedRatio = localStorage.getItem(STORAGE_KEY);
+    if (savedRatio !== null) {
+      const ratio = parseFloat(savedRatio);
+      if (!isNaN(ratio) && ratio >= MIN_RATIO && ratio <= MAX_RATIO) {
+        setSplitRatio(ratio);
+      }
+    }
+  } catch (err) {
+    console.warn('[split-resize] Failed to restore ratio:', err);
+  }
+}
+
+/**
+ * Save split ratio to localStorage
+ */
+function saveRatio(ratio) {
+  try {
+    localStorage.setItem(STORAGE_KEY, ratio.toString());
+  } catch (err) {
+    console.warn('[split-resize] Failed to save ratio:', err);
+  }
+}
+
+/**
+ * Set the split ratio CSS custom property on the container
+ */
+function setSplitRatio(ratio) {
+  const clamped = Math.max(MIN_RATIO, Math.min(MAX_RATIO, ratio));
+  if (container) {
+    container.style.setProperty('--split-ratio', clamped.toString());
+  }
+  // Also set on :root for any global references
+  document.documentElement.style.setProperty('--split-ratio', clamped.toString());
+}
+
+/**
+ * Calculate ratio from mouse/touch X position relative to the container
+ */
+function calculateRatioFromX(clientX) {
+  if (!container) return 0.5;
+  const rect = container.getBoundingClientRect();
+  const x = clientX - rect.left;
+  return x / rect.width;
+}
+
+/**
+ * Mouse down handler
+ */
+function handleMouseDown(e) {
+  e.preventDefault();
+  isDragging = true;
+
+  e.currentTarget.classList.add('dragging');
+  document.body.classList.add('split-dragging');
+  document.body.style.cursor = 'col-resize';
+  document.body.style.userSelect = 'none';
+}
+
+/**
+ * Mouse move handler
+ */
+function handleMouseMove(e) {
+  if (!isDragging) return;
+  const ratio = calculateRatioFromX(e.clientX);
+  setSplitRatio(ratio);
+}
+
+/**
+ * Mouse up handler
+ */
+function handleMouseUp() {
+  if (!isDragging) return;
+  isDragging = false;
+
+  const handle = document.getElementById('splitDragHandle');
+  if (handle) handle.classList.remove('dragging');
+  document.body.classList.remove('split-dragging');
+  
+  document.body.style.cursor = '';
+  document.body.style.userSelect = '';
+
+  // Save final ratio
+  const finalRatio = parseFloat(
+    getComputedStyle(container || document.documentElement).getPropertyValue('--split-ratio') || '0.5'
+  );
+  saveRatio(finalRatio);
+}
+
+/**
+ * Touch start handler
+ */
+function handleTouchStart(e) {
+  if (e.touches.length !== 1) return;
+  e.preventDefault();
+  isDragging = true;
+  e.currentTarget.classList.add('dragging');
+  document.body.classList.add('split-dragging');
+}
+
+/**
+ * Touch move handler
+ */
+function handleTouchMove(e) {
+  if (!isDragging || e.touches.length !== 1) return;
+  e.preventDefault();
+  const ratio = calculateRatioFromX(e.touches[0].clientX);
+  setSplitRatio(ratio);
+}
+
+/**
+ * Touch end handler
+ */
+function handleTouchEnd() {
+  if (!isDragging) return;
+  isDragging = false;
+
+  const handle = document.getElementById('splitDragHandle');
+  if (handle) handle.classList.remove('dragging');
+  document.body.classList.remove('split-dragging');
+
+  const finalRatio = parseFloat(
+    getComputedStyle(container || document.documentElement).getPropertyValue('--split-ratio') || '0.5'
+  );
+  saveRatio(finalRatio);
+}
+
+/**
+ * Keyboard handler (arrow keys to resize)
+ */
+function handleKeyDown(e) {
+  const currentRatio = parseFloat(
+    getComputedStyle(container || document.documentElement).getPropertyValue('--split-ratio') || '0.5'
+  );
+  let newRatio = currentRatio;
+  let handled = false;
+
+  switch(e.key) {
+    case 'ArrowLeft':  newRatio -= 0.05; handled = true; break;
+    case 'ArrowRight': newRatio += 0.05; handled = true; break;
+    case 'Home':       newRatio = MIN_RATIO; handled = true; break;
+    case 'End':        newRatio = MAX_RATIO; handled = true; break;
+    case 'Enter':
+    case ' ':          newRatio = 0.5; handled = true; break;
+  }
+
+  if (handled) {
+    e.preventDefault();
+    setSplitRatio(newRatio);
+    saveRatio(newRatio);
+  }
+}
+
+// Register with core for coordinated initialization
+UplinkCore.registerModule('split-resize', init);
+
+// Export for debugging
+export const SplitResize = { setSplitRatio, saveRatio, restoreRatio };
+
+// Backward compat: assign to window
+window.SplitResize = SplitResize;

package/public/js/splitview.js

@@ -0,0 +1,340 @@
+// ============================================
+// SPLIT VIEW - Desktop panel management
+// ============================================
+
+import { UplinkCore } from './core.js';
+
+const DESKTOP_BREAKPOINT = 1024;
+const MAX_INIT_RETRIES = 5;
+const INIT_RETRY_DELAY_MS = 100;
+let initRetryCount = 0;
+
+let currentPanel = null;
+let layoutWrapper = null;
+let sidePanel = null;
+let sidePanelTitle = null;
+let sidePanelContent = null;
+let sidePanelClose = null;
+
+// Panel configurations - titles match Activity panel style (uppercase, no emoji)
+const panels = {
+  satellites: {
+    title: 'SATELLITES',
+    getContent: () => document.querySelector('.satellite-navigator')
+  },
+  activity: {
+    title: 'ACTIVITY', 
+    getContent: () => document.querySelector('.dev-panel')
+  },
+  settings: {
+    title: 'SETTINGS',
+    getContent: () => document.querySelector('.settings-panel')
+  }
+};
+
+function isDesktop() {
+  return window.innerWidth >= DESKTOP_BREAKPOINT;
+}
+
+function init() {
+  layoutWrapper = document.querySelector('.layout-wrapper');
+  sidePanel = document.getElementById('sidePanel');
+  sidePanelTitle = document.getElementById('sidePanelTitle');
+  sidePanelContent = document.getElementById('sidePanelContent');
+  sidePanelClose = document.getElementById('sidePanelClose');
+
+  if (!layoutWrapper || !sidePanel) {
+    if (initRetryCount < MAX_INIT_RETRIES) {
+      initRetryCount++;
+      logger.warn(`Split view: Required elements not found, retrying (${initRetryCount}/${MAX_INIT_RETRIES})...`);
+      setTimeout(init, INIT_RETRY_DELAY_MS * initRetryCount);
+      return;
+    }
+    logger.warn('Split view: Required elements not found after max retries');
+    return;
+  }
+
+  // Close button handler
+  sidePanelClose?.addEventListener('click', closePanel);
+
+  // Escape key to close
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && currentPanel) {
+      closePanel();
+    }
+  });
+
+  // Handle resize - close panel if going to mobile
+  // Debounced to avoid excessive layout checks during resize
+  window.addEventListener('resize', UplinkCore.debounce(() => {
+    if (!isDesktop() && currentPanel) {
+      closePanel();
+    }
+  }, 150));
+
+  // Intercept panel button clicks
+  setupPanelInterceptors();
+}
+
+function setupPanelInterceptors() {
+  // Satellites button
+  const satellitesBtn = document.getElementById('satellitesBtn');
+  if (satellitesBtn) {
+    satellitesBtn.addEventListener('click', (e) => {
+      if (isDesktop()) {
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        togglePanel('satellites');
+      }
+    }, true); // Capture phase to intercept before other handlers
+  }
+
+  // Activity button
+  const activityBtn = document.getElementById('activityBtn');
+  if (activityBtn) {
+    activityBtn.addEventListener('click', (e) => {
+      if (isDesktop()) {
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        togglePanel('activity');
+      }
+    }, true);
+  }
+
+  // Settings button
+  const settingsBtn = document.getElementById('settingsBtn');
+  if (settingsBtn) {
+    settingsBtn.addEventListener('click', (e) => {
+      if (isDesktop()) {
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        togglePanel('settings');
+      }
+    }, true);
+  }
+}
+
+function togglePanel(panelName) {
+  console.log('[SplitView] togglePanel called, panelName:', panelName, 'currentPanel:', currentPanel);
+  if (currentPanel === panelName) {
+    closePanel();
+  } else {
+    openPanel(panelName);
+  }
+}
+
+function openPanel(panelName) {
+  const config = panels[panelName];
+  if (!config) return;
+
+  // Close any existing panel first
+  if (currentPanel && currentPanel !== panelName) {
+    restorePanelContent(currentPanel);
+  }
+
+  currentPanel = panelName;
+  
+  // Update title
+  sidePanelTitle.textContent = config.title;
+
+  // Get the panel content element
+  // For dynamically created panels, we may need to wait or trigger their creation
+  let contentEl = config.getContent();
+  
+  if (contentEl) {
+    // Move content into side panel (CSS handles the styling override)
+    sidePanelContent.innerHTML = '';
+    sidePanelContent.appendChild(contentEl);
+    // Ensure it's visible
+    contentEl.classList.add('visible');
+  } else {
+    // Panel not created yet - trigger its creation
+    triggerPanelCreation(panelName);
+    // Try again after a short delay
+    setTimeout(() => {
+      contentEl = config.getContent();
+      if (contentEl) {
+        sidePanelContent.innerHTML = '';
+        sidePanelContent.appendChild(contentEl);
+        contentEl.classList.add('visible');
+      }
+    }, 50);
+  }
+
+  // Add class to activate split layout (body for CSS 70/30 split)
+  document.body.classList.add('panel-open');
+  layoutWrapper.classList.add('panel-open');
+  sidePanel.classList.add('visible');
+
+  // Update button states
+  updateButtonStates(panelName);
+}
+
+function closePanel() {
+  console.log('[SplitView] closePanel called, currentPanel:', currentPanel);
+  console.trace('[SplitView] closePanel stack trace');
+  if (!currentPanel) return;
+
+  restorePanelContent(currentPanel);
+  
+  document.body.classList.remove('panel-open');
+  layoutWrapper.classList.remove('panel-open');
+  sidePanel.classList.remove('visible');
+  
+  updateButtonStates(null);
+  currentPanel = null;
+}
+
+function restorePanelContent(panelName) {
+  const config = panels[panelName];
+  if (!config) return;
+
+  const contentEl = config.getContent();
+  if (contentEl && sidePanelContent.contains(contentEl)) {
+    // Move back to body and hide
+    document.body.appendChild(contentEl);
+    contentEl.classList.remove('visible');
+  }
+}
+
+function triggerPanelCreation(panelName) {
+  // Dispatch a custom event that the panel modules can listen to
+  // or directly call their init functions if available
+  if (panelName === 'satellites' && window.UplinkSatellites) {
+    window.UplinkSatellites.toggleNavigator();
+  } else if (panelName === 'activity' && window.UplinkDeveloper) {
+    window.UplinkDeveloper.show();
+  } else if (panelName === 'settings') {
+    // Settings panel is static in HTML, just show it
+    const settingsPanel = document.getElementById('settingsPanel');
+    if (settingsPanel) {
+      settingsPanel.classList.add('visible');
+    }
+  }
+}
+
+function updateButtonStates(activePanel) {
+  const buttons = {
+    satellites: document.getElementById('satellitesBtn'),
+    activity: document.getElementById('activityBtn'),
+    settings: document.getElementById('settingsBtn')
+  };
+
+  Object.entries(buttons).forEach(([name, btn]) => {
+    if (btn) {
+      btn.classList.toggle('active', name === activePanel);
+    }
+  });
+}
+
+// ============================================
+// DUAL CHAT (SPLIT VIEW)
+// ============================================
+
+let splitActive = false;
+
+function setupSplitViewButton() {
+  const splitBtn = document.getElementById('splitViewBtn');
+  if (!splitBtn) return;
+
+  splitBtn.addEventListener('click', () => {
+    if (!isDesktop()) return;
+    toggleSplitView();
+  });
+
+  // Close button in secondary pane
+  const closeBtn = document.getElementById('splitSecondaryClose');
+  if (closeBtn) {
+    closeBtn.addEventListener('click', () => closeSplitView());
+  }
+
+  // Switch session button listener is handled by split-chat.js
+  // (removed duplicate listener to prevent double-firing)
+}
+
+function toggleSplitView() {
+  if (splitActive) {
+    closeSplitView();
+  } else {
+    openSplitView();
+  }
+}
+
+function openSplitView() {
+  if (!isDesktop()) return;
+  
+  splitActive = true;
+  document.body.classList.add('split-view-active');
+
+  // Show the secondary pane and drag handle
+  const secondary = document.getElementById('splitSecondary');
+  const dragHandle = document.getElementById('splitDragHandle');
+  if (secondary) secondary.style.display = 'flex';
+  if (dragHandle) dragHandle.style.display = 'block';
+
+  // Update button state
+  const splitBtn = document.getElementById('splitViewBtn');
+  if (splitBtn) splitBtn.classList.add('active');
+
+  // Show the session picker if no session is active
+  if (window.UplinkSplitChat && !window.UplinkSplitChat.isActive()) {
+    window.UplinkSplitChat.showPicker();
+  }
+}
+
+function closeSplitView() {
+  splitActive = false;
+  document.body.classList.remove('split-view-active');
+
+  // Hide the secondary pane and drag handle
+  const secondary = document.getElementById('splitSecondary');
+  const dragHandle = document.getElementById('splitDragHandle');
+  if (secondary) secondary.style.display = 'none';
+  if (dragHandle) dragHandle.style.display = 'none';
+
+  // Update button state
+  const splitBtn = document.getElementById('splitViewBtn');
+  if (splitBtn) splitBtn.classList.remove('active');
+
+  // Close the secondary session
+  if (window.UplinkSplitChat) {
+    window.UplinkSplitChat.closeSession();
+  }
+}
+
+function isSplitActive() {
+  return splitActive;
+}
+
+// Combined init: core init + split view button setup
+function initWithSplitView() {
+  init();
+  setupSplitViewButton();
+
+  window.addEventListener('resize', UplinkCore.debounce(() => {
+    if (!isDesktop() && splitActive) {
+      closeSplitView();
+    }
+  }, 150));
+}
+
+// Expose for debugging
+export const UplinkSplitView = {
+  openPanel,
+  closePanel,
+  togglePanel,
+  isDesktop,
+  getCurrentPanel: () => currentPanel,
+  // Dual chat
+  openSplitView,
+  closeSplitView,
+  toggleSplitView,
+  isSplitActive
+};
+
+// Backward compat: assign to window
+window.UplinkSplitView = UplinkSplitView;
+
+// Register with core for coordinated initialization
+UplinkCore.registerModule('splitview', initWithSplitView);
+