feat: Add notifications

toju-app/src/app/features/servers/servers-rail.component.html

@@ -17,21 +17,29 @@
     @for (room of visibleSavedRooms(); track room.id) {
       <button
         type="button"
-        class="w-10 h-10 flex-shrink-0 rounded-2xl overflow-hidden border border-border hover:border-primary/60 hover:shadow-sm transition-all"
+        class="relative w-10 h-10 flex-shrink-0 rounded-2xl border border-border hover:border-primary/60 hover:shadow-sm transition-all"
         [title]="room.name"
         (click)="joinSavedRoom(room)"
         (contextmenu)="openContextMenu($event, room)"
       >
-        @if (room.icon) {
-          <img
-            [ngSrc]="room.icon"
-            [alt]="room.name"
-            class="w-full h-full object-cover"
-          />
-        } @else {
-          <div class="w-full h-full flex items-center justify-center bg-secondary">
-            <span class="text-sm font-semibold text-muted-foreground">{{ initial(room.name) }}</span>
-          </div>
+        <div class="h-full w-full overflow-hidden rounded-[inherit]">
+          @if (room.icon) {
+            <img
+              [ngSrc]="room.icon"
+              [alt]="room.name"
+              class="w-full h-full object-cover"
+            />
+          } @else {
+            <div class="w-full h-full flex items-center justify-center bg-secondary">
+              <span class="text-sm font-semibold text-muted-foreground">{{ initial(room.name) }}</span>
+            </div>
+          }
+        </div>
+
+        @if (roomUnreadCount(room.id) > 0) {
+          <span class="absolute -right-1 -top-1 min-w-5 rounded-full bg-amber-400 px-1.5 py-0.5 text-[10px] font-semibold text-black shadow-sm">
+            {{ formatUnreadCount(roomUnreadCount(room.id)) }}
+          </span>
         }
       </button>
     }
@@ -46,6 +54,14 @@
     (closed)="closeMenu()"
     [width]="'w-44'"
   >
+    <button
+      type="button"
+      (click)="toggleRoomNotifications()"
+      class="context-menu-item"
+    >
+      {{ isRoomNotificationsMuted(contextRoom()?.id || '') ? 'Unmute Notifications' : 'Mute Notifications' }}
+    </button>
+    <div class="context-menu-divider"></div>
     <button
       type="button"
       (click)="openLeaveConfirm()"

toju-app/src/app/features/servers/servers-rail.component.ts

@@ -21,6 +21,7 @@ import { selectSavedRooms, selectCurrentRoom } from '../../store/rooms/rooms.sel
 import { selectCurrentUser } from '../../store/users/users.selectors';
 import { RoomsActions } from '../../store/rooms/rooms.actions';
 import { DatabaseService } from '../../infrastructure/persistence';
+import { NotificationsFacade } from '../../domains/notifications';
 import { ServerDirectoryFacade } from '../../domains/server-directory';
 import { hasRoomBanForUser } from '../../core/helpers/room-ban.helpers';
 import {
@@ -50,6 +51,7 @@ export class ServersRailComponent {
   private voiceSession = inject(VoiceSessionFacade);
   private webrtc = inject(RealtimeSessionFacade);
   private db = inject(DatabaseService);
+  private notifications = inject(NotificationsFacade);
   private serverDirectory = inject(ServerDirectoryFacade);
   private banLookupRequestVersion = 0;
   savedRooms = this.store.selectSignal(selectSavedRooms);
@@ -208,6 +210,29 @@ export class ServersRailComponent {
     this.showLeaveConfirm.set(false);
   }
 
+  toggleRoomNotifications(): void {
+    const room = this.contextRoom();
+
+    if (!room) {
+      return;
+    }
+
+    this.notifications.setRoomMuted(room.id, !this.notifications.isRoomMuted(room.id));
+    this.closeMenu();
+  }
+
+  isRoomNotificationsMuted(roomId: string): boolean {
+    return this.notifications.isRoomMuted(roomId);
+  }
+
+  roomUnreadCount(roomId: string): number {
+    return this.notifications.roomUnreadCount(roomId);
+  }
+
+  formatUnreadCount(count: number): string {
+    return count > 99 ? '99+' : String(count);
+  }
+
   private async refreshBannedLookup(rooms: Room[], currentUser: User | null): Promise<void> {
     const requestVersion = ++this.banLookupRequestVersion;