Fix editor selection/cursor and lint errors

src-web/components/BasicAuth.tsx

@@ -15,6 +15,9 @@ export function BasicAuth({ requestId, authentication }: Props) {
     <VStack className="my-2" space={2}>
       <Input
         useTemplating
+        autocompleteVariables
+        forceUpdateKey={requestId}
+        placeholder="username"
         label="Username"
         name="username"
         size="sm"
@@ -28,6 +31,9 @@ export function BasicAuth({ requestId, authentication }: Props) {
       />
       <Input
         useTemplating
+        autocompleteVariables
+        forceUpdateKey={requestId}
+        placeholder="password"
         label="Password"
         name="password"
         size="sm"

src-web/components/BearerAuth.tsx

@@ -16,6 +16,7 @@ export function BearerAuth({ requestId, authentication }: Props) {
       <Input
         useTemplating
         autocompleteVariables
+        placeholder="token"
         type="password"
         label="Token"
         name="token"

src-web/components/CookieDropdown.tsx

@@ -61,6 +61,7 @@ export function CookieDropdown() {
                     ),
                     name: 'name',
                     label: 'Name',
+                    placeholder: 'New name',
                     defaultValue: activeCookieJar?.name,
                   });
                   updateCookieJar.mutate({ name });

src-web/components/EnvironmentEditDialog.tsx

@@ -161,6 +161,7 @@ const EnvironmentEditor = function ({
                   ),
                   name: 'name',
                   label: 'Name',
+                  placeholder: 'New Name',
                   defaultValue: environment.name,
                 });
                 updateEnvironment.mutate({ name });

src-web/components/RecentConnectionsDropdown.tsx

@@ -2,7 +2,7 @@ import { formatDistanceToNowStrict } from 'date-fns';
 import { useDeleteGrpcConnection } from '../hooks/useDeleteGrpcConnection';
 import { useDeleteGrpcConnections } from '../hooks/useDeleteGrpcConnections';
 import type { GrpcConnection } from '../lib/models';
-import { count, pluralize } from '../lib/pluralize';
+import { count } from '../lib/pluralize';
 import { Dropdown } from './core/Dropdown';
 import { Icon } from './core/Icon';
 import { IconButton } from './core/IconButton';

src-web/components/ResizeHandle.tsx

@@ -1,12 +1,10 @@
 import classNames from 'classnames';
 import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
 import React from 'react';
-import { Separator } from './core/Separator';
 
 interface ResizeBarProps {
   style?: CSSProperties;
   className?: string;
-  barClassName?: string;
   isResizing: boolean;
   onResizeStart: (e: ReactMouseEvent<HTMLDivElement>) => void;
   onReset?: () => void;
@@ -18,7 +16,6 @@ export function ResizeHandle({
   style,
   justify,
   className,
-  barClassName,
   onResizeStart,
   onReset,
   isResizing,

src-web/components/SettingsDialog.tsx

@@ -78,6 +78,7 @@ export const SettingsDialog = () => {
           size="sm"
           name="requestTimeout"
           label="Request Timeout (ms)"
+          placeholder="0"
           labelPosition="left"
           labelClassName="w-1/3"
           containerClassName="col-span-2"

src-web/components/Sidebar.tsx

@@ -660,6 +660,7 @@ const SidebarItem = forwardRef(function SidebarItem(
                         ),
                         name: 'name',
                         label: 'Name',
+                        placeholder: 'New Name',
                         defaultValue: itemName,
                       });
                       updateAnyFolder.mutate({ id: itemId, update: (f) => ({ ...f, name }) });

src-web/components/SidebarActions.tsx

@@ -1,5 +1,4 @@
 import { memo } from 'react';
-import { Simulate } from 'react-dom/test-utils';
 import { useCreateFolder } from '../hooks/useCreateFolder';
 import { useCreateGrpcRequest } from '../hooks/useCreateGrpcRequest';
 import { useCreateHttpRequest } from '../hooks/useCreateHttpRequest';

src-web/components/WorkspaceActionsDropdown.tsx

@@ -117,6 +117,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
             ),
             name: 'name',
             label: 'Name',
+            placeholder: 'New Name',
             defaultValue: activeWorkspace?.name,
           });
           updateWorkspace.mutate({ name });
@@ -142,6 +143,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
             defaultValue: 'My Workspace',
             title: 'New Workspace',
             confirmLabel: 'Create',
+            placeholder: 'My Workspace',
           });
           createWorkspace.mutate({ name });
         },

src-web/components/core/Editor/extensions.ts

@@ -31,6 +31,7 @@ import {
 } from '@codemirror/view';
 import { tags as t } from '@lezer/highlight';
 import { graphql, graphqlLanguageSupport } from 'cm6-graphql';
+import { EditorView } from 'codemirror';
 import { jsonSchema } from 'codemirror-json-schema';
 import type { Environment, Workspace } from '../../../lib/models';
 import type { EditorProps } from './index';
@@ -60,6 +61,8 @@ export const myHighlightStyle = HighlightStyle.define([
   { tag: [t.keyword, t.meta, t.operator], color: 'hsl(var(--color-red-600))' },
 ]);
 
+const myTheme = EditorView.theme({}, { dark: true });
+
 // export const defaultHighlightStyle = HighlightStyle.define([
 //   { tag: t.meta, color: '#404740' },
 //   { tag: t.link, textDecoration: 'underline' },
@@ -83,7 +86,7 @@ export const myHighlightStyle = HighlightStyle.define([
 // ]);
 
 const syntaxExtensions: Record<string, LanguageSupport> = {
-  'application/grpc': jsonSchema() as any, // TODO: Fix this
+  'application/grpc': jsonSchema() as unknown as LanguageSupport, // TODO: Fix this
   'application/graphql': graphqlLanguageSupport(),
   'application/json': json(),
   'application/javascript': javascript(),
@@ -131,6 +134,7 @@ export const baseExtensions = [
     },
   }),
   syntaxHighlighting(myHighlightStyle),
+  myTheme,
   EditorState.allowMultipleSelections.of(true),
 ];
 

src-web/components/core/Input.tsx

@@ -37,7 +37,7 @@ export type InputProps = Omit<
     rightSlot?: ReactNode;
     size?: 'xs' | 'sm' | 'md' | 'auto';
     className?: string;
-    placeholder?: string;
+    placeholder: string;
     validate?: (v: string) => boolean;
     require?: boolean;
     wrapLines?: boolean;

src-web/components/core/JsonAttributeTree.tsx

@@ -5,6 +5,7 @@ import { Icon } from './Icon';
 
 interface Props {
   depth?: number;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   attrValue: any;
   attrKey?: string | number;
   attrKeyJsonPath?: string;
@@ -44,7 +45,8 @@ export const JsonAttributeTree = ({ depth = 0, attrKey, attrValue, attrKeyJsonPa
     } else if (jsonType === '[object Array]') {
       return {
         children: isExpanded
-          ? attrValue.flatMap((v: any, i: number) => (
+          ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            attrValue.flatMap((v: any, i: number) => (
               <JsonAttributeTree
                 depth={depth + 1}
                 attrValue={v}

src-web/components/core/SplitLayout.tsx

@@ -81,7 +81,7 @@ export function SplitLayout({
             / ${1 - width}fr   0                ${width}fr           
           `,
     };
-  }, [style, vertical, height, minHeightPx, width]);
+  }, [forceVertical, style, vertical, height, minHeightPx, width]);
 
   const unsub = () => {
     if (moveState.current !== null) {
@@ -154,7 +154,6 @@ export function SplitLayout({
           <ResizeHandle
             style={areaD}
             isResizing={isResizing}
-            barClassName={'bg-red-300'}
             className={classNames(vertical ? 'translate-y-0.5' : 'translate-x-0.5')}
             onResizeStart={handleResizeStart}
             onReset={handleReset}