implement alert/confirm modal. some more history view cleanup

src/history.tsx

@@ -222,7 +222,7 @@ class HistoryView extends React.Component<{}, {}> {
                         </div>
                     </div>
                 </div>
-                <div className="control-bar">
+                <div className={cn("control-bar", {"is-hidden": (items.length == 0)})}>
                     <div className="control-checkbox" onClick={this.handleControlCheckbox}>
                         <i className={controlCheckboxIcon} title="Toggle Selection"/>
                     </div>
@@ -273,6 +273,18 @@ class HistoryView extends React.Component<{}, {}> {
                         </For>
                     </tbody>
                 </table>
+                <div className={cn("control-bar", {"is-hidden": (items.length == 0 || !hasMore)})}>
+                    <div className="spacer"/>
+                    <div className="showing-text">Showing {offset+1}-{offset+items.length}</div>
+                    <div className={cn("showing-btn", {"is-disabled": (offset == 0)})} onClick={(offset != 0 ? this.handlePrev : null)}><i className="fa-sharp fa-solid fa-chevron-left"/></div>
+                    <div className="btn-spacer"/>
+                    <div className={cn("showing-btn", {"is-disabled": !hasMore})} onClick={hasMore ? this.handleNext : null}><i className="fa-sharp fa-solid fa-chevron-right"/></div>
+                </div>
+                <If condition={items.length == 0}>
+                    <div className="no-items">
+                        <div>No History Items Found</div>
+                    </div>
+                </If>
                 <div className="alt-help">
                     <div className="help-entry">
                         [Esc] to Close<br/>

src/main.tsx

@@ -2496,10 +2496,14 @@ class LoadingSpinner extends React.Component<{}, {}> {
 
 @mobxReact.observer
 class AlertModal extends React.Component<{}, {}> {
+    @boundMethod
     closeModal() : void {
-        mobx.action(() => {
-            GlobalModel.alertMessage.set(null);
-        })();
+        GlobalModel.cancelAlert();
+    }
+
+    @boundMethod
+    handleOK() : void {
+        GlobalModel.confirmAlert();
     }
     
     render() {
@@ -2508,22 +2512,29 @@ class AlertModal extends React.Component<{}, {}> {
             return null;
         }
         let title = message.title ?? "Alert";
+        let isConfirm = message.confirm;
         return (
-            <div className="modal is-active">
+            <div className="modal is-active alert-modal">
                 <div className="modal-background"/>
                 <div className="modal-card">
-                    <header className="modal-card-head">
-                        <p className="modal-card-title">{title}</p>
-                        <button className="delete"></button>
+                    <header className="modal-card-head has-background-danger-light">
+                        <p className="modal-card-title"><i className="fa-sharp fa-solid fa-triangle-exclamation"/> {title}</p>
+                        <button onClick={this.closeModal} className="delete"></button>
                     </header>
                     <section className="modal-card-body">
                         <p>{message.message}</p>
                     </section>
                     <footer className="modal-card-foot">
-                        <button className="button">OK</button>
+                        <If condition={isConfirm}>
+                            <button onClick={this.handleOK} className="button is-primary is-outlined">OK</button>
+                            <button onClick={this.closeModal} className="button is-danger is-outlined">Cancel</button>
+                        </If>
+                        <If condition={!isConfirm}>
+                            <button onClick={this.handleOK} className="button is-primary">OK</button>
+                        </If>
                     </footer>
                 </div>
-                <button class="modal-close is-large" aria-label="close"></button>
+                <button onClick={this.closeModal} className="modal-close" aria-label="close"></button>
             </div>
         );
     }

src/model.ts

@@ -1847,7 +1847,19 @@ class HistoryViewModel {
             setTimeout(this.clearActiveDelete, 2000);
             return;
         }
-        GlobalModel.showAlert({message: "DELETE!"});
+        let prtn = GlobalModel.showAlert({message: "Deleting these lines from history will also delete their content from your sessions as well.", confirm: true});
+        prtn.then((result) => {
+            if (!result) {
+                return;
+            }
+            if (result) {
+                this._deleteSelected();
+            }
+        });
+    }
+
+    _deleteSelected() : void {
+        GlobalCommandRunner.historyView({offset: offset, searchText: this.activeSearchText});
     }
 
     @boundMethod
@@ -2141,6 +2153,7 @@ class Model {
     activeMainView : OV<"session" | "history" | "bookmarks"> = mobx.observable.box("session", {name: "activeMainView"});
     termFontSize : CV<number>;
     alertMessage : OV<AlertMessageType> = mobx.observable.box(null, {name: "alertMessage"});
+    alertPromiseResolver : (result : boolean) => void;
 
     inputModel : InputModel;
     bookmarksModel : BookmarksModel;
@@ -2188,10 +2201,34 @@ class Model {
         setTimeout(() => this.getClientData(), 10);
     }
 
-    showAlert(alertMessage : AlertMessageType) : void {
+    showAlert(alertMessage : AlertMessageType) : Promise<boolean> {
         mobx.action(() => {
             this.alertMessage.set(alertMessage);
         })();
+        let prtn = new Promise((resolve, reject) => {
+            this.alertPromiseResolver = resolve;
+        });
+        return prtn;
+    }
+
+    cancelAlert() : void {
+        mobx.action(() => {
+            this.alertMessage.set(null);
+        })();
+        if (this.alertPromiseResolver != null) {
+            this.alertPromiseResolver(false);
+            this.alertPromiseResolver = null;
+        }
+    }
+
+    confirmAlert() : void {
+        mobx.action(() => {
+            this.alertMessage.set(null);
+        })();
+        if (this.alertPromiseResolver != null) {
+            this.alertPromiseResolver(true);
+            this.alertPromiseResolver = null;
+        }
     }
 
     getBaseHostPort() : string {
@@ -2234,6 +2271,19 @@ class Model {
         if (isModKeyPress(e)) {
             return;
         }
+        if (this.alertMessage.get() != null) {
+            if (e.code == "Escape") {
+                e.preventDefault();
+                this.cancelAlert();
+                return;
+            }
+            if (e.code == "Enter") {
+                e.preventDefault();
+                this.confirmAlert();
+                return;
+            }
+            return;
+        }
         if (this.activeMainView.get() == "bookmarks") {
             this.bookmarksModel.handleDocKeyDown(e);
             return;

src/sh2.less

@@ -239,6 +239,10 @@ body::-webkit-scrollbar {
         margin-left: 10px;
         align-items: center;
 
+        .is-hidden {
+            display: none;
+        }
+
         .control-checkbox {
             cursor: pointer;
             color: #777;
@@ -299,6 +303,17 @@ body::-webkit-scrollbar {
             width: 10px;
         }
     }
+
+    .no-items {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        .mono-font(14px);
+        padding: 30px 0 30px 0;
+        border: 1px solid white;
+        border-radius: 3px;
+        margin: 20px 50px 20px 20px;
+    }
     
     .history-table {
         margin: 0px 10px 10px 10px;
@@ -2363,3 +2378,30 @@ input[type=checkbox] {
         white-space: pre;
     }
 }
+
+.modal.alert-modal {
+
+    .modal-card {
+        min-width: 350px;
+        max-width: 640px;
+        width: auto;
+        
+        header {
+            padding: 10px;
+            font-size: 1.5rem;
+        }
+        
+        footer {
+            padding: 10px;
+            justify-content: center;
+        }
+
+        .modal-card-body {
+            padding: 10px;
+
+            p {
+                text-align: center;
+            }
+        }
+    }
+}

src/types.ts

@@ -423,6 +423,7 @@ type PlaybookEntryType = {
 type AlertMessageType = {
     title : string,
     message : string,
+    confirm? : boolean,
 };
 
 type RenderModeType = "normal" | "collapsed";