@mooncompany/uplink-chat 0.5.0

package/public/js/shortcuts.js

@@ -0,0 +1,381 @@
+// ============================================
+// KEYBOARD SHORTCUTS MODULE
+// Keyboard shortcuts panel and customization
+// ============================================
+
+const STORAGE_KEY = 'uplink-shortcuts';
+
+// Default shortcuts
+const defaultShortcuts = {
+  send: { key: 'Enter', description: 'Send message' },
+  newLine: { key: 'Shift+Enter', description: 'New line in message' },
+  clearChat: { key: 'Ctrl+Shift+Delete', description: 'Clear chat' },
+  toggleVoice: { key: 'Ctrl+Shift+V', description: 'Toggle voice mode' },
+  focusInput: { key: 'Ctrl+/', description: 'Focus message input' },
+  openSettings: { key: 'Ctrl+,', description: 'Open settings' },
+  closePanel: { key: 'Escape', description: 'Close panel/cancel' },
+  showShortcuts: { key: 'Ctrl+Shift+/', description: 'Show shortcuts' }
+};
+
+// Current shortcuts (may be customized)
+let shortcuts = { ...defaultShortcuts };
+
+// Panel element
+let panelEl = null;
+
+function init() {
+  // Load saved shortcuts
+  loadShortcuts();
+
+  // Create panel
+  createPanel();
+
+  // Add button to settings
+  addSettingsButton();
+
+  // Register global shortcuts
+  registerShortcuts();
+
+  console.log('Shortcuts: Initialized');
+}
+
+function loadShortcuts() {
+  try {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      const parsed = JSON.parse(saved);
+      shortcuts = { ...defaultShortcuts, ...parsed };
+    }
+  } catch (e) {
+    console.error('Shortcuts: Failed to load', e);
+  }
+}
+
+function saveShortcuts() {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(shortcuts));
+}
+
+// Currently editing shortcut
+let editingShortcutId = null;
+
+function createPanel() {
+  panelEl = document.createElement('div');
+  panelEl.className = 'shortcuts-panel';
+  panelEl.innerHTML = `
+    <div class="shortcuts-panel-inner">
+      <div class="shortcuts-panel-header">
+        <h3>⌨️ Keyboard Shortcuts</h3>
+        <button class="shortcuts-close" title="Close">&times;</button>
+      </div>
+      <p class="shortcuts-hint">Click a shortcut to edit it</p>
+      <div class="shortcuts-list">
+        ${Object.entries(shortcuts).map(([id, shortcut]) => `
+          <div class="shortcut-row" data-id="${id}">
+            <span class="shortcut-desc">${shortcut.description}</span>
+            <kbd class="shortcut-key" data-id="${id}" title="Click to edit">${formatKey(shortcut.key)}</kbd>
+          </div>
+        `).join('')}
+      </div>
+      <div class="shortcuts-footer">
+        <button class="shortcuts-reset">Reset to Defaults</button>
+      </div>
+    </div>
+  `;
+
+  document.body.appendChild(panelEl);
+
+  // Close button
+  panelEl.querySelector('.shortcuts-close').addEventListener('click', hidePanel);
+
+  // Reset button
+  panelEl.querySelector('.shortcuts-reset').addEventListener('click', resetShortcuts);
+
+  // Make shortcuts editable
+  panelEl.querySelectorAll('.shortcut-key').forEach(kbd => {
+    kbd.style.cursor = 'pointer';
+    kbd.addEventListener('click', (e) => {
+      e.stopPropagation();
+      startEditingShortcut(kbd.dataset.id);
+    });
+  });
+
+  // Click outside to close
+  panelEl.addEventListener('click', (e) => {
+    if (e.target === panelEl) hidePanel();
+  });
+
+  // Register with panel manager for mutual exclusivity
+  if (window.UplinkPanels) {
+    window.UplinkPanels.register('shortcuts', {
+      element: panelEl,
+      isOpen: () => panelEl?.classList.contains('visible'),
+      open: () => panelEl?.classList.add('visible'),
+      close: () => panelEl?.classList.remove('visible')
+    });
+  }
+}
+
+function showPanel() {
+  if (window.UplinkPanels) {
+    window.UplinkPanels.open('shortcuts');
+  } else {
+    panelEl?.classList.add('visible');
+  }
+}
+
+function hidePanel() {
+  if (window.UplinkPanels) {
+    window.UplinkPanels.close('shortcuts');
+  } else {
+    panelEl?.classList.remove('visible');
+  }
+}
+
+function togglePanel() {
+  if (window.UplinkPanels) {
+    window.UplinkPanels.toggle('shortcuts');
+  } else {
+    panelEl?.classList.toggle('visible');
+  }
+}
+
+function formatKey(key) {
+  return key
+    .replace('Ctrl', '⌃')
+    .replace('Shift', '⇧')
+    .replace('Alt', '⌥')
+    .replace('Meta', '⌘')
+    .replace('Enter', '↵')
+    .replace('Escape', 'Esc')
+    .replace('Delete', 'Del')
+    .replace(/\+/g, ' ');
+}
+
+function startEditingShortcut(shortcutId) {
+  // Stop any previous editing
+  stopEditingShortcut();
+  
+  editingShortcutId = shortcutId;
+  const kbd = panelEl.querySelector(`.shortcut-key[data-id="${shortcutId}"]`);
+  if (kbd) {
+    kbd.classList.add('editing');
+    kbd.textContent = 'Press keys...';
+    kbd.title = 'Press new shortcut keys, Escape to cancel';
+  }
+  
+  // Add key capture listener
+  document.addEventListener('keydown', handleShortcutKeyCapture, true);
+}
+
+function stopEditingShortcut() {
+  if (!editingShortcutId) return;
+  
+  const kbd = panelEl.querySelector(`.shortcut-key[data-id="${editingShortcutId}"]`);
+  if (kbd) {
+    kbd.classList.remove('editing');
+    kbd.textContent = formatKey(shortcuts[editingShortcutId].key);
+    kbd.title = 'Click to edit';
+  }
+  
+  editingShortcutId = null;
+  document.removeEventListener('keydown', handleShortcutKeyCapture, true);
+}
+
+function handleShortcutKeyCapture(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  
+  // Escape cancels editing
+  if (e.key === 'Escape') {
+    stopEditingShortcut();
+    return;
+  }
+  
+  // Build key string
+  const parts = [];
+  if (e.ctrlKey) parts.push('Ctrl');
+  if (e.shiftKey) parts.push('Shift');
+  if (e.altKey) parts.push('Alt');
+  if (e.metaKey) parts.push('Meta');
+  
+  // Don't save if only modifier keys pressed
+  const key = e.key;
+  if (['Control', 'Shift', 'Alt', 'Meta'].includes(key)) return;
+  
+  // Normalize key name
+  let normalizedKey = key;
+  if (key === ' ') normalizedKey = 'Space';
+  else if (key.length === 1) normalizedKey = key.toUpperCase();
+  
+  parts.push(normalizedKey);
+  const newShortcut = parts.join('+');
+  
+  // Save the new shortcut
+  shortcuts[editingShortcutId].key = newShortcut;
+  saveShortcuts();
+  
+  // Update display and stop editing
+  const kbd = panelEl.querySelector(`.shortcut-key[data-id="${editingShortcutId}"]`);
+  if (kbd) {
+    kbd.classList.remove('editing');
+    kbd.textContent = formatKey(newShortcut);
+    kbd.title = 'Click to edit';
+  }
+  
+  editingShortcutId = null;
+  document.removeEventListener('keydown', handleShortcutKeyCapture, true);
+  
+  console.log(`Shortcuts: Updated ${editingShortcutId} to ${newShortcut}`);
+}
+
+function resetShortcuts() {
+  shortcuts = { ...defaultShortcuts };
+  saveShortcuts();
+  updatePanelDisplay();
+}
+
+function updatePanelDisplay() {
+  if (!panelEl) return;
+  
+  Object.entries(shortcuts).forEach(([id, shortcut]) => {
+    const row = panelEl.querySelector(`.shortcut-row[data-id="${id}"]`);
+    if (row) {
+      row.querySelector('.shortcut-key').textContent = formatKey(shortcut.key);
+    }
+  });
+}
+
+function addSettingsButton() {
+  const settingsPanel = document.getElementById('settingsPanel');
+  if (!settingsPanel) {
+    setTimeout(addSettingsButton, 100);
+    return;
+  }
+
+  // Check if already added
+  if (document.getElementById('shortcutsRow')) return;
+
+  const row = document.createElement('div');
+  row.className = 'setting-row';
+  row.id = 'shortcutsRow';
+  row.innerHTML = `
+    <div>
+      <div class="setting-label">Keyboard shortcuts</div>
+      <div class="setting-desc">View and customize shortcuts</div>
+    </div>
+    <button class="setting-btn" id="shortcutsBtn">View</button>
+  `;
+
+  // Insert before theme row
+  const themeRow = document.getElementById('themeSelectorRow');
+  if (themeRow) {
+    themeRow.before(row);
+  } else {
+    settingsPanel.appendChild(row);
+  }
+
+  document.getElementById('shortcutsBtn').addEventListener('click', showPanel);
+}
+
+function registerShortcuts() {
+  document.addEventListener('keydown', (e) => {
+    const key = getKeyCombo(e);
+
+    // Show shortcuts panel (Ctrl+Shift+/ only - removed Shift+? as it conflicts with typing ?)
+    if (matchKey(key, shortcuts.showShortcuts.key)) {
+      e.preventDefault();
+      togglePanel();
+      return;
+    }
+
+    // Close panel (any open panel)
+    if (matchKey(key, shortcuts.closePanel.key)) {
+      // Use panel manager to close any open panel
+      if (window.UplinkPanels?.getCurrent()) {
+        e.preventDefault();
+        window.UplinkPanels.closeAll();
+        return;
+      }
+    }
+
+    // Focus input
+    if (matchKey(key, shortcuts.focusInput.key)) {
+      e.preventDefault();
+      const input = document.getElementById('textInput');
+      input?.focus();
+      return;
+    }
+
+    // Open settings
+    if (matchKey(key, shortcuts.openSettings.key)) {
+      e.preventDefault();
+      const settingsPanel = document.getElementById('settingsPanel');
+      settingsPanel?.classList.toggle('visible');
+      return;
+    }
+
+    // Toggle voice mode
+    if (matchKey(key, shortcuts.toggleVoice.key)) {
+      e.preventDefault();
+      const voiceTab = document.getElementById('voiceModeTab');
+      const textTab = document.getElementById('textModeTab');
+      const isVoice = voiceTab?.classList.contains('active');
+      if (isVoice) {
+        textTab?.click();
+      } else {
+        voiceTab?.click();
+      }
+      return;
+    }
+
+    // Clear chat (via settings)
+    if (matchKey(key, shortcuts.clearChat.key)) {
+      e.preventDefault();
+      const settingsClearBtn = document.getElementById('settingsClearBtn');
+      settingsClearBtn?.click();
+      return;
+    }
+  });
+}
+
+function getKeyCombo(e) {
+  const parts = [];
+  if (e.ctrlKey || e.metaKey) parts.push('Ctrl');
+  if (e.shiftKey) parts.push('Shift');
+  if (e.altKey) parts.push('Alt');
+  
+  // Get the key name
+  let keyName = e.key;
+  if (!keyName) return parts.join('+'); // Handle undefined key
+  if (keyName === ' ') keyName = 'Space';
+  if (keyName.length === 1) keyName = keyName.toUpperCase();
+  
+  // Don't add modifier keys as the key itself
+  if (!['Control', 'Shift', 'Alt', 'Meta'].includes(keyName)) {
+    parts.push(keyName);
+  }
+  
+  return parts.join('+');
+}
+
+function matchKey(pressed, shortcut) {
+  const normalize = (k) => k.toLowerCase().replace(/\s+/g, '');
+  return normalize(pressed) === normalize(shortcut);
+}
+
+// Expose API
+export const UplinkShortcuts = {
+  show: showPanel,
+  hide: hidePanel,
+  toggle: togglePanel,
+  get: (id) => shortcuts[id],
+  getAll: () => ({ ...shortcuts })
+};
+
+import { UplinkCore } from './core.js';
+
+// Backward compat: assign to window
+window.UplinkShortcuts = UplinkShortcuts;
+
+// Register and init
+UplinkCore.registerModule('shortcuts', init);