More comments

client/index.js

@@ -177,6 +177,7 @@ const onRoomClick = (e) => {
     let listIndex = -1;
     let index = -1;
     // walk up the pointer event path until we find a room-##-## id=
+    // TODO: move to render.js where these attrs are defined?
     const path = e.composedPath();
     for (let i = 0; i < path.length; i++) {
         if (path[i].id && path[i].id.startsWith("room-")) {
@@ -278,6 +279,7 @@ const doSyncLoop = async (accessToken) => {
         switch (state) {
             // The sync has been processed and we can now re-render the UI.
             case LifecycleSyncComplete:
+                // this list matches the list in activeLists
                 const roomListElements =
                     document.getElementsByClassName("roomlist");
                 for (let i = 0; i < roomListElements.length; i++) {
@@ -361,6 +363,8 @@ const doSyncLoop = async (accessToken) => {
         let room = rooms.roomIdToRoom[slidingSync.roomSubscription];
         renderRoomTimeline(room, false);
     });
+
+    // begin the sliding sync loop
     slidingSync.start(accessToken);
 };
 

client/styles.css

@@ -13,7 +13,7 @@ body {
     margin: 5px;
 }
 
-.statsheader{
+.statsheader {
     position: fixed;
     top: 0;
     left: 0;
@@ -42,7 +42,7 @@ body {
     width: 50%;
 }
 
-#roomlistcontainer{
+#roomlistcontainer {
     max-height: 100%;
     display: grid;
 }
@@ -63,7 +63,7 @@ body {
     border-right: 1px solid #8d99a5;
 }
 
-.roomlistname{
+.roomlistname {
     position: sticky;
     top: 0;
     background: #8d99a5;
@@ -72,7 +72,6 @@ body {
     color: #fff;
 }
 
-
 .roomcell {
     padding: 5px;
     display: flex;
@@ -140,4 +139,6 @@ body {
 
 #selectedroomtopic {
     font-size: x-small;
-}
+    border: 1px solid;
+    padding: 5px;
+}

client/sync.js

@@ -12,13 +12,15 @@ import * as devtools from "./devtools.js";
 // TODO: explain why
 const DEFAULT_RANGES = [[0, 20]];
 
+// We'll load these events for every room cell in each list.
+// Note we do not need any room name information as the server calculates all this for us.
 const REQUIRED_STATE_EVENTS_IN_LIST = [
-    ["m.room.avatar", ""],
-    ["m.room.tombstone", ""],
+    ["m.room.avatar", ""], // need the avatar
+    ["m.room.tombstone", ""], // need to know if this room has been replaced
 ];
 const REQUIRED_STATE_EVENTS_IN_ROOM = [
-    ["m.room.avatar", ""],
-    ["m.room.topic", ""],
+    ["m.room.avatar", ""], // need the avatar to display next to the room name
+    ["m.room.topic", ""], // need the topic to display on the right-hand-side
 ];
 
 // Lifecycle state when the /sync response has been fully processed and all room data callbacks
@@ -39,7 +41,6 @@ export class SlidingSyncConnection {
         this.txBytes = 0;
         this.rxBytes = 0;
         this.abortController = new AbortController();
-        this.lastError = null;
     }
 
     /**
@@ -86,14 +87,10 @@ export class SlidingSyncConnection {
         devtools.bandwidth(document.getElementById("txrx"), this);
 
         if (resp.status != 200) {
-            if (respBody.error) {
-                this.lastError = respBody.error;
-            }
             throw new Error(
                 "/sync returned HTTP " + resp.status + " " + respBody.error
             );
         }
-        this.lastError = null;
         return respBody;
     }
 }