display badge on version number if updates are available

next-ui/src/auto-imports.d.ts

@@ -139,4 +139,4 @@ declare module 'vue' {
     readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
     readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
   }
-}
+}

next-ui/src/components/BuidVersion.vue

@@ -1,20 +1,28 @@
 <template>
   <template v-if="buildVersion">
-    <v-btn
-      prepend-icon="mdi-tag-outline"
-      variant="text"
-      color="grey"
-      size="small"
-      class="text-caption"
-      to="/server/updates"
+    <v-badge
+      dot
+      color="warning"
+      :model-value="isLatestVersion == false"
     >
-      {{ buildVersion }}
-    </v-btn>
+      <v-btn
+        prepend-icon="mdi-tag-outline"
+        variant="text"
+        color="grey"
+        size="small"
+        class="text-caption"
+        to="/server/updates"
+      >
+        {{ buildVersion }}
+      </v-btn>
+    </v-badge>
   </template>
 </template>
 
 <script setup lang="ts">
 import {useBuildVersion} from '@/composables/buid-version.ts'
+import {useLatestVersion} from '@/composables/latest-version.ts'
 
 const {buildVersion} = useBuildVersion()
+const {isLatestVersion} = useLatestVersion()
 </script>

next-ui/src/composables/latest-version.ts

@@ -13,5 +13,5 @@ export function useLatestVersion() {
     else return undefined
   })
 
-  return {isLatestVersion}
+  return {isLatestVersion, latestRelease}
 }

next-ui/src/pages/server/updates.vue

@@ -98,9 +98,8 @@ import {useLatestVersion} from '@/composables/latest-version.ts'
 
 const {data, error} = useAppReleases()
 
-const latest = computed(() => data.value?.find(x => x.latest))
 const {buildVersion: currentVersion} = useBuildVersion()
-const {isLatestVersion} = useLatestVersion()
+const {isLatestVersion, latestRelease: latest} = useLatestVersion()
 </script>
 
 <style lang="scss">