diff --git a/index.html b/index.html index f966d930..c0031fc3 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@ - +
diff --git a/src-tauri/.sqlx/query-8e88c7070a34a6e151da66f521deeafaea9a12e2aa68081daaf235d2003b513d.json b/src-tauri/.sqlx/query-8e88c7070a34a6e151da66f521deeafaea9a12e2aa68081daaf235d2003b513d.json deleted file mode 100644 index 9fa18228..00000000 --- a/src-tauri/.sqlx/query-8e88c7070a34a6e151da66f521deeafaea9a12e2aa68081daaf235d2003b513d.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "db_name": "SQLite", - "query": "\n UPDATE settings SET (\n theme, appearance, theme_dark, theme_light, update_channel\n ) = (?, ?, ?, ?, ?) WHERE id = 'default';\n ", - "describe": { - "columns": [], - "parameters": { - "Right": 5 - }, - "nullable": [] - }, - "hash": "8e88c7070a34a6e151da66f521deeafaea9a12e2aa68081daaf235d2003b513d" -} diff --git a/src-tauri/.sqlx/query-cae02809532d086fbde12a246d12e3839ec8610b66e08315106dbdbf25d8699c.json b/src-tauri/.sqlx/query-ca3485d87b060cd77c4114d2af544adf18f6f15341d9d5db40865e92a80da4e2.json similarity index 62% rename from src-tauri/.sqlx/query-cae02809532d086fbde12a246d12e3839ec8610b66e08315106dbdbf25d8699c.json rename to src-tauri/.sqlx/query-ca3485d87b060cd77c4114d2af544adf18f6f15341d9d5db40865e92a80da4e2.json index eae379e3..118bdd64 100644 --- a/src-tauri/.sqlx/query-cae02809532d086fbde12a246d12e3839ec8610b66e08315106dbdbf25d8699c.json +++ b/src-tauri/.sqlx/query-ca3485d87b060cd77c4114d2af544adf18f6f15341d9d5db40865e92a80da4e2.json @@ -1,6 +1,6 @@ { "db_name": "SQLite", - "query": "\n SELECT\n id, model, created_at, updated_at, theme, appearance,\n theme_dark, theme_light, update_channel\n FROM settings\n WHERE id = 'default'\n ", + "query": "\n SELECT\n id, model, created_at, updated_at, theme, appearance,\n theme_dark, theme_light, update_channel,\n interface_font_size, interface_scale, editor_font_size, editor_soft_wrap\n FROM settings\n WHERE id = 'default'\n ", "describe": { "columns": [ { @@ -47,6 +47,26 @@ "name": "update_channel", "ordinal": 8, "type_info": "Text" + }, + { + "name": "interface_font_size", + "ordinal": 9, + "type_info": "Int64" + }, + { + "name": "interface_scale", + "ordinal": 10, + "type_info": "Int64" + }, + { + "name": "editor_font_size", + "ordinal": 11, + "type_info": "Int64" + }, + { + "name": "editor_soft_wrap", + "ordinal": 12, + "type_info": "Bool" } ], "parameters": { @@ -61,8 +81,12 @@ false, false, false, + false, + false, + false, + false, false ] }, - "hash": "cae02809532d086fbde12a246d12e3839ec8610b66e08315106dbdbf25d8699c" + "hash": "ca3485d87b060cd77c4114d2af544adf18f6f15341d9d5db40865e92a80da4e2" } diff --git a/src-tauri/.sqlx/query-efd8ba41ea909b18dd520c57c1d464c5ae057b720cbbedcaec1513d43535632c.json b/src-tauri/.sqlx/query-efd8ba41ea909b18dd520c57c1d464c5ae057b720cbbedcaec1513d43535632c.json new file mode 100644 index 00000000..eed32b7a --- /dev/null +++ b/src-tauri/.sqlx/query-efd8ba41ea909b18dd520c57c1d464c5ae057b720cbbedcaec1513d43535632c.json @@ -0,0 +1,12 @@ +{ + "db_name": "SQLite", + "query": "\n UPDATE settings SET (\n theme, appearance, theme_dark, theme_light, update_channel,\n interface_font_size, interface_scale, editor_font_size, editor_soft_wrap\n ) = (?, ?, ?, ?, ?, ?, ?, ?, ?) WHERE id = 'default';\n ", + "describe": { + "columns": [], + "parameters": { + "Right": 9 + }, + "nullable": [] + }, + "hash": "efd8ba41ea909b18dd520c57c1d464c5ae057b720cbbedcaec1513d43535632c" +} diff --git a/src-tauri/capabilities/capabilities.json b/src-tauri/capabilities/capabilities.json index a22cca63..8f560256 100644 --- a/src-tauri/capabilities/capabilities.json +++ b/src-tauri/capabilities/capabilities.json @@ -39,6 +39,7 @@ } ] }, + "webview:allow-set-webview-zoom", "window:allow-close", "window:allow-is-fullscreen", "window:allow-maximize", diff --git a/src-tauri/gen/schemas/capabilities.json b/src-tauri/gen/schemas/capabilities.json index b3253e66..192c449c 100644 --- a/src-tauri/gen/schemas/capabilities.json +++ b/src-tauri/gen/schemas/capabilities.json @@ -1 +1 @@ -{"main":{"identifier":"main","description":"Main permissions","local":true,"windows":["*"],"permissions":["os:allow-os-type","event:allow-emit","clipboard-manager:allow-write-text","clipboard-manager:allow-read-text","dialog:allow-open","dialog:allow-save","event:allow-listen","event:allow-unlisten","fs:allow-read-file","fs:allow-read-text-file",{"identifier":"fs:scope","allow":[{"path":"$APPDATA"},{"path":"$APPDATA/**"}]},"shell:allow-open",{"identifier":"shell:allow-execute","allow":[{"args":true,"name":"protoc","sidecar":true}]},"window:allow-close","window:allow-is-fullscreen","window:allow-maximize","window:allow-minimize","window:allow-toggle-maximize","window:allow-set-decorations","window:allow-set-title","window:allow-start-dragging","window:allow-unmaximize","window:allow-theme","clipboard-manager:allow-read-text","clipboard-manager:allow-write-text"]}} \ No newline at end of file +{"main":{"identifier":"main","description":"Main permissions","local":true,"windows":["*"],"permissions":["os:allow-os-type","event:allow-emit","clipboard-manager:allow-write-text","clipboard-manager:allow-read-text","dialog:allow-open","dialog:allow-save","event:allow-listen","event:allow-unlisten","fs:allow-read-file","fs:allow-read-text-file",{"identifier":"fs:scope","allow":[{"path":"$APPDATA"},{"path":"$APPDATA/**"}]},"shell:allow-open",{"identifier":"shell:allow-execute","allow":[{"args":true,"name":"protoc","sidecar":true}]},"webview:allow-set-webview-zoom","window:allow-close","window:allow-is-fullscreen","window:allow-maximize","window:allow-minimize","window:allow-toggle-maximize","window:allow-set-decorations","window:allow-set-title","window:allow-start-dragging","window:allow-unmaximize","window:allow-theme","clipboard-manager:allow-read-text","clipboard-manager:allow-write-text"]}} \ No newline at end of file diff --git a/src-tauri/migrations/20240529143147_more-settings.sql b/src-tauri/migrations/20240529143147_more-settings.sql new file mode 100644 index 00000000..70c247a9 --- /dev/null +++ b/src-tauri/migrations/20240529143147_more-settings.sql @@ -0,0 +1,4 @@ +ALTER TABLE settings ADD COLUMN interface_font_size INTEGER DEFAULT 15 NOT NULL; +ALTER TABLE settings ADD COLUMN interface_scale INTEGER DEFAULT 1 NOT NULL; +ALTER TABLE settings ADD COLUMN editor_font_size INTEGER DEFAULT 13 NOT NULL; +ALTER TABLE settings ADD COLUMN editor_soft_wrap BOOLEAN DEFAULT 1 NOT NULL; diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs index 6d4d67c8..854ce119 100644 --- a/src-tauri/src/lib.rs +++ b/src-tauri/src/lib.rs @@ -1793,9 +1793,9 @@ fn create_window(handle: &AppHandle, url: Option<&str>) -> WebviewWindow { match event.id().0.as_str() { "quit" => exit(0), "close" => w.close().unwrap(), - "zoom_reset" => w.emit("zoom", 0).unwrap(), - "zoom_in" => w.emit("zoom", 1).unwrap(), - "zoom_out" => w.emit("zoom", -1).unwrap(), + "zoom_reset" => w.emit("zoom_reset", true).unwrap(), + "zoom_in" => w.emit("zoom_in", true).unwrap(), + "zoom_out" => w.emit("zoom_out", true).unwrap(), "settings" => w.emit("settings", true).unwrap(), "duplicate_request" => w.emit("duplicate_request", true).unwrap(), "refresh" => win2.eval("location.reload()").unwrap(), diff --git a/src-tauri/src/models.rs b/src-tauri/src/models.rs index 10e260bd..e25768a4 100644 --- a/src-tauri/src/models.rs +++ b/src-tauri/src/models.rs @@ -55,6 +55,10 @@ pub struct Settings { pub theme_dark: String, pub theme_light: String, pub update_channel: String, + pub interface_font_size: i64, + pub interface_scale: i64, + pub editor_font_size: i64, + pub editor_soft_wrap: bool, } #[derive(sqlx::FromRow, Debug, Clone, Serialize, Deserialize, Default)] @@ -886,7 +890,8 @@ async fn get_settings(mgr: &impl Manager) -> Result r#" SELECT id, model, created_at, updated_at, theme, appearance, - theme_dark, theme_light, update_channel + theme_dark, theme_light, update_channel, + interface_font_size, interface_scale, editor_font_size, editor_soft_wrap FROM settings WHERE id = 'default' "#, @@ -922,14 +927,19 @@ pub async fn update_settings( sqlx::query!( r#" UPDATE settings SET ( - theme, appearance, theme_dark, theme_light, update_channel - ) = (?, ?, ?, ?, ?) WHERE id = 'default'; + theme, appearance, theme_dark, theme_light, update_channel, + interface_font_size, interface_scale, editor_font_size, editor_soft_wrap + ) = (?, ?, ?, ?, ?, ?, ?, ?, ?) WHERE id = 'default'; "#, settings.theme, settings.appearance, settings.theme_dark, settings.theme_light, - settings.update_channel + settings.update_channel, + settings.interface_font_size, + settings.interface_scale, + settings.editor_font_size, + settings.editor_soft_wrap, ) .execute(&db) .await?; diff --git a/src-web/components/BinaryFileEditor.tsx b/src-web/components/BinaryFileEditor.tsx index cec3cc77..9153c662 100644 --- a/src-web/components/BinaryFileEditor.tsx +++ b/src-web/components/BinaryFileEditor.tsx @@ -49,7 +49,7 @@ export function BinaryFileEditor({ -
+
{/* Special character to insert ltr text in rtl element without making things wonky */} ‎ {filePath ?? 'Select File'} @@ -57,7 +57,7 @@ export function BinaryFileEditor({ {filePath != null && mimeType !== contentType && !ignoreContentType.value && ( -
+
Set Content-Type header
{mimeType} for current request?
@@ -65,12 +65,12 @@ export function BinaryFileEditor({ - diff --git a/src-web/components/CookieDialog.tsx b/src-web/components/CookieDialog.tsx index 5048a97c..7427dbb5 100644 --- a/src-web/components/CookieDialog.tsx +++ b/src-web/components/CookieDialog.tsx @@ -28,7 +28,7 @@ export const CookieDialog = function ({ cookieJarId }: Props) { return (
- +
diff --git a/src-web/components/GlobalHooks.tsx b/src-web/components/GlobalHooks.tsx index f6d4bc80..0f3de624 100644 --- a/src-web/components/GlobalHooks.tsx +++ b/src-web/components/GlobalHooks.tsx @@ -1,5 +1,6 @@ import { useQueryClient } from '@tanstack/react-query'; import { getCurrent } from '@tauri-apps/api/webviewWindow'; +import { useEffect } from 'react'; import { useCommandPalette } from '../hooks/useCommandPalette'; import { cookieJarsQueryKey } from '../hooks/useCookieJars'; import { foldersQueryKey } from '../hooks/useFolders'; @@ -7,6 +8,7 @@ import { useGlobalCommands } from '../hooks/useGlobalCommands'; import { grpcConnectionsQueryKey } from '../hooks/useGrpcConnections'; import { grpcEventsQueryKey } from '../hooks/useGrpcEvents'; import { grpcRequestsQueryKey } from '../hooks/useGrpcRequests'; +import { useHotKey } from '../hooks/useHotKey'; import { httpRequestsQueryKey } from '../hooks/useHttpRequests'; import { httpResponsesQueryKey } from '../hooks/useHttpResponses'; import { keyValueQueryKey } from '../hooks/useKeyValue'; @@ -16,15 +18,15 @@ import { useRecentEnvironments } from '../hooks/useRecentEnvironments'; import { useRecentRequests } from '../hooks/useRecentRequests'; import { useRecentWorkspaces } from '../hooks/useRecentWorkspaces'; import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey'; -import { settingsQueryKey } from '../hooks/useSettings'; +import { settingsQueryKey, useSettings } from '../hooks/useSettings'; import { useSyncThemeToDocument } from '../hooks/useSyncThemeToDocument'; import { useSyncWindowTitle } from '../hooks/useSyncWindowTitle'; +import { useUpdateSettings } from '../hooks/useUpdateSettings'; import { workspacesQueryKey } from '../hooks/useWorkspaces'; +import { useZoom } from '../hooks/useZoom'; import type { Model } from '../lib/models'; import { modelsEq } from '../lib/models'; -const DEFAULT_FONT_SIZE = 16; - export function GlobalHooks() { // Include here so they always update, even if no component references them useRecentWorkspaces(); @@ -125,26 +127,43 @@ export function GlobalHooks() { } }); - useListenToTauriEvent( - 'zoom', - ({ payload: zoomDelta }) => { - const fontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize); + const settings = useSettings(); + useEffect(() => { + if (settings == null) { + return; + } - let newFontSize; - if (zoomDelta === 0) { - newFontSize = DEFAULT_FONT_SIZE; - } else if (zoomDelta > 0) { - newFontSize = Math.min(fontSize * 1.1, DEFAULT_FONT_SIZE * 5); - } else if (zoomDelta < 0) { - newFontSize = Math.max(fontSize * 0.9, DEFAULT_FONT_SIZE * 0.4); - } + const { interfaceScale, interfaceFontSize, editorFontSize } = settings; + getCurrent().setZoom(interfaceScale).catch(console.error); + document.documentElement.style.cssText = [ + `font-size: ${interfaceFontSize}px`, + `--editor-font-size: ${editorFontSize}px`, + ].join('; '); + }, [settings]); + const updateSettings = useUpdateSettings(); - document.documentElement.style.fontSize = `${newFontSize}px`; - }, - { - target: { kind: 'WebviewWindow', label: getCurrent().label }, - }, - ); + // Handle Zoom. Note, Mac handles it in app menu, so need to also handle keyboard + // shortcuts for Windows/Linux + const zoom = useZoom(); + useHotKey('app.zoom_in', () => zoom.zoomIn); + useListenToTauriEvent('zoom_in', () => zoom.zoomIn); + useHotKey('app.zoom_out', () => zoom.zoomOut); + useListenToTauriEvent('zoom_out', () => zoom.zoomOut); + useHotKey('app.zoom_out', () => zoom.zoomReset); + useListenToTauriEvent('zoom_out', () => zoom.zoomReset); + + useHotKey('app.zoom_out', () => { + if (!settings) return; + updateSettings.mutate({ + ...settings, + interfaceScale: Math.max(0.4, settings.interfaceScale * 0.9), + }); + }); + + useHotKey('app.zoom_reset', () => { + if (!settings) return; + updateSettings.mutate({ ...settings, interfaceScale: 1 }); + }); return null; } diff --git a/src-web/components/GrpcConnectionMessagesPane.tsx b/src-web/components/GrpcConnectionMessagesPane.tsx index b293acec..a034e26d 100644 --- a/src-web/components/GrpcConnectionMessagesPane.tsx +++ b/src-web/components/GrpcConnectionMessagesPane.tsx @@ -105,7 +105,7 @@ export function GrpcConnectionMessagesPane({ style, methodType, activeRequest }: Message {activeEvent.eventType === 'client_message' ? 'Sent' : 'Received'} {!showLarge && activeEvent.content.length > 1000 * 1000 ? ( - + Message previews larger than 1MB are hidden
diff --git a/src-web/components/GrpcConnectionSetupPane.tsx b/src-web/components/GrpcConnectionSetupPane.tsx index c1b95da5..929b12f4 100644 --- a/src-web/components/GrpcConnectionSetupPane.tsx +++ b/src-web/components/GrpcConnectionSetupPane.tsx @@ -209,7 +209,7 @@ export function GrpcConnectionSetupPane({ rightSlot={} disabled={isStreaming || services == null} className={classNames( - 'font-mono text-xs min-w-[5rem] !ring-0', + 'font-mono text-sm min-w-[5rem] !ring-0', paneSize < 400 && 'flex-1', )} > diff --git a/src-web/components/GrpcProtoSelection.tsx b/src-web/components/GrpcProtoSelection.tsx index 2c729fec..c8755c0c 100644 --- a/src-web/components/GrpcProtoSelection.tsx +++ b/src-web/components/GrpcProtoSelection.tsx @@ -40,7 +40,6 @@ export function GrpcProtoSelection({ requestId }: Props) {
Domain
+
- + {protoFiles.map((f, i) => ( - +
- *.proto Files + *.proto Files
{f.split('/').pop()}{f.split('/').pop()} { await protoFilesKv.set(protoFiles.filter((p) => p !== f)); }} diff --git a/src-web/components/KeyboardShortcutsDialog.tsx b/src-web/components/KeyboardShortcutsDialog.tsx index 1e40dabd..e9d3da3d 100644 --- a/src-web/components/KeyboardShortcutsDialog.tsx +++ b/src-web/components/KeyboardShortcutsDialog.tsx @@ -1,10 +1,10 @@ import { hotkeyActions } from '../hooks/useHotKey'; import { HotKeyList } from './core/HotKeyList'; -export const KeyboardShortcutsDialog = () => { +export function KeyboardShortcutsDialog() { return (
); -}; +} diff --git a/src-web/components/RecentConnectionsDropdown.tsx b/src-web/components/RecentConnectionsDropdown.tsx index f2d55e35..06e53a61 100644 --- a/src-web/components/RecentConnectionsDropdown.tsx +++ b/src-web/components/RecentConnectionsDropdown.tsx @@ -45,7 +45,7 @@ export function RecentConnectionsDropdown({ label: ( {formatDistanceToNowStrict(c.createdAt + 'Z')} ago •{' '} - {c.elapsed}ms + {c.elapsed}ms ), leftSlot: activeConnection?.id === c.id ? : , diff --git a/src-web/components/RecentRequestsDropdown.tsx b/src-web/components/RecentRequestsDropdown.tsx index 4bc1693c..e875ec61 100644 --- a/src-web/components/RecentRequestsDropdown.tsx +++ b/src-web/components/RecentRequestsDropdown.tsx @@ -86,7 +86,7 @@ export function RecentRequestsDropdown({ className }: Pick diff --git a/src-web/components/RecentResponsesDropdown.tsx b/src-web/components/RecentResponsesDropdown.tsx index d9f8cf69..d33ebc81 100644 --- a/src-web/components/RecentResponsesDropdown.tsx +++ b/src-web/components/RecentResponsesDropdown.tsx @@ -43,13 +43,13 @@ export const RecentResponsesDropdown = function ResponsePane({ disabled: responses.length === 0, }, { type: 'separator', label: 'History' }, - ...responses.slice(0, 20).map((r) => ({ + ...responses.slice(0, 20).map((r: HttpResponse) => ({ key: r.id, label: ( - + →{' '} - {r.elapsed >= 0 ? `${r.elapsed}ms` : 'n/a'} + {r.elapsed >= 0 ? `${r.elapsed}ms` : 'n/a'} ), leftSlot: activeResponse?.id === r.id ? : , diff --git a/src-web/components/ResponsePane.tsx b/src-web/components/ResponsePane.tsx index 9d463c09..26774a51 100644 --- a/src-web/components/ResponsePane.tsx +++ b/src-web/components/ResponsePane.tsx @@ -94,7 +94,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className, activ + parseInt(value) >= 8 && parseInt(value) <= 30} + onChange={(v) => + updateSettings.mutate({ + ...settings, + interfaceFontSize: clamp(parseInt(v) || 16, 8, 30), + }) + } + /> + parseInt(value) >= 8 && parseInt(value) <= 30} + onChange={(v) => + updateSettings.mutate({ + ...settings, + editorFontSize: clamp(parseInt(v) || 14, 8, 30), + }) + } + /> + + + { - await updateSettings.mutateAsync({ ...settings, themeLight }); - trackEvent('setting', 'update', { themeLight }); - }} - /> - { + await updateSettings.mutateAsync({ ...settings, themeLight }); + trackEvent('setting', 'update', { themeLight }); + }} + /> + , MenuPro
{filter}
 )} {filteredItems.length === 0 && ( - - No matches - + No matches )} {filteredItems.map((item, i) => { if (item.type === 'separator') { @@ -531,14 +529,18 @@ function MenuItem({ className, focused, onFocus, item, onSelect, ...props }: Men onFocus={handleFocus} onClick={handleClick} justify="start" - leftSlot={item.leftSlot &&
{item.leftSlot}
} + leftSlot={ + item.leftSlot && ( +
{item.leftSlot}
+ ) + } rightSlot={rightSlot &&
{rightSlot}
} innerClassName="!text-left" color="custom" className={classNames( className, 'h-xs', // More compact - 'min-w-[8rem] outline-none px-2 mx-1.5 flex text-sm whitespace-nowrap', + 'min-w-[8rem] outline-none px-2 mx-1.5 flex whitespace-nowrap', 'focus:bg-background-highlight focus:text-fg rounded', item.variant === 'default' && 'text-fg-subtle', item.variant === 'danger' && 'text-fg-danger', diff --git a/src-web/components/core/Editor/Editor.css b/src-web/components/core/Editor/Editor.css index 341f2580..7d78ab04 100644 --- a/src-web/components/core/Editor/Editor.css +++ b/src-web/components/core/Editor/Editor.css @@ -104,8 +104,7 @@ } .cm-scroller { - @apply font-mono text-[0.75rem]; - + @apply font-mono text-editor; /* * Round corners or they'll stick out of the editor bounds of editor is rounded. * Could potentially be pushed up from the editor like we do with bg color but this @@ -185,7 +184,7 @@ } .cm-tooltip.cm-tooltip-hover { - @apply shadow-lg bg-background rounded text-fg-subtle border border-fg-subtler z-50 pointer-events-auto text-xs; + @apply shadow-lg bg-background rounded text-fg-subtle border border-fg-subtler z-50 pointer-events-auto text-sm; @apply px-2 py-1; a { @@ -208,7 +207,7 @@ /* NOTE: Extra selector required to override default styles */ .cm-tooltip.cm-tooltip-autocomplete, .cm-tooltip.cm-completionInfo { - @apply shadow-lg bg-background rounded text-fg-subtle border border-background-highlight z-50 pointer-events-auto text-xs; + @apply shadow-lg bg-background rounded text-fg-subtle border border-background-highlight z-50 pointer-events-auto text-sm; .cm-completionIcon { @apply italic font-mono; @@ -267,7 +266,7 @@ } &.cm-completionInfo-right { - @apply ml-1 -mt-0.5 text-sm; + @apply ml-1 -mt-0.5; } &.cm-completionInfo-right-narrow { @@ -279,12 +278,14 @@ } &.cm-tooltip-autocomplete { + @apply font-mono text-editor; + & > ul { @apply p-1 max-h-[40vh]; } & > ul > li { - @apply cursor-default px-2 rounded-sm text-fg-subtle h-7 flex items-center; + @apply cursor-default px-2 py-1.5 rounded-sm text-fg-subtle flex items-center; } & > ul > li[aria-selected] { @@ -292,7 +293,7 @@ } .cm-completionIcon { - @apply text-xs flex items-center pb-0.5 flex-shrink-0; + @apply text-sm flex items-center pb-0.5 flex-shrink-0; } .cm-completionLabel { diff --git a/src-web/components/core/FormattedError.tsx b/src-web/components/core/FormattedError.tsx index 3b70f8ca..87a159db 100644 --- a/src-web/components/core/FormattedError.tsx +++ b/src-web/components/core/FormattedError.tsx @@ -9,7 +9,7 @@ export function FormattedError({ children }: Props) { return ( 
diff --git a/src-web/components/core/HotKeyLabel.tsx b/src-web/components/core/HotKeyLabel.tsx
index dbcceb1f..8ea0ba86 100644
--- a/src-web/components/core/HotKeyLabel.tsx
+++ b/src-web/components/core/HotKeyLabel.tsx
@@ -7,5 +7,5 @@ interface Props {
 
 export function HotKeyLabel({ action }: Props) {
   const label = useHotKeyLabel(action);
-  return {label};
+  return {label};
 }
diff --git a/src-web/components/core/HotKeyList.tsx b/src-web/components/core/HotKeyList.tsx
index 2388bb0e..8f4c142b 100644
--- a/src-web/components/core/HotKeyList.tsx
+++ b/src-web/components/core/HotKeyList.tsx
@@ -11,7 +11,7 @@ interface Props {
 
 export const HotKeyList = ({ hotkeys, bottomSlot }: Props) => {
   return (
-    

+    

       
         {hotkeys.map((hotkey) => (
           
diff --git a/src-web/components/core/HttpMethodTag.tsx b/src-web/components/core/HttpMethodTag.tsx
index 69051b18..98aeb030 100644
--- a/src-web/components/core/HttpMethodTag.tsx
+++ b/src-web/components/core/HttpMethodTag.tsx
@@ -27,7 +27,7 @@ export function HttpMethodTag({ request, className }: Props) {
 
   const m = method.toLowerCase();
   return (
-    
+    
       {methodMap[m] ?? m.slice(0, 3).toUpperCase()}
     
   );
diff --git a/src-web/components/core/InlineCode.tsx b/src-web/components/core/InlineCode.tsx
index f43e7502..1890f7c9 100644
--- a/src-web/components/core/InlineCode.tsx
+++ b/src-web/components/core/InlineCode.tsx
@@ -6,8 +6,8 @@ export function InlineCode({ className, ...props }: HTMLAttributes
diff --git a/src-web/components/core/Input.tsx b/src-web/components/core/Input.tsx
index fba19719..8492c5c1 100644
--- a/src-web/components/core/Input.tsx
+++ b/src-web/components/core/Input.tsx
@@ -133,11 +133,7 @@ export const Input = forwardRef(function Inp
     >
       
diff --git a/src-web/components/core/JsonAttributeTree.tsx b/src-web/components/core/JsonAttributeTree.tsx
index e11139ba..1d9800ee 100644
--- a/src-web/components/core/JsonAttributeTree.tsx
+++ b/src-web/components/core/JsonAttributeTree.tsx
@@ -80,7 +80,7 @@ export const JsonAttributeTree = ({ depth = 0, attrKey, attrValue, attrKeyJsonPa
     {label}
   );
   return (
-    

+    

       

         {isExpandable ? (