Move the command bar out to the right in the AppHeader (#2317)

* Move the command bar out to the right in the AppHeader

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* trigger ci

* trigger ci

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Kurt Hutten <k.hutten@protonmail.ch>

e2e/playwright/flow-tests.spec.ts

@@ -954,9 +954,8 @@ test.describe('Command bar tests', () => {
     let cmdSearchBar = page.getByPlaceholder('Search commands')
 
     // First try opening the command bar and closing it
-    // It has a different label on mac and windows/linux, "Meta+K" and "Ctrl+/" respectively
     await page
-      .getByRole('button', { name: 'Ctrl+/' })
+      .getByRole('button', { name: 'Commands', exact: false })
       .or(page.getByRole('button', { name: '⌘K' }))
       .click()
     await expect(cmdSearchBar).toBeVisible()

src/Toolbar.tsx

@@ -274,17 +274,8 @@ export const Toolbar = () => {
   }
 
   return (
-    <div className="max-w-full flex items-stretch rounded-l-sm rounded-r-full bg-chalkboard-10/80 dark:bg-chalkboard-110/70 relative">
+    <menu className="max-w-full overflow-hidden whitespace-nowrap rounded px-1.5 py-0.5 backdrop-blur-sm bg-chalkboard-10/80 dark:bg-chalkboard-110/70 relative">
-      <menu className="flex-1 pl-1 pr-2 py-0 overflow-hidden rounded-l-sm whitespace-nowrap border-solid border border-primary/30 dark:border-chalkboard-90 border-r-0">
+      <ToolbarButtons />
-        <ToolbarButtons />
+    </menu>
-      </menu>
-      <ActionButton
-        Element="button"
-        onClick={() => commandBarSend({ type: 'Open' })}
-        className="rounded-r-full pr-4 self-stretch border-primary/30 hover:border-primary dark:border-chalkboard-80 dark:bg-chalkboard-80 text-primary"
-      >
-        {platform === 'macos' ? '⌘K' : 'Ctrl+/'}
-      </ActionButton>
-    </div>
   )
 }

src/components/AppHeader.tsx

@@ -8,6 +8,7 @@ import { useCommandsContext } from 'hooks/useCommandsContext'
 import { ActionButton } from 'components/ActionButton'
 import usePlatform from 'hooks/usePlatform'
 import { RefreshButton } from 'components/RefreshButton'
+import { CommandBarOpenButton } from './CommandBarOpenButton'
 
 interface AppHeaderProps extends React.PropsWithChildren {
   showToolbar?: boolean
@@ -44,25 +45,13 @@ export const AppHeader = ({
       />
       {/* Toolbar if the context deems it */}
       <div className="flex-grow flex justify-center max-w-lg md:max-w-xl lg:max-w-2xl xl:max-w-4xl 2xl:max-w-5xl">
-        {showToolbar ? (
+        {showToolbar && <Toolbar />}
-          <Toolbar />
-        ) : (
-          <ActionButton
-            Element="button"
-            onClick={() => commandBarSend({ type: 'Open' })}
-            className="text-sm self-center flex items-center w-fit gap-3"
-          >
-            Command Palette{' '}
-            <kbd className="bg-primary/10 dark:bg-chalkboard-100 dark:text-primary inline-block px-1 py-0.5 border-primary dark:border-chalkboard-90">
-              {platform === 'macos' ? '⌘K' : 'Ctrl+/'}
-            </kbd>
-          </ActionButton>
-        )}
       </div>
       <div className="flex items-center gap-1 py-1 ml-auto">
         {/* If there are children, show them, otherwise show User menu */}
         {children || (
           <>
+            <CommandBarOpenButton />
             <RefreshButton />
             <UserSidebarMenu user={user} />
           </>

src/components/CommandBarOpenButton.tsx

@@ -0,0 +1,19 @@
+import { useCommandsContext } from 'hooks/useCommandsContext'
+import usePlatform from 'hooks/usePlatform'
+
+export function CommandBarOpenButton() {
+  const { commandBarSend } = useCommandsContext()
+  const platform = usePlatform()
+
+  return (
+    <button
+      className="group rounded-full flex items-center justify-center gap-2 px-2 py-1 bg-primary/10 dark:bg-chalkboard-90 dark:backdrop-blur-sm border-primary hover:border-primary dark:border-chalkboard-50 dark:hover:border-inherit text-primary dark:text-inherit"
+      onClick={() => commandBarSend({ type: 'Open' })}
+    >
+      <span>Commands</span>
+      <kbd className="bg-primary/10 dark:bg-chalkboard-80 dark:group-hover:bg-primary font-mono rounded-sm dark:text-inherit inline-block px-1 border-primary dark:border-chalkboard-90">
+        {platform === 'macos' ? '⌘K' : '^/'}
+      </kbd>
+    </button>
+  )
+}

src/components/CommandComboBox.tsx

@@ -38,7 +38,7 @@ function CommandComboBox({
       <div className="flex items-center gap-2 px-4 pb-2 border-solid border-0 border-b border-b-chalkboard-20 dark:border-b-chalkboard-80">
         <CustomIcon
           name="search"
-          className="w-5 h-5 bg-primary/10 text-primary"
+          className="w-5 h-5 bg-primary/10 dark:bg-primary text-primary dark:text-inherit"
         />
         <Combobox.Input
           onChange={(event) => setQuery(event.target.value)}