Make the AuxiliaryCmdView title bar optional and more flexible (#588)

* Make the auxView tilebar optional and make sure it flows as part of the flexbox * simplify condition * fix ai chat scroll direction * remove unnecessary change * remove unused class
2025-02-01 23:21:59 +01:00 · 2024-04-23 10:50:56 -07:00 · 2024-04-23 10:50:56 -07:00 · e04c5af41d
commit e04c5af41d
parent 2b0b206614
8 changed files with 72 additions and 51 deletions
--- a/src/app/workspace/cmdinput/aichat.less
+++ b/src/app/workspace/cmdinput/aichat.less
@ -2,18 +2,19 @@
    padding-bottom: 0 !important;
    .auxview-content {
        flex-flow: column nowrap;
-        height: 100%;
+        display: flex;

        .chat-window {
            overflow-y: auto;
            margin-bottom: 5px;
            flex: 1 1 auto;
            flex-direction: column-reverse;
+            height: 100%;
        }

        .chat-input {
            padding: 0.5em 0.5em 0.5em 0.5em;
-            flex: 1 0 auto;
+            flex: 0 0 auto;

            .chat-textarea {
                color: var(--app-text-primary-color);
--- a/src/app/workspace/cmdinput/auxview.less
+++ b/src/app/workspace/cmdinput/auxview.less
@ -1,17 +1,11 @@
 // For the additonal views, we want less padding on the top and bottom than we want for the base-cmdinput div
 .auxview {
-    padding: var(--termpad) calc(var(--termpad) * 2) var(--termpad) calc(var(--termpad) * 3 - 1px);
-    overflow: auto;
-    flex-shrink: 1;
-    width: 100%;
+    overflow: hidden;
+    height: 100%;

    --auxview-titlebar-height: 18px;

    .auxview-titlebar {
-        position: absolute;
-        z-index: 22;
-        top: 0;
-        left: 0;
        background-color: var(--app-panel-bg-color);
        color: var(--term-blue);
        padding: 6px 10px 6px 10px;
@ -23,6 +17,7 @@
        user-select: none;
        cursor: default;
        line-height: var(--auxview-titlebar-height);
+        overflow: hidden;

        .title-string {
            font-weight: bold;
@ -46,6 +41,8 @@

    .auxview-content {
        display: flex;
-        padding-top: calc(var(--auxview-titlebar-height) + 6px);
+        height: calc(100% - var(--auxview-titlebar-height) - 13px);
+        padding: var(--termpad) calc(var(--termpad) * 2) var(--termpad) calc(var(--termpad) * 3 - 1px);
+        overflow-y: auto;
    }
 }
--- a/src/app/workspace/cmdinput/auxview.tsx
+++ b/src/app/workspace/cmdinput/auxview.tsx
@ -3,26 +3,28 @@

 import * as React from "react";
 import cn from "classnames";
-import { If } from "tsx-control-statements/components";
+import { Choose, If, Otherwise, When } from "tsx-control-statements/components";
+import { observer } from "mobx-react";

 import "./auxview.less";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";

-export class AuxiliaryCmdView extends React.Component<
-    {
-        title: string;
-        className?: string;
-        iconClass?: string;
-        titleBarContents?: React.ReactElement[];
-        children?: React.ReactNode;
-        onClose?: React.MouseEventHandler<HTMLDivElement>;
-    },
-    {}
-> {
-    render() {
-        const { title, className, iconClass, titleBarContents, children, onClose } = this.props;
+interface AuxiliaryCmdViewProps {
+    title: string;
+    className?: string;
+    iconClass?: string;
+    titleBarContents?: React.ReactElement[];
+    children?: React.ReactNode;
+    onClose?: React.MouseEventHandler<HTMLDivElement>;
+    scrollable?: boolean;
+}

-        return (
-            <div className={cn("auxview", className)}>
+export const AuxiliaryCmdView: React.FC<AuxiliaryCmdViewProps> = observer((props) => {
+    const { title, className, iconClass, titleBarContents, children, onClose } = props;
+
+    return (
+        <div className={cn("auxview", className)}>
+            <If condition={title || onClose || titleBarContents || iconClass}>
                <div className="auxview-titlebar">
                    <If condition={iconClass != null}>
                        <div className="title-icon">
@ -41,10 +43,22 @@ export class AuxiliaryCmdView extends React.Component<
                        </div>
                    </If>
                </div>
-                <If condition={children != null}>
-                    <div className="auxview-content">{children}</div>
-                </If>
-            </div>
-        );
-    }
-}
+            </If>
+            <If condition={children != null}>
+                <Choose>
+                    <When condition={props.scrollable}>
+                        <OverlayScrollbarsComponent
+                            className="auxview-content"
+                            options={{ scrollbars: { autoHide: "leave" } }}
+                        >
+                            {children}
+                        </OverlayScrollbarsComponent>
+                    </When>
+                    <Otherwise>
+                        <div className="auxview-content">{children}</div>
+                    </Otherwise>
+                </Choose>
+            </If>
+        </div>
+    );
+});
--- a/src/app/workspace/cmdinput/cmdinput.less
+++ b/src/app/workspace/cmdinput/cmdinput.less
@ -14,19 +14,15 @@
    // TODO: use a generic selector for this
    &.has-aichat,
    &.has-history,
-    &.has-info {
+    &.has-info,
+    &.has-suggestions {
        .base-cmdinput {
            border-top: 1px solid var(--app-border-color);
        }
    }

-    &.has-info {
-        padding-top: var(--termpad);
-    }
-
    &.has-history,
    &.has-aichat {
-        padding-top: var(--termpad);
        height: max(300px, 70%);
    }

@ -109,9 +105,11 @@
                }
            }

-            textarea {
-                color: var(--app-text-primary-color);
-                background-color: var(--app-bg-color);
+            .textarea,
+            .textarea-ghost {
+                position: absolute;
+                top: 0;
+                left: 0;
                padding: var(--termpad) 0;
                resize: none;
                overflow: auto;
@ -119,10 +117,21 @@
                font-family: var(--termfontfamily);
                line-height: var(--termlineheight);
                font-size: var(--termfontsize);
+                background-color: transparent;
                border: none;
                box-shadow: none;
            }

+            .textarea {
+                color: var(--app-text-primary-color);
+                z-index: 2;
+            }
+
+            .textarea-ghost {
+                color: var(--app-text-secondary-color);
+                z-index: 1;
+            }
+
            input.history-input {
                border: 0;
                padding: 0;
--- a/src/app/workspace/cmdinput/cmdinput.tsx
+++ b/src/app/workspace/cmdinput/cmdinput.tsx
@ -181,6 +181,7 @@ class CmdInput extends React.Component<{}, {}> {
                hidePrompt = true;
            }
        }
+
        return (
            <div ref={this.cmdInputRef} className={cn("cmd-input", hasOpenView, { active: focusVal })}>
                <Choose>
--- a/src/app/workspace/cmdinput/historyinfo.less
+++ b/src/app/workspace/cmdinput/historyinfo.less
@ -11,7 +11,6 @@
        .history-clickable-opt {
            cursor: pointer;
            white-space: nowrap;
-            cursor: pointer;

            &:hover {
                color: var(--app-text-primary-color);
@ -21,6 +20,7 @@

    .history-items {
        color: var(--app-text-color);
+        height: 100%;
        width: 100%;

        .history-item {
--- a/src/app/workspace/cmdinput/historyinfo.tsx
+++ b/src/app/workspace/cmdinput/historyinfo.tsx
@ -239,10 +239,11 @@ class HistoryInfo extends React.Component<{}, {}> {
        return (
            <AuxiliaryCmdView
                title="History"
-                className="cmd-history hide-scrollbar"
+                className="cmd-history"
                onClose={this.handleClose}
                titleBarContents={this.getTitleBarContents()}
                iconClass="fa-sharp fa-solid fa-clock-rotate-left"
+                scrollable={true}
            >
                <div
                    className={cn(
--- a/src/app/workspace/cmdinput/textareainput.tsx
+++ b/src/app/workspace/cmdinput/textareainput.tsx
@ -38,7 +38,7 @@ function scrollDiv(div: any, amt: number) {
    div.scrollTo({ top: newScrollTop, behavior: "smooth" });
 }

-class HistoryKeybindings extends React.Component<{ inputObject: TextAreaInput }, {}> {
+class HistoryKeybindings extends React.Component<{}, {}> {
    componentDidMount(): void {
        if (GlobalModel.activeMainView != "session") {
            return;
@ -101,8 +101,8 @@ class HistoryKeybindings extends React.Component<{ inputObject: TextAreaInput },
 }

 class CmdInputKeybindings extends React.Component<{ inputObject: TextAreaInput }, {}> {
-    lastTab: boolean;
    curPress: string;
+    lastTab: boolean;

    componentDidMount() {
        if (GlobalModel.activeMainView != "session") {
@ -240,9 +240,7 @@ class CmdInputKeybindings extends React.Component<{ inputObject: TextAreaInput }

@mobxReact.observer
 class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: () => void }, {}> {
-    lastTab: boolean = false;
    lastHistoryUpDown: boolean = false;
-    lastTabCurLine: OV<string> = mobx.observable.box(null);
    lastFocusType: string = null;
    mainInputRef: React.RefObject<HTMLTextAreaElement> = React.createRef();
    historyInputRef: React.RefObject<HTMLInputElement> = React.createRef();
@ -612,10 +610,10 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
                style={{ height: computedOuterHeight }}
            >
                <If condition={!auxViewFocused}>
-                    <CmdInputKeybindings inputObject={this}></CmdInputKeybindings>
+                    <CmdInputKeybindings inputObject={this} />
                </If>
                <If condition={isHistoryFocused}>
-                    <HistoryKeybindings inputObject={this}></HistoryKeybindings>
+                    <HistoryKeybindings />
                </If>

                <If condition={!util.isBlank(shellType)}>