Random fixes

src/app/app.less

@@ -367,3 +367,56 @@ a.a-block {
     }
 }
 
+.alt-view {
+    background-color: #111;
+    overflow-y: auto;
+    flex-grow: 1;
+
+    .alt-title {
+        margin: 20px 10px 0px 5px;
+        padding-left: 10px;
+        padding-bottom: 12px;
+        color: @term-bright-white;
+        border-bottom: 1px solid white;
+    }
+
+    .alt-list {
+        color: @term-white;
+        margin: 4px 10px 5px 5px;
+        border-bottom: 1px solid white;
+    }
+
+    .no-content {
+        color: @term-white;
+        padding: 30px 10px 35px 10px;
+        border-bottom: 1px solid white;
+    }
+
+    .close-button {
+        position: absolute;
+        padding: 4px;
+
+        color: #aaa;
+        right: 15px;
+        top: 18px;
+        cursor: pointer;
+
+        &:hover {
+            color: #fff;
+        }
+    }
+
+    .alt-help {
+        color: @term-white;
+        margin-top: 20px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        margin-bottom: 10px;
+
+        .help-entry {
+            margin-left: 20px;
+        }
+    }
+}

src/app/line/linecomps.tsx

@@ -28,9 +28,9 @@ import { ReactComponent as MinusIcon } from "../assets/icons/minus.svg";
 
 import type { LineContainerModel } from "../../model/model";
 import { renderCmdText } from "../common/common";
-import { SimpleBlobRenderer } from "../../plugins/renderer/basicrenderer";
-import { IncrementalRenderer } from "../../plugins/renderer/incrementalrenderer";
-import { TerminalRenderer } from "../../plugins/terminal/Terminal";
+import { SimpleBlobRenderer } from "../../plugins/prompt-core/renderer/basicrenderer";
+import { IncrementalRenderer } from "../../plugins/prompt-core/renderer/incrementalrenderer";
+import { TerminalRenderer } from "../../plugins/prompt-core/terminal/terminal";
 import { isBlank } from "../../util/util";
 import { PluginModel } from "../../plugins/plugins";
 import { Prompt } from "../common/prompt/prompt";

src/app/line/lines.less

@@ -45,7 +45,7 @@
     .line-header {
         display: flex;
         flex-direction: row;
-        height: 36px;
+        padding-bottom: 0.7em;
         width: 100%;
 
         &.is-expanded {
@@ -332,8 +332,6 @@
         display: flex;
         flex-direction: row;
 
-        margin-top: -4px;
-
         .simple-line-status {
             margin-top: 5px;
         }
@@ -445,8 +443,7 @@
 .lines {
     display: flex;
     flex-direction: column;
-    height: 80vh;
-    overflow-y: scroll;
+    overflow-y: auto;
     padding: 10px 0 10px 0;
     flex-grow: 1;
     position: relative;

src/app/line/renderer/basicrenderer.tsx

@@ -19,12 +19,10 @@ import type {
     LineType,
     TermContextUnion,
     RendererContainerType,
-} from "../../types/types";
-import * as T from "../../types/types";
-import { PacketDataBuffer } from "../../common/prompt/ptydata";
-import { debounce, throttle } from "throttle-debounce";
-import * as util from "../../util/util";
-import { GlobalModel } from "../../model/model";
+} from "../../../types/types";
+import { debounce } from "throttle-debounce";
+import * as util from "../../../util/util";
+import { GlobalModel } from "../../../model/model";
 
 type OV<V> = mobx.IObservableValue<V>;
 type CV<V> = mobx.IComputedValue<V>;

src/index.less

@@ -1,5 +1,5 @@
 @base-color: #eceeec;
-@base-background: rgba(21, 23, 21, 1.0);
+@base-background: rgba(21, 23, 21, 1);
 @base-background-transparent: rgba(21, 23, 21, 0.7);
 @base-background-dev: rgba(21, 23, 21, 1);
 @base-border: rgba(241, 246, 243, 0.08);
@@ -41,4 +41,3 @@
 @soft-blue: #729fcf;
 
 @active-menu-color: rgb(0, 71, 171);
-

src/model/model.ts

@@ -11,7 +11,7 @@ import {
     boundInt,
     isModKeyPress,
 } from "../util/util";
-import { TermWrap } from "../plugins/terminal/term";
+import { TermWrap } from "../plugins/prompt-core/terminal/term";
 import type {
     SessionDataType,
     LineType,

src/plugins/code/code.less

@@ -0,0 +1,127 @@
+@import "../../index.less";
+
+.code-renderer {
+    .scroller {
+        padding-top: 10px;
+        padding-bottom: 15px;
+    }
+
+    .monaco-editor .monaco-editor-background {
+        background-color: rgba(255, 255, 255, 0.075) !important;
+    }
+    .monaco-editor .scrollbar {
+        height: 4px !important;
+        width: 4px !important;
+    }
+    .monaco-editor .scrollbar .slider {
+        background-color: rgba(255, 255, 255) !important;
+    }
+
+    .cmd-hints,
+    .dropdown {
+        display: inline-block;
+        position: relative;
+        min-width: 6rem;
+        max-width: 6rem;
+        margin-right: 8px;
+    }
+    .hint-item {
+        border-radius: 4px 4px 0 0;
+        padding: 3px 9px 2px 8px;
+        text-align: center;
+    }
+    section {
+        transition: height 0.3s ease-in-out;
+    }
+    .preview {
+        color: #000;
+        background-color: rgb(200, 200, 200);
+    }
+    .preview:hover {
+        background-color: @term-white !important;
+    }
+    .save-enabled {
+        color: @term-white;
+        background-color: #4e9a06;
+    }
+    .save-disabled {
+        color: rgb(52, 52, 52);
+        background-color: #aaaea7;
+        cursor: default !important;
+    }
+    .save-disabled:hover {
+        background-color: #aaaea7;
+    }
+    .close {
+        color: @term-white;
+        background-color: #9e0000;
+    }
+    .message {
+        color: @term-white;
+        border-radius: 6px;
+        margin-bottom: 1rem;
+        padding: 4px 1rem;
+        max-width: 80vw;
+    }
+    .readonly {
+        position: absolute;
+        top: calc(1.5rem + 3px);
+        right: 10rem;
+        border-radius: 5px;
+        background-color: @term-bright-red;
+        color: @term-white;
+        z-index: 1;
+        padding: 0 6px 2px;
+    }
+
+    /** customising react-split-it **/
+    .jsoneditor {
+        border: none !important;
+    }
+
+    .split-horizontal {
+        display: flex;
+        width: 100%;
+        height: 100%;
+    }
+    .split-vertical {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .gutter {
+        flex-shrink: 0;
+        flex-grow: 0;
+        background: rgb(100, 100, 100);
+        max-width: 4px;
+    }
+    .gutter-horizontal {
+        cursor: col-resize;
+    }
+    .gutter-vertical {
+        cursor: row-resize;
+    }
+    .gutter:hover {
+        background: rgb(155, 155, 155);
+    }
+    .gutter-dragging:hover {
+        background: rgb(155, 155, 155);
+    }
+
+    .pane {
+        flex-shrink: 1;
+        flex-grow: 1;
+        position: relative;
+        min-width: 20rem;
+    }
+    .pane-dragging {
+        overflow: hidden;
+    }
+
+    .scrollable {
+        height: 100vh;
+        max-height: 100vh;
+        overflow: auto;
+    }
+}

src/plugins/code/index.tsx → src/plugins/code/code.tsx

@@ -7,8 +7,7 @@ import Split from "react-split-it";
 import loader from "@monaco-editor/loader";
 loader.config({ paths: { vs: "./node_modules/monaco-editor/min/vs" } });
 
-import "./split.less";
-import "../plugins.less";
+import "./code.less";
 
 function renderCmdText(text: string): any {
     return <span>&#x2318;{text}</span>;
@@ -425,13 +424,12 @@ class SourceCodeRenderer extends React.Component<
         const { exitcode } = this.props;
         const { code, message, isPreviewerAvailable, showPreview, editorFraction } = this.state;
 
-        if (code == null)
-            return <div className="renderer-container code-renderer" style={{ height: this.props.savedHeight }} />;
+        if (code == null) return <div className="code-renderer" style={{ height: this.props.savedHeight }} />;
 
         if (exitcode === 1)
             return (
                 <div
-                    className="renderer-container code-renderer"
+                    className="code-renderer"
                     style={{
                         fontSize: GlobalModel.termFontSize.get(),
                         color: "white",
@@ -442,7 +440,7 @@ class SourceCodeRenderer extends React.Component<
             );
 
         return (
-            <div className="renderer-container code-renderer">
+            <div className="code-renderer">
                 <Split sizes={[editorFraction, 1 - editorFraction]} onSetSizes={this.setSizes}>
                     {this.getCodeEditor()}
                     {isPreviewerAvailable && showPreview && this.getPreviewer()}

src/plugins/image/image.less

@@ -0,0 +1,8 @@
+@import "../../index.less";
+
+.image-renderer {
+    padding: 10px;
+    img {
+        display: block;
+    }
+}

src/plugins/image.tsx → src/plugins/image/image.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import * as mobx from "mobx";
 import * as mobxReact from "mobx-react";
-import { RendererContext, RendererOpts } from "../types/types";
+import { RendererContext, RendererOpts } from "../../types/types";
 
-import "./plugins.less";
+import "./image.less";
 
 type OV<V> = mobx.IObservableValue<V>;
 type CV<V> = mobx.IComputedValue<V>;
@@ -64,7 +64,7 @@ class SimpleImageRenderer extends React.Component<
         let dataBlob = this.props.data;
         if (dataBlob == null || dataBlob.notFound) {
             return (
-                <div className="renderer-container image-renderer" style={{ fontSize: this.props.opts.termFontSize }}>
+                <div className="image-renderer" style={{ fontSize: this.props.opts.termFontSize }}>
                     <div className="load-error-text">
                         ERROR: file {dataBlob && dataBlob.name ? JSON.stringify(dataBlob.name) : ""} not found
                     </div>
@@ -80,7 +80,7 @@ class SimpleImageRenderer extends React.Component<
             forceHeight = this.props.savedHeight;
         }
         return (
-            <div className="renderer-container image-renderer" style={{ height: forceHeight }}>
+            <div className="image-renderer" style={{ height: forceHeight }}>
                 <img
                     ref={this.imageRef}
                     style={{ maxHeight: opts.idealSize.height, maxWidth: opts.idealSize.width }}