Quick Table Search

src/renderer/App.tsx

@@ -156,9 +156,7 @@ function App() {
         return [...prev, connection]
       } else {
         // Updated connection
-        return prev.map((conn) =>
-          conn.id === connection.id ? { ...conn, ...connection } : conn
-        )
+        return prev.map((conn) => (conn.id === connection.id ? { ...conn, ...connection } : conn))
       }
     })
 
@@ -188,7 +186,13 @@ function App() {
       <PageTransition transitionKey={activeConnection ? 'active-connection' : 'no-connection'}>
         <MainPanel
           activeConnection={
-            activeConnection ? { id: activeConnection.id, name: activeConnection.name } : undefined
+            activeConnection
+              ? {
+                  id: activeConnection.id,
+                  name: activeConnection.name,
+                  database: activeConnection.database
+                }
+              : undefined
           }
           onConnectionSuccess={handleConnectionSuccess}
           connectionLoading={isConnectionLoading}

src/renderer/components/ActiveConnectionLayout/ActiveConnectionLayout.css

@@ -6,6 +6,51 @@
   flex-direction: column;
 }
 
+.table-search {
+  width: 100%;
+  padding: 4px 8px;
+  border: 1px solid var(--gray-6);
+  border-radius: var(--radius-2);
+  background: var(--gray-1);
+  color: var(--gray-12);
+  font-size: 12px;
+  transition: all 0.2s;
+}
+
+.table-search:focus {
+  outline: none;
+  border-color: var(--accent-8);
+  box-shadow: 0 0 0 1px var(--accent-8);
+}
+
+.search-container {
+  padding: 10px;
+}
+
+.search-result-active {
+  background: var(--gray-6);
+}
+
+.search-result {
+  padding-left: 4px;
+  border-radius: var(--radius-2);
+  cursor: pointer;
+}
+
+.dialog-content {
+  position: fixed !important;
+  top: 10px !important;
+  height: auto;
+  width: 50vw;
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+  background: var(--gray-4);
+  z-index: 9999;
+  box-shadow: var(--accent-8);
+  border: 1px solid var(--gray-6);
+  border-radius: var(--radius-2);
+}
+
 .connection-header {
   background: var(--gray-2);
   border-bottom: 1px solid var(--gray-4);

src/renderer/components/ActiveConnectionLayout/ActiveConnectionLayout.tsx

@@ -1,27 +1,36 @@
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels'
 import { Box, Flex, Text, Badge } from '@radix-ui/themes'
+import * as Dialog from '@radix-ui/react-dialog'
 import { Button } from '../ui'
 import { LeftSidebar } from '../LeftSidebar'
 import { QueryWorkspace } from '../QueryWorkspace/QueryWorkspace'
 import { ThemeSwitcher } from '../ThemeSwitcher'
 import { ChatProvider } from '../../contexts/ChatContext'
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
 import './ActiveConnectionLayout.css'
 
 interface ActiveConnectionLayoutProps {
   connectionId: string
   connectionName: string
+  database: string
   onDisconnect?: () => void
 }
 
 export function ActiveConnectionLayout({
   connectionId,
   connectionName,
+  database,
   onDisconnect
 }: ActiveConnectionLayoutProps) {
   const [isReadOnly, setIsReadOnly] = useState(false)
+  const [showSearchBar, setShowSearchBar] = useState(false)
+  const [tables, setTables] = useState<string[]>([])
+  const [query, setQuery] = useState<string>('')
+  const [debouncedQuery, setDebouncedQuery] = useState<string>('')
+  const [activeTableEntry, setActiveTableEntry] = useState<number>(0)
   const queryWorkspaceRef = useRef<any>(null)
   const newTabHandlerRef = useRef<(() => void) | null>(null)
+  const searchBarRef = useRef<any>(null)
 
   useEffect(() => {
     const checkReadOnly = async () => {
@@ -35,6 +44,34 @@ export function ActiveConnectionLayout({
     checkReadOnly()
   }, [connectionId])
 
+  // debounce the search query
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedQuery(query)
+    }, 300) // 300ms debounce
+
+    return () => clearTimeout(handler)
+  }, [query])
+
+  // fetch tables for search
+  const loadTables = useCallback(async () => {
+    let tables = [] as string[]
+    try {
+      const result = await window.api.database.getTables(connectionId, database)
+      if (result.success && result.tables) {
+        tables = result.tables
+      }
+    } catch (error) {
+      console.error('Error loading databases:', error)
+    } finally {
+      setTables(tables)
+    }
+  }, [connectionId, database])
+
+  useEffect(() => {
+    loadTables()
+  }, [loadTables])
+
   // Global keyboard shortcut for Cmd+N / Ctrl+N
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -52,6 +89,30 @@ export function ActiveConnectionLayout({
     }
   }, [])
 
+  // Keyboard shorcut for Quick Table Search (Cmd + P / Ctrl + P)
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === 'p') {
+        event.preventDefault()
+        setShowSearchBar(true)
+      }
+      if (event.key === 'Escape') {
+        setShowSearchBar(false)
+        setQuery('')
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (showSearchBar && searchBarRef.current) {
+      searchBarRef.current.focus()
+    }
+  }, [showSearchBar])
+
   const handleOpenTableTab = (database: string, tableName: string) => {
     if (window.openTableTab) {
       window.openTableTab(database, tableName)
@@ -75,6 +136,32 @@ export function ActiveConnectionLayout({
       queryWorkspaceRef.current.executeQueryFromAI(query)
     }
   }
+  const filteredResults = useMemo(
+    () =>
+      debouncedQuery
+        ? tables.filter((tableName) =>
+            tableName.toLowerCase().includes(debouncedQuery.toLowerCase())
+          )
+        : [],
+    [debouncedQuery, tables]
+  )
+  const handleKeyDownInput = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setActiveTableEntry((prev) => Math.min(prev + 1, filteredResults.length - 1))
+    }
+    if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setActiveTableEntry((prev) => Math.max(prev - 1, 0))
+    }
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      setShowSearchBar(false)
+      handleOpenTableTab(database, filteredResults[activeTableEntry])
+      setDebouncedQuery('')
+      setActiveTableEntry(0)
+    }
+  }
 
   return (
     <ChatProvider connectionId={connectionId}>
@@ -91,6 +178,31 @@ export function ActiveConnectionLayout({
               </Badge>
             )}
           </Flex>
+          <Dialog.Root open={showSearchBar} onOpenChange={setShowSearchBar}>
+            <Dialog.Content className="dialog-content">
+              <Flex direction="column" className="search-container">
+                <input
+                  ref={searchBarRef}
+                  type="text"
+                  placeholder="Search tables..."
+                  className="table-search"
+                  onChange={(e) => setQuery(e.target.value)}
+                  onKeyDown={handleKeyDownInput}
+                />
+                <Flex direction="column">
+                  {filteredResults.map((tableName, idx) => (
+                    <Text
+                      key={idx}
+                      className={`search-result ${idx === activeTableEntry ? 'search-result-active' : ''}`}
+                      size="4"
+                    >
+                      {tableName}
+                    </Text>
+                  ))}
+                </Flex>
+              </Flex>
+            </Dialog.Content>
+          </Dialog.Root>
           <Flex align="center" gap="2">
             <ThemeSwitcher size="1" />
             <Button size="1" variant="soft" color="red" onClick={onDisconnect}>

src/renderer/components/Layout/MainPanel.tsx

@@ -12,6 +12,7 @@ interface MainPanelProps {
   activeConnection?: {
     id: string
     name: string
+    database: string
   }
   onConnectionSuccess?: (connection: any) => void
   connectionLoading?: boolean
@@ -221,6 +222,7 @@ export function MainPanel({
   return (
     <Box className="main-panel">
       <ActiveConnectionLayout
+        database={activeConnection.database}
         connectionId={activeConnection.id}
         connectionName={activeConnection.name}
         onDisconnect={onDisconnect}

tsconfig.json

@@ -23,4 +23,4 @@
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
-}
+}