feat: add sidebar_channels template with ChannelSidebar class for message count tracking

Introduce a new sidebar_channels.html template that renders a channel list with unique IDs per channel. The accompanying ChannelSidebar JavaScript class provides methods to retrieve channel list items by UID, increment and display message counts, and update the DOM with the current count for each channel.
2025-02-22 00:21:57 +00:00
parent 51bc07dddc
commit d011dc2897
1 changed files with 64 additions and 0 deletions
@@ -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>