From d109ba89740db32580233878a0d5907d244f5bd9 Mon Sep 17 00:00:00 2001
From: Sergey Elpashev <elpashevs@bk.ru>
Date: Mon, 22 Jul 2024 15:04:29 +0300
Subject: [PATCH] feat: nice update indicator in header

---
 apps/NwaifuAnime/src/app/app.component.html       |  8 --------
 apps/NwaifuAnime/src/app/app.component.ts         | 13 -------------
 .../app/components/header/header.component.html   |  9 +++++++++
 .../src/app/components/header/header.component.ts | 15 +++++++++++++++
 4 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/apps/NwaifuAnime/src/app/app.component.html b/apps/NwaifuAnime/src/app/app.component.html
index f333933..6bbd915 100644
--- a/apps/NwaifuAnime/src/app/app.component.html
+++ b/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
diff --git a/apps/NwaifuAnime/src/app/app.component.ts b/apps/NwaifuAnime/src/app/app.component.ts
index cb640b6..a591a99 100644
--- a/apps/NwaifuAnime/src/app/app.component.ts
+++ b/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;
-  }
 }
diff --git a/apps/NwaifuAnime/src/app/components/header/header.component.html b/apps/NwaifuAnime/src/app/components/header/header.component.html
index c61e1d6..ac42df2 100644
--- a/apps/NwaifuAnime/src/app/components/header/header.component.html
+++ b/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]="
diff --git a/apps/NwaifuAnime/src/app/components/header/header.component.ts b/apps/NwaifuAnime/src/app/components/header/header.component.ts
index a5270d1..6ceba27 100644
--- a/apps/NwaifuAnime/src/app/components/header/header.component.ts
+++ b/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)) {