Panel icons

src-web/assets/icons/LeftPanelHiddenIcon.svg

@@ -0,0 +1,5 @@
+<svg width="100%" height="100%" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+        <path fill="currentColor"
+              d="M2.5,1C1.672,1 1,1.672 1,2.5L1,12.5C1,13.328 1.672,14 2.5,14L12.5,14C13.328,14 14,13.328 14,12.5L14,2.5C14,1.672 13.328,1 12.5,1L2.5,1ZM12.5,13C12.776,13 13,12.776 13,12.5L13,2.5C13,2.224 12.776,2 12.5,2L6,2L6,13L12.5,13ZM2.5,2L5,2L5,13L2.5,13C2.224,13 2,12.776 2,12.5L2,2.5C2,2.224 2.224,2 2.5,2Z"/>
+</svg>

src-web/assets/icons/LeftPanelVisibleIcon.svg

@@ -0,0 +1,6 @@
+<svg width="100%" height="100%" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+            <rect x="0" y="0" width="15" height="15" style="fill:none;"/>
+            <g transform="matrix(1,0,0,1,-16,-8.88178e-16)">
+                <path fill="currentColor" d="M18.5,1C17.672,1 17,1.672 17,2.5L17,12.5C17,13.328 17.672,14 18.5,14L28.5,14C29.328,14 30,13.328 30,12.5L30,2.5C30,1.672 29.328,1 28.5,1L18.5,1ZM28.5,13C28.776,13 29,12.776 29,12.5L29,2.5C29,2.224 28.776,2 28.5,2L22,2L22,13L28.5,13ZM18,11.535L21,12.285L21,13L18.5,13C18.224,13 18,12.776 18,12.5L18,11.535ZM18,10.504L21,11.254L21,9.81L18,9.06L18,10.504ZM18,8.029L21,8.779L21,7.327L18,6.577L18,8.029ZM18,5.546L21,6.296L21,4.833L18,4.083L18,5.546ZM21,3.802L18,3.052L18,2.5C18,2.224 18.224,2 18.5,2L21,2L21,3.802Z"/>
+            </g>
+</svg>

src-web/components/EmptyStateText.tsx

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+export function EmptyStateText({ children }: Props) {
+  return <div className="h-full text-gray-400 flex items-center justify-center">{children}</div>;
+}

src-web/components/RequestPane.tsx

@@ -10,6 +10,7 @@ import { HttpRequestBodyType } from '../lib/models';
 import { Editor } from './core/Editor';
 import type { TabItem } from './core/Tabs/Tabs';
 import { TabContent, Tabs } from './core/Tabs/Tabs';
+import { EmptyStateText } from './EmptyStateText';
 import { GraphQLEditor } from './GraphQLEditor';
 import { HeaderEditor } from './HeaderEditor';
 import { ParametersEditor } from './ParameterEditor';
@@ -141,7 +142,7 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
                   onChange={handleBodyChange}
                 />
               ) : (
-                <div className="h-full text-gray-400 flex items-center justify-center">No Body</div>
+                <EmptyStateText>No Body</EmptyStateText>
               )}
             </TabContent>
           </Tabs>

src-web/components/ResponsePane.tsx

@@ -16,6 +16,7 @@ import { IconButton } from './core/IconButton';
 import { HStack } from './core/Stacks';
 import { StatusColor } from './core/StatusColor';
 import { Webview } from './core/Webview';
+import { EmptyStateText } from './EmptyStateText';
 
 interface Props {
   style?: CSSProperties;
@@ -109,7 +110,9 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
         )}
       </HStack>
 
-      {!activeResponse ? null : activeResponse?.error ? (
+      {activeResponse === null ? (
+        <EmptyStateText>No Response</EmptyStateText>
+      ) : activeResponse?.error ? (
         <div className="p-1">
           <div className="text-white bg-red-500 px-3 py-3 rounded">{activeResponse.error}</div>
         </div>

src-web/components/SidebarDisplayToggle.tsx

@@ -10,7 +10,7 @@ export const SidebarDisplayToggle = memo(function SidebarDisplayToggle() {
       className="pointer-events-auto"
       size="sm"
       title="Show sidebar"
-      icon="hamburger"
+      icon={sidebarDisplay.hidden ? 'leftPanelHidden' : 'leftPanelVisible'}
     />
   );
 });

src-web/components/UrlBar.tsx

@@ -52,6 +52,7 @@ export const UrlBar = memo(function UrlBar({ id: requestId, url, method, classNa
         }
         rightSlot={
           <IconButton
+            size="xs"
             title="Send Request"
             type="submit"
             color="custom"

src-web/components/core/Dropdown.tsx

@@ -180,7 +180,6 @@ function Menu({ className, items, onClose, triggerRect }: MenuProps) {
             space={0.5}
             ref={initMenu}
             style={menuStyles}
-            tabIndex={-1}
             className={classnames(
               className,
               'h-auto bg-gray-50 rounded-md shadow-lg dark:shadow-gray-0 py-1.5 border',
@@ -232,6 +231,7 @@ function MenuItem({ className, focused, item, onSelect, ...props }: MenuItemProp
   return (
     <button
       ref={initRef}
+      tabIndex={focused ? 0 : -1}
       onMouseEnter={(e) => e.currentTarget.focus()}
       onMouseLeave={(e) => e.currentTarget.blur()}
       onClick={handleClick}

src-web/components/core/Icon.tsx

@@ -33,6 +33,8 @@ import {
   TriangleRightIcon,
   UpdateIcon,
 } from '@radix-ui/react-icons';
+import { ReactComponent as LeftPanelHiddenIcon } from '../../assets/icons/LeftPanelHiddenIcon.svg';
+import { ReactComponent as LeftPanelVisibleIcon } from '../../assets/icons/LeftPanelVisibleIcon.svg';
 import classnames from 'classnames';
 import { memo } from 'react';
 
@@ -54,6 +56,8 @@ const icons = {
   gear: GearIcon,
   hamburger: HamburgerMenuIcon,
   home: HomeIcon,
+  leftPanelHidden: LeftPanelHiddenIcon,
+  leftPanelVisible: LeftPanelVisibleIcon,
   listBullet: ListBulletIcon,
   magicWand: MagicWandIcon,
   magnifyingGlass: MagnifyingGlassIcon,

src-web/index.d.ts

@@ -1,3 +1,7 @@
 declare module 'format-graphql' {
   export function formatSdl(query: string): string;
 }
+
+declare module '*.svg' {
+  export const ReactComponent: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+}