added cURL option somewhere else

Author: dCodes03

src-web/components/ImportCurlDialog.tsx

@@ -4,6 +4,7 @@ import { Banner } from './core/Banner';
 import { Button } from './core/Button';
 import { Editor } from './core/Editor/LazyEditor';
 import { Icon } from './core/Icon';
+import { PlainInput } from './core/PlainInput';
 import { HStack, VStack } from './core/Stacks';
 
 interface Props {
@@ -17,6 +18,7 @@ const EXAMPLE_CURL = `curl https://api.example.com/users \\
 
 export function ImportCurlDialog({ hide }: Props) {
   const [curlCommand, setCurlCommand] = useState<string>('');
+  const [requestName, setRequestName] = useState<string>('');
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
   const { mutate: importCurl } = useImportCurl();
@@ -35,7 +37,7 @@ export function ImportCurlDialog({ hide }: Props) {
     setError(null);
     setIsLoading(true);
     try {
-      await importCurl({ command: curlCommand });
+      await importCurl({ command: curlCommand, name: requestName });
       hide();
     } catch (error) {
       console.error('Failed to import cURL:', error);
@@ -63,6 +65,18 @@ export function ImportCurlDialog({ hide }: Props) {
         </VStack>
       </Banner>
 
+      {/* Request Name (Optional) */}
+      <VStack space={2}>
+        <div className="text-sm font-medium text-text">Name <span className="text-text-subtle font-normal">(optional)</span></div>
+        <PlainInput
+          label="Request Name"
+          hideLabel
+          placeholder="e.g., Get Users, Create Order"
+          defaultValue={requestName}
+          onChange={(value) => setRequestName(value)}
+        />
+      </VStack>
+
       {/* Editor Section */}
       <VStack space={2} className="flex-1 min-h-0">
         <div className="text-sm font-medium text-text">cURL Command</div>

src-web/components/Sidebar.tsx

@@ -43,6 +43,7 @@ import { sendAnyHttpRequest } from '../hooks/useSendAnyHttpRequest';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
 import { deepEqualAtom } from '../lib/atoms';
 import { deleteModelWithConfirm } from '../lib/deleteModelWithConfirm';
+import { showDialog } from '../lib/dialog';
 import { jotaiStore } from '../lib/jotai';
 import { resolvedModelName } from '../lib/resolvedModelName';
 import { isSidebarFocused } from '../lib/scopes';
@@ -67,6 +68,7 @@ import type { TreeHandle, TreeProps } from './core/tree/Tree';
 import { Tree } from './core/tree/Tree';
 import type { TreeItemProps } from './core/tree/TreeItem';
 import { GitDropdown } from './git/GitDropdown';
+import { ImportCurlDialog } from './ImportCurlDialog';
 
 type SidebarModel = Workspace | Folder | HttpRequest | GrpcRequest | WebsocketRequest;
 function isSidebarLeafModel(m: AnyModel): boolean {
@@ -457,6 +459,25 @@ function Sidebar({ className }: { className?: string }) {
     });
   }, [allFields]);
 
+  // Subscribe to activeIdAtom changes to auto-select new requests in the sidebar
+  useEffect(() => {
+    return jotaiStore.sub(activeIdAtom, () => {
+      const activeId = jotaiStore.get(activeIdAtom);
+      if (activeId != null && treeRef.current != null) {
+        treeRef.current.selectItem(activeId);
+      }
+    });
+  }, []);
+
+  const handleImportCurl = useCallback(() => {
+    showDialog({
+      id: 'import-curl',
+      title: 'Import cURL Command',
+      size: 'md',
+      render: ImportCurlDialog,
+    });
+  }, []);
+
   if (tree == null || hidden) {
     return null;
   }
@@ -467,9 +488,18 @@ function Sidebar({ className }: { className?: string }) {
       aria-hidden={hidden ?? undefined}
       className={classNames(className, 'h-full grid grid-rows-[auto_minmax(0,1fr)_auto]')}
     >
-      <div className="w-full pl-3 pr-0.5 pt-3 grid grid-cols-[minmax(0,1fr)_auto] items-center">
+      <div className="w-full px-3 pt-3 flex flex-col gap-2">
+        <IconButton
+          size="sm"
+          icon="import"
+          className="w-full justify-center"
+          title="Import cURL command"
+          onClick={handleImportCurl}
+        >
+          Import
+        </IconButton>
         {(tree.children?.length ?? 0) > 0 && (
-          <>
+          <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center">
             <Input
               hideLabel
               setRef={setFilterRef}
@@ -544,7 +574,7 @@ function Sidebar({ className }: { className?: string }) {
                 title="Show sidebar actions menu"
               />
             </Dropdown>
-          </>
+          </div>
         )}
       </div>
       {allHidden ? (

src-web/hooks/useCreateDropdownItems.tsx

@@ -5,9 +5,7 @@ import { useMemo } from 'react';
 import { createFolder } from '../commands/commands';
 import type { DropdownItem } from '../components/core/Dropdown';
 import { Icon } from '../components/core/Icon';
-import { ImportCurlDialog } from '../components/ImportCurlDialog';
 import { createRequestAndNavigate } from '../lib/createRequestAndNavigate';
-import { showDialog } from '../lib/dialog';
 import { generateId } from '../lib/generateId';
 import { BODY_TYPE_GRAPHQL } from '../lib/model_util';
 import { activeRequestAtom } from './useActiveRequest';
@@ -66,17 +64,6 @@ export function getCreateDropdownItems({
         onCreate?.('http_request', id);
       },
     },
-    {
-      label: 'cURL',
-      leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
-      onSelect: () =>
-        showDialog({
-          id: 'import-curl',
-          title: 'Import cURL Command',
-          size: 'md',
-          render: ImportCurlDialog,
-        }),
-    },
     {
       label: 'GraphQL',
       leftSlot: hideIcons ? undefined : <Icon icon="plus" />,

src-web/hooks/useImportCurl.ts

@@ -14,20 +14,28 @@ export function useImportCurl() {
     mutationFn: async ({
       overwriteRequestId,
       command,
+      name,
     }: {
       overwriteRequestId?: string;
       command: string;
+      name?: string;
     }) => {
       const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
       const importedRequest: HttpRequest = await invokeCmd('cmd_curl_to_request', {
         command,
         workspaceId,
       });
 
+      // Apply custom name if provided
+      const requestToCreate = {
+        ...importedRequest,
+        name: name?.trim() || importedRequest.name,
+      };
+
       let verb: string;
       if (overwriteRequestId == null) {
         verb = 'Created';
-        await createRequestAndNavigate(importedRequest);
+        await createRequestAndNavigate(requestToCreate);
       } else {
         verb = 'Updated';
         await patchModelById(importedRequest.model, overwriteRequestId, (r: HttpRequest) => ({