"Escape" should close/cancel most modals (#229)

* init

* client settings view

* close and escape support for connections view

* close and escape support for clientsettings view

src/app/app.less

@@ -622,3 +622,28 @@ a.a-block {
 .text-selectable {
     user-select: text;
 }
+
+.view {
+    background-color: @background-session;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow: auto;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    border-radius: 8px;
+    border: 1px solid rgba(241, 246, 243, 0.08);
+    background: rgba(13, 13, 13, 0.85);
+
+    .header {
+        margin: 24px 18px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .close-div {
+            font-size: 1.5em;
+        }
+    }
+}

src/app/clientsettings/clientsettings.tsx

@@ -25,11 +25,6 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
     fontSizeDropdownActive: OV<boolean> = mobx.observable.box(false, { name: "clientSettings-fontSizeDropdownActive" });
     errorMessage: OV<string> = mobx.observable.box(null, { name: "ClientSettings-errorMessage" });
 
-    @boundMethod
-    closeModal(): void {
-        GlobalModel.modalsModel.popModal();
-    }
-
     @boundMethod
     dismissError(): void {
         mobx.action(() => {
@@ -110,6 +105,11 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         })();
     }
 
+    @boundMethod
+    handleClose(): void {
+        GlobalModel.clientSettingsViewModel.closeView();
+    }
+
     render() {
         let isHidden = GlobalModel.activeMainView.get() != "clientsettings";
         if (isHidden) {
@@ -125,9 +125,12 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         let curFontSize = GlobalModel.termFontSize.get();
 
         return (
-            <div className={cn("clientsettings-view")}>
+            <div className={cn("view clientsettings-view")}>
                 <header className="header">
                     <div className="clientsettings-title text-primary">Client Settings</div>
+                    <div className="close-div hoverEffect" title="Close (Escape)" onClick={this.handleClose}>
+                        <i className="fa-sharp fa-solid fa-xmark"></i>
+                    </div>
                 </header>
                 <div className="content">
                     <div className="settings-field">

src/app/connections/connections.less

@@ -1,28 +1,6 @@
 @import "../../app/common/themes/themes.less";
 
 .connections-view {
-    background-color: @background-session;
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    overflow: auto;
-    margin-bottom: 10px;
-    margin-right: 10px;
-    border-radius: 8px;
-    border: 1px solid rgba(241, 246, 243, 0.08);
-    background: var(--element-window, rgba(13, 13, 13, 0.85));
-
-    .header {
-        margin: 24px 18px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .connections-title {
-        }
-    }
-
     .no-items {
         display: flex;
         flex-direction: row;

src/app/connections/connections.tsx

@@ -117,6 +117,11 @@ class ConnectionsView extends React.Component<{ model: RemotesModel }, { hovered
         }
     }
 
+    @boundMethod
+    handleClose(): void {
+        GlobalModel.connectionViewModel.closeView();
+    }
+
     componentDidMount() {
         if (this.tableRef.current != null) {
             this.tableRszObs = new ResizeObserver(this.handleTableResize.bind(this));
@@ -145,9 +150,12 @@ class ConnectionsView extends React.Component<{ model: RemotesModel }, { hovered
         let item: T.RemoteType = null;
 
         return (
-            <div className={cn("connections-view")}>
+            <div className={cn("view connections-view")}>
                 <header className="header">
                     <div className="connections-title text-primary">Connections</div>
+                    <div className="close-div hoverEffect" title="Close (Escape)" onClick={this.handleClose}>
+                        <i className="fa-sharp fa-solid fa-xmark"></i>
+                    </div>
                 </header>
                 <table
                     className="connections-table"

src/model/model.ts

@@ -2569,6 +2569,11 @@ class HistoryViewModel {
 }
 
 class ConnectionsViewModel {
+    closeView(): void {
+        GlobalModel.showSessionView();
+        setTimeout(() => GlobalModel.inputModel.giveFocus(), 50);
+    }
+
     showConnectionsView(): void {
         mobx.action(() => {
             GlobalModel.activeMainView.set("connections");
@@ -2577,6 +2582,11 @@ class ConnectionsViewModel {
 }
 
 class ClientSettingsViewModel {
+    closeView(): void {
+        GlobalModel.showSessionView();
+        setTimeout(() => GlobalModel.inputModel.giveFocus(), 50);
+    }
+
     showClientSettingsView(): void {
         mobx.action(() => {
             GlobalModel.activeMainView.set("clientsettings");
@@ -3589,6 +3599,14 @@ class Model {
             this.historyViewModel.handleDocKeyDown(e);
             return;
         }
+        if (this.activeMainView.get() == "connections") {
+            this.historyViewModel.handleDocKeyDown(e);
+            return;
+        }
+        if (this.activeMainView.get() == "clientsettings") {
+            this.historyViewModel.handleDocKeyDown(e);
+            return;
+        }
         if (e.code == "Escape") {
             e.preventDefault();
             if (this.activeMainView.get() == "webshare") {