CodeEdit Focus and Remove WebSharing (#20)

* implement codeedit focus with the help of a shouldFocus prop from the Line component.  also update line status, and remove websharing in left nav

* remove webshare from screen settings

src/linecomps.tsx

@@ -152,21 +152,22 @@ class SmallLineAvatar extends React.Component<{ line: LineType; cmd: Cmd; onRigh
         let isComment = line.linetype == "text";
         let icon: string = null;
         let iconTitle = null;
-        let iconColor = "auto";
+        let iconColor = null;
         if (isComment) {
             icon = "fa-comment";
             iconTitle = "comment";
         } else if (status == "done") {
             icon = exitcode === 0 ? "fa-check" : "fa-xmark";
             iconTitle = exitcode === 0 ? "success" : "fail";
-            iconColor = exitcode === 0 ? "auto" : "red";
+            iconColor = exitcode === 0 ? "color-green" : "color-red";
         } else if (status == "hangup" || status == "error") {
             icon = "fa-triangle-exclamation";
             iconTitle = status;
-            iconColor = "yellow";
+            iconColor = "color-yellow";
         } else if (status == "running" || "detached") {
-            icon = "fa-rotate";
+            icon = "fa-rotate fa-spin";
             iconTitle = "running";
+            iconColor = "color-green";
         } else {
             icon = "fa-square-question";
             iconTitle = "unknown";
@@ -177,7 +178,7 @@ class SmallLineAvatar extends React.Component<{ line: LineType; cmd: Cmd; onRigh
                 className={cn("simple-line-status", "status-" + status, rtnstate ? "has-rtnstate" : null)}
             >
                 <span className="linenum">{lineNumStr}</span>
-                <i title={iconTitle} className={cn("fa-sharp fa-solid", icon)} style={{ color: iconColor }} />
+                <i title={iconTitle} className={cn("fa-sharp fa-solid", icon, iconColor)} />
             </div>
         );
     }
@@ -676,6 +677,15 @@ class LineCmd extends React.Component<
                 { name: "computed-isFocused" }
             )
             .get();
+        let shouldCmdFocus = mobx
+            .computed(
+                () => {
+                    let screenFocusType = screen.getFocusType();
+                    return isSelected && screenFocusType == "cmd";
+                },
+                { name: "computed-shouldCmdFocus" }
+            )
+            .get();
         let isStatic = staticRender;
         let isRunning = cmd.isRunning();
         let isExpanded = this.isCmdExpanded.get();
@@ -768,6 +778,7 @@ class LineCmd extends React.Component<
                             initParams={this.makeRendererModelInitializeParams()}
                             scrollToBringIntoViewport={this.scrollToBringIntoViewport}
                             isSelected={isSelected}
+                            shouldFocus={shouldCmdFocus}
                         />
                     </If>
                     <If condition={rendererPlugin != null && rendererPlugin.rendererType == "full"}>

src/lines.less

@@ -22,7 +22,15 @@
 }
 
 .line .load-error-text {
-    color: #cc0000;
+    .mono-font();
+    color: @term-red;
+    padding-top: 5px;
+}
+
+.line .renderer-loading {
+    .mono-font();
+    color: @term-white;
+    padding-top: 5px;
 }
 
 .line.line-cmd {
@@ -221,6 +229,18 @@
                 font-weight: bold;
             }
         }
+
+        .color-red {
+            color: @term-red;
+        }
+
+        .color-green {
+            color: @term-bright-green;
+        }
+
+        .color-yellow {
+            color: @term-bright-yellow;
+        }
     }
 
     &.top-border {

src/main.tsx

@@ -1793,16 +1793,6 @@ class MainSideBar extends React.Component<{}, {}> {
                             </a>
                         </li>
                     </ul>
-                    <ul className="menu-list">
-                        <li className="menu-websharing">
-                            <a
-                                onClick={this.handleWebSharingClick}
-                                className={cn({ "is-active": mainView == "webshare" })}
-                            >
-                                <i className="fa-sharp fa-solid fa-share-nodes" /> WEB SHARING
-                            </a>
-                        </li>
-                    </ul>
                     <p className="menu-label display-none">Playbooks</p>
                     <ul className="menu-list display-none">
                         <li key="default">

src/settings.tsx

@@ -277,55 +277,6 @@ class ScreenSettingsModal extends React.Component<{ sessionId: string; screenId:
                                 <Toggle checked={screen.archived.get()} onChange={this.handleChangeArchived} />
                             </div>
                         </div>
-                        <div className="settings-field">
-                            <div className="settings-label">Web Sharing</div>
-                            <div className="settings-input">
-                                <Toggle checked={screen.isWebShared()} onChange={this.handleChangeWebShare} />
-                            </div>
-                        </div>
-                        <If condition={screen.isWebShared()}>
-                            <div className="settings-field sub-field">
-                                <div className="settings-label">Share Link</div>
-                                <div className="settings-input">
-                                    <a
-                                        href={util.makeExternLink(screen.getWebShareUrl())}
-                                        target="_blank"
-                                        className="button is-prompt-green is-outlined is-small a-block"
-                                    >
-                                        <span>open in browser</span>
-                                        <span className="icon">
-                                            <i className="fa-sharp fa-solid fa-up-right-from-square" />
-                                        </span>
-                                    </a>
-                                    <div
-                                        className="button is-prompt-green is-outlined is-small ml-4"
-                                        onClick={this.copyShareLink}
-                                    >
-                                        <span>copy link</span>
-                                        <span className="icon">
-                                            <i className="fa-sharp fa-solid fa-copy" />
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="settings-field sub-field">
-                                <div className="settings-label">Share Name</div>
-                                <div className="settings-input">
-                                    <div className="settings-input">
-                                        <InlineSettingsTextEdit
-                                            placeholder="name"
-                                            text={
-                                                util.isBlank(screen.getShareName()) ? "(none)" : screen.getShareName()
-                                            }
-                                            value={screen.getShareName() ?? ""}
-                                            onChange={this.inlineUpdateShareName}
-                                            maxLength={150}
-                                            showIcon={true}
-                                        />
-                                    </div>
-                                </div>
-                            </div>
-                        </If>
                         <div className="settings-field">
                             <div className="settings-label">
                                 <div>Actions</div>

src/simplerenderer.tsx

@@ -20,6 +20,7 @@ import type {
     TermContextUnion,
     RendererContainerType,
 } from "./types";
+import * as T from "./types";
 import { PacketDataBuffer } from "./ptydata";
 import { debounce, throttle } from "throttle-debounce";
 import * as util from "./util";
@@ -177,6 +178,7 @@ class SimpleBlobRenderer extends React.Component<
         initParams: RendererModelInitializeParams;
         scrollToBringIntoViewport: () => void;
         isSelected: boolean;
+        shouldFocus: boolean;
     },
     {}
 > {
@@ -243,18 +245,23 @@ class SimpleBlobRenderer extends React.Component<
         let { plugin } = this.props;
         let model = this.model;
         if (model.loadError.get() != null) {
+            let errorText = model.loadError.get();
             let height = this.model.savedHeight;
             return (
-                <div ref={this.wrapperDivRef} style={{ minHeight: height }}>
-                    <div className="load-error-text">ERROR: {model.loadError.get()}</div>
+                <div ref={this.wrapperDivRef} style={{ minHeight: height, fontSize: model.opts.termFontSize }}>
+                    <div className="load-error-text">ERROR: {errorText}</div>
                 </div>
             );
         }
         if (model.loading.get()) {
             let height = this.model.savedHeight;
             return (
-                <div ref={this.wrapperDivRef} style={{ minHeight: height }}>
-                    ...
+                <div
+                    ref={this.wrapperDivRef}
+                    className="renderer-loading"
+                    style={{ minHeight: height, fontSize: model.opts.termFontSize }}
+                >
+                    loading content <i className="fa fa-ellipsis fa-fade" />
                 </div>
             );
         }
@@ -262,7 +269,6 @@ class SimpleBlobRenderer extends React.Component<
         if (Comp == null) {
             <div ref={this.wrapperDivRef}>(no component found in plugin)</div>;
         }
-        let simpleModel = model as SimpleBlobRendererModel;
         let { festate, cmdstr, exitcode } = this.props.initParams.rawCmd;
         return (
             <div ref={this.wrapperDivRef} className="sr-wrapper">
@@ -270,15 +276,16 @@ class SimpleBlobRenderer extends React.Component<
                     cwd={festate.cwd}
                     cmdstr={cmdstr}
                     exitcode={exitcode}
-                    data={simpleModel.dataBlob}
-                    readOnly={simpleModel.readOnly}
-                    notFound={simpleModel.notFound}
-                    lineState={simpleModel.lineState}
-                    context={simpleModel.context}
-                    opts={simpleModel.opts}
-                    savedHeight={simpleModel.savedHeight}
+                    data={model.dataBlob}
+                    readOnly={model.readOnly}
+                    notFound={model.notFound}
+                    lineState={model.lineState}
+                    context={model.context}
+                    opts={model.opts}
+                    savedHeight={model.savedHeight}
                     scrollToBringIntoViewport={this.props.scrollToBringIntoViewport}
                     isSelected={this.props.isSelected}
+                    shouldFocus={this.props.shouldFocus}
                 />
             </div>
         );

src/types.ts

@@ -413,6 +413,7 @@ type SimpleBlobRendererComponent = React.ComponentType<{
     readOnly?: boolean;
     notFound?: boolean;
     isSelected?: boolean;
+    shouldFocus?: boolean;
     cmdstr?: string;
     cwd?: string;
     exitcode?: number;

src/view/code.tsx

@@ -26,6 +26,7 @@ class SourceCodeRenderer extends React.Component<
         scrollToBringIntoViewport: () => void;
         lineState: LineStateType;
         isSelected: boolean;
+        shouldFocus: boolean;
     },
     {
         code: string;
@@ -70,12 +71,21 @@ class SourceCodeRenderer extends React.Component<
         const code = SourceCodeRenderer.codeCache.get(this.cacheKey);
         if (code) {
             this.setState({ code, isClosed: this.props.lineState["prompt:closed"] });
-        } else
+        } else {
             this.props.data.text().then((code) => {
                 this.originalData = code;
                 this.setState({ code, isClosed: this.props.lineState["prompt:closed"] });
                 SourceCodeRenderer.codeCache.set(this.cacheKey, code);
             });
+        }
+    }
+
+    componentDidUpdate(prevProps: any): void {
+        if (!prevProps.shouldFocus && this.props.shouldFocus) {
+            if (this.monacoEditor) {
+                this.monacoEditor.focus();
+            }
+        }
     }
 
     setInitialLanguage = (editor) => {
@@ -125,6 +135,9 @@ class SourceCodeRenderer extends React.Component<
                 this.doClose();
             }
         });
+        if (this.props.shouldFocus) {
+            this.monacoEditor.focus();
+        }
     };
 
     handleLanguageChange = (event) => {