feat: nice update indicator in header

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

@@ -1,11 +1,3 @@
-@if (serviceWorkerEnabled) {
-  @if (hasUpdate) {
-    <h1>Update available</h1>
-    <button (click)="update()">Update</button>
-  } @else {
-    <h1>Update not available</h1>
-  }
-}
 <app-header></app-header>
 <div class="md:h-12 h-16"></div>
 <div

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

@@ -23,17 +23,4 @@ import { TabBarComponent } from "./components/tab-bar/tab-bar.component";
 })
 export class AppComponent {
   title = "NwaifuAnime";
-  constructor(private sw: AppService) {}
-
-  get hasUpdate() {
-    return this.sw.isUpdateAvailable;
-  }
-
-  update() {
-    this.sw.update();
-  }
-
-  get serviceWorkerEnabled() {
-    return this.sw.serviceWorkerEnabled;
-  }
 }

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)) {