better subscriptions

ui/src/app/components/status/status.component.html

@@ -1,9 +1,9 @@
 <p
-  [style.color]="'var(--ion-color-' + color + ')'"
+  [style.color]="'var(--ion-color-' + rendering.color + ')'"
   [style.font-size]="size"
   [style.font-style]="style"
   [style.font-weight]="weight"
 >
-  {{ display }}
-  <ion-spinner *ngIf="showDots" class="dots dots-small" name="dots" [color]="color"></ion-spinner>
+  {{ rendering.display }}
+  <ion-spinner *ngIf="rendering.showDots" class="dots dots-small" name="dots" [color]="color"></ion-spinner>
 </p>

ui/src/app/components/status/status.component.ts

@@ -1,7 +1,5 @@
 import { Component, Input } from '@angular/core'
-import { combineLatest } from 'rxjs'
-import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
-import { renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
+import { PkgStatusRendering } from 'src/app/services/pkg-status-rendering.service'
 
 @Component({
   selector: 'status',
@@ -9,36 +7,9 @@ import { renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
   styleUrls: ['./status.component.scss'],
 })
 export class StatusComponent {
-  @Input() pkgId: string
+  @Input() rendering: PkgStatusRendering
   @Input() size?: 'small' | 'medium' | 'large' = 'large'
   @Input() style?: string = 'regular'
   @Input() weight?: string = 'normal'
-  display = ''
-  color = ''
-  showDots = false
-  subs = []
-
-  constructor (
-    private readonly patch: PatchDbModel,
-  ) { }
-
-  ngOnInit () {
-    this.subs = [
-      combineLatest([
-        this.patch.watch$('package-data', this.pkgId, 'state'),
-        this.patch.watch$('package-data', this.pkgId, 'installed', 'status'),
-      ])
-      .subscribe(([state, status]) => {
-        const { display, color, showDots } = renderPkgStatus(state, status)
-        this.display = display
-        this.color = color
-        this.showDots = showDots
-      }),
-    ]
-  }
-
-  ngOnDestroy () {
-    this.subs.forEach(sub => sub.unsubscribe())
-  }
 }