Merge pull request #31 from elecordapp/app-version-button

App version button

res/css/_components.pcss

@@ -72,6 +72,7 @@
 @import "./structures/_MatrixChat.pcss";
 @import "./structures/_MessagePanel.pcss";
 @import "./structures/_NonUrgentToastContainer.pcss";
+@import "./structures/_AppVersionButton.pcss";
 @import "./structures/_QuickSettingsButton.pcss";
 @import "./structures/_RightPanel.pcss";
 @import "./structures/_RoomSearch.pcss";

res/css/structures/_AppVersionButton.pcss

@@ -0,0 +1,35 @@
+/*
+Copyright 2025 hazzuk.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_AppVersionButton {
+    border-radius: 10px;
+    background-color: #2c2f32bd;
+    width: 75%;
+    align-self: center;
+    cursor: pointer;
+}
+
+.mx_AppVersionButton_title {
+    text-align: center;
+    color: #62a9df70;
+    font-size: small;
+    margin: 3px 0 0px 0px;
+    font-weight: bold;
+}
+
+.mx_AppVersionButton_dev {
+    color: #df946270 !important;
+}
+
+.mx_AppVersionButton_number {
+    color: #727374;
+    text-align: center;
+    font-size: smaller;
+    margin: 0 0 3px 0;
+    overflow: hidden;
+    text-wrap-mode: nowrap;
+}

src/components/views/spaces/AppVersionButton.tsx

@@ -0,0 +1,40 @@
+/*
+Copyright 2025 hazzuk.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+
+const AppVersionButton: React.FC = () => {
+    const [version, setVersion] = useState<string | null>(null);
+
+    useEffect(() => {
+        fetch("version")
+            .then(r => r.text())
+            .then(v => setVersion(v));
+    }, []);
+
+    return (
+        <a
+            href="https://github.com/elecordapp/elecord-web/releases"
+            target="_blank"
+            rel="noreferrer noopener"
+            className="mx_AppVersionButton"
+        >
+            <p
+                className={classNames("mx_AppVersionButton_title", {
+                    "mx_AppVersionButton_dev": version && !version.includes(".")
+                })}
+            >
+                {version && !version.includes(".") ? "DEV" : "BETA"}
+            </p>
+            <p className="mx_AppVersionButton_number">{version || "..."}</p>
+        </a>
+    );
+};
+
+export default AppVersionButton;
+

src/components/views/spaces/SpacePanel.tsx

@@ -50,6 +50,7 @@ import IconizedContextMenu, {
 import SettingsStore from "../../../settings/SettingsStore";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import UIStore from "../../../stores/UIStore";
+import AppVersionButton from "./AppVersionButton";
 import QuickSettingsButton from "./QuickSettingsButton";
 import { useSettingValue } from "../../../hooks/useSettings";
 import UserMenu from "../../structures/UserMenu";
@@ -424,6 +425,8 @@ const SpacePanel: React.FC = () => {
                             )}
                         </Droppable>
 
+                        <AppVersionButton/>
+
                         <ThreadsActivityCentre displayButtonLabel={!isPanelCollapsed} />
 
                         <QuickSettingsButton isPanelCollapsed={isPanelCollapsed} />