starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-05-05 07:23:56 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Colorize HTTP methods in dropdown

Browse Source 
https://feedback.yaak.app/p/colorized-methods-on-dropdown-select
This commit is contained in:
Gregory Schier
2025-10-28 07:11:03 -07:00
parent 632344d166
commit b68ce44d52
2 changed files with 8 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src-web/components/RequestMethodDropdown.tsx
View File

@@ -5,7 +5,7 @@ import { memo, useCallback, useMemo } from 'react';
import { showPrompt } from '../lib/prompt'; import { showPrompt } from '../lib/prompt';
import { Button } from './core/Button'; import { Button } from './core/Button';
import type { DropdownItem } from './core/Dropdown'; import type { DropdownItem } from './core/Dropdown';
import { HttpMethodTag } from './core/HttpMethodTag'; import { HttpMethodTag, HttpMethodTagRaw } from './core/HttpMethodTag';
import { Icon } from './core/Icon'; import { Icon } from './core/Icon';
import type { RadioDropdownItem } from './core/RadioDropdown'; import type { RadioDropdownItem } from './core/RadioDropdown';
import { RadioDropdown } from './core/RadioDropdown'; import { RadioDropdown } from './core/RadioDropdown';
@@ -26,7 +26,7 @@ const radioItems: RadioDropdownItem<string>[] = [
'HEAD', 'HEAD',
].map((m) => ({ ].map((m) => ({
value: m, value: m,
label: m, label: <HttpMethodTagRaw method={m} />,
})); }));
export const RequestMethodDropdown = memo(function RequestMethodDropdown({ export const RequestMethodDropdown = memo(function RequestMethodDropdown({

20
src-web/components/core/HttpMethodTag.tsx
View File

@@ -25,7 +25,6 @@ const methodNames: Record<string, string> = {
}; };
export const HttpMethodTag = memo(function HttpMethodTag({ request, className, short }: Props) { export const HttpMethodTag = memo(function HttpMethodTag({ request, className, short }: Props) {
const settings = useAtomValue(settingsAtom);
const method = const method =
request.model === 'http_request' && request.bodyType === 'graphql' request.model === 'http_request' && request.bodyType === 'graphql'
? 'graphql' ? 'graphql'
@@ -35,25 +34,16 @@ export const HttpMethodTag = memo(function HttpMethodTag({ request, className, s
? 'websocket' ? 'websocket'
: request.method; : request.method;
return ( return <HttpMethodTagRaw method={method} className={className} short={short} />;
<HttpMethodTagRaw
method={method}
colored={settings.coloredMethods}
className={className}
short={short}
/>
);
}); });
function HttpMethodTagRaw({ export function HttpMethodTagRaw({
className, className,
method, method,
colored,
short, short,
}: { }: {
method: string; method: string;
className?: string; className?: string;
colored: boolean;
short?: boolean; short?: boolean;
}) { }) {
let label = method.toUpperCase(); let label = method.toUpperCase();
@@ -64,6 +54,8 @@ function HttpMethodTagRaw({
const m = method.toUpperCase(); const m = method.toUpperCase();
const colored = useAtomValue(settingsAtom).coloredMethods;
return ( return (
<span <span
className={classNames( className={classNames(
@@ -72,9 +64,9 @@ function HttpMethodTagRaw({
colored && m === 'GRAPHQL' && 'text-info', colored && m === 'GRAPHQL' && 'text-info',
colored && m === 'WEBSOCKET' && 'text-info', colored && m === 'WEBSOCKET' && 'text-info',
colored && m === 'GRPC' && 'text-info', colored && m === 'GRPC' && 'text-info',
colored && m === 'QUERY' && 'text-secondary', colored && m === 'QUERY' && 'text-text-subtle',
colored && m === 'OPTIONS' && 'text-info', colored && m === 'OPTIONS' && 'text-info',
colored && m === 'HEAD' && 'text-secondary', colored && m === 'HEAD' && 'text-text-subtle',
colored && m === 'GET' && 'text-primary', colored && m === 'GET' && 'text-primary',
colored && m === 'PUT' && 'text-warning', colored && m === 'PUT' && 'text-warning',
colored && m === 'PATCH' && 'text-notice', colored && m === 'PATCH' && 'text-notice',