sessions update for get-all-sessions, show sessionidx number and no hash sign

src/main.tsx

@@ -498,7 +498,6 @@ class CmdInput extends React.Component<{}, {}> {
     }
     
     render() {
-        console.log("render CmdInput");
         let model = GlobalModel;
         let win = GlobalModel.getActiveWindow();
         let ri : RemoteInstanceType = null;
@@ -924,6 +923,7 @@ class MainSideBar extends React.Component<{}, {}> {
         let session : Session = null;
         let remotes = model.remotes;
         let remote : RemoteType = null;
+        let idx : number = 0;
         return (
             <div className={cn("main-sidebar", {"collapsed": this.collapsed.get()})}>
                 <div className="collapse-container">
@@ -941,8 +941,11 @@ class MainSideBar extends React.Component<{}, {}> {
                             <li><a>(loading)</a></li>
                         </If>
                         <If condition={model.sessionListLoaded.get()}>
-                            <For each="session" of={model.sessionList}>
-                                <li key={session.sessionId}><a className={cn({"is-active": activeSessionId == session.sessionId})} onClick={() => this.handleSessionClick(session.sessionId)}>#{session.name.get()}</a></li>
+                            <For each="session" index="idx" of={model.sessionList}>
+                                <li key={session.sessionId}><a className={cn({"is-active": activeSessionId == session.sessionId})} onClick={() => this.handleSessionClick(session.sessionId)}>
+                                    <span className="session-num">{idx+1}&nbsp;</span>
+                                    {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>
                         </If>
@@ -951,9 +954,9 @@ class MainSideBar extends React.Component<{}, {}> {
                         Shared Sessions
                     </p>
                     <ul className="menu-list">
-                        <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><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>
                     </ul>
                     <p className="menu-label">

src/model.ts

@@ -963,6 +963,12 @@ class Model {
     }
 
     runUpdate(genUpdate : UpdateMessage, interactive : boolean) {
+        mobx.action(() => {
+            this.runUpdate_internal(genUpdate, interactive);
+        })();
+    }
+
+    runUpdate_internal(genUpdate : UpdateMessage, interactive : boolean) {
         if ("ptydata64" in genUpdate) {
             let ptyMsg : PtyDataUpdateType = genUpdate;
             let activeScreen = this.getActiveScreen();
@@ -974,24 +980,22 @@ class Model {
         }
         let update : ModelUpdateType = genUpdate;
         if ("sessions" in update) {
-            mobx.action(() => {
-                let oldActiveScreen = this.getActiveScreen();
-                genMergeData(this.sessionList, update.sessions, (s : Session) => s.sessionId, (sdata : SessionDataType) => sdata.sessionid, (sdata : SessionDataType) => new Session(sdata), (s : Session) => s.sessionIdx.get());
-                if (update.activesessionid) {
-                    this.activateSession(update.activesessionid);
-                }
-                else {
-                    let newActiveScreen = this.getActiveScreen();
-                    if (oldActiveScreen != newActiveScreen) {
-                        if (newActiveScreen == null) {
-                            this.activateScreen(this.activeSessionId.get(), null, oldActiveScreen);
-                        }
-                        else {
-                            this.activateScreen(newActiveScreen.sessionId, newActiveScreen.screenId, oldActiveScreen);
-                        }
+            let oldActiveScreen = this.getActiveScreen();
+            genMergeData(this.sessionList, update.sessions, (s : Session) => s.sessionId, (sdata : SessionDataType) => sdata.sessionid, (sdata : SessionDataType) => new Session(sdata), (s : Session) => s.sessionIdx.get());
+            if (!("activatesessionid" in update)) {
+                let newActiveScreen = this.getActiveScreen();
+                if (oldActiveScreen != newActiveScreen) {
+                    if (newActiveScreen == null) {
+                        this.activateScreen(this.activeSessionId.get(), null, oldActiveScreen);
+                    }
+                    else {
+                        this.activateScreen(newActiveScreen.sessionId, newActiveScreen.screenId, oldActiveScreen);
                     }
                 }
-            })();
+            }
+        }
+        if ("activesessionid" in update) {
+            this.activateSession(update.activesessionid);
         }
         if ("line" in update) {
             if (update.line != null) {
@@ -1182,26 +1186,9 @@ class Model {
     loadSessionList() {
         let url = new URL("http://localhost:8080/api/get-all-sessions");
         fetch(url).then((resp) => handleJsonFetchResponse(url, resp)).then((data) => {
-            mobx.action(() => {
-                let sdatalist : SessionDataType[] = data.data || [];
-                let slist : Session[] = [];
-                let activeSessionId = null;
-                let activeScreenId = null;
-                for (let i=0; i<sdatalist.length; i++) {
-                    let sdata = sdatalist[i];
-                    let s = new Session(sdata);
-                    if (s.name.get() == "default") {
-                        activeSessionId = s.sessionId;
-                        activeScreenId = s.activeScreenId.get();
-                    }
-                    slist.push(s);
-                }
-                this.sessionList.replace(slist);
-                this.sessionListLoaded.set(true)
-                if (activeScreenId != null) {
-                    this.activateScreen(activeSessionId, activeScreenId);
-                }
-            })();
+            this.runUpdate(data.data, false);
+            this.sessionListLoaded.set(true);
+            return;
         }).catch((err) => {
             this.errorHandler("getting session list", err, false);
         });
@@ -1209,7 +1196,7 @@ class Model {
 
     activateSession(sessionId : string) {
         let oldActiveSession = this.getActiveSession();
-        if (oldActiveSession.sessionId == sessionId) {
+        if (oldActiveSession != null && oldActiveSession.sessionId == sessionId) {
             return;
         }
         let newSession = this.getSessionById(sessionId);

src/sh2.less

@@ -223,9 +223,19 @@ html, body, #main {
             vertical-align: middle;
         }
 
+        .session-num {
+            color: #777;
+            font-size: 10px;
+        }
+
         &.is-active {
             color: #ddd;
             font-weight: bold;
+
+            .session-num {
+                color: #aaa;
+                font-weight: normal;
+            }
         }
 
         .sub-label {
@@ -754,12 +764,16 @@ body .xterm .xterm-viewport {
     position: relative;
     top: -3px;
     color: #c4a000;
+
+    &.status-init, &.status-disconnected {
+        color: #c4a000;
+    }
     
     &.status-connected {
         color: #4e9a06;
     }
     
-    &.status-error, &.status-disconnected {
+    &.status-error {
         color: #cc0000;
     }
 }