feat: add new tab functionality with keyboard shortcuts in QueryWorkspace and ActiveConnectionLayout

Author: Krishnachaitanyakc

src/renderer/components/ActiveConnectionLayout/ActiveConnectionLayout.tsx

@@ -4,7 +4,7 @@ import { Button } from '../ui'
 import { DatabaseExplorer } from '../DatabaseExplorer/DatabaseExplorer'
 import { QueryWorkspace } from '../QueryWorkspace/QueryWorkspace'
 import { ThemeSwitcher } from '../ThemeSwitcher'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import './ActiveConnectionLayout.css'
 
 interface ActiveConnectionLayoutProps {
@@ -19,6 +19,7 @@ export function ActiveConnectionLayout({
   onDisconnect
 }: ActiveConnectionLayoutProps) {
   const [isReadOnly, setIsReadOnly] = useState(false)
+  const newTabHandlerRef = useRef<(() => void) | null>(null)
 
   useEffect(() => {
     const checkReadOnly = async () => {
@@ -32,6 +33,23 @@ export function ActiveConnectionLayout({
     checkReadOnly()
   }, [connectionId])
 
+  // Global keyboard shortcut for Cmd+T / Ctrl+T
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === 't') {
+        event.preventDefault()
+        if (newTabHandlerRef.current) {
+          newTabHandlerRef.current()
+        }
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [])
+
   const handleOpenTableTab = (database: string, tableName: string) => {
     if (window.openTableTab) {
       window.openTableTab(database, tableName)
@@ -76,8 +94,10 @@ export function ActiveConnectionLayout({
         <Panel defaultSize={80} className="workspace-panel">
           <QueryWorkspace
             connectionId={connectionId}
-            connectionName={connectionName}
             onOpenTableTab={handleOpenTableTab}
+            onRegisterNewTabHandler={(handler) => {
+              newTabHandlerRef.current = handler
+            }}
           />
         </Panel>
       </PanelGroup>

src/renderer/components/QueryWorkspace/QueryWorkspace.tsx

@@ -24,9 +24,14 @@ const DEFAULT_LIMIT = 100
 interface QueryWorkspaceProps {
   connectionId: string
   onOpenTableTab?: (database: string, tableName: string) => void
+  onRegisterNewTabHandler?: (handler: () => void) => void
 }
 
-export function QueryWorkspace({ connectionId, onOpenTableTab }: QueryWorkspaceProps) {
+export function QueryWorkspace({
+  connectionId,
+  onOpenTableTab,
+  onRegisterNewTabHandler
+}: QueryWorkspaceProps) {
   const [tabs, setTabs] = useState<Tab[]>([
     {
       id: '1',
@@ -43,33 +48,13 @@ export function QueryWorkspace({ connectionId, onOpenTableTab }: QueryWorkspaceP
   const [showAIPanel, setShowAIPanel] = useState(false)
   const editorRef = useRef<any>(null)
   const executeQueryRef = useRef<() => void>(() => {})
+  const newTabRef = useRef<() => void>()
   const [showLimitWarning, setShowLimitWarning] = useState(false)
   const [queryLimitOverride, setQueryLimitOverride] = useState(false)
 
   const activeTab = tabs.find((tab) => tab.id === activeTabId)
   const activeResult = activeTab ? results[activeTab.id] : null
 
-  const handleEditorDidMount = useCallback((editor: any, monaco: Monaco) => {
-    editorRef.current = editor
-
-    // Add keyboard shortcuts
-    editor.addAction({
-      id: 'execute-query',
-      label: 'Execute Query',
-      keybindings: [
-        monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
-        monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyE
-      ],
-      contextMenuGroupId: 'navigation',
-      contextMenuOrder: 1.5,
-      run: () => {
-        if (executeQueryRef.current) {
-          executeQueryRef.current()
-        }
-      }
-    })
-  }, [])
-
   // Tab management functions
   const handleNewTab = useCallback(() => {
     const newTab: QueryTab = {
@@ -144,6 +129,52 @@ export function QueryWorkspace({ connectionId, onOpenTableTab }: QueryWorkspaceP
     }
   }, [openTableTab, onOpenTableTab])
 
+  const handleEditorDidMount = useCallback((editor: any, monaco: Monaco) => {
+    editorRef.current = editor
+
+    // Add keyboard shortcuts
+    editor.addAction({
+      id: 'execute-query',
+      label: 'Execute Query',
+      keybindings: [
+        monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
+        monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyE
+      ],
+      contextMenuGroupId: 'navigation',
+      contextMenuOrder: 1.5,
+      run: () => {
+        if (executeQueryRef.current) {
+          executeQueryRef.current()
+        }
+      }
+    })
+
+    editor.addAction({
+      id: 'new-query-tab',
+      label: 'New Query Tab',
+      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyN],
+      contextMenuGroupId: 'navigation',
+      contextMenuOrder: 1.6,
+      run: () => {
+        if (newTabRef.current) {
+          newTabRef.current()
+        }
+      }
+    })
+  }, [])
+
+  // Update the ref whenever handleNewTab changes
+  useEffect(() => {
+    newTabRef.current = handleNewTab
+  }, [handleNewTab])
+
+  // Register the new tab handler with parent component
+  useEffect(() => {
+    if (onRegisterNewTabHandler) {
+      onRegisterNewTabHandler(handleNewTab)
+    }
+  }, [handleNewTab, onRegisterNewTabHandler])
+
   const executeQuery = useCallback(
     async (queryToExecute: string, forceUnlimited = false) => {
       if (!activeTab || activeTab.type !== 'query') return