Add real-time unread mentions indicator to Mentions icon

Display a red dot on the Mentions icon in the sidebar when there are unread mentions in any room. The indicator updates in real-time via:
- WebSocket events when other clients mark messages as unread
- Turbo Stream updates when the current user marks messages as unread
- MutationObserver to catch all DOM changes to room badge classes

Changes:
- Add mentions_indicator_controller.js with MutationObserver to watch for .badge class changes
- Update rooms_list_controller.js to dispatch "addBadge" event for consistency
- Add red dot styling to sidebar__tool matching the sidebar toggle button style
- Wrap sidebar in controller scope to access both rooms list and icon target

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: dvassallo

app/assets/stylesheets/application/sidebar.css

@@ -66,14 +66,29 @@
   transition: background-color 0.2s ease;
   margin-bottom: calc(var(--block-space) * 2);
   position: relative;
-  
+
   &:hover {
     background-color: var(--color-border);
   }
-  
+
   img {
     margin: 0;
   }
+
+  &.has-unread-mentions::after {
+    --size: 1em;
+
+    aspect-ratio: 1;
+    background-color: var(--color-negative);
+    block-size: var(--size);
+    border-radius: calc(var(--size) * 2);
+    content: "";
+    flex-shrink: 0;
+    inline-size: var(--size);
+    position: absolute;
+    inset-block-start: calc(var(--size) / -4);
+    inset-inline-end: calc(var(--size) / -4);
+  }
 }
 
 .sidebar__tool-label {

app/javascript/controllers/mentions_indicator_controller.js

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "icon" ]
+
+  connect() {
+    this.updateIndicator()
+
+    // Use MutationObserver to watch for any class changes in the sidebar
+    this.observer = new MutationObserver(() => {
+      this.updateIndicator()
+    })
+
+    // Observe the sidebar container for changes to class attributes
+    const sidebarContainer = this.element.querySelector('.sidebar__container')
+    if (sidebarContainer) {
+      this.observer.observe(sidebarContainer, {
+        attributes: true,
+        attributeFilter: ['class'],
+        subtree: true,
+        childList: true
+      })
+    }
+  }
+
+  disconnect() {
+    if (this.observer) {
+      this.observer.disconnect()
+    }
+  }
+
+  update() {
+    this.updateIndicator()
+  }
+
+  updateIndicator() {
+    // Check if there are any rooms with the badge class (unread mentions)
+    const hasUnreadMentions = this.element.querySelectorAll('.room.badge').length > 0
+
+    console.log('Mentions indicator update:', hasUnreadMentions, 'badge count:', this.element.querySelectorAll('.room.badge').length)
+
+    if (hasUnreadMentions) {
+      this.iconTarget.classList.add('has-unread-mentions')
+    } else {
+      this.iconTarget.classList.remove('has-unread-mentions')
+    }
+  }
+}

app/javascript/controllers/rooms_list_controller.js

@@ -114,6 +114,8 @@ export default class extends Controller {
         unreadRoom.classList.add(this.badgeClass)
       }
     })
+
+    this.dispatch("addBadge", { detail: { roomId: roomId } })
   }
 
   #roomUpdated({ roomId, sortableName }) {

app/views/users/sidebars/show.html.erb

@@ -2,10 +2,12 @@
   <%= turbo_stream_from :rooms %>
   <%= turbo_stream_from Current.user, :rooms %>
 
-  <div class="sidebar__container overflow-y overflow-hide-scrollbar"
-      data-controller="badge-dot maintain-scroll debounce-updates"
-      data-badge-dot-unread-class="badge"
-      data-action="rooms-list:unread@window->badge-dot#update rooms-list:read@window->badge-dot#update rooms-list:addBadge@window->badge-dot#update turbo:submit-start->turbo-frame#unpermanize turbo:before-render@document->maintain-scroll#beforeRender">
+  <div data-controller="mentions-indicator"
+       data-action="rooms-list:unread@window->mentions-indicator#update rooms-list:read@window->mentions-indicator#update rooms-list:addBadge@window->mentions-indicator#update">
+    <div class="sidebar__container overflow-y overflow-hide-scrollbar"
+        data-controller="badge-dot maintain-scroll debounce-updates"
+        data-badge-dot-unread-class="badge"
+        data-action="rooms-list:unread@window->badge-dot#update rooms-list:read@window->badge-dot#update rooms-list:addBadge@window->badge-dot#update turbo:submit-start->turbo-frame#unpermanize turbo:before-render@document->maintain-scroll#beforeRender">
     <turbo-frame id="direct_rooms_control" target="_top">
       <div class="directs gap overflow-x overflow-hide-scrollbar">
         <%= link_to new_rooms_direct_path, class: "direct direct__new", data: { turbo_frame: "_self" } do %>
@@ -74,7 +76,7 @@
 
   <div class="sidebar__tools d-hotwire-native-none">
     <div class="sidebar__tool-container">
-      <%= link_to inbox_path, class: "btn sidebar__tool" do %>
+      <%= link_to inbox_path, class: "btn sidebar__tool", data: { mentions_indicator_target: "icon" } do %>
         <%= image_tag "mentions.svg", size: 20, aria: { hidden: "true" } %>
         <span class="for-screen-reader">Mentions</span>
         <span class="sidebar__tool-label">Mentions</span>
@@ -134,4 +136,5 @@
       <% end %>
     </div>
   </div>
+  </div>
 <% end %>