Added sidebar stuff.

src/snek/templates/sidebar_channels.html

@@ -0,0 +1,64 @@
+<style>
+  .channel-list-item-highlight {
+    /* xxx */
+  }
+</style>
+<aside class="sidebar" id="channelSidebar">
+    <h2 class="no-select">Channels</h2>
+    <ul>
+      {% for channel in channels %}
+      <li id="channel-list-item-{{channel['uid']}}"><a class="no-select" href="/channel/{{channel['uid']}}.html">{{channel['name']}} <span class="message-count"></span></a></li>
+      {% endfor %}
+    </ul>
+  </aside>
+  <script>
+    class ChannelSidebar {
+        constructor(el){
+          this.el = el 
+        }
+        get channelNodes() {
+          return this.el.querySelectorAll("li")
+        }
+        channelListItemByUid(channelUid){
+          const id = "channel-list-item-" + channelUid;
+          console.error(id)
+          return document.getElementById(id)
+        }
+        incrementMessageCount(channelUid){
+          let messageCount = this.getMessageCount(channelUid)
+          messageCount++;
+          this.setMessageCount(channelUid, messageCount)
+        }
+        getMessageCount(channelUid){
+          const li = this.channelListItemByUid(channelUid);
+          if(li){
+            let messageCount = li.dataset['messageCount']
+            if(!messageCount){
+              return 0
+            }
+            return new Number(messageCount)
+          }
+        }
+        setMessageCount(channelUid, count){
+          const li = this.channelListItemByUid(channelUid);
+          if(li){
+            li.dataset.messageCount = new String(count)
+            li.dataset['messageCount'] = count
+            li.querySelector(".message-count").textContent = '(' + count + ')'
+          }
+        }
+        notify(message){
+          const li = this.channelListItemByUid(message.channel_uid);
+          if(li){
+            this.incrementMessageCount(message.channel_uid)
+            li.classList.add("channel-list-item-highlight")
+            li.querySelectorAll("a").forEach(el=>{
+              el.style.color = message.color
+            })
+          }
+        }
+
+    }
+    const channelSidebar = new ChannelSidebar(document.getElementById("channelSidebar"))
+
+  </script>