feat: nice update indicator in header

apps/NwaifuAnime/src/app/components/header/header.component.html

@@ -8,6 +8,15 @@
       <img src="pic/Blank-profile.png" alt="Profile pic" class="w-full h-full" />
     </div>
   </button>
+  @if (this.swEnabled && this.swHasUpdate) {
+    <button title="Update" (click)="swUpdate()" class="md:w-fit w-full">
+      <div
+        class="h-8 md:w-8 w-full rounded-md bg-green-300 flex flex-col justify-center items-center md:ms-1 ms-0 md:mt-0 mt-2"
+      >
+        <i class="lni lni-download text-gray-700"></i>
+      </div>
+    </button>
+  }
 </div>
 <div
   [class]="

apps/NwaifuAnime/src/app/components/header/header.component.ts

@@ -9,6 +9,7 @@ import {
 } from "@angular/core";
 import { RouterLink } from "@angular/router";
 import { Subject } from "rxjs";
+import { AppService } from "../../app.service";
 import { SearchFieldComponent } from "../search-field/search-field.component";
 
 @Component({
@@ -24,6 +25,20 @@ export class HeaderComponent implements AfterViewInit, OnDestroy {
   @ViewChild("profileMenu") profileMenu: ElementRef<HTMLDivElement> | null = null;
   private destroy$ = new Subject<void>();
 
+  constructor(private swService: AppService) {}
+
+  get swEnabled() {
+    return this.swService.serviceWorkerEnabled;
+  }
+
+  swUpdate() {
+    this.swService.update();
+  }
+
+  get swHasUpdate() {
+    return this.swService.isUpdateAvailable;
+  }
+
   @HostListener("window:click", ["$event"])
   toggleProfileMenu(event: MouseEvent) {
     if (this.profileBtn && this.profileBtn.nativeElement.contains(event.target as Node)) {