Hook up empty state buttons for first-launch experience

src-web/components/CreateDropdown.tsx

@@ -0,0 +1,55 @@
+import { ReactNode } from 'react';
+import { useCreateFolder } from '../hooks/useCreateFolder';
+import { useCreateGrpcRequest } from '../hooks/useCreateGrpcRequest';
+import { useCreateHttpRequest } from '../hooks/useCreateHttpRequest';
+import { BODY_TYPE_GRAPHQL } from '../lib/models';
+import type { DropdownItem, DropdownProps } from './core/Dropdown';
+import { Dropdown } from './core/Dropdown';
+
+interface Props {
+  hideFolder?: boolean;
+  children: DropdownProps['children'];
+}
+
+export function CreateDropdown({ hideFolder, children }: Props) {
+  const createHttpRequest = useCreateHttpRequest();
+  const createGrpcRequest = useCreateGrpcRequest();
+  const createFolder = useCreateFolder();
+
+  return (
+    <Dropdown
+      openOnHotKeyAction="http_request.create"
+      items={[
+        {
+          key: 'create-http-request',
+          label: 'HTTP Request',
+          onSelect: () => createHttpRequest.mutate({}),
+        },
+        {
+          key: 'create-graphql-request',
+          label: 'GraphQL Query',
+          onSelect: () => createHttpRequest.mutate({ bodyType: BODY_TYPE_GRAPHQL, method: 'POST' }),
+        },
+        {
+          key: 'create-grpc-request',
+          label: 'gRPC Call',
+          onSelect: () => createGrpcRequest.mutate({}),
+        },
+        ...((hideFolder
+          ? []
+          : [
+              {
+                type: 'separator',
+              },
+              {
+                key: 'create-folder',
+                label: 'Folder',
+                onSelect: () => createFolder.mutate({}),
+              },
+            ]) as DropdownItem[]),
+      ]}
+    >
+      {children}
+    </Dropdown>
+  );
+}

src-web/components/SidebarActions.tsx

@@ -1,18 +1,11 @@
 import { memo } from 'react';
-import { useCreateFolder } from '../hooks/useCreateFolder';
-import { useCreateGrpcRequest } from '../hooks/useCreateGrpcRequest';
-import { useCreateHttpRequest } from '../hooks/useCreateHttpRequest';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
 import { trackEvent } from '../lib/analytics';
-import { BODY_TYPE_GRAPHQL } from '../lib/models';
-import { Dropdown } from './core/Dropdown';
 import { IconButton } from './core/IconButton';
 import { HStack } from './core/Stacks';
+import { CreateDropdown } from './CreateDropdown';
 
 export const SidebarActions = memo(function SidebarActions() {
-  const createHttpRequest = useCreateHttpRequest();
-  const createGrpcRequest = useCreateGrpcRequest();
-  const createFolder = useCreateFolder();
   const { hidden, show, hide } = useSidebarHidden();
 
   return (
@@ -32,37 +25,9 @@ export const SidebarActions = memo(function SidebarActions() {
         hotkeyAction="sidebar.toggle"
         icon={hidden ? 'leftPanelHidden' : 'leftPanelVisible'}
       />
-      <Dropdown
+      <CreateDropdown>
-        openOnHotKeyAction="http_request.create"
-        items={[
-          {
-            key: 'create-http-request',
-            label: 'HTTP Request',
-            onSelect: () => createHttpRequest.mutate({}),
-          },
-          {
-            key: 'create-graphql-request',
-            label: 'GraphQL Query',
-            onSelect: () =>
-              createHttpRequest.mutate({ bodyType: BODY_TYPE_GRAPHQL, method: 'POST' }),
-          },
-          {
-            key: 'create-grpc-request',
-            label: 'gRPC Call',
-            onSelect: () => createGrpcRequest.mutate({}),
-          },
-          {
-            type: 'separator',
-          },
-          {
-            key: 'create-folder',
-            label: 'Folder',
-            onSelect: () => createFolder.mutate({}),
-          },
-        ]}
-      >
         <IconButton size="sm" icon="plusCircle" title="Add Resource" />
-      </Dropdown>
+      </CreateDropdown>
     </HStack>
   );
 });

src-web/components/Workspace.tsx

@@ -17,6 +17,7 @@ import { useSidebarWidth } from '../hooks/useSidebarWidth';
 import { Button } from './core/Button';
 import { HotKeyList } from './core/HotKeyList';
 import { HStack } from './core/Stacks';
+import { CreateDropdown } from './CreateDropdown';
 import { GrpcConnectionLayout } from './GrpcConnectionLayout';
 import { HttpRequestLayout } from './HttpRequestLayout';
 import { Overlay } from './Overlay';
@@ -167,12 +168,14 @@ export default function Workspace() {
           hotkeys={['http_request.create', 'sidebar.toggle', 'settings.show']}
           bottomSlot={
             <HStack space={1} justifyContent="center" className="mt-3">
-              <Button size="sm" color="gray" onClick={() => importData.mutate()}>
+              <Button variant="border" size="sm" onClick={() => importData.mutate()}>
                 Import
               </Button>
-              <Button size="sm" color="gray">
+              <CreateDropdown hideFolder>
-                New Request
+                <Button variant="border" forDropdown size="sm">
-              </Button>
+                  New Request
+                </Button>
+              </CreateDropdown>
             </HStack>
           }
         />

src-web/components/core/Button.tsx

@@ -46,55 +46,51 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
   const hotkeyTrigger = useFormattedHotkey(hotkeyAction ?? null)?.join('');
   const fullTitle = hotkeyTrigger ? `${title}  ${hotkeyTrigger}` : title;
 
-  const classes = useMemo(
+  const classes = classNames(
-    () =>
+    className,
-      classNames(
+    'max-w-full min-w-0', // Help with truncation
-        className,
+    'hocus:opacity-100', // Force opacity for certain hover effects
-        'max-w-full min-w-0', // Help with truncation
+    'whitespace-nowrap outline-none',
-        'hocus:opacity-100', // Force opacity for certain hover effects
+    'flex-shrink-0 flex items-center',
-        'whitespace-nowrap outline-none',
+    'focus-visible-or-class:ring rounded-md',
-        'flex-shrink-0 flex items-center',
+    disabled ? 'pointer-events-none opacity-disabled' : 'pointer-events-auto',
-        'focus-visible-or-class:ring rounded-md',
+    justify === 'start' && 'justify-start',
-        disabled ? 'pointer-events-none opacity-disabled' : 'pointer-events-auto',
+    justify === 'center' && 'justify-center',
-        justify === 'start' && 'justify-start',
+    size === 'md' && 'h-md px-3',
-        justify === 'center' && 'justify-center',
+    size === 'sm' && 'h-sm px-2.5 text-sm',
-        size === 'md' && 'h-md px-3',
+    size === 'xs' && 'h-xs px-2 text-sm',
-        size === 'sm' && 'h-sm px-2.5 text-sm',
+    // Solids
-        size === 'xs' && 'h-xs px-2 text-sm',
+    variant === 'solid' && color === 'custom' && 'ring-blue-400',
-        // Solids
+    variant === 'solid' &&
-        variant === 'solid' && color === 'custom' && 'ring-blue-400',
+      color === 'default' &&
-        variant === 'solid' &&
+      'text-gray-700 enabled:hocus:bg-gray-700/10 enabled:hocus:text-gray-800 ring-blue-400',
-          color === 'default' &&
+    variant === 'solid' &&
-          'text-gray-700 enabled:hocus:bg-gray-700/10 enabled:hocus:text-gray-800 ring-blue-400',
+      color === 'gray' &&
-        variant === 'solid' &&
+      'text-gray-800 bg-highlight enabled:hocus:text-gray-1000 ring-blue-400',
-          color === 'gray' &&
+    variant === 'solid' && color === 'primary' && 'bg-blue-400 text-white ring-blue-700',
-          'text-gray-800 bg-highlight enabled:hocus:text-gray-1000 ring-blue-400',
+    variant === 'solid' && color === 'secondary' && 'bg-violet-400 text-white ring-violet-700',
-        variant === 'solid' && color === 'primary' && 'bg-blue-400 text-white ring-blue-700',
+    variant === 'solid' && color === 'warning' && 'bg-orange-400 text-white ring-orange-700',
-        variant === 'solid' && color === 'secondary' && 'bg-violet-400 text-white ring-violet-700',
+    variant === 'solid' && color === 'danger' && 'bg-red-400 text-white ring-red-700',
-        variant === 'solid' && color === 'warning' && 'bg-orange-400 text-white ring-orange-700',
+    // Borders
-        variant === 'solid' && color === 'danger' && 'bg-red-400 text-white ring-red-700',
+    variant === 'border' && 'border',
-        // Borders
+    variant === 'border' &&
-        variant === 'border' && 'border',
+      color === 'default' &&
-        variant === 'border' &&
+      'border-highlight text-gray-700 enabled:hocus:border-focus enabled:hocus:text-gray-800 ring-blue-500/50',
-          color === 'default' &&
+    variant === 'border' &&
-          'border-highlight text-gray-700 enabled:hocus:border-focus enabled:hocus:text-gray-800 ring-blue-500/50',
+      color === 'gray' &&
-        variant === 'border' &&
+      'border-gray-500/70 text-gray-700 enabled:hocus:bg-gray-500/20 enabled:hocus:text-gray-800 ring-blue-500/50',
-          color === 'gray' &&
+    variant === 'border' &&
-          'border-gray-500/70 text-gray-700 enabled:hocus:bg-gray-500/20 enabled:hocus:text-gray-800 ring-blue-500/50',
+      color === 'primary' &&
-        variant === 'border' &&
+      'border-blue-500/70 text-blue-700 enabled:hocus:border-blue-500 ring-blue-500/50',
-          color === 'primary' &&
+    variant === 'border' &&
-          'border-blue-500/70 text-blue-700 enabled:hocus:border-blue-500 ring-blue-500/50',
+      color === 'secondary' &&
-        variant === 'border' &&
+      'border-violet-500/70 text-violet-700 enabled:hocus:border-violet-500 ring-violet-500/50',
-          color === 'secondary' &&
+    variant === 'border' &&
-          'border-violet-500/70 text-violet-700 enabled:hocus:border-violet-500 ring-violet-500/50',
+      color === 'warning' &&
-        variant === 'border' &&
+      'border-orange-500/70 text-orange-700 enabled:hocus:border-orange-500 ring-orange-500/50',
-          color === 'warning' &&
+    variant === 'border' &&
-          'border-orange-500/70 text-orange-700 enabled:hocus:border-orange-500 ring-orange-500/50',
+      color === 'danger' &&
-        variant === 'border' &&
+      'border-red-500/70 text-red-700 enabled:hocus:border-red-500 ring-red-500/50',
-          color === 'danger' &&
-          'border-red-500/70 text-red-700 enabled:hocus:border-red-500 ring-red-500/50',
-      ),
-    [className, disabled, justify, size, variant, color],
   );
 
   const buttonRef = useRef<HTMLButtonElement>(null);