Setting to colorize HTTP methods

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

src-web/components/core/Dropdown.tsx

@@ -642,7 +642,7 @@ function MenuItem({ className, focused, onFocus, item, onSelect, ...props }: Men
       justify="start"
       leftSlot={
         (isLoading || item.leftSlot) && (
-          <div className={classNames('pr-2 flex justify-start opacity-70')}>
+          <div className={classNames('pr-2 flex justify-start [&_svg]:opacity-70')}>
             {isLoading ? <LoadingIcon /> : item.leftSlot}
           </div>
         )

src-web/components/core/HttpMethodTag.tsx

@@ -1,10 +1,11 @@
-import type { GrpcRequest, HttpRequest, WebsocketRequest } from '@yaakapp-internal/models';
+import { GrpcRequest, HttpRequest, settingsAtom, WebsocketRequest } from '@yaakapp-internal/models';
 import classNames from 'classnames';
+import { useAtomValue } from 'jotai';
 
 interface Props {
   request: HttpRequest | GrpcRequest | WebsocketRequest;
   className?: string;
-  shortNames?: boolean;
+  short?: boolean;
 }
 
 const methodNames: Record<string, string> = {
@@ -18,7 +19,8 @@ const methodNames: Record<string, string> = {
   query: 'QURY',
 };
 
-export function HttpMethodTag({ request, className }: Props) {
+export function HttpMethodTag({ request, className, short }: Props) {
+  const settings = useAtomValue(settingsAtom);
   const method =
     request.model === 'http_request' && request.bodyType === 'graphql'
       ? 'GQL'
@@ -26,19 +28,34 @@ export function HttpMethodTag({ request, className }: Props) {
         ? 'GRPC'
         : request.model === 'websocket_request'
           ? 'WS'
-          : (methodNames[request.method.toLowerCase()] ?? request.method.slice(0, 4));
+          : request.method;
+  let label = method.toUpperCase();
 
-  const paddedMethod = method.padStart(4, ' ').toUpperCase();
+  if (short) {
+    label = methodNames[method.toLowerCase()] ?? method.slice(0, 4);
+    label = label.padStart(4, ' ');
+  }
 
   return (
     <span
       className={classNames(
         className,
-        'text-xs font-mono text-text-subtle flex-shrink-0 whitespace-pre',
+        !settings.coloredMethods && 'text-text-subtle',
+        settings.coloredMethods && method === 'GQL' && 'text-info',
+        settings.coloredMethods && method === 'WS' && 'text-info',
+        settings.coloredMethods && method === 'GRPC' && 'text-info',
+        settings.coloredMethods && method === 'OPTIONS' && 'text-info',
+        settings.coloredMethods && method === 'HEAD' && 'text-info',
+        settings.coloredMethods && method === 'GET' && 'text-primary',
+        settings.coloredMethods && method === 'PUT' && 'text-warning',
+        settings.coloredMethods && method === 'PATCH' && 'text-notice',
+        settings.coloredMethods && method === 'POST' && 'text-success',
+        settings.coloredMethods && method === 'DELETE' && 'text-danger',
+        'font-mono flex-shrink-0 whitespace-pre',
         'pt-[0.25em]', // Fix for monospace font not vertically centering
       )}
     >
-      {paddedMethod}
+      {label}
     </span>
   );
 }

src-web/components/core/HttpStatusTag.tsx

@@ -5,19 +5,20 @@ interface Props {
   response: HttpResponse;
   className?: string;
   showReason?: boolean;
+  short?: boolean;
 }
 
-export function HttpStatusTag({ response, className, showReason }: Props) {
+export function HttpStatusTag({ response, className, showReason, short }: Props) {
   const { status, state } = response;
 
   let colorClass;
   let label = `${status}`;
 
   if (state === 'initialized') {
-    label = 'CONNECTING';
+    label = short ? 'CONN' : 'CONNECTING';
     colorClass = 'text-text-subtle';
   } else if (status < 100) {
-    label = 'ERROR';
+    label = short ? 'ERR' : 'ERROR';
     colorClass = 'text-danger';
   } else if (status < 200) {
     colorClass = 'text-info';
@@ -33,8 +34,7 @@ export function HttpStatusTag({ response, className, showReason }: Props) {
 
   return (
     <span className={classNames(className, 'font-mono', colorClass)}>
-      {label}{' '}
-      {showReason && 'statusReason' in response ? response.statusReason : null}
+      {label} {showReason && 'statusReason' in response ? response.statusReason : null}
     </span>
   );
 }

src-web/components/core/Input.tsx

@@ -53,11 +53,11 @@ export type InputProps = Pick<
 > & {
   className?: string;
   containerClassName?: string;
+  inputWrapperClassName?: string;
   defaultValue?: string | null;
   disableObscureToggle?: boolean;
   fullHeight?: boolean;
   hideLabel?: boolean;
-  inputWrapperClassName?: string;
   help?: ReactNode;
   label: ReactNode;
   labelClassName?: string;