feat(update): improve the dialog styling

apps/desktop/src/renderer/components.d.ts

@@ -50,6 +50,7 @@ declare module 'vue' {
     SettingsView: typeof import('./../../../../packages/ui/src/components/SettingsView.vue')['default']
     UpdateAvailable: typeof import('./src/components/update/Available.vue')['default']
     UpdateDownloadProgress: typeof import('./src/components/update/DownloadProgress.vue')['default']
+    UpdateNotAvailable: typeof import('./src/components/update/NotAvailable.vue')['default']
     UpdateView: typeof import('./src/components/update/View.vue')['default']
   }
 }

apps/desktop/src/renderer/src/components/update/NotAvailable.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import Logo from '../../../../../../../packages/ui/src/assets/images/logo.png'
+
+const dialogVisible = defineModel<boolean>({ default: false })
+
+const version = ref(`v${window.__APP_VERSION__}`)
+</script>
+
+<template>
+  <MyDialog
+    v-model="dialogVisible"
+    width="280px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :show-close="false"
+    center
+  >
+    <div class="text-center select-none">
+      <img class="mx-auto mb-6" :src="Logo" alt="MQTTX" width="64" height="64">
+      <div class="mb-0.5 text-title font-semibold text-2xl">
+        MQTTX
+      </div>
+      <div class="mb-6 text-default text-sm">
+        {{ version }}
+      </div>
+      <div class="text-default">
+        {{ $t('update.noUpdateAvailable') }}
+      </div>
+    </div>
+    <template #footer>
+      <ElButton class="w-full" type="primary" @click="dialogVisible = false">
+        {{ $t('common.close') }}
+      </ElButton>
+    </template>
+  </MyDialog>
+</template>

apps/desktop/src/renderer/src/components/update/View.vue

@@ -2,6 +2,8 @@
 import type { ProgressInfo } from 'electron-updater'
 import useSettingsService from '@database/services/SettingsService'
 
+const updateNotAvailableDialogVisible = ref(false)
+
 const updateAvailableDialogVisible = ref(false)
 const version = ref('')
 const changelog = ref('')
@@ -10,17 +12,11 @@ const downloadProgressDialogVisible = ref(false)
 const downloadProgress = ref<ProgressInfo | null>(null)
 const updateDownloaded = ref(false)
 
-const { t } = useI18n()
-
 window.api.onUpdateStatus((_event, updateEvent) => {
   const { status } = updateEvent
   if (status === 'update-not-available') {
     if (window.forceCheck) {
-      ElMessage({
-        message: t('update.noUpdateAvailable'),
-        type: 'info',
-        plain: true,
-      })
+      updateNotAvailableDialogVisible.value = true
       window.forceCheck = false
     }
   } else if (status === 'update-available') {
@@ -58,6 +54,9 @@ onMounted(async () => {
 </script>
 
 <template>
+  <UpdateNotAvailable
+    v-model="updateNotAvailableDialogVisible"
+  />
   <UpdateAvailable
     v-model="updateAvailableDialogVisible"
     :version="version"

packages/ui/src/i18n/common.ts

@@ -13,6 +13,13 @@ export default {
     ja: '確認',
     hu: 'Megerősít',
   },
+  close: {
+    zh: '关闭',
+    en: 'Close',
+    ja: '閉じる',
+    tr: 'Kapat',
+    hu: 'Bezárás',
+  },
   inputRequired: {
     zh: '请输入',
     en: 'Please input',

packages/ui/src/i18n/update.ts

@@ -63,10 +63,10 @@ export default {
     hu: 'Telepítés és újraindítás',
   },
   noUpdateAvailable: {
-    zh: '您当前使用的已经是最新版本，无需更新。',
-    en: 'You are already on the latest version, no update is necessary.',
-    ja: '現在使用しているバージョンは最新です。更新の必要はありません。',
-    tr: 'Kullandığınız sürüm zaten en son sürüm, güncelleme gerekli değil.',
-    hu: 'A jelenlegi verzió már a legújabb, nincs szükség frissítésre.',
+    zh: '当前没有可用的更新。',
+    en: 'Currently no update available.',
+    ja: '現在、利用可能な更新はありません。',
+    tr: 'Şu anda güncelleme yok.',
+    hu: 'Jelenleg nincs elérhető frissítés.',
   },
 }