Setting to colorize HTTP methods

https://feedback.yaak.app/p/support-colors-for-http-method-in-sidebar

src-web/components/RequestMethodDropdown.tsx

@@ -1,16 +1,17 @@
+import { HttpRequest, patchModel } from '@yaakapp-internal/models';
 import classNames from 'classnames';
-import { memo, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { showPrompt } from '../lib/prompt';
 import { Button } from './core/Button';
 import type { DropdownItem } from './core/Dropdown';
+import { HttpMethodTag } from './core/HttpMethodTag';
 import { Icon } from './core/Icon';
 import type { RadioDropdownItem } from './core/RadioDropdown';
 import { RadioDropdown } from './core/RadioDropdown';
 
 type Props = {
-  method: string;
+  request: HttpRequest;
   className?: string;
-  onChange: (method: string) => void;
 };
 
 const radioItems: RadioDropdownItem<string>[] = [
@@ -28,10 +29,13 @@ const radioItems: RadioDropdownItem<string>[] = [
 }));
 
 export const RequestMethodDropdown = memo(function RequestMethodDropdown({
-  method,
-  onChange,
+  request,
   className,
 }: Props) {
+  const handleChange = useCallback(async (method: string) => {
+    await patchModel(request, { method });
+  }, []);
+
   const itemsAfter = useMemo<DropdownItem[]>(
     () => [
       {
@@ -49,17 +53,22 @@ export const RequestMethodDropdown = memo(function RequestMethodDropdown({
             placeholder: 'CUSTOM',
           });
           if (newMethod == null) return;
-          onChange(newMethod);
+          await handleChange(newMethod);
         },
       },
     ],
-    [onChange],
+    [],
   );
 
   return (
-    <RadioDropdown value={method} items={radioItems} itemsAfter={itemsAfter} onChange={onChange}>
+    <RadioDropdown
+      value={request.method}
+      items={radioItems}
+      itemsAfter={itemsAfter}
+      onChange={handleChange}
+    >
       <Button size="xs" className={classNames(className, 'text-text-subtle hover:text')}>
-        {method.toUpperCase()}
+        <HttpMethodTag request={request}/>
       </Button>
     </RadioDropdown>
   );