From 59508b533269d73deadc773bf77f33ac5ec568bb Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Sun, 3 Aug 2025 16:11:26 +0300
Subject: [PATCH] Add new version notification for WebUI

---
 ui/app/components/NewVersion.vue | 16 ++++++++++++++++
 ui/app/layouts/default.vue       | 16 ++++++++++++++++
 ui/nuxt.config.ts                |  5 ++++-
 3 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 ui/app/components/NewVersion.vue

diff --git a/ui/app/components/NewVersion.vue b/ui/app/components/NewVersion.vue
new file mode 100644
index 00000000..28be65a5
--- /dev/null
+++ b/ui/app/components/NewVersion.vue
@@ -0,0 +1,16 @@
+<template>
+  <Message message_class="is-success has-background-success-90 has-text-dark">
+    <span class="icon"><i class="fas fa-info-circle" /></span>
+    <span>
+      A New WebUI Version installed, please
+      <NuxtLink class="is-bold" @click="reloadPage">click here</NuxtLink>
+      to reload the app.
+    </span>
+  </Message>
+</template>
+
+<script setup lang="ts">
+import Message from "~/components/Message.vue";
+
+const reloadPage = () => window.location.reload();
+</script>
diff --git a/ui/app/layouts/default.vue b/ui/app/layouts/default.vue
index bf90e3c5..22456d01 100644
--- a/ui/app/layouts/default.vue
+++ b/ui/app/layouts/default.vue
@@ -1,5 +1,6 @@
 <template>
   <div id="main_container" class="container">
+    <NewVersion v-if="newVersionIsAvailable" />
     <nav class="navbar is-mobile is-dark">
 
       <div class="navbar-brand pl-5">
@@ -361,4 +362,19 @@ const openMenu = (e: MouseEvent) => {
   elm?.classList.toggle('is-active')
 }
 
+const useVersionUpdate = () => {
+  const newVersionIsAvailable = ref(false)
+  const nuxtApp = useNuxtApp()
+  nuxtApp.hooks.addHooks({
+    'app:manifest:update': () => {
+      newVersionIsAvailable.value = true
+    }
+  });
+
+  return {
+    newVersionIsAvailable: readonly(newVersionIsAvailable),
+  }
+}
+const { newVersionIsAvailable } = useVersionUpdate()
+
 </script>
diff --git a/ui/nuxt.config.ts b/ui/nuxt.config.ts
index 1fa82efc..e3d37048 100644
--- a/ui/nuxt.config.ts
+++ b/ui/nuxt.config.ts
@@ -76,5 +76,8 @@ export default defineNuxtConfig({
     }
   },
   telemetry: false,
-  compatibilityDate: "2024-07-13",
+  compatibilityDate: "2025-08-03",
+  experimental: {
+    checkOutdatedBuildInterval: 1000 * 60 * 60,
+  }
 })