feat(config): new version update available indicator

src/apis/index.ts

@@ -1,4 +1,5 @@
-import { createSignal, ResourceActions } from 'solid-js'
+import ky from 'ky'
+import { ResourceActions, createSignal } from 'solid-js'
 import { toast } from 'solid-toast'
 import { useRequest } from '~/signals'
 import {
@@ -181,3 +182,46 @@ export const updateRuleProviderAPI = (providerName: string) => {
 
   return request.put(`providers/rules/${providerName}`)
 }
+
+export const isUpdateAvailableAPI = async (versionResponse: string) => {
+  const match = /(alpha|beta|meta)-?(\w+)/.exec(versionResponse)
+
+  if (!match) {
+    return false
+  }
+
+  const channel = match[1],
+    version = match[2]
+
+  if (channel === 'meta') {
+    const { assets } = await ky
+      .get('https://api.github.com/repos/MetaCubeX/Clash.Meta/releases/latest')
+      .json<{
+        assets: {
+          name: string
+        }[]
+      }>()
+
+    const alreadyLatest = assets.some(({ name }) => name.includes(version))
+
+    return !alreadyLatest
+  }
+
+  if (channel === 'alpha') {
+    const { assets } = await ky
+      .get(
+        'https://api.github.com/repos/MetaCubeX/Clash.Meta/releases/tags/Prerelease-Alpha',
+      )
+      .json<{
+        assets: {
+          name: string
+        }[]
+      }>()
+
+    const alreadyLatest = assets.some(({ name }) => name.includes(version))
+
+    return !alreadyLatest
+  }
+
+  return false
+}

src/pages/Config.tsx

@@ -15,6 +15,7 @@ import {
   fetchBackendVersionAPI,
   flushFakeIPDataAPI,
   flushingFakeIPData,
+  isUpdateAvailableAPI,
   reloadConfigFileAPI,
   reloadingConfigFile,
   restartBackendAPI,
@@ -448,17 +449,28 @@ const ConfigForXd = () => {
 
 const Versions = () => {
   const [backendVersion, setBackendVersion] = createSignal('')
+  const [isUpdateAvailable, setIsUpdateAvailable] = createSignal(false)
 
   onMount(async () => {
     const version = await fetchBackendVersionAPI()
-
     setBackendVersion(version)
+    setIsUpdateAvailable(await isUpdateAvailableAPI(version))
   })
 
   return (
     <div class="grid grid-cols-2 gap-4">
       <kbd class="kbd">{import.meta.env.version}</kbd>
-      <kbd class="kbd">{backendVersion()}</kbd>
+
+      <div class="relative">
+        <Show when={isUpdateAvailable()}>
+          <span class="absolute right-[-4px] top-[-4px] flex h-3 w-3">
+            <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-info opacity-75" />
+            <span class="inline-flex h-3 w-3 rounded-full bg-info" />
+          </span>
+        </Show>
+
+        <kbd class="kbd w-full">{backendVersion()}</kbd>
+      </div>
     </div>
   )
 }