more efficient subscriptions, more styling

ui/src/app/components/badge-menu-button/badge-menu.component.html

@@ -1,4 +1,4 @@
 <div style="position: relative; margin-right: 1vh;">
-  <ion-badge mode="md" class="md-badge" *ngIf="(badge$ | ngrxPush) && !(menuFixedOpen$ | ngrxPush)" color="danger">{{ badge$ | ngrxPush }}</ion-badge>
+  <ion-badge mode="md" class="md-badge" *ngIf="unreadCount && !sidebarOpen" color="danger">{{ unreadCount }}</ion-badge>
   <ion-menu-button color="dark"></ion-menu-button>
 </div>

ui/src/app/components/badge-menu-button/badge-menu.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core'
-import { Observable } from 'rxjs'
 import { SplitPaneTracker } from 'src/app/services/split-pane.service'
 import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { combineLatest, Subscription } from 'rxjs'
 
 @Component({
   selector: 'badge-menu-button',
@@ -10,14 +10,30 @@ import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
 })
 
 export class BadgeMenuComponent {
-  badge$: Observable<number>
-  menuFixedOpen$: Observable<boolean>
+  unreadCount: number
+  sidebarOpen: boolean
+
+  subs: Subscription[] = []
 
   constructor (
     private readonly splitPane: SplitPaneTracker,
     private readonly patch: PatchDbModel,
-  ) {
-    this.menuFixedOpen$ = this.splitPane.menuFixedOpenOnLeft$.asObservable()
-    this.badge$ = this.patch.watch$('server-info', 'unread-notification-count')
+  ) { }
+
+  ngOnInit () {
+    this.subs = [
+      combineLatest([
+        this.patch.watch$('server-info', 'unread-notification-count'),
+        this.splitPane.sidebarOpen$,
+      ])
+      .subscribe(([unread, menu]) => {
+        this.unreadCount = unread
+        this.sidebarOpen = menu
+      }),
+    ]
+  }
+
+  ngOnDestroy () {
+    this.subs.forEach(sub => sub.unsubscribe())
   }
 }