folder sections

packages/insomnia/src/ui/components/dropdowns/auth-dropdown.tsx

@@ -259,12 +259,12 @@ export const AuthDropdown: FC<Props> = ({ authentication, authTypes = defaultTyp
           items={authTypeSections}
           className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
         >
-          {item => (
+          {section => (
             <Section>
               <Header className='pl-2 py-1 flex items-center gap-2 text-[--hl] text-xs uppercase'>
-                <Icon icon={item.icon} /> <span>{item.name}</span>
+                <Icon icon={section.icon} /> <span>{section.name}</span>
               </Header>
-              <Collection items={item.items}>
+              <Collection items={section.items}>
                 {item => (
                   <ListBoxItem
                     className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"

packages/insomnia/src/ui/components/dropdowns/content-type-dropdown.tsx

@@ -182,12 +182,12 @@ export const ContentTypeDropdown: FC = () => {
           items={contentTypeSections}
           className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
         >
-          {item => (
+          {section => (
             <Section>
               <Header className='pl-2 py-1 flex items-center gap-2 text-[--hl] text-xs uppercase'>
-                <Icon icon={item.icon} /> <span>{item.name}</span>
+                <Icon icon={section.icon} /> <span>{section.name}</span>
               </Header>
-              <Collection items={item.items}>
+              <Collection items={section.items}>
                 {item => (
                   <ListBoxItem
                     className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"

packages/insomnia/src/ui/components/dropdowns/grpc-method-dropdown/grpc-method-dropdown.tsx

@@ -116,10 +116,10 @@ export const GrpcMethodDropdown: FunctionComponent<Props> = ({
           items={sections}
           className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
         >
-          {item => (
-            <Section key={item.id}>
-              <Header className='flex px-[--padding-md] items-center gap-2 text-[--hl-md]'><span>{item.display_name}</span><span className='bg-[--hl-md] h-[1px] flex-1' /></Header>
-              {item.items.map(grpcMethod => (
+          {section => (
+            <Section key={section.id}>
+              <Header className='flex px-[--padding-md] items-center gap-2 text-[--hl-md]'><span>{section.display_name}</span><span className='bg-[--hl-md] h-[1px] flex-1' /></Header>
+              {section.items.map(grpcMethod => (
                 <ListBoxItem
                   id={grpcMethod.id}
                   key={grpcMethod.id}

packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx

@@ -1,6 +1,6 @@
 import { IconName } from '@fortawesome/fontawesome-svg-core';
 import React, { Fragment, useRef, useState } from 'react';
-import { Button, Menu, MenuItem, MenuTrigger, Popover } from 'react-aria-components';
+import { Button, Collection, Header, Menu, MenuItem, MenuTrigger, Popover, Section } from 'react-aria-components';
 import { useFetcher, useParams, useRouteLoaderData } from 'react-router-dom';
 
 import { toKebabCase } from '../../../common/misc';
@@ -141,161 +141,192 @@ export const RequestGroupActionsDropdown = ({
   const [isPasteCurlModalOpen, setPasteCurlModalOpen] = useState(false);
 
   const requestGroupActionItems: ({
-    id: string;
     name: string;
+    id: string;
     icon: IconName;
-    hint?: PlatformKeyCombinations;
-    action: () => void;
+    items: {
+      id: string;
+      name: string;
+      icon: IconName;
+      hint?: PlatformKeyCombinations;
+      action: () => void;
+    }[];
   })[] = [
       {
-        id: 'HTTP',
-        name: 'HTTP Request',
-        icon: 'plus-circle',
-        hint: hotKeyRegistry.request_createHTTP,
-      action: () => createRequest({
-        requestType: 'HTTP',
-        parentId: requestGroup._id,
-      }),
-      },
-      {
-        id: 'Event Stream',
-        name: 'Event Stream Request',
-        icon: 'plus-circle',
-        action: () => createRequest({
-          requestType: 'Event Stream',
-          parentId: requestGroup._id,
-        }),
-      },
-      {
-        id: 'GraphQL Request',
-        name: 'GraphQL Request',
-        icon: 'plus-circle',
-        action: () => createRequest({
-          requestType: 'GraphQL',
-          parentId: requestGroup._id,
-        }),
-      },
-      {
-        id: 'gRPC Request',
-        name: 'gRPC Request',
-        icon: 'plus-circle',
-        action: () => createRequest({
-          requestType: 'gRPC',
-          parentId: requestGroup._id,
-        }),
-      },
-      {
-        id: 'WebSocket Request',
-        name: 'WebSocket Request',
-        icon: 'plus-circle',
-        action: () => createRequest({
-          requestType: 'WebSocket',
-          parentId: requestGroup._id,
-        }),
-      },
-      {
-        id: 'From Curl',
-        name: 'From Curl',
-        icon: 'terminal',
-        action: () => setPasteCurlModalOpen(true),
-
-      },
-      {
-        id: 'New Folder',
-        name: 'New Folder',
-        icon: 'folder',
-        action: () =>
-          showPrompt({
-            title: 'New Folder',
-            defaultValue: 'My Folder',
-            submitName: 'Create',
-            label: 'Name',
-            selectText: true,
-            onComplete: name => requestFetcher.submit({ parentId: requestGroup._id, name },
-              {
-                action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request-group/new`,
-                method: 'post',
-              }),
+      name: 'Create',
+      id: 'create',
+      icon: 'plus',
+      items: [
+        {
+          id: 'HTTP',
+          name: 'HTTP Request',
+          icon: 'plus-circle',
+          hint: hotKeyRegistry.request_createHTTP,
+          action: () => createRequest({
+            requestType: 'HTTP',
+            parentId: requestGroup._id,
           }),
+        },
+        {
+          id: 'Event Stream',
+          name: 'Event Stream Request',
+          icon: 'plus-circle',
+          action: () => createRequest({
+            requestType: 'Event Stream',
+            parentId: requestGroup._id,
+          }),
+        },
+        {
+          id: 'GraphQL Request',
+          name: 'GraphQL Request',
+          icon: 'plus-circle',
+          action: () => createRequest({
+            requestType: 'GraphQL',
+            parentId: requestGroup._id,
+          }),
+        },
+        {
+          id: 'gRPC Request',
+          name: 'gRPC Request',
+          icon: 'plus-circle',
+          action: () => createRequest({
+            requestType: 'gRPC',
+            parentId: requestGroup._id,
+          }),
+        },
+        {
+          id: 'WebSocket Request',
+          name: 'WebSocket Request',
+          icon: 'plus-circle',
+          action: () => createRequest({
+            requestType: 'WebSocket',
+            parentId: requestGroup._id,
+          }),
+        },
+        {
+          id: 'From Curl',
+          name: 'From Curl',
+          icon: 'terminal',
+          action: () => setPasteCurlModalOpen(true),
+
+        },
+        {
+          id: 'New Folder',
+          name: 'New Folder',
+          icon: 'folder',
+          action: () =>
+            showPrompt({
+              title: 'New Folder',
+              defaultValue: 'My Folder',
+              submitName: 'Create',
+              label: 'Name',
+              selectText: true,
+              onComplete: name => requestFetcher.submit({ parentId: requestGroup._id, name },
+                {
+                  action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request-group/new`,
+                  method: 'post',
+                }),
+            }),
+        },
+        {
+          id: 'Duplicate',
+          name: 'Duplicate',
+          icon: 'copy',
+          hint: hotKeyRegistry.request_createHTTP,
+          action: () => handleRequestGroupDuplicate(),
+        }],
       },
       {
-        id: 'Duplicate',
-        name: 'Duplicate',
-        icon: 'copy',
-        hint: hotKeyRegistry.request_createHTTP,
-        action: () => handleRequestGroupDuplicate(),
-      },
-      {
-        id: 'Rename',
-        name: 'Rename',
-        icon: 'edit',
-        action: () =>
-          handleRename(),
-      },
-      {
-        id: 'Delete',
-        name: 'Delete',
-        icon: 'trash',
-        action: () =>
-          handleDeleteFolder(),
-      },
-      ...actionPlugins.map(plugin => ({
-        id: plugin.label,
-        name: plugin.label,
-        icon: plugin.icon as IconName || 'plug',
-        action: () =>
-          handlePluginClick(plugin),
-      })),
-      {
-        id: 'Settings',
-        name: 'Settings',
-        icon: 'wrench',
-        action: () =>
-          setIsSettingsModalOpen(true),
+        name: 'Manage',
+        id: 'manage',
+        icon: 'cog',
+        items: [
+          {
+            id: 'Rename',
+            name: 'Rename',
+            icon: 'edit',
+            action: () =>
+              handleRename(),
+          },
+          {
+            id: 'Delete',
+            name: 'Delete',
+            icon: 'trash',
+            action: () =>
+              handleDeleteFolder(),
+          },
+          ...actionPlugins.map(plugin => ({
+            id: plugin.label,
+            name: plugin.label,
+            icon: plugin.icon as IconName || 'plug',
+            action: () =>
+              handlePluginClick(plugin),
+          })),
+          {
+            id: 'Settings',
+            name: 'Settings',
+            icon: 'wrench',
+            action: () =>
+              setIsSettingsModalOpen(true),
+          },
+        ],
       },
+
     ];
 
   return (
     <Fragment>
-    <MenuTrigger onOpenChange={isOpen => isOpen && onOpen()}>
-      <Button
-        data-testid={`Dropdown-${toKebabCase(requestGroup.name)}`}
-        aria-label="Request Group Actions"
-        className="opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
-      >
-        <Icon icon="caret-down" />
-      </Button>
-      <Popover className="min-w-max">
-        <Menu
-          aria-label="Request Group Actions Menu"
-          selectionMode="single"
-          onAction={key => {
-            const item = requestGroupActionItems.find(a => a.id === key);
-            item && item.action();
-          }}
-          items={requestGroupActionItems}
-          className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+      <MenuTrigger onOpenChange={isOpen => isOpen && onOpen()}>
+        <Button
+          data-testid={`Dropdown-${toKebabCase(requestGroup.name)}`}
+          aria-label="Request Group Actions"
+          className="opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
         >
-          {item => (
-            <MenuItem
-              key={item.id}
-              id={item.id}
-              className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
-              aria-label={item.name}
-            >
-              <Icon icon={item.icon} />
-              <span>{item.name}</span>
-            </MenuItem>
-          )}
+          <Icon icon="caret-down" />
+        </Button>
+        <Popover className="min-w-max">
+          <Menu
+            aria-label="Request Group Actions Menu"
+            selectionMode="single"
+            onAction={key => {
+              const item = requestGroupActionItems[0].items.find(a => a.id === key) || requestGroupActionItems[1].items.find(a => a.id === key);
+              item && item.action();
+            }}
+            items={requestGroupActionItems}
+            className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+          >
+            {section => (
+              <Section className='flex-1 flex flex-col'>
+                <Header className='pl-2 py-1 flex items-center gap-2 text-[--hl] text-xs uppercase'>
+                  <Icon icon={section.icon} /> <span>{section.name}</span>
+                </Header>
+                <Collection items={section.items}>
+                  {item => (
+                    <MenuItem
+                      key={item.id}
+                      id={item.id}
+                      className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+                      aria-label={item.name}
+                    >
+                      <Icon icon={item.icon} />
+                      <span>{item.name}</span>
+                    </MenuItem>
+                  )}
+                </Collection>
+              </Section>
+            )}
+
         </Menu>
       </Popover>
     </MenuTrigger>
-    {isSettingsModalOpen && (
+      {
+        isSettingsModalOpen && (
       <RequestGroupSettingsModal
         requestGroup={requestGroup}
         onHide={() => setIsSettingsModalOpen(false)}
       />
-    )}
+        )
+      }
       {isPasteCurlModalOpen && (
         <PasteCurlModal
           onImport={req => {