Better HTTP methods

src-web/components/core/HttpMethodTag.tsx

@@ -1,5 +1,5 @@
-import classNames from 'classnames';
 import type { GrpcRequest, HttpRequest } from '@yaakapp-internal/models';
+import classNames from 'classnames';
 
 interface Props {
   request: HttpRequest | GrpcRequest;
@@ -7,46 +7,34 @@ interface Props {
   shortNames?: boolean;
 }
 
-const longMethodMap = {
-  get: 'GET',
-  put: 'PUT',
+const methodNames: Record<string, string> = {
+  get: ' GET',
+  put: ' PUT',
   post: 'POST',
-  patch: 'PATCH',
-  delete: 'DELETE',
-  options: 'OPTIONS',
+  patch: 'PTCH',
+  delete: 'DELE',
+  options: 'OPTN',
   head: 'HEAD',
-} as const;
-
-const shortMethodMap: Record<keyof typeof longMethodMap, string> = {
-  get: 'GET',
-  put: 'PUT',
-  post: 'PST',
-  patch: 'PTC',
-  delete: 'DEL',
-  options: 'OPT',
-  head: 'HED',
+  query: 'QURY',
 };
 
-export function HttpMethodTag({ shortNames, request, className }: Props) {
+export function HttpMethodTag({ request, className }: Props) {
   const method =
     request.model === 'http_request' && request.bodyType === 'graphql'
       ? 'GQL'
       : request.model === 'grpc_request'
-        ? 'GRP'
+        ? 'GRPC'
         : request.method;
 
-  const m = method.toLowerCase();
-  const methodMap: Record<string, string> = shortNames ? shortMethodMap : longMethodMap;
   return (
     <span
       className={classNames(
         className,
-        'text-xs font-mono text-text-subtle',
+        'text-xs font-mono text-text-subtle flex-shrink-0 whitespace-pre',
         'pt-[0.25em]', // Fix for monospace font not vertically centering
-        shortNames && 'w-[2.5em]',
       )}
     >
-      {methodMap[m] ?? m.slice(0, 4).toUpperCase()}
+      {(methodNames[method.toLowerCase()] ?? method.slice(0, 4)).toUpperCase()}
     </span>
   );
 }