Studio: add CommandMenu trigger in top nav (supabase#40011)

* add CommandMenuTriggerInput in top nav in studio
* uniform command trigger in top nav

Author: fsansalvadore

apps/studio/components/interfaces/UserDropdown.tsx

@@ -101,10 +101,6 @@ export function UserDropdown() {
                 <FlaskConical size={14} strokeWidth={1.5} className="text-foreground-lighter" />
                 Feature previews
               </DropdownMenuItem>
-              <DropdownMenuItem className="flex gap-2" onClick={handleCommandMenuOpen}>
-                <Command size={14} strokeWidth={1.5} className="text-foreground-lighter" />
-                Command menu
-              </DropdownMenuItem>
               <DropdownMenuSeparator />
             </DropdownMenuGroup>
           </>

apps/studio/components/layouts/AppLayout/AssistantButton.tsx

@@ -29,10 +29,11 @@ export const AssistantButton = () => {
       }}
       tooltip={{
         content: {
+          className: 'p-1 pl-2.5',
           text: (
-            <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2.5">
               <span>AI Assistant</span>
-              {isAIAssistantHotkeyEnabled && <KeyboardShortcut keys={['Meta', 'i']} />}
+              {isAIAssistantHotkeyEnabled && <KeyboardShortcut keys={['Meta', 'I']} />}
             </div>
           ),
         },

apps/studio/components/layouts/AppLayout/InlineEditorButton.tsx

@@ -12,7 +12,7 @@ const InlineEditorKeyboardTooltip = () => {
     true
   )
 
-  return hotkeyEnabled ? <KeyboardShortcut keys={['Meta', 'e']} /> : null
+  return hotkeyEnabled ? <KeyboardShortcut keys={['Meta', 'E']} /> : null
 }
 
 export const InlineEditorButton = () => {
@@ -35,8 +35,9 @@ export const InlineEditorButton = () => {
       onClick={handleClick}
       tooltip={{
         content: {
+          className: 'p-1 pl-2.5',
           text: (
-            <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2.5">
               <span>SQL Editor</span>
               <InlineEditorKeyboardTooltip />
             </div>

apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx

@@ -28,6 +28,7 @@ import { HomeIcon } from './HomeIcon'
 import { LocalVersionPopover } from './LocalVersionPopover'
 import MergeRequestButton from './MergeRequestButton'
 import { AdvisorButton } from 'components/layouts/AppLayout/AdvisorButton'
+import { CommandMenuTriggerInput } from 'ui-patterns'
 
 const LayoutHeaderDivider = ({ className, ...props }: React.HTMLProps<HTMLSpanElement>) => (
   <span className={cn('text-border-stronger pr-2', className)} {...props}>
@@ -208,7 +209,16 @@ export const LayoutHeader = ({
               <>
                 <FeedbackDropdown />
 
-                <div className="overflow-hidden flex items-center gap-2">
+                <div className="flex items-center gap-2">
+                  <CommandMenuTriggerInput
+                    placeholder="Search..."
+                    className="hidden md:flex md:min-w-32 xl:min-w-32 rounded-full bg-transparent
+                    [&_.command-shortcut>div]:border-none
+                    [&_.command-shortcut>div]:pr-2
+                    [&_.command-shortcut>div]:bg-transparent
+                    [&_.command-shortcut>div]:text-foreground-lighter
+                  "
+                  />
                   <HelpPopover />
                   <AdvisorButton projectRef={projectRef} />
                   <AnimatePresence initial={false}>
@@ -225,7 +235,16 @@ export const LayoutHeader = ({
             ) : (
               <>
                 <LocalVersionPopover />
-                <div className="overflow-hidden flex items-center gap-2">
+                <div className="flex items-center gap-2">
+                  <CommandMenuTriggerInput
+                    placeholder="Search..."
+                    className="hidden md:flex md:min-w-32 xl:min-w-32 rounded-full bg-transparent
+                        [&_.command-shortcut>div]:border-none
+                        [&_.command-shortcut>div]:pr-2
+                        [&_.command-shortcut>div]:bg-transparent
+                        [&_.command-shortcut>div]:text-foreground-lighter
+                      "
+                  />
                   <AdvisorButton projectRef={projectRef} />
                   <AnimatePresence initial={false}>
                     {!!projectRef && (

apps/studio/lib/profile.tsx

@@ -130,7 +130,7 @@ export function useProfileNameAndPicture(): {
   const { data: identitiesData, isLoading: isLoadingIdentities } = useProfileIdentitiesQuery()
 
   const username = profile?.username
-  const isGitHubProfile = profile?.auth0_id.startsWith('github')
+  const isGitHubProfile = profile?.auth0_id?.startsWith('github')
 
   const gitHubUsername = isGitHubProfile
     ? identitiesData?.identities.find((x) => x.provider === 'github')?.identity_data?.user_name

packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx

@@ -157,7 +157,7 @@ function CommandMenuTrigger({ children }: PropsWithChildren) {
       'inline-flex items-center justify-center',
       'whitespace-nowrap',
       'rounded-md border border-input bg-background',
-      'text-sm font-medium',
+      'text-sm',
       'hover:bg-accent hover:text-accent-foreground',
       'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
       'disabled:pointer-events-none disabled:opacity-50',
@@ -185,15 +185,19 @@ function CommandMenuTriggerInput({
           'pl-1.5 md:pl-2 pr-1',
           'flex items-center justify-between',
           'bg-surface-100/75 text-foreground-lighter border',
-          'hover:bg-opacity-100 hover:border-strong',
-          'focus-visible:!outline-4 focus-visible:outline-offset-1 focus-visible:outline-brand-600',
+          'hover:bg-opacity-100 hover:border-stronger',
+          'focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background',
           'transition',
           className
         )}
       >
-        <div className="flex items-center space-x-2 text-foreground-muted">
-          <Search size={18} strokeWidth={2} />
-          <p className="flex text-sm pr-2">{placeholder}</p>
+        <div className="flex items-center space-x-1.5 text-foreground-lighter">
+          <Search
+            size={16}
+            strokeWidth={1.5}
+            className="group-hover:text-foreground-light transition-colors"
+          />
+          <p className="flex text-sm pr-2 text-foreground-muted">{placeholder}</p>
         </div>
         <div className="command-shortcut hidden md:flex items-center space-x-1">
           <div

packages/ui/src/components/KeyboardShortcut/KeyboardShortcut.tsx

@@ -23,9 +23,9 @@ export const KeyboardShortcut = ({ keys }: { keys: string[] }) => {
       {keysWithMetaAndShift.map((key) => (
         <span
           className={cn(
-            ['⌘', 'Shift', 'Ctrl'].includes(key) ? 'px-1.5 py-0.5' : 'w-[23px] h-[23px]',
-            'border border-b-2 border-foreground-lightest',
-            'rounded-sm flex items-center justify-center cursor-default'
+            ['Shift', 'Ctrl'].includes(key) ? 'px-1.5 py-0.5' : 'w-[23px] h-[23px]',
+            'border border-foreground-lightest',
+            'rounded flex items-center justify-center cursor-default'
           )}
           key={key}
         >