Panel icons

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,