From 75da044bbefc6b033fd8ffdddea8adb3eff21815 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 22 Mar 2026 17:21:20 +0200
Subject: [PATCH] client/about dialog: add a link for the build revision

---
 .../src/translations/en/translation.json      |  2 +-
 apps/client/src/widgets/dialogs/about.tsx     | 23 ++++++++++++++-----
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 5732fb857f..e1271388b3 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -2,7 +2,7 @@
   "about": {   
     "version_label": "Version:",
     "version": "app: {{appVersion}}, database: {{dbVersion}}, sync protocol: {{syncVersion}}",
-    "build_info": "{{buildDate}}, revision: {{buildRevision}}",
+    "build_info": "{{buildDate}}, revision: <buildRevision />",
     "contributors_label": "Contributors:",
     "data_directory": "Data directory:",
     "donate": "Donate"
diff --git a/apps/client/src/widgets/dialogs/about.tsx b/apps/client/src/widgets/dialogs/about.tsx
index a8bce73e48..bb6238108f 100644
--- a/apps/client/src/widgets/dialogs/about.tsx
+++ b/apps/client/src/widgets/dialogs/about.tsx
@@ -11,6 +11,8 @@ import { useTriliumEvent } from "../react/hooks.jsx";
 import logo from "../../assets/icon.png";
 import { Card, CardSection } from "../react/Card.js";
 import "./about.css";
+import { Trans } from "react-i18next";
+import type React from "react";
 
 export default function AboutDialog() {
     const [appInfo, setAppInfo] = useState<AppInfo | null>(null);
@@ -39,17 +41,26 @@ export default function AboutDialog() {
                 <Card className="property-sheet-card">
                     <CardSection>
                         <div>{t("about.version_label")}</div>
-                        <div>
+                        <div  className="selectable-text">
                             {t("about.version", {
                                 appVersion: appInfo?.appVersion,
                                 dbVersion: appInfo?.dbVersion,
                                 syncVersion: appInfo?.syncVersion
                             })}
                             <div>
-                                {t("about.build_info", {
-                                    buildDate: appInfo?.buildDate ? formatDateTime(appInfo.buildDate) : "",
-                                    buildRevision: appInfo?.buildRevision ? appInfo.buildRevision.substring(0, 6) : ""
-                                })}
+                                <Trans
+                                    i18nKey="about.build_info"
+                                    values={{
+                                        buildDate: appInfo?.buildDate ? formatDateTime(appInfo.buildDate) : ""
+                                    }}
+                                    components={{
+                                        buildRevision: <>
+                                            {appInfo?.buildRevision && <a href={`https://github.com/TriliumNext/Trilium/commit/${appInfo.buildRevision}`} target="_blank" className="tn-link">
+                                                {appInfo.buildRevision.substring(0, 7)}
+                                            </a>}
+                                        </> as React.ReactElement
+                                    }}
+                                />
                             </div>
                         </div>
                     </CardSection>
@@ -58,7 +69,7 @@ export default function AboutDialog() {
                     </CardSection>
                     <CardSection>
                         <div>{t("about.data_directory")}</div>
-                        <div>
+                        <div className="selectable-text">
                             {appInfo?.dataDirectory && (<DirectoryLink directory={appInfo.dataDirectory} />)}
                         </div>
                     </CardSection>