Add new version notification for WebUI

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>

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>

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,
+  }
 })