minor fix for remotes display

src/main.tsx

@@ -1333,6 +1333,16 @@ function getConnVal(r : RemoteType) : number {
     return 4;
 }
 
+@mobxReact.observer
+class RemoteStatusLight extends React.Component<{status : string}, {}> {
+    render() {
+        let status = this.props.status;
+        return (
+            <i className={cn("remote-status fa", "status-" + status, (status == "connecting" ? "fa-refresh" : "fa-circle"))}/>
+        );
+    }
+}
+
 @mobxReact.observer
 class MainSideBar extends React.Component<{}, {}> {
     collapsed : mobx.IObservableValue<boolean> = mobx.observable.box(false);
@@ -1381,15 +1391,7 @@ class MainSideBar extends React.Component<{}, {}> {
         let remotes = model.remotes ?? [];
         let remote : RemoteType = null;
         let idx : number = 0;
-        remotes = remotes.filter((r) => !r.archived);
-        remotes.sort((a, b) => {
-            let connValA = getConnVal(a);
-            let connValB = getConnVal(b);
-            if (connValA != connValB) {
-                return connValA - connValB;
-            }
-            return a.remoteidx - b.remoteidx;
-        });
+        remotes = sortAndFilterRemotes(remotes);
         return (
             <div className={cn("main-sidebar", {"collapsed": this.collapsed.get()})}>
                 <div className="collapse-container">
@@ -1457,7 +1459,7 @@ class MainSideBar extends React.Component<{}, {}> {
                     <ul className="menu-list remotes-menu-list">
                         <For each="remote" of={remotes}>
                             <li key={remote.remoteid} className="remote-menu-item"><a onClick={() => this.clickRemote(remote)}>
-                                <i className={cn("remote-status fa", "status-" + remote.status, (remote.status == "connecting" ? "fa-refresh" : "fa-circle"))}/>
+                                <RemoteStatusLight status={remote.status}/>
                                 {this.remoteDisplayName(remote)}
                             </a></li>
                         </For>
@@ -1469,6 +1471,19 @@ class MainSideBar extends React.Component<{}, {}> {
     }
 }
 
+function sortAndFilterRemotes(origRemotes : RemoteType[]) : RemoteType[] {
+    let remotes = origRemotes.filter((r) => !r.archived);
+    remotes.sort((a, b) => {
+        let connValA = getConnVal(a);
+        let connValB = getConnVal(b);
+        if (connValA != connValB) {
+            return connValA - connValB;
+        }
+        return a.remoteidx - b.remoteidx;
+    });
+    return remotes;
+}
+
 @mobxReact.observer
 class RemoteModal extends React.Component<{}, {}> {
 
@@ -1486,7 +1501,7 @@ class RemoteModal extends React.Component<{}, {}> {
     
     render() {
         let model = GlobalModel;
-        let remotes = model.remotes;
+        let remotes = sortAndFilterRemotes(model.remotes);
         let remote : RemoteType = null;
         return (
             <div className="remote-modal modal is-active">
@@ -1509,7 +1524,7 @@ class RemoteModal extends React.Component<{}, {}> {
                                 <For each="remote" of={remotes}>
                                     <tr>
                                         <td className="status-cell">
-                                            <div><i className={cn("remote-status fa fa-circle", "status-" + remote.status)}/></div>
+                                            <div><RemoteStatusLight status={remote.status}/></div>
                                         </td>
                                         <td>
                                             {remote.remotealias}

src/sh2.less

@@ -1113,10 +1113,6 @@ body .xterm .xterm-viewport {
 
     &.status-connecting {
         color: #c4a000;
-        font-size: 12px;
-        position: relative;
-        top: 0px;
-        margin-left: -3px;
     }
     
     &.status-connected {
@@ -1127,3 +1123,10 @@ body .xterm .xterm-viewport {
         color: #cc0000;
     }
 }
+
+.menu-list .remote-status .status-connecting {
+    position: relative;
+    top: 0px;
+    font-size: 12px;
+    margin-left: -3px;
+}

src/types.ts

@@ -229,6 +229,7 @@ type CmdDataType = {
     cmdstr : string,
     remotestate : RemoteStateType,
     termopts : TermOptsType,
+    origtermopts : TermOptsType,
     status : string,
     startpk : CmdStartPacketType,
     donepk : CmdDonePacketType,