feat(3000): more search improvements (#18759)

---------

Co-authored-by: Cory Watilo <[email protected]>

frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss

@@ -3,28 +3,25 @@
 }
 
 .KeyboardShortcut__key {
-    display: inline-flex;
     align-items: center;
-    justify-content: center;
-    height: 1.25rem;
-    min-width: 1.25rem;
-    padding: 0 0.1875rem;
+    background: var(--accent-3000);
     border-radius: 0.125rem;
     border-width: 1px;
-    background: var(--accent-3000);
     color: var(--default);
+    display: inline-flex;
+    height: 1.25rem;
+    justify-content: center;
+    min-width: 1.25rem;
+    padding: 0 0.1875rem;
     text-transform: capitalize;
 
     .posthog-3000 & {
-        text-transform: uppercase;
-        border-radius: 0.25rem;
         border-bottom-width: 2px;
+        border-color: var(--secondary-3000-button-border-hover);
+        border-radius: 0.25rem;
         font-size: 0.625rem;
         padding: 0.125rem 0.25rem;
-    }
-
-    .posthog-3000[theme='dark'] & {
-        border-color: var(--muted-3000);
+        text-transform: uppercase;
     }
 
     .KeyboardShortcut--muted > & {

frontend/src/layout/navigation-3000/components/KeyboardShortcut.tsx

@@ -34,11 +34,11 @@ export function KeyboardShortcut({ muted, ...keys }: KeyboardShortcutProps): JSX
     ) as HotKeyOrModifier[]
 
     return (
-        <span className={clsx('KeyboardShortcut', muted && 'KeyboardShortcut--muted')}>
+        <span
+            className={clsx('KeyboardShortcut KeyboardShortcut__key space-x-0.5', muted && 'KeyboardShortcut--muted')}
+        >
             {sortedKeys.map((key) => (
-                <span key={key} className="KeyboardShortcut__key">
-                    {KEY_TO_SYMBOL[key] || key}
-                </span>
+                <span key={key}>{KEY_TO_SYMBOL[key] || key}</span>
             ))}
         </span>
     )

frontend/src/layout/navigation-3000/components/Navbar.tsx

@@ -1,6 +1,6 @@
 import { LemonBadge } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
-import { IconGear, IconDay, IconNight, IconAsterisk } from '@posthog/icons'
+import { IconGear, IconDay, IconNight, IconAsterisk, IconSearch } from '@posthog/icons'
 import { Popover } from 'lib/lemon-ui/Popover'
 import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
 import { Scene } from 'scenes/sceneTypes'
@@ -14,6 +14,9 @@ import { urls } from 'scenes/urls'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { Resizer } from 'lib/components/Resizer/Resizer'
 import { useRef } from 'react'
+import { commandBarLogic } from 'lib/components/CommandBar/commandBarLogic'
+import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 
 export function Navbar(): JSX.Element {
     const { user } = useValues(userLogic)
@@ -25,10 +28,12 @@ export function Navbar(): JSX.Element {
         useValues(themeLogic)
     const { toggleTheme } = useActions(themeLogic)
     const { featureFlags } = useValues(featureFlagLogic)
+    const { toggleSearchBar } = useActions(commandBarLogic)
 
     const activeThemeIcon = isDarkModeOn ? <IconNight /> : <IconDay />
 
     const containerRef = useRef<HTMLDivElement | null>(null)
+    const isUsingNewNav = useFeatureFlag('POSTHOG_3000_NAV')
 
     return (
         <nav className="Navbar3000" ref={containerRef}>
@@ -65,6 +70,21 @@ export function Navbar(): JSX.Element {
                 </div>
                 <div className="Navbar3000__bottom">
                     <ul>
+                        <NavbarButton
+                            identifier="search-button"
+                            icon={<IconSearch />}
+                            title="Search"
+                            onClick={toggleSearchBar}
+                            sideIcon={
+                                !isUsingNewNav ? (
+                                    <span className="text-xs">
+                                        <KeyboardShortcut shift k />
+                                    </span>
+                                ) : (
+                                    <></>
+                                )
+                            }
+                        />
                         <NavbarButton
                             icon={
                                 isThemeSyncedWithSystem ? (

frontend/src/layout/navigation-3000/components/NavbarButton.tsx

@@ -12,6 +12,7 @@ import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 export interface NavbarButtonProps {
     identifier: string
     icon: ReactElement
+    sideIcon?: ReactElement
     title?: string
     shortTitle?: string
     tag?: 'alpha' | 'beta'

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

@@ -11,6 +11,7 @@ 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" />
@@ -26,12 +27,11 @@ export const ActionInput = (): JSX.Element => {
     return (
         <div className="border-b">
             <LemonInput
-                size="small"
                 className="CommandBar__input"
                 fullWidth
                 prefix={<PrefixIcon activeFlow={activeFlow} />}
                 suffix={<KeyboardShortcut escape />}
-                placeholder={activeFlow?.instruction ?? 'What would you like to do? Try some suggestions…'}
+                placeholder={activeFlow?.instruction ?? 'Run a command…'}
                 autoFocus
                 value={input}
                 onChange={setInput}

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

@@ -22,9 +22,11 @@ export const ActionResult = ({ result, focused }: SearchResultProps): JSX.Elemen
     }, [focused])
 
     return (
-        <div className={`border-l-4 ${isExecutable ? 'border-primary' : ''}`}>
+        <div className={`border-l-4 ${isExecutable ? 'border-primary-3000' : ''}`}>
             <div
-                className={`w-full pl-3 pr-2 ${focused ? 'bg-accent-3000' : 'bg-bg-light'} border-b cursor-pointer`}
+                className={`flex items-center w-full pl-3 pr-2 ${
+                    focused ? 'bg-bg-3000' : 'bg-bg-light'
+                } border-b cursor-pointer`}
                 onMouseEnter={() => {
                     onMouseEnterResult(result.index)
                 }}
@@ -42,6 +44,7 @@ export const ActionResult = ({ result, focused }: SearchResultProps): JSX.Elemen
                     <result.icon className="text-muted-3000" />
                     <span className="ml-2 text-text-3000 font-bold">{result.display}</span>
                 </div>
+                {focused && <div className="shrink-0 text-primary-3000">Run command</div>}
             </div>
         </div>
     )

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

@@ -17,7 +17,9 @@ export const SearchBarTab = ({ type, active, count, inputRef }: SearchBarTabProp
     const { setActiveTab } = useActions(searchBarLogic)
     return (
         <div
-            className={`px-3 py-2 cursor-pointer text-xs whitespace-nowrap ${active && 'font-bold'}`}
+            className={`SearchBarTab flex items-center px-4 py-2 cursor-pointer text-xs whitespace-nowrap border-t-2 ${
+                active ? 'SearchBarTab__active font-bold border-primary-3000' : 'border-transparent'
+            }`}
             onClick={() => {
                 setActiveTab(type)
                 inputRef.current?.focus()

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

@@ -5,26 +5,32 @@ import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardSh
 
 import { searchBarLogic } from './searchBarLogic'
 import { forwardRef, Ref } from 'react'
+
 import { teamLogic } from 'scenes/teamLogic'
+import { isMac } from 'lib/utils'
 
 export const SearchInput = forwardRef(function _SearchInput(_, ref: Ref<HTMLInputElement>): JSX.Element {
     const { currentTeam } = useValues(teamLogic)
     const { searchQuery } = useValues(searchBarLogic)
     const { setSearchQuery } = useActions(searchBarLogic)
 
+    const modifierKey = isMac() ? '⌘' : '^'
+    const placeholder = currentTeam
+        ? `Search the ${currentTeam.name} project or press ${modifierKey}⇧K to go to commands…`
+        : `Search or press ${modifierKey}⇧K to go to commands…`
+
     return (
         <div className="border-b">
             <LemonInput
                 ref={ref}
                 type="search"
-                size="small"
                 className="CommandBar__input"
                 fullWidth
                 suffix={<KeyboardShortcut escape />}
+                placeholder={placeholder}
                 autoFocus
                 value={searchQuery}
                 onChange={setSearchQuery}
-                placeholder={currentTeam ? `Search the ${currentTeam.name} project…` : 'Search…'}
             />
         </div>
     )

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

@@ -41,9 +41,7 @@ export const SearchResult = ({ result, resultIndex, focused, keyboardFocused }:
 
     return (
         <div
-            className={`w-full pl-3 pr-2 ${
-                focused ? 'bg-accent-3000' : 'bg-bg-light'
-            } border-r border-b cursor-pointer`}
+            className={`w-full pl-3 pr-2 ${focused ? 'bg-bg-light' : 'bg-bg-3000'} border-r border-b cursor-pointer`}
             onMouseEnter={() => {
                 if (isAutoScrolling) {
                     return

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

@@ -17,7 +17,7 @@ export const SearchTabs = ({ inputRef }: SearchTabsProps): JSX.Element | null =>
     }
 
     return (
-        <div className="flex items-center border-t space-x-3 px-2 shrink-0 overflow-x-auto">
+        <div className="flex items-center border-t shrink-0 overflow-x-auto bg-bg-light">
             <SearchBarTab type="all" active={activeTab === 'all'} inputRef={inputRef} />
             {Object.entries(searchResponse.counts).map(([type, count]) => (
                 <SearchBarTab

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

@@ -65,7 +65,7 @@ export const actionBarLogic = kea<actionBarLogicType>([
                 // navigate to previous result
                 event.preventDefault()
                 actions.onArrowUp()
-            } else if (event.key === 'Escape') {
+            } else if (event.key === 'Escape' && event.repeat === false) {
                 event.preventDefault()
 
                 if (values.activeFlow) {
@@ -79,7 +79,7 @@ export const actionBarLogic = kea<actionBarLogicType>([
                     actions.hidePalette()
                 }
             } else if (event.key === 'Backspace') {
-                if (values.input.length === 0) {
+                if (values.input.length === 0 && event.repeat === false) {
                     // transition to search when pressing backspace with empty input
                     actions.setCommandBar(BarStatus.SHOW_SEARCH)
                 }

frontend/src/lib/components/CommandBar/index.scss

@@ -1,4 +1,17 @@
 .CommandBar__input {
     border-color: transparent !important;
     border-radius: 0;
+    height: 2.75rem;
+    padding-left: 0.75rem;
+    padding-right: 0.375rem;
+}
+
+.SearchBarTab {
+    &:hover {
+        border-top: 2px solid var(--border-3000);
+    }
+
+    &.SearchBarTab__active {
+        border-color: var(--primary-3000);
+    }
 }

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

@@ -90,6 +90,10 @@ export const searchBarLogic = kea<searchBarLogicType>([
             (s) => [s.keyboardResultIndex, s.hoverResultIndex],
             (keyboardResultIndex: number, hoverResultIndex: number | null) => hoverResultIndex || keyboardResultIndex,
         ],
+        tabs: [
+            (s) => [s.searchCounts],
+            (counts): ResultTypeWithAll[] => ['all', ...(Object.keys(counts || {}) as ResultTypeWithAll[])],
+        ],
     }),
     listeners(({ values, actions }) => ({
         openResult: ({ index }) => {
@@ -118,7 +122,7 @@ export const searchBarLogic = kea<searchBarLogicType>([
                 // navigate to previous result
                 event.preventDefault()
                 actions.onArrowUp(values.activeResultIndex, values.maxIndex)
-            } else if (event.key === 'Escape') {
+            } else if (event.key === 'Escape' && event.repeat === false) {
                 // hide command bar
                 actions.hideCommandBar()
             } else if (event.key === '>') {
@@ -133,6 +137,16 @@ export const searchBarLogic = kea<searchBarLogicType>([
                     event.preventDefault()
                     actions.setCommandBar(BarStatus.SHOW_ACTIONS)
                 }
+            } else if (event.key === 'Tab') {
+                event.preventDefault()
+                const currentIndex = values.tabs.findIndex((tab) => tab === values.activeTab)
+                if (event.shiftKey) {
+                    const prevIndex = currentIndex === 0 ? values.tabs.length - 1 : currentIndex - 1
+                    actions.setActiveTab(values.tabs[prevIndex])
+                } else {
+                    const nextIndex = currentIndex === values.tabs.length - 1 ? 0 : currentIndex + 1
+                    actions.setActiveTab(values.tabs[nextIndex])
+                }
             }
         }
         window.addEventListener('keydown', cache.onKeyDown)