fix(desktop): show package version in settings

Author: murongg

apps/desktop/src/App.test.tsx

@@ -1,5 +1,6 @@
 import { act, fireEvent, screen, waitFor, within } from "@testing-library/react";
 import { defaultMarkdownShortcuts } from "@markra/editor";
+import desktopPackage from "../package.json";
 import { defaultAiQuickActionPrompts } from "./lib/ai-actions";
 import {
   dispatchAiEditorPreviewAction,
@@ -532,6 +533,7 @@ describe("Markra workspace", () => {
     settingsGroups.forEach((group) => expect(group).not.toHaveClass("border-y"));
     expect(settingsGroups[0]).not.toHaveClass("divide-y");
     expect(settingsGroups.some((group) => group.classList.contains("divide-y"))).toBe(true);
+    expect(screen.getByText(`Markra ${desktopPackage.version}`)).toBeInTheDocument();
     const categoryButtons = Array.from(container.querySelectorAll(".settings-sidebar nav button"));
     expect(categoryButtons).toHaveLength(9);
     expect(categoryButtons[0]).toHaveAttribute("aria-current", "page");

apps/desktop/src/components/SettingsSections.tsx

@@ -1263,6 +1263,7 @@ function SettingsTitlebarActionsControl({
 }
 
 export function GeneralSettings({
+  appVersion,
   language,
   onCheckForUpdates,
   onResetWelcomeDocument,
@@ -1272,6 +1273,7 @@ export function GeneralSettings({
   translate,
   welcomeReset
 }: {
+  appVersion: string;
   language: AppLanguage;
   onCheckForUpdates: () => unknown;
   onResetWelcomeDocument: () => unknown;
@@ -1333,6 +1335,10 @@ export function GeneralSettings({
       ) : null}
 
       <SettingsSection label={translate("settings.sections.updates")}>
+        <SettingsRow
+          title={translate("settings.update.currentVersion")}
+          description={`Markra ${appVersion}`}
+        />
         <SettingsRow
           title={translate("settings.update.title")}
           description={translate("settings.update.description")}

apps/desktop/src/components/SettingsWindow.tsx

@@ -14,6 +14,7 @@ import { SettingsContent, SettingsSidebar } from "./SettingsShell";
 import { useSettingsWindowState } from "../hooks/useSettingsWindowState";
 import { useAutoUpdater } from "../hooks/useAutoUpdater";
 import { useDefaultContextMenuBlocker } from "../hooks/useDefaultContextMenuBlocker";
+import { appVersion } from "../lib/app-version";
 import { resolveDesktopPlatform } from "../lib/platform";
 import { MacWindowControls } from "./MacWindowControls";
 
@@ -75,6 +76,7 @@ export function SettingsWindow() {
         <SettingsContent activeCategory={activeCategory} translate={translate}>
           {activeCategory === "general" ? (
             <GeneralSettings
+              appVersion={appVersion}
               preferences={editorPreferences}
               language={appLanguage.language}
               translate={translate}

apps/desktop/src/lib/app-version.ts

@@ -0,0 +1 @@
+export const appVersion = __MARKRA_APP_VERSION__;

apps/desktop/src/vite-env.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="vite/client" />
 
+declare const __MARKRA_APP_VERSION__: string;
 declare const __MARKRA_DEBUG__: boolean;

apps/desktop/vite.config.ts

@@ -1,9 +1,13 @@
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
+import { readFileSync } from "node:fs";
 import { fileURLToPath } from "node:url";
 import { defineConfig } from "vitest/config";
 import { stripDebugPlugin } from "./scripts/vite/strip-debug";
 
+const desktopPackage = JSON.parse(
+  readFileSync(new URL("./package.json", import.meta.url), "utf8")
+) as { version?: string };
 const chunkSizeWarningLimitKb = 1200;
 const fontAssetPattern = /\.(?:otf|ttf|woff2?)$/i;
 const imageAssetPattern = /\.(?:avif|gif|ico|jpe?g|png|svg|webp)$/i;
@@ -93,6 +97,7 @@ function vendorChunkName(id: string) {
 
 export default defineConfig(({ mode }) => ({
   define: {
+    __MARKRA_APP_VERSION__: JSON.stringify(desktopPackage.version ?? "0.0.0"),
     __MARKRA_DEBUG__: JSON.stringify(mode !== "production")
   },
   resolve: mode === "test"

packages/shared/src/i18n/locales/en.ts

@@ -32,6 +32,7 @@ const messages: BaseLocaleMessages = {
   "settings.welcome.buttonLabel": "Show welcome next launch",
   "settings.startup.restoreWorkspace": "Restore last workspace",
   "settings.startup.restoreWorkspaceDescription": "Reopen the last file and file tree when Markra starts.",
+  "settings.update.currentVersion": "Current version",
   "settings.update.title": "App updates",
   "settings.update.description": "Check whether a newer Markra release is available.",
   "settings.update.check": "Check for updates",

packages/shared/src/i18n/locales/types.ts

@@ -44,6 +44,7 @@ export type I18nKey =
   | "settings.welcome.status"
   | "settings.startup.restoreWorkspace"
   | "settings.startup.restoreWorkspaceDescription"
+  | "settings.update.currentVersion"
   | "settings.update.title"
   | "settings.update.description"
   | "settings.update.check"

packages/shared/src/i18n/locales/zh-CN.ts

@@ -32,6 +32,7 @@ const messages: LocaleMessages = {
   "settings.welcome.buttonLabel": "下次启动时显示欢迎文档",
   "settings.startup.restoreWorkspace": "恢复上次工作区",
   "settings.startup.restoreWorkspaceDescription": "启动 Markra 时重新打开上次的文件和文件树。",
+  "settings.update.currentVersion": "当前版本",
   "settings.update.title": "应用更新",
   "settings.update.description": "检查是否有新的 Markra 版本可用。",
   "settings.update.check": "检查更新",

packages/shared/src/i18n/locales/zh-TW.ts

@@ -27,6 +27,7 @@ const messages: LocaleMessages = {
   "settings.language.title": "語言",
   "settings.welcome.title": "歡迎文件",
   "settings.welcome.button": "重設",
+  "settings.update.currentVersion": "目前版本",
   "settings.update.title": "應用程式更新",
   "settings.update.description": "檢查是否有新的 Markra 版本可用。",
   "settings.update.check": "檢查更新",