From 1d7113d91b962b0787dbdc34079fb8594b634263 Mon Sep 17 00:00:00 2001
From: sawka <mike.sawka@gmail.com>
Date: Fri, 3 Feb 2023 14:26:46 -0800
Subject: [PATCH] stub out some history view code (disabled in UI right now)

---
 src/main.tsx | 55 +++++++++++++++++++++++++++++++++++++++++++++-------
 src/model.ts |  1 +
 src/sh2.less | 23 +++++++++++++++++++++-
 3 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/src/main.tsx b/src/main.tsx
index c154d6b6..8292305b 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -14,8 +14,6 @@ import localizedFormat from 'dayjs/plugin/localizedFormat';
 import {GlobalModel, GlobalCommandRunner, Session, Cmd, Window, Screen, ScreenWindow, riToRPtr, widthToCols, termWidthFromCols, termHeightFromRows, termRowsFromHeight} from "./model";
 import {isModKeyPress} from "./util";
 
-let IS_DEV = __PROMPT_DEV__;
-
 dayjs.extend(localizedFormat)
 
 const RemotePtyRows = 8;
@@ -1591,6 +1589,14 @@ class InfoMsg extends React.Component<{}, {}> {
         return s.substr(slashIdx+1);
     }
 
+    hasSpace(s : string) : boolean {
+        return s.indexOf(" ") != -1;
+    }
+
+    handleCompClick(s : string) : void {
+        // TODO -> complete to this completion
+    }
+
     render() {
         let model = GlobalModel;
         let inputModel = model.inputModel;
@@ -1634,12 +1640,12 @@ class InfoMsg extends React.Component<{}, {}> {
                 <If condition={infoMsg && infoMsg.infocomps != null && infoMsg.infocomps.length > 0}>
                     <div key="infocomps" className="info-comps">
                         <For each="istr" index="idx" of={infoMsg.infocomps}>
-                            <div key={idx} className={cn("info-comp", {"metacmd-comp": istr.startsWith("^")})}>
+                            <div onClick={() => this.handleCompClick(istr)} key={idx} className={cn("info-comp", {"has-space": this.hasSpace(istr)}, {"metacmd-comp": istr.startsWith("^")})}>
                                 {this.getAfterSlash(istr)}
                             </div>
                         </For>
                         <If condition={infoMsg.infocompsmore}>
-                            <div key="more" className="info-comp">
+                            <div key="more" className="info-comp no-select">
                                 ...
                             </div>
                         </If>
@@ -2417,8 +2423,9 @@ class SessionView extends React.Component<{}, {}> {
         if (cmdInputHeight == 0) {
             cmdInputHeight = 110;
         }
+        let isHidden = GlobalModel.historyViewActive.get();
         return (
-            <div className="session-view" data-sessionid={session.sessionId}>
+            <div className={cn("session-view", {"is-hidden": isHidden})} data-sessionid={session.sessionId}>
                 <ScreenView screen={activeScreen}/>
                 <ScreenTabs session={session}/>
                 <div style={{height: cmdInputHeight}}></div>
@@ -2428,6 +2435,28 @@ class SessionView extends React.Component<{}, {}> {
     }
 }
 
+@mobxReact.observer
+class HistoryView extends React.Component<{}, {}> {
+    render() {
+        let model = GlobalModel;
+        let session = model.getActiveSession();
+        if (session == null) {
+            return <div className="session-view">(no active session)</div>;
+        }
+        let activeScreen = session.getActiveScreen();
+        let cmdInputHeight = model.inputModel.cmdInputHeight.get();
+        if (cmdInputHeight == 0) {
+            cmdInputHeight = 110;
+        }
+        let isHidden = !GlobalModel.historyViewActive.get();
+        return (
+            <div className={cn("history-view", {"is-hidden": isHidden})}>
+                <div className="history-title">HISTORY</div>
+            </div>
+        );
+    }
+}
+
 function getConnVal(r : RemoteType) : number {
     if (r.status == "connected") {
         return 1;
@@ -2505,6 +2534,14 @@ class MainSideBar extends React.Component<{}, {}> {
         GlobalCommandRunner.openCreateRemote();
     }
 
+    @boundMethod
+    handleHistoryClick() : void {
+        mobx.action(() => {
+            let isActive = GlobalModel.historyViewActive.get();
+            GlobalModel.historyViewActive.set(!isActive);
+        })();
+    }
+
     render() {
         let model = GlobalModel;
         let activeSessionId = model.activeSessionId.get();
@@ -2533,8 +2570,8 @@ class MainSideBar extends React.Component<{}, {}> {
         }
         let isCollapsed = this.collapsed.get();
         return (
-            <div className={cn("main-sidebar", {"collapsed": isCollapsed}, {"is-dev": IS_DEV})}>
-                <h1 className={cn("title", "prompt-logo-small", {"collapsed": isCollapsed}, {"is-dev": IS_DEV})}>
+            <div className={cn("main-sidebar", {"collapsed": isCollapsed}, {"is-dev": GlobalModel.isDev})}>
+                <h1 className={cn("title", "prompt-logo-small", {"collapsed": isCollapsed}, {"is-dev": GlobalModel.isDev})}>
                     {(isCollapsed ? "[p]" : "[prompt]")}
                 </h1>
                 <div className="collapse-container">
@@ -2566,6 +2603,9 @@ class MainSideBar extends React.Component<{}, {}> {
                             <li className="new-session"><a onClick={() => this.handleNewSession()}><i className="fa fa-plus"/> New Session</a></li>
                         </If>
                     </ul>
+                    <ul className="menu-list" style={{marginTop: 20, display: "none"}}>
+                        <li className="menu-history"><a onClick={this.handleHistoryClick}><i className="fa fa-clock-o"/> HISTORY</a></li>
+                    </ul>
                     <div className="spacer"></div>
                     <If condition={GlobalModel.debugSW.get() && sw != null}>
                         <div>
@@ -2750,6 +2790,7 @@ class Main extends React.Component<{}, {}> {
                 <div className="main-content">
                     <MainSideBar/>
                     <SessionView/>
+                    <HistoryView/>
                 </div>
                 <If condition={!GlobalModel.ws.open.get() || !GlobalModel.localServerRunning.get()}>
                     <DisconnectedModal/>
diff --git a/src/model.ts b/src/model.ts
index 565ea6c1..dac162d9 100644
--- a/src/model.ts
+++ b/src/model.ts
@@ -1574,6 +1574,7 @@ class Model {
     localServerRunning : OV<boolean>;
     authKey : string;
     isDev : boolean;
+    historyViewActive : OV<boolean> = mobx.observable.box(false, {name: "historyViewActive"});
     
     constructor() {
         this.clientId = getApi().getId();
diff --git a/src/sh2.less b/src/sh2.less
index 49e88540..fa67bde3 100644
--- a/src/sh2.less
+++ b/src/sh2.less
@@ -51,12 +51,16 @@ html, body, #main {
         background-color: black;
         height: 100%;
 
-        .session-view {
+        .session-view, .history-view {
             flex-grow: 1;
             display: flex;
             flex-direction: column;
             min-width: 300px;
             position: relative;
+
+            &.is-hidden {
+                display: none;
+            }
         }
 
         .screen-view {
@@ -105,6 +109,14 @@ html, body, #main {
     }
 }
 
+.history-view {
+    .history-title {
+        margin: 10px 0 10px 15px;
+        .mono-font(1.5rem);
+        color: @term-bright-white;
+    }
+}
+
 .screen-tabs {
     height: 30px;
     display: flex;
@@ -266,6 +278,10 @@ html, body, #main {
         li.menu-loading-message {
             .mono-font();
         }
+
+        li.menu-history {
+            margin-left: -10px;
+        }
     }
 
     .menu-list.remotes-menu-list {
@@ -1048,6 +1064,11 @@ body .xterm .xterm-viewport {
             .info-comp {
                 min-width: 200px;
                 color: @term-white;
+                margin-right: 10px;
+
+                &.has-space {
+                    text-decoration: underline dotted #777;
+                }
             }
 
             .metacmd-comp {