simplify focus types, better input focus, add ability to expand main input

src/linecomps.tsx

@@ -510,12 +510,8 @@ class LineCmd extends React.Component<{screen : LineContainerModel, line : LineT
         let isPhysicalFocused = mobx.computed(() => screen.getIsFocused(line.linenum), {name: "computed-getIsFocused"}).get();
         let isFocused = mobx.computed(() => {
             let screenFocusType = screen.getFocusType();
-            return isPhysicalFocused && (screenFocusType == "cmd" || screenFocusType == "cmd-fg")
+            return isPhysicalFocused && (screenFocusType == "cmd");
         }, {name: "computed-isFocused"}).get();
-        let isFgFocused = mobx.computed(() => {
-            let screenFocusType = screen.getFocusType();
-            return isPhysicalFocused && screenFocusType == "cmd-fg"
-        }, {name: "computed-isFgFocused"}).get();
         let isStatic = staticRender;
         let isRunning = cmd.isRunning()
         let isCollapsed = this.isCollapsed();
@@ -541,7 +537,7 @@ class LineCmd extends React.Component<{screen : LineContainerModel, line : LineT
             <div className={mainDivCn}
                  ref={this.lineRef} onClick={this.handleClick}
                  data-lineid={line.lineid} data-linenum={line.linenum} data-screenid={line.screenid} data-cmdid={line.cmdid}>
-                <div key="focus" className={cn("focus-indicator", {"selected": isSelected}, {"active": isSelected && isFocused}, {"fg-focus": isFgFocused})}/>
+                <div key="focus" className={cn("focus-indicator", {"selected": isSelected}, {"active": isSelected && isFocused})}/>
                 <div key="header" className={cn("line-header", {"is-expanded": isExpanded}, {"is-collapsed": isCollapsed})}>
                     <LineAvatar line={line} cmd={cmd} onRightClick={this.onAvatarRightClick}/>
                     <If condition={renderMode == "collapsed"}>
@@ -816,7 +812,7 @@ class TerminalRenderer extends React.Component<{screen : LineContainerModel, lin
         let isPhysicalFocused = mobx.computed(() => screen.getIsFocused(line.linenum), {name: "computed-getIsFocused"}).get();
         let isFocused = mobx.computed(() => {
             let screenFocusType = screen.getFocusType();
-            return isPhysicalFocused && (screenFocusType == "cmd" || screenFocusType == "cmd-fg")
+            return isPhysicalFocused && (screenFocusType == "cmd");
         }, {name: "computed-isFocused"}).get();
         let cmd = screen.getCmd(line); // will not be null
         let usedRows = screen.getUsedRows(lineutil.getRendererContext(line), line, cmd, width);

src/main.tsx

@@ -166,6 +166,10 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
             }
             mobx.action(() => inputModel.forceCursorPos.set(null))();
         }
+        if (inputModel.forceInputFocus) {
+            inputModel.forceInputFocus = false;
+            this.setFocus();
+        }
         this.checkHeight(true);
     }
 
@@ -234,6 +238,12 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
                 }
                 return;
             }
+            if (e.code == "KeyE" && e.getModifierState("Meta")) {
+                e.preventDefault();
+                e.stopPropagation();
+                let inputModel = GlobalModel.inputModel;
+                inputModel.toggleExpandInput();
+            }
             if (e.code == "KeyC" && e.getModifierState("Control")) {
                 e.preventDefault();
                 inputModel.resetInput();
@@ -557,6 +567,9 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
         if (displayLines > 5) {
             displayLines = 5;
         }
+        if (inputModel.inputExpanded.get()) {
+            displayLines = 5;
+        }
         let disabled = inputModel.historyShow.get();
         if (disabled) {
             displayLines = 1;
@@ -565,11 +578,11 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
         if (activeScreen != null) {
             activeScreen.focusType.get(); // for reaction
         }
-        let computedHeight = (displayLines*24)+14;
+        let computedHeight = (displayLines*24)+14+2;  // 24 = height of line, 14 = padding, 2 = border
         return (
             <div className="control cmd-input-control is-expanded" ref={this.controlRef}>
-                <textarea ref={this.mainInputRef} spellCheck="false" autoComplete="off" autoCorrect="off" id="main-cmd-input" onFocus={this.handleMainFocus} onBlur={this.handleMainBlur} style={{height: computedHeight, minHeight: computedHeight}} value={curLine} onKeyDown={this.onKeyDown} onChange={this.onChange} className={cn("textarea", {"display-disabled": disabled})}></textarea>
-                <input ref={this.historyInputRef} spellCheck="false" autoComplete="off" autoCorrect="off" className="history-input" type="text" onFocus={this.handleHistoryFocus} onKeyDown={this.onHistoryKeyDown} onChange={this.handleHistoryInput} value={inputModel.historyQueryOpts.get().queryStr}/>
+                <textarea key="main" ref={this.mainInputRef} spellCheck="false" autoComplete="off" autoCorrect="off" id="main-cmd-input" onFocus={this.handleMainFocus} onBlur={this.handleMainBlur} style={{height: computedHeight, minHeight: computedHeight}} value={curLine} onKeyDown={this.onKeyDown} onChange={this.onChange} className={cn("textarea", {"display-disabled": disabled})}></textarea>
+                <input key="history" ref={this.historyInputRef} spellCheck="false" autoComplete="off" autoCorrect="off" className="history-input" type="text" onFocus={this.handleHistoryFocus} onKeyDown={this.onHistoryKeyDown} onChange={this.handleHistoryInput} value={inputModel.historyQueryOpts.get().queryStr}/>
             </div>
         );
     }
@@ -953,13 +966,14 @@ class CmdInput extends React.Component<{}, {}> {
                     </If>
                     <TextAreaInput key={textAreaInputKey} onHeightChange={this.handleInnerHeightUpdate}/>
                     <div className="control cmd-exec">
-                        <div onClick={GlobalModel.inputModel.uiSubmitCommand} className="button" title="Run Command">
+                        <div onClick={inputModel.uiSubmitCommand} className="button" title="Run Command">
                             <span className="icon">
                                 <i className="fa-sharp fa-solid fa-rocket"/>
                             </span>
                         </div>
                     </div>
                     <div className="cmd-hints">
+                        <div onClick={inputModel.toggleExpandInput} className="hint-item color-white">{inputModel.inputExpanded.get() ? "shrink" : "expand"} input ({renderCmdText("E")})</div>
                         <If condition={!focusVal}><div onClick={this.clickFocusInputHint} className="hint-item color-white">focus input ({renderCmdText("I")})</div></If>
                         <If condition={focusVal}><div onMouseDown={this.clickHistoryHint} className="hint-item color-green"><i className={cn("fa-sharp fa-solid", (historyShow ? "fa-angle-down" : "fa-angle-up"))}/> {historyShow ? "close history (esc)" : "show history (ctrl-r)"}</div></If>
                     </div>

src/model.ts

@@ -42,7 +42,7 @@ type LineContainerModel = {
     getIsFocused : (lineNum : number) => boolean,
     getTermWrap : (cmdId : string) => TermWrap;
     getRenderer : (cmdId : string) => RendererModel,
-    getFocusType : () => "input" | "cmd" | "cmd-fg",
+    getFocusType : () => FocusTypeStrs,
     getSelectedLine : () => number,
     getCmd : (line : LineType) => Cmd,
     setTermFocus : (lineNum : number, focus : boolean) => void,
@@ -355,7 +355,7 @@ class Screen {
     }
 
     refocusLine(sdata : ScreenDataType, oldFocusType : string, oldSelectedLine : number) : void {
-        let isCmdFocus = (sdata.focustype == "cmd" || sdata.focustype == "cmd-fg");
+        let isCmdFocus = (sdata.focustype == "cmd");
         if (!isCmdFocus) {
             return;
         }
@@ -639,7 +639,7 @@ class Screen {
             onUpdateContentHeight: (termContext : RendererContext, height : number) => { GlobalModel.setContentHeight(termContext, height); },
         });
         this.terminals[cmdId] = termWrap;
-        if ((this.focusType.get() == "cmd" || this.focusType.get() == "cmd-fg") && this.selectedLine.get() == line.linenum) {
+        if ((this.focusType.get() == "cmd") && this.selectedLine.get() == line.linenum) {
             termWrap.giveFocus();
         }
         return;
@@ -974,6 +974,7 @@ class InputModel {
     infoMsg : OV<InfoType> = mobx.observable.box(null);
     infoTimeoutId : any = null;
     inputMode : OV<null | "comment" | "global"> = mobx.observable.box(null);
+    inputExpanded : OV<boolean> = mobx.observable.box(false, {name: "inputExpanded"});
 
     // cursor
     forceCursorPos : OV<number> = mobx.observable.box(null);
@@ -982,6 +983,7 @@ class InputModel {
     inputFocused : OV<boolean> = mobx.observable.box(false);
     lineFocused : OV<boolean> = mobx.observable.box(false);
     physicalInputFocused : OV<boolean> = mobx.observable.box(false);
+    forceInputFocus : boolean = false;
 
     constructor() {
         this.filteredHistoryItems = mobx.computed(() => {
@@ -1500,10 +1502,19 @@ class InputModel {
             this.resetHistory();
             this.dropModHistory(false);
             this.infoMsg.set(null);
+            this.inputExpanded.set(false);
             this._clearInfoTimeout();
         })();
     }
 
+    @boundMethod
+    toggleExpandInput() : void {
+        mobx.action(() => {
+            this.inputExpanded.set(!this.inputExpanded.get());
+            this.forceInputFocus = true;
+        })();
+    }
+
     getCurLine() : string {
         let model = GlobalModel;
         let hidx = this.historyIndex.get();
@@ -1678,7 +1689,7 @@ class SpecialHistoryViewLineContainer {
         return this.terminal;
     }
     
-    getFocusType() : "input" | "cmd" | "cmd-fg" {
+    getFocusType() : FocusTypeStrs {
         return "input";
     }
     

src/types.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as mobx from "mobx";
 
 type ShareModeType = "local" | "web";
-type FocusTypeStrs = "input"|"cmd"|"cmd-fg";
+type FocusTypeStrs = "input"|"cmd";
 type HistoryTypeStrs = "global" | "session" | "screen";
 type RemoteStatusTypeStrs = "connected" | "connecting" | "disconnected" | "error";