From d037666ad1cd3c3b6dd8ac6630062d6ff33d40da Mon Sep 17 00:00:00 2001
From: sawka <mike.sawka@gmail.com>
Date: Tue, 30 Aug 2022 15:25:51 -0700
Subject: [PATCH] checkpoint on history rendering

---
 src/main.tsx | 90 ++++++++++++++++++++++++++++++++++++++--------------
 src/model.ts | 10 +++++-
 src/sh2.less | 22 +++++++++++--
 3 files changed, 95 insertions(+), 27 deletions(-)

diff --git a/src/main.tsx b/src/main.tsx
index cab59775..afd1cea6 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -527,6 +527,69 @@ class TextAreaInput extends React.Component<{}, {}> {
     }
 }
 
+@mobxReact.observer
+class HistoryInfo extends React.Component<{}, {}> {
+    componentDidMount() {
+        let inputModel = GlobalModel.inputModel;
+        let selNum = inputModel.historySelectedNum.get();
+        if (selNum != null) {
+            let elem = document.querySelector(".cmd-history .hnum-" + selNum);
+            if (elem != null) {
+                elem.scrollIntoView({block: "nearest"});
+            }
+        }
+    }
+
+    renderHItem(hitem : HistoryItem, selNum : number) : any {
+        let lines = hitem.cmdstr.split("\n");
+        let line : string = "";
+        let idx = 0;
+        return (
+            <div key={hitem.historynum} className={cn("history-item", {"is-selected": selNum == hitem.historynum}, "hnum-" + hitem.historynum)}>
+                <div className="history-line">{(selNum == hitem.historynum ? "*" : " ")}{sprintf("%5s", hitem.historynum)}  {lines[0]}</div>
+                <For each="line" index="index" of={lines.slice(1)}>
+                    <div key={idx} className="history-line">{line}</div>
+                </For>
+            </div>
+        );
+    }
+    
+    render() {
+        let inputModel = GlobalModel.inputModel;
+        let idx : number = 0;
+        let hitems : HistoryItem[] = inputModel.historyItems.get() ?? [];
+        let selNum = inputModel.historySelectedNum.get();
+        hitems = hitems.slice().reverse();
+        return (
+            <div className="cmd-history">
+                <div className="history-title">
+                    showing history for
+                    {" "}
+                    <span className="term-bright-white">[containing '']</span>
+                    {" "}
+                    <span className="term-bright-white">[this session &#x2318;S]</span>
+                    {" "}
+                    <span className="term-bright-white">[this window &#x2318;W]</span>
+                    {" "}
+                    <span className="term-bright-white">[this remote &#x2318;R]</span>
+                    {" "}
+                    <span className="term-bright-white">[including metacmds &#x2318;M]</span>
+                </div>
+                <div className="history-items">
+                    <If condition={hitems.length == 0}>
+                        [no history]
+                    </If>
+                    <If condition={hitems.length > 0}>
+                        <For each="hitem" index="idx" of={hitems}>
+                            {this.renderHItem(hitem, selNum)}
+                        </For>
+                    </If>
+                </div>
+            </div>
+        );
+    }
+}
+
 @mobxReact.observer
 class CmdInput extends React.Component<{}, {}> {
     getAfterSlash(s : string) : string {
@@ -568,32 +631,11 @@ class CmdInput extends React.Component<{}, {}> {
         let istrIdx : number = 0;
         let line : string = null;
         let idx : number = 0;
-        let hitems : HistoryItem[] = inputModel.historyItems.get() ?? [];
         return (
             <div className={cn("box cmd-input has-background-black", {"has-info": infoShow || historyShow})}>
-                <div className="cmd-history" style={{display: (historyShow ? "block" : "none")}}>
-                    <div className="history-title">
-                        showing history for
-                        {" "}
-                        <span className="term-bright-white">[this session &#x2318;S]</span>
-                        {" "}
-                        <span className="term-bright-white">[this window &#x2318;W]</span>
-                        {" "}
-                        <span className="term-bright-white">[this remote &#x2318;R]</span>
-                        {" "}
-                        <span className="term-bright-white">[including metacmds &#x2318;M]</span>
-                    </div>
-                    <div className="history-items">
-                        <If condition={hitems.length == 0}>
-                            [no history]
-                        </If>
-                        <If condition={hitems.length > 0}>
-                            <For each="hitem" index="idx" of={hitems}>
-                                <div>{idx+1} item</div>
-                            </For>
-                        </If>
-                    </div>
-                </div>
+                <If condition={historyShow}>
+                    <HistoryInfo/>
+                </If>
                 <div className="cmd-input-info" style={{display: (infoShow ? "block" : "none")}}>
                     <If condition={infoMsg && infoMsg.infotitle != null}>
                         <div className="info-title">
diff --git a/src/model.ts b/src/model.ts
index fec0681c..e05050c1 100644
--- a/src/model.ts
+++ b/src/model.ts
@@ -584,6 +584,7 @@ class InputModel {
     queryOpts : OV<HistoryQueryOpts> = mobx.observable.box(null);
     infoMsg : OV<InfoType> = mobx.observable.box(null);
     infoTimeoutId : any = null;
+    historySelectedNum : OV<string> = mobx.observable.box(null);
 
     updateCmdLine(cmdLine : CmdLineUpdateType) : void {
         mobx.action(() => {
@@ -603,7 +604,14 @@ class InputModel {
                 this.infoShow.set(false);
             }
             this.historyShow.set(true);
-            this.historyItems.set(hinfo.items);
+            let items = hinfo.items ?? [];
+            this.historyItems.set(items);
+            if (items.length == 0) {
+                this.historySelectedNum.set(null);
+            }
+            else {
+                this.historySelectedNum.set(items[0].historynum);
+            }
         })();
     }
 
diff --git a/src/sh2.less b/src/sh2.less
index 726c027e..2e56042d 100644
--- a/src/sh2.less
+++ b/src/sh2.less
@@ -634,11 +634,29 @@ body .xterm .xterm-viewport {
 
         .history-items {
             margin-top: 24px;
-            color: #d3d7cf;
+            color: @term-white;
             font-size: 12px;
             font-family: 'JetBrains Mono', monospace;
-            white-space: pre;
             padding-bottom: 6px;
+
+            .history-line {
+                white-space: pre;
+                margin-left: 58px;
+            }
+
+            .history-line:first-child {
+                margin-left: 0;
+            }
+
+            .history-item {
+                padding-left: 5px;
+            }
+
+            .history-item.is-selected {
+                font-weight: bold;
+                color: @term-bright-white;
+                background-color: #444;
+            }
         }
     }