fix: move update app button to header

Author: VChet

src/components/header/main-header.vue

@@ -13,6 +13,10 @@
         <icon-loader v-model="isUpdating" />
         Update
       </button>
+      <button v-if="needRefresh" type="button" @click.prevent="updateServiceWorker(true)">
+        <icon-progress-alert />
+        Update app
+      </button>
     </div>
     <div>
       <import-export :no-data="isEmpty" />
@@ -22,12 +26,13 @@
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
-import { IconActivityHeartbeat } from "@tabler/icons-vue";
+import { IconActivityHeartbeat, IconProgressAlert } from "@tabler/icons-vue";
 import { clearCachedRequests } from "@/service/memoize";
 import { fetchRateLimit, rateLimit } from "@/service/octokit";
 import { useEventsStore } from "@/store/events";
 import { useLatestVersionsStore } from "@/store/latest-versions";
 import { useRepositoriesStore } from "@/store/repositories";
+import { useSettingsStore } from "@/store/settings";
 import IconLoader from "../icon-loader.vue";
 import AboutModal from "../modals/about-modal.vue";
 import AddRepo from "../modals/add-repo.vue";
@@ -38,6 +43,7 @@ import ImportExport from "./import-export.vue";
 const { isEmpty, updateRepositories } = useRepositoriesStore();
 const { updateLatestVersions } = useLatestVersionsStore();
 const { updateEvents } = useEventsStore();
+const { needRefresh, updateServiceWorker } = useSettingsStore();
 
 const isUpdating = ref<boolean>(false);
 async function update(): Promise<void> {

src/components/modals/settings-modal.vue

@@ -12,11 +12,6 @@
         </button>
       </header>
       <form class="settings__form" @submit.prevent="update">
-        <fieldset v-if="needRefresh">
-          <button type="button" @click.prevent="updateServiceWorker(true)">
-            Update app
-          </button>
-        </fieldset>
         <fieldset>
           <legend>Interface</legend>
           <label>
@@ -81,7 +76,7 @@ const themes = [
   { name: "red", value: "red" }
 ] as const;
 
-const { settings, needRefresh, updateServiceWorker } = useSettingsStore();
+const { settings } = useSettingsStore();
 const dialogRef = useTemplateRef("dialogElement");
 const { open, close } = useDialog(dialogRef);
 const form = reactive(deepCopy(settings.value));