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>

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 ? (
-          <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>
-        )}
+        {showToolbar && <Toolbar />}
       </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} />
           </>