Show gRPC requests in sidebar

src-web/components/SidebarActions.tsx

@@ -1,6 +1,7 @@
 import { memo } from 'react';
 import { useCreateFolder } from '../hooks/useCreateFolder';
-import { useCreateRequest } from '../hooks/useCreateRequest';
+import { useCreateGrpcRequest } from '../hooks/useCreateGrpcRequest';
+import { useCreateHttpRequest } from '../hooks/useCreateHttpRequest';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
 import { trackEvent } from '../lib/analytics';
 import { Dropdown } from './core/Dropdown';
@@ -8,16 +9,17 @@ import { IconButton } from './core/IconButton';
 import { HStack } from './core/Stacks';
 
 export const SidebarActions = memo(function SidebarActions() {
-  const createRequest = useCreateRequest();
+  const createHttpRequest = useCreateHttpRequest();
+  const createGrpcRequest = useCreateGrpcRequest();
   const createFolder = useCreateFolder();
   const { hidden, toggle } = useSidebarHidden();
 
   return (
     <HStack>
       <IconButton
-        onClick={() => {
+        onClick={async () => {
           trackEvent('Sidebar', 'Toggle');
-          toggle();
+          await toggle();
         }}
         className="pointer-events-auto"
         size="sm"
@@ -28,14 +30,19 @@ export const SidebarActions = memo(function SidebarActions() {
       <Dropdown
         items={[
           {
-            key: 'create-request',
-            label: 'New Request',
-            hotKeyAction: 'request.create',
-            onSelect: () => createRequest.mutate({}),
+            key: 'create-http-request',
+            label: 'HTTP Request',
+            hotKeyAction: 'http_request.create',
+            onSelect: () => createHttpRequest.mutate({}),
+          },
+          {
+            key: 'create-grpc-request',
+            label: 'GRPC Request',
+            onSelect: () => createGrpcRequest.mutate({}),
           },
           {
             key: 'create-folder',
-            label: 'New Folder',
+            label: 'Folder',
             onSelect: () => createFolder.mutate({}),
           },
         ]}