From 31578521cfa66ed61923092feffdb70bf6b009d2 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 22 Mar 2026 10:27:27 +0200
Subject: [PATCH] client/about dialog: create a new UI

---
 .../src/translations/en/translation.json      |  8 +-
 apps/client/src/widgets/dialogs/about.css     | 11 +++
 apps/client/src/widgets/dialogs/about.tsx     | 80 +++++++++----------
 3 files changed, 57 insertions(+), 42 deletions(-)
 create mode 100644 apps/client/src/widgets/dialogs/about.css

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 27891a02ab..fa10640cc8 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -7,7 +7,13 @@
     "sync_version": "Sync version:",
     "build_date": "Build date:",
     "build_revision": "Build revision:",
-    "data_directory": "Data directory:"
+    "data_directory": "Data directory:",
+
+    "version_label": "Version",
+    "version": "app: {{appVersion}}, database: {{dbVersion}}, sync protocol: {{syncVersion}}",
+    "build_info": "{{buildDate}}, revision: {{buildRevision}}",
+    "contributors_label": "Contributors"
+
   },
   "toast": {
     "critical-error": {
diff --git a/apps/client/src/widgets/dialogs/about.css b/apps/client/src/widgets/dialogs/about.css
new file mode 100644
index 0000000000..2ea9eeb628
--- /dev/null
+++ b/apps/client/src/widgets/dialogs/about.css
@@ -0,0 +1,11 @@
+.property-sheet-card {
+    font-size: .85em;
+
+    .tn-card-section {
+        display: flex;
+
+        > :first-child {
+            width: 100px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/dialogs/about.tsx b/apps/client/src/widgets/dialogs/about.tsx
index f09cca3191..47da8e9cf8 100644
--- a/apps/client/src/widgets/dialogs/about.tsx
+++ b/apps/client/src/widgets/dialogs/about.tsx
@@ -8,18 +8,19 @@ import { useState } from "preact/hooks";
 import type { CSSProperties } from "preact/compat";
 import type { AppInfo } from "@triliumnext/commons";
 import { useTriliumEvent } from "../react/hooks.jsx";
+import logo from "../../assets/icon.png";
+import { Card, CardSection } from "../react/Card.js";
+import "./about.css";
 
 export default function AboutDialog() {
     const [appInfo, setAppInfo] = useState<AppInfo | null>(null);
     const [shown, setShown] = useState(false);
-    const forceWordBreak: CSSProperties = { wordBreak: "break-all" };
 
     useTriliumEvent("openAboutDialog", () => setShown(true));
 
     return (
         <Modal className="about-dialog"
-            size="lg"
-            title={t("about.title")}
+            size="md"
             show={shown}
             onShown={async () => {
                 const appInfo = await server.get<AppInfo>("app-info");
@@ -27,44 +28,41 @@ export default function AboutDialog() {
             }}
             onHidden={() => setShown(false)}
         >
-            <table className="table table-borderless">
-                <tbody>
-                    <tr>
-                        <th>{t("about.homepage")}</th>
-                        <td className="selectable-text"><a className="tn-link external" href="https://github.com/TriliumNext/Trilium" style={forceWordBreak}>https://github.com/TriliumNext/Trilium</a></td>
-                    </tr>
-                    <tr>
-                        <th>{t("about.app_version")}</th>
-                        <td className="app-version selectable-text">{appInfo?.appVersion}</td>
-                    </tr>
-                    <tr>
-                        <th>{t("about.db_version")}</th>
-                        <td className="db-version selectable-text">{appInfo?.dbVersion}</td>
-                    </tr>
-                    <tr>
-                        <th>{t("about.sync_version")}</th>
-                        <td className="sync-version selectable-text">{appInfo?.syncVersion}</td>
-                    </tr>
-                    <tr>
-                        <th>{t("about.build_date")}</th>
-                        <td className="build-date selectable-text">
-                            {appInfo?.buildDate ? formatDateTime(appInfo.buildDate) : ""}
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>{t("about.build_revision")}</th>
-                        <td className="selectable-text">
-                            {appInfo?.buildRevision && <a className="tn-link build-revision external" href={`https://github.com/TriliumNext/Trilium/commit/${appInfo.buildRevision}`} target="_blank" style={forceWordBreak}>{appInfo.buildRevision}</a>}
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>{t("about.data_directory")}</th>
-                        <td className="data-directory">
-                            {appInfo?.dataDirectory && (<DirectoryLink directory={appInfo.dataDirectory} style={forceWordBreak} />)}
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
+           <div>
+                <img src={logo} width="128" />
+                <h2>Trilium Notes</h2>
+                <a className="tn-link" href="https://triliumnotes.org/" target="_blank">
+                    triliumnotes.org
+                </a>
+                
+                <Card className="property-sheet-card">
+                    <CardSection>
+                        <div>{t("about.version_label")}</div>
+                        <div>
+                            {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) : ""
+                                })}
+                            </div>
+                        </div>
+                    </CardSection>
+                    <CardSection>
+                        <div>{t("about.contributors_label")}</div>
+                    </CardSection>
+                    <CardSection>
+                        <div>{t("about.data_directory")}</div>
+                        <div>
+                            {appInfo?.dataDirectory && (<DirectoryLink directory={appInfo.dataDirectory} />)}
+                        </div>
+                    </CardSection>
+                </Card>
+           </div>
         </Modal>
     );
 }