feat(command-bar): add commands from existing palette

frontend/src/layout/navigation-3000/Navigation.tsx

@@ -1,4 +1,4 @@
-import { CommandPalette } from 'lib/components/CommandPalette'
+import { CommandPalette } from 'lib/components/CommandPalette/CommandPalette'
 import { useMountedLogic, useValues } from 'kea'
 import { ReactNode, useEffect } from 'react'
 import { Breadcrumbs } from './components/Breadcrumbs'

frontend/src/layout/navigation/TopBar/TopBar.tsx

@@ -4,7 +4,7 @@ import { SitePopover } from './SitePopover'
 import { Announcement } from './Announcement'
 import { navigationLogic } from '../navigationLogic'
 import { HelpButton } from 'lib/components/HelpButton/HelpButton'
-import { CommandPalette } from 'lib/components/CommandPalette'
+import { CommandPalette } from 'lib/components/CommandPalette/CommandPalette'
 import { CreateOrganizationModal } from 'scenes/organization/CreateOrganizationModal'
 import { InviteModal } from 'scenes/organization/Settings/InviteModal'
 import { Link } from 'lib/lemon-ui/Link'

frontend/src/lib/components/CommandBar/ActionBar.tsx

@@ -0,0 +1,19 @@
+import { useValues } from 'kea'
+
+import { actionBarLogic } from './actionBarLogic'
+
+import ActionInput from './ActionInput'
+import ActionResults from './ActionResults'
+
+const ActionBar = (): JSX.Element => {
+    const { activeFlow } = useValues(actionBarLogic)
+
+    return (
+        <div className="flex flex-col h-full">
+            {(!activeFlow || activeFlow.instruction) && <ActionInput />}
+            {<ActionResults />}
+        </div>
+    )
+}
+
+export default ActionBar

frontend/src/lib/components/CommandBar/ActionInput.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { useActions, useValues } from 'kea'
+
+import { LemonInput } from '@posthog/lemon-ui'
+import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
+
+import { actionBarLogic } from './actionBarLogic'
+import { IconChevronRight, IconEdit } from 'lib/lemon-ui/icons'
+import { CommandFlow } from 'lib/components/CommandPalette/commandPaletteLogic'
+
+type PrefixIconProps = {
+    activeFlow: CommandFlow | null
+}
+const PrefixIcon = ({ activeFlow }: PrefixIconProps): React.ReactElement | null => {
+    if (activeFlow) {
+        return <activeFlow.icon className="palette__icon" /> ?? <IconEdit className="palette__icon" />
+    } else {
+        return <IconChevronRight className="palette__icon" />
+    }
+}
+
+const ActionInput = (): JSX.Element => {
+    const { input, activeFlow } = useValues(actionBarLogic)
+    const { setInput } = useActions(actionBarLogic)
+
+    return (
+        <div className="border-b">
+            <LemonInput
+                size="small"
+                className="CommandBar__input"
+                fullWidth
+                prefix={<PrefixIcon activeFlow={activeFlow} />}
+                suffix={<KeyboardShortcut escape muted />}
+                placeholder={activeFlow?.instruction ?? 'What would you like to do? Try some suggestions…'}
+                autoFocus
+                value={input}
+                onChange={setInput}
+            />
+        </div>
+    )
+}
+
+export default ActionInput

frontend/src/lib/components/CommandBar/ActionResult.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useRef } from 'react'
+import { useActions } from 'kea'
+
+import { actionBarLogic } from './actionBarLogic'
+import { getNameFromActionScope } from './utils'
+import { CommandResultDisplayable } from '../CommandPalette/commandPaletteLogic'
+
+type SearchResultProps = {
+    result: CommandResultDisplayable
+    focused: boolean
+}
+
+const ActionResult = ({ result, focused }: SearchResultProps): JSX.Element => {
+    const { executeResult, onMouseEnterResult, onMouseLeaveResult } = useActions(actionBarLogic)
+
+    const ref = useRef<HTMLDivElement | null>(null)
+    const isExecutable = !!result.executor
+
+    useEffect(() => {
+        if (focused) {
+            ref.current?.scrollIntoView()
+        }
+    }, [focused])
+
+    return (
+        <div className={`border-l-4 ${isExecutable ? 'border-primary' : ''}`}>
+            <div
+                className={`w-full pl-3 pr-2 ${
+                    focused ? 'bg-secondary-3000-hover' : 'bg-secondary-3000'
+                } border-b cursor-pointer`}
+                onMouseEnter={() => {
+                    onMouseEnterResult(result.index)
+                }}
+                onMouseLeave={() => {
+                    onMouseLeaveResult()
+                }}
+                onClick={() => {
+                    if (isExecutable) {
+                        executeResult(result)
+                    }
+                }}
+                ref={ref}
+            >
+                <div className="px-2 py-3 w-full space-y-0.5 flex flex-col items-start">
+                    {result.source.scope && (
+                        <span className="text-muted-3000 text-xs">{getNameFromActionScope(result.source.scope)}</span>
+                    )}
+                    <span className="text-text-3000">{result.display}</span>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ActionResult

frontend/src/lib/components/CommandBar/ActionResults.tsx

@@ -0,0 +1,42 @@
+import { useValues } from 'kea'
+
+import { CommandResultDisplayable } from '../CommandPalette/commandPaletteLogic'
+
+import { actionBarLogic } from './actionBarLogic'
+import ActionResult from './ActionResult'
+import { getNameFromActionScope } from 'lib/components/CommandBar/utils'
+
+type ResultsGroupProps = {
+    scope: string
+    results: CommandResultDisplayable[]
+    activeResultIndex: number
+}
+
+const ResultsGroup = ({ scope, results, activeResultIndex }: ResultsGroupProps): JSX.Element => {
+    return (
+        <>
+            <div className="border-b pl-3 pr-2 pt-1 pb-1 bg-bg-3000-light">{getNameFromActionScope(scope)}</div>
+            {results.map((result) => (
+                <ActionResult
+                    key={`command_result_${result.index}`}
+                    result={result}
+                    focused={result.index === activeResultIndex}
+                />
+            ))}
+        </>
+    )
+}
+
+const ActionResults = (): JSX.Element => {
+    const { commandSearchResultsGrouped, activeResultIndex } = useValues(actionBarLogic)
+
+    return (
+        <div className="grow overscroll-none overflow-y-auto">
+            {commandSearchResultsGrouped.map(([scope, results]) => (
+                <ResultsGroup key={scope} scope={scope} results={results} activeResultIndex={activeResultIndex} />
+            ))}
+        </div>
+    )
+}
+
+export default ActionResults

frontend/src/lib/components/CommandBar/CommandBar.tsx

@@ -1,7 +1,6 @@
-import { useRef, forwardRef } from 'react'
+import { useRef } from 'react'
 import { useActions, useValues } from 'kea'
 
-import { useEventListener } from 'lib/hooks/useEventListener'
 import { useOutsideClickHandler } from 'lib/hooks/useOutsideClickHandler'
 
 import { commandBarLogic } from './commandBarLogic'
@@ -10,43 +9,20 @@ import { BarStatus } from './types'
 import './index.scss'
 import SearchBar from './SearchBar'
 import { LemonModal } from '@posthog/lemon-ui'
-
-const CommandBarContainer = forwardRef<HTMLDivElement, { children?: React.ReactNode }>(function CommandBarContainer(
-    { children },
-    ref
-): JSX.Element {
-    return (
-        <div className="w-full h-160 max-w-lg bg-bg-3000 rounded overflow-hidden flex flex-col" ref={ref}>
-            {children}
-        </div>
-    )
-})
+import ActionBar from './ActionBar'
 
 function CommandBar(): JSX.Element | null {
     const containerRef = useRef<HTMLDivElement | null>(null)
     const { barStatus } = useValues(commandBarLogic)
-    const { toggleSearchBar, toggleActionsBar, hideCommandBar } = useActions(commandBarLogic)
-
-    useEventListener('keydown', (event) => {
-        if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
-            event.preventDefault()
-            if (event.shiftKey) {
-                toggleActionsBar()
-            } else {
-                toggleSearchBar()
-            }
-        } else if (event.key === 'Escape') {
-            hideCommandBar()
-        }
-    })
+    const { hideCommandBar } = useActions(commandBarLogic)
 
     useOutsideClickHandler(containerRef, hideCommandBar, [])
 
     return (
         <LemonModal isOpen={barStatus !== BarStatus.HIDDEN} simple closable={false} width={800}>
-            <CommandBarContainer ref={containerRef}>
-                <SearchBar />
-            </CommandBarContainer>
+            <div className="w-full h-160 max-w-lg bg-bg-3000 rounded overflow-hidden flex flex-col" ref={containerRef}>
+                {barStatus === BarStatus.SHOW_SEARCH ? <SearchBar /> : <ActionBar />}
+            </div>
         </LemonModal>
     )
 }

frontend/src/lib/components/CommandBar/SearchBar.tsx

@@ -7,7 +7,7 @@ import SearchResults from './SearchResults'
 import SearchTabs from './SearchTabs'
 
 const SearchBar = (): JSX.Element => {
-    useMountedLogic(searchBarLogic)
+    useMountedLogic(searchBarLogic) // load initial results
 
     return (
         <div className="flex flex-col h-full">

frontend/src/lib/components/CommandBar/SearchInput.tsx

@@ -14,7 +14,7 @@ const SearchInput = (): JSX.Element => {
             <LemonInput
                 type="search"
                 size="small"
-                className="CommandBar__search-input"
+                className="CommandBar__input"
                 fullWidth
                 suffix={<KeyboardShortcut escape muted />}
                 autoFocus

frontend/src/lib/components/CommandBar/SearchResults.tsx

@@ -1,31 +1,13 @@
-import { useActions, useValues } from 'kea'
-import { useEventListener } from 'lib/hooks/useEventListener'
+import { useValues } from 'kea'
+
 import { DetectiveHog } from '../hedgehogs'
 
 import { searchBarLogic } from './searchBarLogic'
 import SearchResult, { SearchResultSkeleton } from './SearchResult'
 
 const SearchResults = (): JSX.Element => {
-    const { filterSearchResults, searchResponseLoading, activeResultIndex, keyboardResultIndex, maxIndex } =
+    const { filterSearchResults, searchResponseLoading, activeResultIndex, keyboardResultIndex } =
         useValues(searchBarLogic)
-    const { onArrowUp, onArrowDown, openResult } = useActions(searchBarLogic)
-
-    useEventListener('keydown', (event) => {
-        if (!filterSearchResults) {
-            return
-        }
-
-        if (event.key === 'Enter') {
-            event.preventDefault()
-            openResult(activeResultIndex)
-        } else if (event.key === 'ArrowDown') {
-            event.preventDefault()
-            onArrowDown(activeResultIndex, maxIndex)
-        } else if (event.key === 'ArrowUp') {
-            event.preventDefault()
-            onArrowUp(activeResultIndex, maxIndex)
-        }
-    })
 
     return (
         <div className="grow overscroll-none overflow-y-auto">

frontend/src/lib/components/CommandBar/actionBarLogic.ts

@@ -0,0 +1,97 @@
+import { kea, path, listeners, connect, afterMount, beforeUnmount } from 'kea'
+
+import { commandPaletteLogic } from '../CommandPalette/commandPaletteLogic'
+import { commandBarLogic } from './commandBarLogic'
+
+import { BarStatus } from './types'
+
+import type { actionBarLogicType } from './actionBarLogicType'
+
+export const actionBarLogic = kea<actionBarLogicType>([
+    path(['lib', 'components', 'CommandBar', 'actionBarLogic']),
+    connect({
+        actions: [
+            commandBarLogic,
+            ['hideCommandBar', 'setCommandBar'],
+            commandPaletteLogic,
+            [
+                'showPalette',
+                'hidePalette',
+                'setInput',
+                'executeResult',
+                'backFlow',
+                'onArrowUp',
+                'onArrowDown',
+                'onMouseEnterResult',
+                'onMouseLeaveResult',
+            ],
+        ],
+        values: [
+            commandPaletteLogic,
+            [
+                'input',
+                'activeResultIndex',
+                'commandRegistrations',
+                'commandSearchResults',
+                'commandSearchResultsGrouped',
+                'activeFlow',
+            ],
+        ],
+    }),
+    listeners(({ actions }) => ({
+        hidePalette: () => {
+            // listen on hide action from legacy palette, and hide command bar
+            actions.hideCommandBar()
+        },
+    })),
+    afterMount(({ actions, values, cache }) => {
+        // trigger show action from legacy palette
+        actions.showPalette()
+
+        // register keyboard shortcuts
+        cache.onKeyDown = (event: KeyboardEvent) => {
+            if (event.key === 'Enter' && values.commandSearchResults.length) {
+                // execute result
+                const result = values.commandSearchResults[values.activeResultIndex]
+                const isExecutable = !!result.executor
+                if (isExecutable) {
+                    actions.executeResult(result)
+                }
+            } else if (event.key === 'ArrowDown') {
+                // navigate to next result
+                event.preventDefault()
+                actions.onArrowDown(values.commandSearchResults.length - 1)
+            } else if (event.key === 'ArrowUp') {
+                // navigate to previous result
+                event.preventDefault()
+                actions.onArrowUp()
+            } else if (event.key === 'Escape') {
+                event.preventDefault()
+
+                if (values.activeFlow) {
+                    // return to previous flow
+                    actions.backFlow()
+                } else if (values.input) {
+                    // or erase input
+                    actions.setInput('')
+                } else {
+                    // or hide palette
+                    actions.hidePalette()
+                }
+            } else if (event.key === 'Backspace') {
+                if (values.input.length === 0) {
+                    // transition to search when pressing backspace with empty input
+                    actions.setCommandBar(BarStatus.SHOW_SEARCH)
+                }
+            }
+        }
+        window.addEventListener('keydown', cache.onKeyDown)
+    }),
+    beforeUnmount(({ actions, cache }) => {
+        // trigger hide action from legacy palette
+        actions.hidePalette()
+
+        // unregister keyboard shortcuts
+        window.removeEventListener('keydown', cache.onKeyDown)
+    }),
+])