From 8e4c9172c0eb4d0f0f78608394f3b67f0fcc5377 Mon Sep 17 00:00:00 2001
From: sawka <mike.sawka@gmail.com>
Date: Mon, 13 Mar 2023 21:56:29 -0700
Subject: [PATCH] add some hints

---
 src/main.tsx | 33 ++++++++++++++++++++++-----------
 src/sh2.less | 49 ++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 68 insertions(+), 14 deletions(-)

diff --git a/src/main.tsx b/src/main.tsx
index 7e6fbf58..59d33f6e 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -320,13 +320,6 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
             inputModel.resetInput();
             return;
         }
-        if (e.code == "KeyM" && (e.getModifierState("Meta") || e.getModifierState("Control"))) {
-            e.preventDefault();
-            let opts = mobx.toJS(inputModel.historyQueryOpts.get());
-            opts.includeMeta = !opts.includeMeta;
-            inputModel.setHistoryQueryOpts(opts);
-            return;
-        }
         if (e.code == "KeyR" && ((e.getModifierState("Meta") || e.getModifierState("Control")) && !e.getModifierState("Shift"))) {
             e.preventDefault();
             let opts = mobx.toJS(inputModel.historyQueryOpts.get());
@@ -1387,8 +1380,6 @@ class HistoryInfo extends React.Component<{}, {}> {
                     <div className="history-opt">[containing '{opts.queryStr}']</div>
                     <div className="spacer"></div>
                     <div className="history-opt">[{opts.limitRemote ? "this" : "any"} remote &#x2318;R]</div>
-                    <div className="spacer"></div>
-                    <div className="history-opt">[{opts.includeMeta ? "" : "no "}metacmds &#x2318;M]</div>
                     <div className="grow-spacer"></div>
                     <div className="history-clickable-opt" onClick={this.handleClose}>(ESC)</div>
                     <div className="spacer"></div>
@@ -1444,6 +1435,22 @@ class CmdInput extends React.Component<{}, {}> {
     handleInnerHeightUpdate() : void {
         this.updateCmdInputHeight();
     }
+
+    @boundMethod
+    clickFocusInputHint() : void {
+        GlobalModel.inputModel.giveFocus();
+    }
+
+    @boundMethod
+    clickHistoryHint() : void {
+        let inputModel = GlobalModel.inputModel;
+        if (inputModel.historyShow.get()) {
+            inputModel.resetHistory();
+        }
+        else {
+            inputModel.openHistory();
+        }
+    }
     
     render() {
         let model = GlobalModel;
@@ -1497,12 +1504,16 @@ class CmdInput extends React.Component<{}, {}> {
                     </If>
                     <TextAreaInput onHeightChange={this.handleInnerHeightUpdate}/>
                     <div className="control cmd-exec">
-                        <div onClick={GlobalModel.inputModel.uiSubmitCommand} className="button">
+                        <div onClick={GlobalModel.inputModel.uiSubmitCommand} className="button" title="Run Command">
                             <span className="icon">
                                 <i className="fa-sharp fa-solid fa-rocket"/>
                             </span>
                         </div>
                     </div>
+                    <div className="cmd-input-hints">
+                        <If condition={!focusVal}><div onClick={this.clickFocusInputHint} className="hint-item color-white">focus input (&#x2318;I)</div></If>
+                        <If condition={focusVal}><div onClick={this.clickHistoryHint} className="hint-item color-green"><i className={cn("fa-sharp fa-solid", (historyShow ? "fa-angle-down" : "fa-angle-up"))}/> {historyShow ? "close history (esc)" : "show history (ctrl-r)"}</div></If>
+                    </div>
                 </div>
             </div>
         );
@@ -2171,7 +2182,7 @@ class ScreenTabs extends React.Component<{session : Session}, {}> {
                     </div>
                 </For>
                 <div key="new-screen" className="screen-tab new-screen" onClick={this.handleNewScreen}>
-                    +
+                    <i className="fa-sharp fa-solid fa-plus"/> <div className="tab-index">&#x2318;T</div>
                 </div>
             </div>
         );
diff --git a/src/sh2.less b/src/sh2.less
index 6028f4d2..849ccce4 100644
--- a/src/sh2.less
+++ b/src/sh2.less
@@ -885,8 +885,8 @@ body::-webkit-scrollbar {
     }
 
     .screen-tab.new-screen {
-        width: 30px;
-        min-width: 30px;
+        width: 80px;
+        min-width: 80px;
         background-color: black;
         border-right: none;
         color: #ccc;
@@ -1786,10 +1786,53 @@ body .xterm .xterm-viewport {
     }
 
     .cmd-input-field {
+        position: relative;
+        
         .cmd-input-control {
             line-height: 0;
         }
-        
+
+        .cmd-input-hints {
+            position: absolute;
+            bottom: -14px;
+            right: 0px;
+            .mono-font(10px);
+            display: flex;
+            flex-direction: row;
+
+            .hint-item {
+                padding: 0px 5px 0px 5px;
+                border-radius: 0 0 3px 3px;
+                cursor: pointer;
+                
+                &:hover {
+                    font-weight: bold;
+                }
+            }
+
+            .hint-item:not(:last-child) {
+                margin-right: 8px;
+            }
+
+            .hint-item.color-green {
+                color: black;
+                background-color: @tab-green;
+
+                &:hover {
+                    color: white;
+                }
+            }
+
+            .hint-item.color-white {
+                color: black;
+                background-color: @term-white;
+
+                &:hover {
+                    background-color: @term-bright-white;
+                }
+            }
+        }
+
         textarea {
             color: white;
             background-color: black;