Added sidebar stuff.

src/snek/templates/app.html

@@ -33,14 +33,7 @@
   </header>
   <main>
     {% block sidebar %}
-    <aside class="sidebar">
-      <h2 class="no-select">Channels</h2>
-      <ul>
-        {% for channel in channels %}
-        <li><a class="no-select" href="/channel/{{channel['uid']}}.html">{{channel['name']}}</a></li>
-        {% endfor %}
-      </ul>
-    </aside>
+    {% include "sidebar_channels.html" %}
     {% endblock %}
     {% block main %}
     <chat-window class="chat-area"></chat-window>

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>

src/snek/templates/web.html

@@ -132,6 +132,7 @@
     app.addEventListener("channel-message", (data) => {
         if (data.channel_uid !== channelUid) {
             if(!isMentionForSomeoneElse(data.message)){
+                channelSidebar.notify(data);
                 app.playSound("messageOtherChannel");
             }
             

src/snek/view/web.py

@@ -52,7 +52,7 @@ class WebView(BaseView):
             other_user = await self.app.services.channel_member.get_other_dm_user(subscribed_channel["channel_uid"], self.session.get("uid"))
             if other_user:
                 item["name"] = other_user["nick"]
-                item["uid"] = other_user["uid"]
+                item["uid"] = subscribed_channel["channel_uid"]
             else:
                 item["name"] = subscribed_channel["label"]
                 item["uid"] = subscribed_channel["channel_uid"]