A new about dialog

apps/client/src/translations/en/translation.json

@@ -1,13 +1,16 @@
 {
-  "about": {
-    "title": "About Trilium Notes",
-    "homepage": "Homepage:",
-    "app_version": "App version:",
-    "db_version": "DB version:",
-    "sync_version": "Sync version:",
-    "build_date": "Build date:",
-    "build_revision": "Build revision:",
-    "data_directory": "Data directory:"
+  "about": {   
+    "version_label": "Version:",
+    "version": "app: {{appVersion}}, database: {{dbVersion}}, sync protocol: {{syncVersion}}",
+    "build_info": "{{buildDate}}, revision: <buildRevision />",
+    "contributors_label": "Contributors:",
+    "contributor_roles": {
+      "lead-dev": "lead developer",
+      "original-dev": "original developer"
+    },
+    "contributor_full_list": "See the full list",
+    "data_directory": "Data directory:",
+    "donate": "Donate"
   },
   "toast": {
     "critical-error": {

apps/client/src/widgets/dialogs/about.css

@@ -0,0 +1,47 @@
+.about-dialog {
+    .about-dialog-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .property-sheet-card {
+        margin-block: 30px;
+        font-size: .85em;
+
+        .tn-card-section {
+            display: flex;
+
+            > :first-child {
+                width: 100px;
+            }
+        }
+    }
+
+    .contributor-list {
+        a, span {
+            white-space: nowrap;
+        }
+    }
+
+    footer {
+        display: flex;
+        justify-content: center;
+        gap: 20px;
+        margin-bottom: 30px;
+
+        a {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            &::after {
+                display: none;
+            }
+
+            i {
+                font-size: 32px;
+            }
+        }
+    }
+}

apps/client/src/widgets/dialogs/about.tsx

@@ -5,79 +5,146 @@ import server from "../../services/server.js";
 import utils from "../../services/utils.js";
 import openService from "../../services/open.js";
 import { useState } from "preact/hooks";
-import type { CSSProperties } from "preact/compat";
-import type { AppInfo } from "@triliumnext/commons";
+import type { AppInfo, Contributor, ContributorList } from "@triliumnext/commons";
 import { useTriliumEvent } from "../react/hooks.jsx";
+import { Card, CardSection } from "../react/Card.js";
+import "./about.css";
+import { Trans } from "react-i18next";
+import type React from "react";
+import icon from "../../assets/icon.svg";
+import iconAlt from "../../assets/icon-alt.svg";
+import { useCallback, useEffect } from "react";
+import contributors from "../../../../../contributors.json"; 
 
 export default function AboutDialog() {
     const [appInfo, setAppInfo] = useState<AppInfo | null>(null);
     const [shown, setShown] = useState(false);
-    const forceWordBreak: CSSProperties = { wordBreak: "break-all" };
+    const [isNightly, setNightly] = useState(false);
 
-    useTriliumEvent("openAboutDialog", () => setShown(true));
+    const onLoad = useCallback(async () => {
+        if (!appInfo) {
+            setAppInfo(await server.get<AppInfo>("app-info"));
+        }
+        setShown(true);
+    }, []);
+
+    useTriliumEvent("openAboutDialog", onLoad);
+
+    useEffect(() => {
+        setNightly(!!appInfo?.appVersion.includes("test"));
+    }, [appInfo])
 
     return (
-        <Modal className="about-dialog"
-            size="lg"
-            title={t("about.title")}
+        <Modal
+            className="about-dialog"
+            size="md"
             show={shown}
-            onShown={async () => {
-                const appInfo = await server.get<AppInfo>("app-info");
-                setAppInfo(appInfo);
-            }}
             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 className="about-dialog-content">
+                <img src={(isNightly) ? iconAlt : icon} width="128" />
+                <h2>Trilium Notes {isNightly && <span>Nightly</span>}</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  className="selectable-text">
+                            {t("about.version", {
+                                appVersion: appInfo?.appVersion,
+                                dbVersion: appInfo?.dbVersion,
+                                syncVersion: appInfo?.syncVersion
+                            })}
+                            <div>
+                                <Trans
+                                    i18nKey="about.build_info"
+                                    values={{
+                                        buildDate: appInfo?.buildDate ? formatDateTime(appInfo.buildDate) : ""
+                                    }}
+                                    components={{
+                                        buildRevision: revisionLink(appInfo)
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    </CardSection>
+
+                    <CardSection>
+                        <div>{t("about.contributors_label")}</div>
+                        <div className="contributor-list use-tn-links">
+                            <Contributors data={contributors as ContributorList} />
+                            <a href="https://github.com/TriliumNext/Trilium/graphs/contributors" target="_blank">
+                                {t("about.contributor_full_list")}
+                            </a>
+                        </div>
+                    </CardSection>
+
+                    <CardSection>
+                        <div>{t("about.data_directory")}</div>
+                        <div className="selectable-text">
+                            {appInfo?.dataDirectory && (<DirectoryLink directory={appInfo.dataDirectory} />)}
+                        </div>
+                    </CardSection>
+                </Card>
+           </div>
+
+           <footer>
+                <a href="https://github.com/TriliumNext/Trilium" target="_blank">
+                    <i class='bx bxl-github'></i>
+                    GitHub
+                </a>
+                <a href="https://triliumnotes.org/en/support-us" target="_blank">
+                    <i class='bx bx-heart' ></i>
+                    {t("about.donate")}
+                </a>
+           </footer>
         </Modal>
     );
 }
 
-function DirectoryLink({ directory, style }: { directory: string, style?: CSSProperties }) {
+function revisionLink(appInfo: AppInfo | null) {
+    return <>
+        {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;
+}
+
+function Contributors(params: {data: ContributorList}) {
+    return params.data.contributors.map((c, index, array) => {
+        return <>
+            <ContributorListItem data={c} />
+
+            {/* Add a comma between items */}
+            {(index < array.length - 1) ? ", " : ". "}
+        </>
+    });
+}
+
+function ContributorListItem({data}: {data: Contributor}) {
+    let roleString = "";
+    if (data.role) {
+        roleString = t(`about.contributor_roles.${data.role}`);
+    }
+
+    return <>
+        <a href={data.url} target="_blank">{data.fullName ?? data.name}</a>
+
+        {roleString && <span>&nbsp;({roleString})</span>} 
+    </>
+}
+
+function DirectoryLink({ directory }: { directory: string}) {
     if (utils.isElectron()) {
         const onClick = (e: MouseEvent) => {
             e.preventDefault();
             openService.openDirectory(directory);
         };
 
-        return <a className="tn-link selectable-text" href="#" onClick={onClick} style={style}>{directory}</a>
+        return <a className="tn-link selectable-text" href="#" onClick={onClick}>{directory}</a>
     } else {
-        return <span className="selectable-text" style={style}>{directory}</span>;
+        return <span className="selectable-text">{directory}</span>;
     }
-}
+}

apps/client/src/widgets/react/Modal.tsx

@@ -16,7 +16,7 @@ interface CustomTitleBarButton {
 
 export interface ModalProps {
     className: string;
-    title: string | ComponentChildren;
+    title?: string | ComponentChildren;
     customTitleBarButtons?: (CustomTitleBarButton | null)[];
     size: "xl" | "lg" | "md" | "sm";
     children: ComponentChildren;