From e04c5af41d978b70ccd0b4c88417c1d93b744d9f Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Tue, 23 Apr 2024 10:50:56 -0700
Subject: [PATCH] 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
---
 src/app/workspace/cmdinput/aichat.less       |  5 +-
 src/app/workspace/cmdinput/auxview.less      | 15 ++---
 src/app/workspace/cmdinput/auxview.tsx       | 60 ++++++++++++--------
 src/app/workspace/cmdinput/cmdinput.less     | 27 ++++++---
 src/app/workspace/cmdinput/cmdinput.tsx      |  1 +
 src/app/workspace/cmdinput/historyinfo.less  |  2 +-
 src/app/workspace/cmdinput/historyinfo.tsx   |  3 +-
 src/app/workspace/cmdinput/textareainput.tsx | 10 ++--
 8 files changed, 72 insertions(+), 51 deletions(-)

diff --git a/src/app/workspace/cmdinput/aichat.less b/src/app/workspace/cmdinput/aichat.less
index fe42fba72..8a7995d9f 100644
--- 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);
diff --git a/src/app/workspace/cmdinput/auxview.less b/src/app/workspace/cmdinput/auxview.less
index 374d9940a..5eef8f643 100644
--- 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;
     }
 }
diff --git a/src/app/workspace/cmdinput/auxview.tsx b/src/app/workspace/cmdinput/auxview.tsx
index 281d43de4..eb3e272a7 100644
--- 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>
+    );
+});
diff --git a/src/app/workspace/cmdinput/cmdinput.less b/src/app/workspace/cmdinput/cmdinput.less
index 66785d4e4..d013b6a39 100644
--- 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;
diff --git a/src/app/workspace/cmdinput/cmdinput.tsx b/src/app/workspace/cmdinput/cmdinput.tsx
index df763774f..f25bcf7ac 100644
--- 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>
diff --git a/src/app/workspace/cmdinput/historyinfo.less b/src/app/workspace/cmdinput/historyinfo.less
index 882520458..d194cc01f 100644
--- 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 {
diff --git a/src/app/workspace/cmdinput/historyinfo.tsx b/src/app/workspace/cmdinput/historyinfo.tsx
index cbe6cdf84..059609297 100644
--- 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(
diff --git a/src/app/workspace/cmdinput/textareainput.tsx b/src/app/workspace/cmdinput/textareainput.tsx
index b0fe26304..95347edbd 100644
--- 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)}>