Better creation from folder menu

src-web/components/CreateDropdown.tsx

@@ -1,8 +1,5 @@
-import { useCreateFolder } from '../hooks/useCreateFolder';
+import { useCreateDropdownItems } from '../hooks/useCreateDropdownItems';
-import { useCreateGrpcRequest } from '../hooks/useCreateGrpcRequest';
+import type { DropdownProps } from './core/Dropdown';
-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 {
@@ -12,43 +9,9 @@ interface Props {
 }
 
 export function CreateDropdown({ hideFolder, children, openOnHotKeyAction }: Props) {
-  const createHttpRequest = useCreateHttpRequest();
+  const items = useCreateDropdownItems({ hideFolder, hideIcons: true });
-  const createGrpcRequest = useCreateGrpcRequest();
-  const createFolder = useCreateFolder();
-
   return (
-    <Dropdown
+    <Dropdown openOnHotKeyAction={openOnHotKeyAction} items={items}>
-      openOnHotKeyAction={openOnHotKeyAction}
-      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/Sidebar.tsx

@@ -9,8 +9,7 @@ import { useActiveEnvironmentId } from '../hooks/useActiveEnvironmentId';
 import { useActiveRequest } from '../hooks/useActiveRequest';
 import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
 import { useAppRoutes } from '../hooks/useAppRoutes';
-import { useCreateFolder } from '../hooks/useCreateFolder';
+import { useCreateDropdownItems } from '../hooks/useCreateDropdownItems';
-import { useCreateHttpRequest } from '../hooks/useCreateHttpRequest';
 import { useDeleteFolder } from '../hooks/useDeleteFolder';
 import { useDeleteRequest } from '../hooks/useDeleteRequest';
 import { useDuplicateGrpcRequest } from '../hooks/useDuplicateGrpcRequest';
@@ -581,8 +580,6 @@ const SidebarItem = forwardRef(function SidebarItem(
   ref: ForwardedRef<HTMLLIElement>,
 ) {
   const activeRequest = useActiveRequest();
-  const createRequest = useCreateHttpRequest();
-  const createFolder = useCreateFolder();
   const deleteFolder = useDeleteFolder(itemId);
   const deleteRequest = useDeleteRequest(activeRequest ?? null);
   const duplicateHttpRequest = useDuplicateHttpRequest({ id: itemId, navigateAfter: true });
@@ -597,6 +594,7 @@ const SidebarItem = forwardRef(function SidebarItem(
   const prompt = usePrompt();
   const [editing, setEditing] = useState<boolean>(false);
   const isActive = activeRequest?.id === itemId;
+  const createDropdownItems = useCreateDropdownItems({ folderId: itemId });
 
   const handleSubmitNameEdit = useCallback(
     (el: HTMLInputElement) => {
@@ -700,18 +698,7 @@ const SidebarItem = forwardRef(function SidebarItem(
                     onSelect: () => deleteFolder.mutate(),
                   },
                   { type: 'separator' },
-                  {
+                  ...createDropdownItems,
-                    key: 'createRequest',
-                    label: 'New Request',
-                    leftSlot: <Icon icon="plus" />,
-                    onSelect: () => createRequest.mutate({ folderId: itemId }),
-                  },
-                  {
-                    key: 'createFolder',
-                    label: 'New Folder',
-                    leftSlot: <Icon icon="plus" />,
-                    onSelect: () => createFolder.mutate({ folderId: itemId, sortPriority: -1 }),
-                  },
                 ]
               : [
                   ...((itemModel === 'http_request'

src-web/hooks/useCreateDropdownItems.tsx

@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+import type { DropdownItem } from '../components/core/Dropdown';
+import { Icon } from '../components/core/Icon';
+import { BODY_TYPE_GRAPHQL } from '../lib/models';
+import { useCreateFolder } from './useCreateFolder';
+import { useCreateGrpcRequest } from './useCreateGrpcRequest';
+import { useCreateHttpRequest } from './useCreateHttpRequest';
+
+export function useCreateDropdownItems({
+  hideFolder,
+  hideIcons,
+  folderId,
+}: {
+  hideFolder?: boolean;
+  hideIcons?: boolean;
+  folderId?: string;
+} = {}): DropdownItem[] {
+  const createHttpRequest = useCreateHttpRequest();
+  const createGrpcRequest = useCreateGrpcRequest();
+  const createFolder = useCreateFolder();
+
+  return useMemo<DropdownItem[]>(
+    () => [
+      {
+        key: 'create-http-request',
+        label: 'HTTP Request',
+        leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
+        onSelect: () => createHttpRequest.mutate({ folderId }),
+      },
+      {
+        key: 'create-graphql-request',
+        label: 'GraphQL Query',
+        leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
+        onSelect: () =>
+          createHttpRequest.mutate({ folderId, bodyType: BODY_TYPE_GRAPHQL, method: 'POST' }),
+      },
+      {
+        key: 'create-grpc-request',
+        label: 'gRPC Call',
+        leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
+        onSelect: () => createGrpcRequest.mutate({ folderId }),
+      },
+      ...((hideFolder
+        ? []
+        : [
+            {
+              type: 'separator',
+            },
+            {
+              key: 'create-folder',
+              label: 'Folder',
+              leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
+              onSelect: () => createFolder.mutate({ folderId }),
+            },
+          ]) as DropdownItem[]),
+    ],
+    [createFolder, createGrpcRequest, createHttpRequest, hideFolder],
+  );
+}