stub out add remote

src/main.tsx

@@ -1384,6 +1384,13 @@ class MainSideBar extends React.Component<{}, {}> {
         GlobalCommandRunner.showRemote(remote.remoteid);
     }
 
+    @boundMethod
+    handleAddRemote() : void {
+        mobx.action(() => {
+            GlobalModel.addRemoteModalOpen.set(true);
+        })();
+    }
+
     render() {
         let model = GlobalModel;
         let activeSessionId = model.activeSessionId.get();
@@ -1415,7 +1422,7 @@ class MainSideBar extends React.Component<{}, {}> {
                                     {session.name.get()}
                                 </a></li>
                             </For>
-                            <li className="new-session"><a className="new-session" onClick={() => this.handleNewSession()}><i className="fa fa-plus"/> New Session</a></li>
+                            <li className="new-session"><a onClick={() => this.handleNewSession()}><i className="fa fa-plus"/> New Session</a></li>
                         </If>
                     </ul>
                     <p className="menu-label">
@@ -1425,7 +1432,7 @@ class MainSideBar extends React.Component<{}, {}> {
                         <li><a>server-status</a></li>
                         <li><a className="activity">bug-3458 <div className="tag is-link">3</div></a></li>
                         <li><a>dev-build</a></li>
-                        <li className="new-session"><a className="new-session"><i className="fa fa-plus"/> New Session</a></li>
+                        <li className="new-session"><a><i className="fa fa-plus"/> New Session</a></li>
                     </ul>
                     <p className="menu-label">
                         Direct Messages
@@ -1463,6 +1470,9 @@ class MainSideBar extends React.Component<{}, {}> {
                                 {this.remoteDisplayName(remote)}
                             </a></li>
                         </For>
+                        <li key="add-remote" className="add-remote">
+                            <a onClick={() => this.handleAddRemote()}><i className="fa fa-plus"/> Add Remote</a>
+                        </li>
                     </ul>
                     <div className="bottom-spacer"></div>
                 </div>
@@ -1485,32 +1495,62 @@ function sortAndFilterRemotes(origRemotes : RemoteType[]) : RemoteType[] {
 }
 
 @mobxReact.observer
-class RemoteModal extends React.Component<{}, {}> {
+class AddRemoteModal extends React.Component<{}, {}> {
+    @boundMethod
+    handleModalClose() : void {
+        mobx.action(() => {
+            GlobalModel.addRemoteModalOpen.set(false);
+        })();
+    }
+    
+    render() {
+        return (
+            <div className="sc-modal add-remote-modal modal is-active">
+                <div onClick={this.handleModalClose} className="modal-background"></div>
+                <div className="modal-content message">
+                    <div className="message-header">
+                        <p>Add Remote</p>
+                    </div>
+                    <div className="message-content">
+                        hello
+                    </div>
+                    <div className="message-footer">
+                        <button onClick={this.handleModalClose} className="button">Cancel</button>
+                        <div className="spacer"></div>
+                        <button onClick={this.handleAddRemote} className="button is-primary">
+                            <span className="icon">
+                                <i className="fa fa-plus"/>
+                            </span>
+                            <span>Add Remote</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
 
+@mobxReact.observer
+class RemoteModal extends React.Component<{}, {}> {
     @boundMethod
     handleModalClose() : void {
         mobx.action(() => {
             GlobalModel.remotesModalOpen.set(false);
         })();
     }
-
-    @boundMethod
-    handleAddRemote() : void {
-        console.log("add-remote");
-    }
     
     render() {
         let model = GlobalModel;
         let remotes = sortAndFilterRemotes(model.remotes);
         let remote : RemoteType = null;
         return (
-            <div className="remote-modal modal is-active">
+            <div className="sc-modal remote-modal modal is-active">
                 <div onClick={this.handleModalClose} className="modal-background"></div>
                 <div className="modal-content message">
                     <div className="message-header">
                         <p>Remotes</p>
                     </div>
-                    <div className="remotes-content">
+                    <div className="message-content">
                         <table className="table">
                             <thead>
                                 <tr>
@@ -1543,7 +1583,7 @@ class RemoteModal extends React.Component<{}, {}> {
                             </tbody>
                         </table>
                     </div>
-                    <div className="remotes-footer">
+                    <div className="message-footer">
                         <button onClick={this.handleAddRemote} className="button is-primary">
                             <span className="icon">
                                 <i className="fa fa-plus"/>
@@ -1580,6 +1620,9 @@ class Main extends React.Component<{}, {}> {
                 <If condition={GlobalModel.remotesModalOpen.get()}>
                     <RemoteModal/>
                 </If>
+                <If condition={GlobalModel.addRemoteModalOpen.get()}>
+                    <AddRemoteModal/>
+                </If>
             </div>
         );
     }

src/model.ts

@@ -1218,6 +1218,7 @@ class Model {
     inputModel : InputModel;
     termUsedRowsCache : Record<string, number> = {};
     remotesModalOpen : OV<boolean> = mobx.observable.box(false);
+    addRemoteModalOpen : OV<boolean> = mobx.observable.box(false);
     
     constructor() {
         this.clientId = getApi().getId();

src/sh2.less

@@ -223,14 +223,16 @@ html, body, #main {
         margin-bottom: 0px;
     }
 
-    .menu-list li.new-session {
-        a.new-session {
-            color: #666;
-            font-size: 13px;
-        }
-        
-        .fa {
-            font-size: 10px;
+    .menu-list {
+        li.new-session, li.add-remote {
+            a {
+                color: #666;
+                font-size: 13px;
+            }
+            
+            .fa {
+                font-size: 10px;
+            }
         }
     }
 
@@ -1042,7 +1044,7 @@ body .xterm .xterm-viewport {
     .mono-font(inherit, 600);
 }
 
-.remote-modal {
+.sc-modal {
     .modal-content {
         padding: 10px;
 
@@ -1050,43 +1052,16 @@ body .xterm .xterm-viewport {
             font-size: 20px;
             margin-bottom: 10px;
         }
-        
-        .remotes-content {
+
+        .message-content {
             flex-grow: 1;
             max-height: 80%;
             overflow-y: auto;
             display: flex;
             flex-direction: column;
-
-            .table {
-                th.status-header {
-                    width: 40px;
-                }
-
-                tbody td {
-                    vertical-align: middle;
-                }
-                
-                .status-cell {
-                    .remote-status {
-                        font-size: 16px;
-                        top: 0;
-                        margin-right: 0;
-                    }
-                    
-                    .status-text {
-                        font-size: 12px;
-                    }
-                }
-            }
         }
 
-        .remote-item {
-            display: flex;
-            flex-direction: row;
-        }
-
-        .remotes-footer {
+        .message-footer {
             border-top: 1px solid #666;
             padding-top: 15px;
             display: flex;
@@ -1100,6 +1075,32 @@ body .xterm .xterm-viewport {
     }
 }
 
+.remote-modal {
+    .message-content {
+        .table {
+            th.status-header {
+                width: 40px;
+            }
+            
+            tbody td {
+                vertical-align: middle;
+            }
+            
+            .status-cell {
+                .remote-status {
+                    font-size: 16px;
+                    top: 0;
+                    margin-right: 0;
+                }
+                
+                .status-text {
+                    font-size: 12px;
+                }
+            }
+        }
+    }
+}
+
 .remote-status {
     font-size: 8px;
     margin-right: 5px;