nicer looking

src/LambdaBlock.tsx

@@ -1,6 +1,12 @@
-import type { EditorState } from "./Editor";
-import type { Dynamic } from "./eval";
-import type { ResolvedType } from "./eval";
+import { useContext, useEffect, useRef } from "react";
+
+import { Editor, type EditorState, type State2Props } from "./Editor";
+import type { SuggestionType } from "./InputBlock";
+import { EnvContext } from "./EnvContext";
+import { growEnv, TYPE_VARS } from "dope2";
+import { autoInputWidth } from "./util/dom_trickery";
+
+import "./LambdaBlock.css";
 
 
 export interface LambdaBlockState {
@@ -9,6 +15,66 @@ export interface LambdaBlockState {
   expr: EditorState;
 }
 
-export function LambdaBlock {
+interface LambdaBlockProps<
+  FnState=EditorState,
+  InputState=EditorState,
+> extends State2Props<LambdaBlockState,EditorState> {
+  suggestionPriority: (suggestion: SuggestionType) => number;
+}
+
+
+export function LambdaBlock({state, setState, suggestionPriority}: LambdaBlockProps) {
+  const env = useContext(EnvContext);
+  const nameRef = useRef<HTMLInputElement>(null);
+
+  const setParamName = paramName => setState(state => ({
+    ...state,
+    paramName,
+  }));
+
+  const setExpr = callback => setState(state => ({
+    ...state,
+    expr: callback(state.expr),
+  }));
+
+  useEffect(() => {
+    nameRef.current?.focus();
+  }, []);
+
+  useEffect(() => autoInputWidth(nameRef, state.paramName, 60), [nameRef, state.paramName]);
+
+  const innerEnv = growEnv(env)(state.paramName)({
+    kind: "unknown",
+    i: undefined,
+    t: TYPE_VARS[0],
+  });
   
-}
+  return <span>
+    <span className="keyword">&#955;</span>
+    &nbsp;
+    <span className="lambdaInputParam">
+      <input
+          ref={nameRef}
+          className='editable'
+          value={state.paramName}
+          placeholder="<name>"
+          onChange={e => setParamName(e.target.value)}
+          />
+    </span>
+    &nbsp;
+    <span className="keyword">:</span>
+    &nbsp;
+    <span className="lambdaExpr">
+      <EnvContext value={innerEnv}>
+        <Editor
+          state={state.expr}
+          setState={setExpr}
+          onCancel={() => setState(state => state.expr)}
+          suggestionPriority={(suggestion: SuggestionType) => {
+            return suggestionPriority(suggestion);
+          }}
+          />
+      </EnvContext>
+    </span>
+  </span>
+}