✨ feat(version): display actual desktop app version with canary suffix (#13110)

* ✨ feat(version): display actual desktop app version with canary suffix

Add support for fetching and displaying the desktop application's actual version number in the About section. When running on desktop, the version now displays the desktop app's version (including canary suffix if applicable), falling back to the web version if unavailable.

- Add getAppVersion IPC method in SystemController
- Create versionDisplay utility module with comprehensive tests
- Integrate desktop version fetching in Version component

* ♻️ refactor(desktop): inject about version at build time

apps/desktop/electron.vite.config.ts

@@ -1,4 +1,5 @@
-import { resolve } from 'node:path';
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
 
 import dotenv from 'dotenv';
 import { defineConfig } from 'electron-vite';
@@ -34,11 +35,14 @@ function electronDesktopHtmlPlugin(): PluginOption {
 dotenv.config();
 
 const isDev = process.env.NODE_ENV === 'development';
-const ROOT_DIR = resolve(__dirname, '../..');
+const ROOT_DIR = path.resolve(__dirname, '../..');
 const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development';
 
 Object.assign(process.env, loadEnv(mode, ROOT_DIR, ''));
 const updateChannel = process.env.UPDATE_CHANNEL;
+const desktopPackageJson = JSON.parse(
+  readFileSync(path.resolve(__dirname, 'package.json'), 'utf8'),
+) as { version: string };
 
 console.info(`[electron-vite.config.ts] Detected UPDATE_CHANNEL: ${updateChannel}`);
 
@@ -74,8 +78,8 @@ export default defineConfig({
     },
     resolve: {
       alias: {
-        '@': resolve(__dirname, 'src/main'),
-        '~common': resolve(__dirname, 'src/common'),
+        '@': path.resolve(__dirname, 'src/main'),
+        '~common': path.resolve(__dirname, 'src/common'),
       },
     },
   },
@@ -88,21 +92,24 @@ export default defineConfig({
 
     resolve: {
       alias: {
-        '@': resolve(__dirname, 'src/main'),
-        '~common': resolve(__dirname, 'src/common'),
+        '@': path.resolve(__dirname, 'src/main'),
+        '~common': path.resolve(__dirname, 'src/common'),
       },
     },
   },
   renderer: {
     root: ROOT_DIR,
     build: {
-      outDir: resolve(__dirname, 'dist/renderer'),
+      outDir: path.resolve(__dirname, 'dist/renderer'),
       rollupOptions: {
-        input: resolve(__dirname, 'index.html'),
+        input: path.resolve(__dirname, 'index.html'),
         output: sharedRollupOutput,
       },
     },
-    define: sharedRendererDefine({ isMobile: false, isElectron: true }),
+    define: {
+      ...sharedRendererDefine({ isMobile: false, isElectron: true }),
+      __MAIN_VERSION__: JSON.stringify(desktopPackageJson.version),
+    },
     optimizeDeps: sharedOptimizeDeps,
     plugins: [
       electronDesktopHtmlPlugin(),

src/routes/(main)/settings/about/features/Version.tsx

@@ -16,6 +16,8 @@ import { useNewVersion } from '@/features/User/UserPanel/useNewVersion';
 import { autoUpdateService } from '@/services/electron/autoUpdate';
 import { useGlobalStore } from '@/store/global';
 
+import { APP_VERSION } from './appVersion';
+
 const styles = createStaticStyles(({ css, cssVar }) => ({
   logo: css`
     border-radius: calc(${cssVar.borderRadiusLG} * 2);
@@ -133,7 +135,7 @@ const Version = memo<{ mobile?: boolean }>(({ mobile }) => {
         <Flexbox align={'flex-start'} gap={6}>
           <div style={{ fontSize: 18, fontWeight: 'bolder' }}>{BRANDING_NAME}</div>
           <Flexbox gap={6} horizontal={!mobile}>
-            <Tag>v{CURRENT_VERSION}</Tag>
+            <Tag>v{APP_VERSION}</Tag>
 
             {buildChannel && buildChannel !== 'stable' && (
               <Tag color={'gold'}>

src/routes/(main)/settings/about/features/appVersion.desktop.ts

@@ -0,0 +1 @@
+export const APP_VERSION = __MAIN_VERSION__;

src/routes/(main)/settings/about/features/appVersion.ts

@@ -0,0 +1,3 @@
+import { CURRENT_VERSION } from '@/const/version';
+
+export const APP_VERSION = CURRENT_VERSION;

src/types/global.d.ts

@@ -40,4 +40,7 @@ declare global {
 
   /** Vite define: current bundle is Electron desktop variant */
   const __ELECTRON__: boolean | undefined;
+
+  /** Vite define: desktop app version injected by electron-vite renderer build */
+  const __MAIN_VERSION__: string;
 }