Some small tweaks for Vim mode

src-web/components/RequestPane.tsx

@@ -19,6 +19,7 @@ import { useSendAnyHttpRequest } from '../hooks/useSendAnyHttpRequest';
 import { useUpdateAnyHttpRequest } from '../hooks/useUpdateAnyHttpRequest';
 import { deepEqualAtom } from '../lib/atoms';
 import { languageFromContentType } from '../lib/contentType';
+import { fallbackRequestName } from '../lib/fallbackRequestName';
 import { tryFormatJson } from '../lib/formatters';
 import { generateId } from '../lib/generateId';
 import {
@@ -486,9 +487,10 @@ export const RequestPane = memo(function RequestPane({
                   hideLabel
                   forceUpdateKey={forceUpdateKey}
                   defaultValue={activeRequest.name}
-                  className="font-sans !text-xl !px-0"
+                  className="font-sans !text-xl"
+                  inputWrapperClassName="!px-0"
                   containerClassName="border-0"
-                  placeholder="Request Name"
+                  placeholder={fallbackRequestName(activeRequest)}
                   onChange={(name) => updateRequest({ id: activeRequestId, update: { name } })}
                   stateKey={`name.${activeRequest.id}`}
                 />

src-web/components/Settings/SettingsAppearance.tsx

@@ -23,8 +23,12 @@ const fontSizeOptions = [
   8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
 ].map((n) => ({ label: `${n}`, value: `${n}` }));
 
-const keymaps: EditorKeymap[] = ['default', 'vim', 'vscode', 'emacs'];
-const keymapOptions = keymaps.map((n) => ({ label: n, value: n }));
+const keymaps: { value: EditorKeymap; label: string }[] = [
+  { value: 'default', label: 'Default' },
+  { value: 'vim', label: 'Vim' },
+  { value: 'vscode', label: 'VSCode' },
+  { value: 'emacs', label: 'Emacs' },
+];
 
 const buttonColors: ButtonProps['color'][] = [
   'primary',
@@ -104,22 +108,22 @@ export function SettingsAppearance() {
         onChange={(v) => updateSettings.mutate({ editorFontSize: clamp(parseInt(v) || 14, 8, 30) })}
         event="editor-font-size"
       />
+      <Select
+        size="sm"
+        name="editorKeymap"
+        label="Editor Keymap"
+        labelPosition="left"
+        value={`${settings.editorKeymap}`}
+        options={keymaps}
+        onChange={(v) => updateSettings.mutate({ editorKeymap: v })}
+        event="editor-keymap"
+      />
       <Checkbox
         checked={settings.editorSoftWrap}
         title="Wrap Editor Lines"
         onChange={(editorSoftWrap) => updateSettings.mutate({ editorSoftWrap })}
         event="editor-wrap-lines"
       />
-      <Select
-        size="sm"
-        name="editorKeymap"
-        label="Editor Key Map"
-        labelPosition="left"
-        value={`${settings.editorKeymap}`}
-        options={keymapOptions}
-        onChange={(v) => updateSettings.mutate({ editorKeymap: v })}
-        event="editor-keymap"
-      />
 
       <Separator className="my-4" />
 

src-web/components/core/Editor/Editor.css

@@ -13,19 +13,20 @@
 
     /* Vim-mode cursor */
     .cm-fat-cursor {
-      @apply bg-text opacity-60;
-    }
-
-    &.cm-focused {
-      outline: none !important;
+      @apply outline-0 bg-text !important;
+      @apply text-surface !important;
     }
 
     &:not(.cm-focused) {
       .cm-cursor, .cm-fat-cursor {
-        display: none;
+        @apply hidden;
       }
     }
 
+    &.cm-focused {
+      outline: none !important;
+    }
+
     .cm-content {
       @apply py-0;
     }
@@ -106,7 +107,7 @@
     }
 
     .cm-line {
-      @apply px-2 overflow-hidden;
+      @apply overflow-hidden;
     }
   }
 

src-web/components/core/Input.tsx

@@ -27,6 +27,7 @@ export type InputProps = Pick<
   labelPosition?: 'top' | 'left';
   labelClassName?: string;
   containerClassName?: string;
+  inputWrapperClassName?: string;
   onChange?: (value: string) => void;
   onFocus?: () => void;
   onBlur?: () => void;
@@ -48,6 +49,7 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
   {
     className,
     containerClassName,
+    inputWrapperClassName,
     defaultValue,
     forceUpdateKey,
     hideLabel,
@@ -161,7 +163,8 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
         {leftSlot}
         <HStack
           className={classNames(
-            'w-full min-w-0',
+            inputWrapperClassName,
+            'w-full min-w-0 px-2',
             leftSlot && 'pl-0.5 -ml-2',
             rightSlot && 'pr-0.5 -mr-2',
           )}