checkpoint on layout of history info panel

src/main.tsx

@@ -568,10 +568,31 @@ 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})}>
+            <div className={cn("box cmd-input has-background-black", {"has-info": infoShow || historyShow})}>
                 <div className="cmd-history" style={{display: (historyShow ? "block" : "none")}}>
-                    history!
+                    <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>
                 <div className="cmd-input-info" style={{display: (infoShow ? "block" : "none")}}>
                     <If condition={infoMsg && infoMsg.infotitle != null}>

src/model.ts

@@ -604,7 +604,7 @@ class InputModel {
             }
             this.historyShow.set(true);
             this.historyItems.set(hinfo.items);
-        });
+        })();
     }
 
     flashInfoMsg(info : InfoType, timeoutMs : number) : void {
@@ -1294,8 +1294,10 @@ class Model {
     loadSessionList() : void {
         let url = new URL("http://localhost:8080/api/get-all-sessions");
         fetch(url).then((resp) => handleJsonFetchResponse(url, resp)).then((data) => {
-            this.runUpdate(data.data, false);
-            this.sessionListLoaded.set(true);
+            mobx.action(() => {
+                this.runUpdate(data.data, false);
+                this.sessionListLoaded.set(true);
+            })();
             return;
         }).catch((err) => {
             this.errorHandler("getting session list", err, false);

src/sh2.less

@@ -43,7 +43,7 @@ html, body, #main {
         display: flex;
         flex-direction: row;
         background-color: black;
-        flex-grow: 1;
+        height: calc(100% - 45px);
 
         .session-view {
             flex-grow: 1;
@@ -534,7 +534,7 @@ body .xterm .xterm-viewport {
     }
 }
 
-.cmd-input-info, .xterm-viewport {
+.cmd-input-info, .xterm-viewport, .cmd-history {
     &::-webkit-scrollbar {
         background-color: #777;
         width: 5px;
@@ -578,6 +578,7 @@ body .xterm .xterm-viewport {
     max-height: max(300px, 40%);
     display: flex;
     flex-direction: column;
+    position: relative;
 
     &.has-info {
         padding-top: 5px;
@@ -613,6 +614,34 @@ body .xterm .xterm-viewport {
         }
     }
 
+    .cmd-history {
+        color: @term-white;
+        margin-bottom: 5px;
+        overflow-y: auto;
+        flex-shrink: 1;
+
+        .history-title {
+            position: absolute;
+            top: 5px;
+            left: 20px;
+            background-color: black;
+            font-family: 'JetBrains Mono', monospace;
+            font-weight: 600;
+            font-size: 14px;
+            color: #729fcf;
+            padding-bottom: 4px;
+        }
+
+        .history-items {
+            margin-top: 24px;
+            color: #d3d7cf;
+            font-size: 12px;
+            font-family: 'JetBrains Mono', monospace;
+            white-space: pre;
+            padding-bottom: 6px;
+        }
+    }
+
     .cmd-input-info {
         flex-shrink: 1;
         overflow-y: auto;