feat(command-palette): add button to open the command palette (#7064)

* add button for quick search

* update button styles in project

* make it look good with gh stars

Author: gatzjames

packages/insomnia/src/common/hotkeys.ts

@@ -12,7 +12,7 @@ export const keyboardShortcutDescriptions: Record<KeyboardShortcut, string> = {
   'request_showSettings': 'Show Request Settings',
   'preferences_showKeyboardShortcuts': 'Show Keyboard Shortcuts',
   'preferences_showGeneral': 'Show App Preferences',
-  'request_quickSwitch': 'Switch Requests',
+  'request_quickSwitch': 'Quick search',
   'request_showRecent': 'Show Recent Requests',
   'request_showRecentPrevious': 'Show Recent Requests (Previous)',
   'plugin_reload': 'Reload Plugins',

packages/insomnia/src/ui/components/command-palette.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
 import { useState } from 'react';
-import { Collection, ComboBox, Dialog, Header, Input, Label, ListBox, ListBoxItem, Modal, ModalOverlay, Section, Text } from 'react-aria-components';
+import { Button, Collection, ComboBox, Dialog, DialogTrigger, Header, Input, Keyboard, Label, ListBox, ListBoxItem, Modal, ModalOverlay, Section, Text } from 'react-aria-components';
 import { useNavigate, useParams, useRouteLoaderData } from 'react-router-dom';
 
+import { constructKeyCombinationDisplay, getPlatformKeyCombinations } from '../../common/hotkeys';
 import { fuzzyMatch } from '../../common/misc';
 import { isGrpcRequest } from '../../models/grpc-request';
 import { isRequest } from '../../models/request';
 import { isRequestGroup } from '../../models/request-group';
 import { isWebSocketRequest } from '../../models/websocket-request';
 import { Workspace } from '../../models/workspace';
 import { ProjectLoaderData } from '../routes/project';
+import { RootLoaderData } from '../routes/root';
 import { Collection as WorkspaceCollection, WorkspaceLoaderData } from '../routes/workspace';
 import { Icon } from './icon';
 import { useDocBodyKeyboardShortcuts } from './keydown-binder';
@@ -25,7 +27,7 @@ export const CommandPalette = () => {
   } = useParams();
   const workspaceData = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData | undefined;
   const projectData = useRouteLoaderData('/project/:projectId') as ProjectLoaderData | undefined;
-
+  const { settings } = useRouteLoaderData('root') as RootLoaderData;
   let collection: WorkspaceCollection = [];
   let workspaces: Workspace[] = [];
   if (workspaceData) {
@@ -42,8 +44,18 @@ export const CommandPalette = () => {
     },
   });
 
+  const requestSwitchKeyCombination = getPlatformKeyCombinations(settings.hotKeyRegistry.request_quickSwitch)[0];
+
   return (
-    <ModalOverlay isOpen={isOpen} onOpenChange={setIsOpen} isDismissable className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex pt-20 justify-center bg-black/30">
+    <DialogTrigger onOpenChange={setIsOpen} isOpen={isOpen}>
+      <Button data-testid='quick-search' className="px-4 py-1 h-[30.5px] flex-shrink-0 flex items-center justify-center gap-2 bg-[--hl-xs] aria-pressed:bg-[--hl-sm] data-[pressed]:bg-[--hl-sm] rounded-md text-[--color-font] hover:bg-[--hl-xs] ring-inset ring-transparent ring-1 focus:ring-[--hl-md] transition-all text-sm">
+        <Icon icon="search" />
+        Search..
+        {requestSwitchKeyCombination && <Keyboard className='space-x-0.5 items-center font-sans font-normal text-center text-sm shadow-sm bg-[--hl-xs] text-[--hl] rounded-md py-0.5 px-2 inline-block'>
+          {constructKeyCombinationDisplay(requestSwitchKeyCombination, false)}
+        </Keyboard>}
+      </Button>
+      <ModalOverlay isDismissable className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex pt-20 justify-center bg-black/30">
       <Modal className="max-w-2xl h-max w-full rounded-md flex flex-col overflow-hidden border border-solid border-[--hl-sm] max-h-[80vh] bg-[--color-bg] text-[--color-font]">
         <Dialog className="outline-none h-max overflow-hidden flex flex-col">
           {({ close }) => (
@@ -159,5 +171,6 @@ export const CommandPalette = () => {
         </Dialog>
       </Modal>
     </ModalOverlay>
+    </DialogTrigger>
   );
 };

packages/insomnia/src/ui/components/dropdowns/remote-workspaces-dropdown.tsx

@@ -8,6 +8,7 @@ import { RemoteProject } from '../../../models/project';
 import { RemoteCollectionsLoaderData } from '../../routes/remote-collections';
 import { Dropdown, DropdownButton, DropdownItem, DropdownSection, ItemContent } from '../base/dropdown';
 import { HelpTooltip } from '../help-tooltip';
+import { Icon } from '../icon';
 import { Tooltip } from '../tooltip';
 
 interface Props {
@@ -52,11 +53,13 @@ export const RemoteWorkspacesDropdown: FC<Props> = ({ project: { remoteId } }) =
       onOpen={() => load(`/organization/${organizationId}/project/${projectId}/remote-collections`)}
       triggerButton={
         <StyledDropdownButton
+          className="flex !border-none !ml-0 items-center justify-center !px-4 gap-2 h-full !bg-[--hl-xxs] aria-pressed:!bg-[--hl-sm] rounded-sm text-[--color-font] hover:!bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
           variant='outlined'
           removePaddings={false}
           disableHoverBehavior={false}
         >
-          Pull <i className="fa fa-caret-down pad-left-sm" />
+          <Icon icon='cloud-download' />
+          Pull
         </StyledDropdownButton>
       }
     >

packages/insomnia/src/ui/routes/organization.tsx

@@ -434,10 +434,11 @@ const OrganizationRoute = () => {
       <div className="w-full h-full">
         <div className={`w-full h-full divide-x divide-solid divide-y divide-[--hl-md] ${isScratchPadBannerVisible ? 'grid-template-app-layout-with-banner' : 'grid-template-app-layout'} grid relative bg-[--color-bg]`}>
           <header className="[grid-area:Header] grid grid-cols-3 items-center">
-            <div className="flex items-center">
-              <div className="flex w-[50px] py-2">
+            <div className="flex items-center gap-2">
+              <div className="flex shrink-0 w-[50px] py-2">
                 <InsomniaAILogo />
               </div>
+              <CommandPalette />
               {!user ? <GitHubStarsButton /> : null}
             </div>
             <div className="flex place-content-stretch gap-2 flex-nowrap items-center justify-center">
@@ -471,18 +472,18 @@ const OrganizationRoute = () => {
                   <PresentUsers />
                   <Button
                     aria-label="Invite collaborators"
-                    className="px-4 text-[--color-font-surprise] bg-opacity-100 bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:opacity-80 rounded-sm hover:bg-opacity-80 focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                    className="px-4 text-[--color-font-surprise] bg-opacity-100 bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] py-2 h-full font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:opacity-80 rounded-md hover:bg-opacity-80 focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
                     onPress={() => {
                       window.main.openInBrowser(`${getAppWebsiteBaseURL()}/app/dashboard/organizations/${organizationId}/collaborators`);
                     }}
                   >
                     <Icon icon="user-plus" />
                     <span className="truncate">
-                      Share
+                      Invite
                     </span>
                   </Button>
                   <MenuTrigger>
-                    <Button data-testid='user-dropdown' className="px-1 py-1 flex-shrink-0 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] data-[pressed]:bg-[--hl-sm] rounded-full text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
+                    <Button data-testid='user-dropdown' className="px-1 py-1 flex-shrink-0 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] data-[pressed]:bg-[--hl-sm] rounded-md text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
                       <Avatar
                         src={user.picture}
                         alt={user.name}
@@ -770,7 +771,6 @@ const OrganizationRoute = () => {
         </div>
         <Toast />
       </div>
-      {<CommandPalette />}
     </InsomniaEventStreamProvider>
   );
 };

packages/insomnia/src/ui/routes/project.tsx

@@ -1029,7 +1029,7 @@ const ProjectRoute: FC = () => {
                   )}
                 </div>
               </div>}
-              <div className="flex justify-between w-full gap-1 p-[--padding-md]">
+              <div className="flex justify-between w-full gap-2 p-[--padding-md]">
                 <SearchField
                   aria-label="Workspaces filter"
                   className="group relative flex-1"
@@ -1064,7 +1064,7 @@ const ProjectRoute: FC = () => {
                 >
                   <Button
                     aria-label="Select sort order"
-                    className="flex flex-shrink-0 items-center justify-center aspect-square h-full aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                    className="flex flex-shrink-0 items-center justify-center aspect-square h-full bg-[--hl-xxs] aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
                   >
                     <Icon icon="sort" />
                   </Button>
@@ -1107,9 +1107,9 @@ const ProjectRoute: FC = () => {
                 <MenuTrigger>
                   <Button
                     aria-label="Create in project"
-                    className="flex items-center justify-center h-full aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                    className="flex items-center justify-center px-4 gap-2 h-full bg-[--hl-xxs] aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
                   >
-                    <Icon icon="plus-circle" />
+                    <Icon icon="plus-circle" /> Create
                   </Button>
                   <Popover className="min-w-max">
                     <Menu
@@ -1185,7 +1185,7 @@ const ProjectRoute: FC = () => {
                         key={item._id}
                         id={item._id}
                         textValue={item.name}
-                        className="flex-1 overflow-hidden flex-col outline-none p-[--padding-md] flex select-none w-full rounded-sm hover:shadow-md aspect-square ring-1 ring-[--hl-md] hover:ring-[--hl-sm] focus:ring-[--hl-lg] hover:bg-[--hl-xs] focus:bg-[--hl-sm] transition-all"
+                        className="flex-1 overflow-hidden flex-col outline-none p-[--padding-md] flex select-none w-full rounded-md hover:shadow-md aspect-square ring-1 ring-[--hl-md] hover:ring-[--hl-sm] focus:ring-[--hl-lg] hover:bg-[--hl-xs] focus:bg-[--hl-sm] transition-all"
                       >
                         <div className="flex gap-2 h-[20px]">
                           <div className="flex pr-2 h-full flex-shrink-0 items-center rounded-sm gap-2 bg-[--hl-xs] text-[--color-font] text-sm">