@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/command-palette/command-palette.ts

@@ -1,5 +1,5 @@
 import { observable } from "@peers-app/peers-sdk";
-import { goToTabPath } from '../tabs-layout/tabs-state';
+import { goToTabPath } from "../tabs-layout/tabs-state";
 
 export interface Command {
   id: string;
@@ -15,90 +15,91 @@ export interface Command {
 // Command palette state (in-memory only, no persistence needed)
 export const isCommandPaletteOpen = observable<boolean>(false);
 
-export const commandSearchQuery = observable<string>('');
+export const commandSearchQuery = observable<string>("");
 
 // Command registry
 const registeredCommands = new Map<string, Command>();
 
-// Detect platform for keyboard shortcuts  
-const isMac = typeof navigator !== 'undefined' 
-  ? /Mac|iPod|iPhone|iPad/.test(navigator.userAgent)
-  : false;
-const modKey = isMac ? 'Cmd' : 'Ctrl';
+// Detect platform for keyboard shortcuts
+const isMac =
+  typeof navigator !== "undefined" ? /Mac|iPod|iPhone|iPad/.test(navigator.userAgent) : false;
+const modKey = isMac ? "Cmd" : "Ctrl";
 
 // Core system commands
 const coreCommands: Command[] = [
   {
-    id: 'search',
-    label: 'Search Everything',
-    description: 'Search across all content',
+    id: "search",
+    label: "Search Everything",
+    description: "Search across all content",
     shortcut: `${modKey}+K`,
-    iconClassName: 'bi-search',
-    category: 'Navigation',
+    iconClassName: "bi-search",
+    category: "Navigation",
     action: () => {
       closeCommandPalette();
-      goToTabPath('search');
-    }
+      goToTabPath("search");
+    },
   },
   {
-    id: 'close-tab',
-    label: 'Close Tab',
-    description: 'Close the current tab',
+    id: "close-tab",
+    label: "Close Tab",
+    description: "Close the current tab",
     shortcut: `${modKey}+W`,
-    iconClassName: 'bi-x',
-    category: 'Tabs',
+    iconClassName: "bi-x",
+    category: "Tabs",
     action: () => {
       closeCommandPalette();
       // Import dynamically to avoid circular dependency
-      import('../tabs-layout/tabs-state').then(({ closeCurrentTab }) => {
+      import("../tabs-layout/tabs-state").then(({ closeCurrentTab }) => {
         closeCurrentTab();
       });
-    }
+    },
   },
   {
-    id: 'next-tab',
-    label: 'Next Tab',
-    description: 'Switch to next tab',
-    shortcut: 'Ctrl+Tab',
-    iconClassName: 'bi-arrow-right',
-    category: 'Tabs',
+    id: "next-tab",
+    label: "Next Tab",
+    description: "Switch to next tab",
+    shortcut: "Ctrl+Tab",
+    iconClassName: "bi-arrow-right",
+    category: "Tabs",
     action: () => {
       closeCommandPalette();
-      import('../tabs-layout/tabs-state').then(({ switchToNextTab }) => {
+      import("../tabs-layout/tabs-state").then(({ switchToNextTab }) => {
         switchToNextTab();
       });
-    }
+    },
   },
   {
-    id: 'previous-tab',
-    label: 'Previous Tab',
-    description: 'Switch to previous tab',
-    shortcut: 'Ctrl+Shift+Tab',
-    iconClassName: 'bi-arrow-left',
-    category: 'Tabs',
+    id: "previous-tab",
+    label: "Previous Tab",
+    description: "Switch to previous tab",
+    shortcut: "Ctrl+Shift+Tab",
+    iconClassName: "bi-arrow-left",
+    category: "Tabs",
     action: () => {
       closeCommandPalette();
-      import('../tabs-layout/tabs-state').then(({ switchToPreviousTab }) => {
+      import("../tabs-layout/tabs-state").then(({ switchToPreviousTab }) => {
         switchToPreviousTab();
       });
-    }
+    },
   },
   {
-    id: 'go-home',
-    label: 'Go to Threads',
-    description: 'Navigate to threads/home',
+    id: "go-home",
+    label: "Go to Threads",
+    description: "Navigate to threads/home",
     shortcut: `${modKey}+H`,
-    iconClassName: 'bi-cpu',
-    category: 'Navigation',
+    iconClassName: "bi-cpu",
+    category: "Navigation",
     action: () => {
       closeCommandPalette();
-      goToTabPath('threads');
-    }
-  }
+      goToTabPath("threads");
+    },
+  },
 ];
 
 // Register core commands
-coreCommands.forEach(cmd => registeredCommands.set(cmd.id, cmd));
+for (const cmd of coreCommands) {
+  registeredCommands.set(cmd.id, cmd);
+}
 
 // Command registration functions
 export function registerCommand(command: Command): void {
@@ -114,31 +115,32 @@ export function getCommand(commandId: string): Command | undefined {
 }
 
 export function getAllCommands(): Command[] {
-  return Array.from(registeredCommands.values()).filter(cmd => 
-    !cmd.isAvailable || cmd.isAvailable()
+  return Array.from(registeredCommands.values()).filter(
+    (cmd) => !cmd.isAvailable || cmd.isAvailable(),
   );
 }
 
 export function searchCommands(query: string): Command[] {
   if (!query.trim()) return getAllCommands();
-  
+
   const lowerQuery = query.toLowerCase();
-  return getAllCommands().filter(cmd => 
-    cmd.label.toLowerCase().includes(lowerQuery) ||
-    cmd.description?.toLowerCase().includes(lowerQuery) ||
-    cmd.category?.toLowerCase().includes(lowerQuery)
+  return getAllCommands().filter(
+    (cmd) =>
+      cmd.label.toLowerCase().includes(lowerQuery) ||
+      cmd.description?.toLowerCase().includes(lowerQuery) ||
+      cmd.category?.toLowerCase().includes(lowerQuery),
   );
 }
 
 // Command palette controls
 export function openCommandPalette(): void {
   isCommandPaletteOpen(true);
-  commandSearchQuery('');
+  commandSearchQuery("");
 }
 
 export function closeCommandPalette(): void {
   isCommandPaletteOpen(false);
-  commandSearchQuery('');
+  commandSearchQuery("");
 }
 
 export function toggleCommandPalette(): void {
@@ -162,7 +164,7 @@ const shortcutToCommandMap = new Map<string, string>();
 // Build shortcut map from registered commands
 function buildShortcutMap(): void {
   shortcutToCommandMap.clear();
-  getAllCommands().forEach(cmd => {
+  getAllCommands().forEach((cmd) => {
     if (cmd.shortcut) {
       shortcutToCommandMap.set(normalizeShortcut(cmd.shortcut), cmd.id);
     }
@@ -170,49 +172,50 @@ function buildShortcutMap(): void {
 }
 
 function normalizeShortcut(shortcut: string): string {
-  return shortcut.toLowerCase()
-    .replace('cmd', 'meta')
-    .replace('command', 'meta')
-    .replace(/\s+/g, '');
+  return shortcut
+    .toLowerCase()
+    .replace("cmd", "meta")
+    .replace("command", "meta")
+    .replace(/\s+/g, "");
 }
 
 function getKeyFromEvent(event: KeyboardEvent): string {
   const parts: string[] = [];
-  
-  if (event.metaKey) parts.push('meta');
-  if (event.ctrlKey) parts.push('ctrl');
-  if (event.altKey) parts.push('alt');
-  if (event.shiftKey) parts.push('shift');
-  
+
+  if (event.metaKey) parts.push("meta");
+  if (event.ctrlKey) parts.push("ctrl");
+  if (event.altKey) parts.push("alt");
+  if (event.shiftKey) parts.push("shift");
+
   parts.push(event.key.toLowerCase());
-  
-  return parts.join('+');
+
+  return parts.join("+");
 }
 
 // Global keyboard event handler
 const handleKeyDown = (event: KeyboardEvent) => {
   const key = getKeyFromEvent(event);
-  
+
   // Handle Cmd+K (Mac) / Ctrl+K (Windows/Linux) to open command palette
-  const paletteShortcut = isMac ? 'meta+k' : 'ctrl+k';
+  const paletteShortcut = isMac ? "meta+k" : "ctrl+k";
   if (key === paletteShortcut) {
     event.preventDefault();
     toggleCommandPalette();
     return;
   }
-  
+
   // Handle Escape to close command palette
-  if (key === 'escape' && isCommandPaletteOpen()) {
+  if (key === "escape" && isCommandPaletteOpen()) {
     event.preventDefault();
     closeCommandPalette();
     return;
   }
-  
+
   // If command palette is open, don't handle other shortcuts
   if (isCommandPaletteOpen()) {
     return;
   }
-  
+
   // Handle other registered shortcuts
   const commandId = shortcutToCommandMap.get(key);
   if (commandId) {
@@ -224,16 +227,16 @@ const handleKeyDown = (event: KeyboardEvent) => {
 // Initialize keyboard shortcuts
 export function initializeCommandPalette(): void {
   buildShortcutMap();
-  document.addEventListener('keydown', handleKeyDown);
+  document.addEventListener("keydown", handleKeyDown);
 }
 
 // Clean up (for testing or hot reloading)
 export function destroyCommandPalette(): void {
-  document.removeEventListener('keydown', handleKeyDown);
+  document.removeEventListener("keydown", handleKeyDown);
   shortcutToCommandMap.clear();
 }
 
 // Auto-initialize when this module loads
-if (typeof window !== 'undefined') {
+if (typeof window !== "undefined") {
   initializeCommandPalette();
-}
+}