Url parameters done

src-web/components/HeadersEditor.tsx

@@ -14,7 +14,7 @@ type Props = {
   onChange: (headers: HttpRequest['headers']) => void;
 };
 
-export function HeaderEditor({ headers, onChange, forceUpdateKey }: Props) {
+export function HeadersEditor({ headers, onChange, forceUpdateKey }: Props) {
   return (
     <PairEditor
       valueAutocompleteVariables

src-web/components/ParameterEditor.tsx

@@ -3,17 +3,18 @@ import { PairEditor } from './core/PairEditor';
 
 type Props = {
   forceUpdateKey: string;
-  parameters: { name: string; value: string }[];
-  onChange: (headers: HttpRequest['headers']) => void;
+  urlParameters: HttpRequest['headers'];
+  onChange: (headers: HttpRequest['urlParameters']) => void;
 };
 
-export function ParametersEditor({ parameters, forceUpdateKey, onChange }: Props) {
+export function UrlParametersEditor({ urlParameters, forceUpdateKey, onChange }: Props) {
   return (
     <PairEditor
-      forceUpdateKey={forceUpdateKey}
-      pairs={parameters}
+      valueAutocompleteVariables
+      nameAutocompleteVariables
+      pairs={urlParameters}
       onChange={onChange}
-      namePlaceholder="name"
+      forceUpdateKey={forceUpdateKey}
     />
   );
 }

src-web/components/RequestPane.tsx

@@ -10,7 +10,7 @@ import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
 import { useUpdateRequest } from '../hooks/useUpdateRequest';
 import { tryFormatJson } from '../lib/formatters';
-import type { HttpHeader, HttpRequest } from '../lib/models';
+import type { HttpHeader, HttpRequest, HttpUrlParameter } from '../lib/models';
 import {
   AUTH_TYPE_BASIC,
   AUTH_TYPE_BEARER,
@@ -28,8 +28,8 @@ import type { TabItem } from './core/Tabs/Tabs';
 import { TabContent, Tabs } from './core/Tabs/Tabs';
 import { EmptyStateText } from './EmptyStateText';
 import { GraphQLEditor } from './GraphQLEditor';
-import { HeaderEditor } from './HeaderEditor';
-import { ParametersEditor } from './ParameterEditor';
+import { HeadersEditor } from './HeadersEditor';
+import { UrlParametersEditor } from './ParameterEditor';
 import { UrlBar } from './UrlBar';
 
 interface Props {
@@ -92,7 +92,15 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
                 },
               },
             },
-            // { value: 'params', label: 'URL Params' },
+            {
+              value: 'params',
+              label: (
+                <div className="flex items-center">
+                  Params
+                  <CountBadge count={activeRequest.urlParameters.filter((p) => p.name).length} />
+                </div>
+              ),
+            },
             {
               value: 'headers',
               label: (
@@ -141,6 +149,10 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
     (headers: HttpHeader[]) => updateRequest.mutate({ headers }),
     [updateRequest],
   );
+  const handleUrlParametersChange = useCallback(
+    (urlParameters: HttpUrlParameter[]) => updateRequest.mutate({ urlParameters }),
+    [updateRequest],
+  );
 
   useListenToTauriEvent(
     'send_request',
@@ -189,17 +201,17 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
               )}
             </TabContent>
             <TabContent value="headers">
-              <HeaderEditor
+              <HeadersEditor
                 forceUpdateKey={`${forceUpdateHeaderEditorKey}::${forceUpdateKey}`}
                 headers={activeRequest.headers}
                 onChange={handleHeadersChange}
               />
             </TabContent>
             <TabContent value="params">
-              <ParametersEditor
+              <UrlParametersEditor
                 forceUpdateKey={forceUpdateKey}
-                parameters={[]}
-                onChange={() => null}
+                urlParameters={activeRequest.urlParameters}
+                onChange={handleUrlParametersChange}
               />
             </TabContent>
             <TabContent value="body">