[Update] Add Copyable version label.

src-ui/app/config_page/ConfigPage.jsx

@@ -3,22 +3,9 @@ import styles from "./ConfigPage.module.scss";
 import { Topbar } from "./topbar/Topbar.jsx";
 import { SidebarSection } from "./sidebar_section/SidebarSection.jsx";
 import { SettingSection } from "./setting_section/SettingSection.jsx";
-
-import { useSoftwareVersion } from "@logics_configs";
-import { useComputeMode } from "@logics_common";
-import { useTranslation } from "react-i18next";
+import { VersionLabel } from "./version_label/VersionLabel.jsx";
 
 export const ConfigPage = () => {
-    const { t } = useTranslation();
-    const { currentSoftwareVersion } = useSoftwareVersion();
-    const { currentComputeMode } = useComputeMode();
-
-    const version_label = currentComputeMode.data === "cpu"
-        ? t("config_page.version", { version: currentSoftwareVersion.data })
-        : currentComputeMode.data === "cuda"
-        ? t("config_page.version", { version: currentSoftwareVersion.data }) + " CUDA"
-        : t("config_page.version", { version: currentSoftwareVersion.data });
-
     return (
         <div className={styles.page}>
             <div className={styles.container}>
@@ -27,7 +14,7 @@ export const ConfigPage = () => {
                     <SidebarSection />
                     <SettingSection />
                 </div>
-                <p className={styles.software_version}>{version_label}</p>
+                <VersionLabel />
             </div>
         </div>
     );

src-ui/app/config_page/ConfigPage.module.scss

@@ -23,12 +23,4 @@
     height: 100%;
     display: flex;
     padding-top: var(--config_page_topbar_height);
-}
-
-.software_version {
-    position: absolute;
-    bottom: 0.8rem;
-    left: 1.2rem;
-    font-size: 1.2rem;
-    color: var(--dark_400_color);
 }

src-ui/app/config_page/version_label/VersionLabel.jsx

@@ -0,0 +1,49 @@
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import { clsx } from "clsx";
+import styles from "./VersionLabel.module.scss";
+
+import { useSoftwareVersion } from "@logics_configs";
+import { useComputeMode } from "@logics_common";
+import CopySvg from "@images/copy.svg?react";
+import CheckMarkSvg from "@images/check_mark.svg?react";
+
+export const VersionLabel = () => {
+    const [is_copied, setIsCopied] = useState(false);
+
+    const { t } = useTranslation();
+    const { currentSoftwareVersion } = useSoftwareVersion();
+    const { currentComputeMode } = useComputeMode();
+
+    const version_label = currentComputeMode.data === "cpu"
+        ? t("config_page.version", { version: currentSoftwareVersion.data })
+        : currentComputeMode.data === "cuda"
+        ? t("config_page.version", { version: currentSoftwareVersion.data }) + " CUDA"
+        : t("config_page.version", { version: currentSoftwareVersion.data });
+
+        const is_cpu = currentComputeMode.data === "cpu";
+
+        const copyToClipboard = async () => {
+            if (is_copied) return;
+            const copy_text = is_cpu ? `${currentSoftwareVersion.data}` : `${currentSoftwareVersion.data} CUDA`;
+            await navigator.clipboard.writeText(copy_text);
+            setIsCopied(true);
+
+            setTimeout(() => {
+                setIsCopied(false);
+            }, 1000);
+        };
+
+
+    return (
+        <div className={styles.container}>
+            <div className={clsx(styles.wrapper, {[styles.is_copied]: is_copied})} onClick={copyToClipboard}>
+                <p className={styles.version_label}>{version_label}</p>
+                {is_copied
+                    ? <CheckMarkSvg className={styles.check_mark_svg}/>
+                    : <CopySvg className={styles.copy_svg}/>
+                }
+            </div>
+        </div>
+    );
+};

src-ui/app/config_page/version_label/VersionLabel.module.scss

@@ -0,0 +1,33 @@
+.container {
+    position: absolute;
+    bottom: 1.2rem;
+    left: 1.4rem;
+    font-size: 1.2rem;
+    color: var(--dark_400_color);
+}
+
+.wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    cursor: pointer;
+    &.is_copied {
+        cursor: default;
+    }
+}
+
+.version_label {
+    font-size: 1.2rem;
+    color: var(--dark_400_color);
+}
+
+.copy_svg {
+    width: 1.4rem;
+    color: var(--dark_500_color);
+}
+
+.check_mark_svg {
+    width: 1.4rem;
+    color: var(--primary_300_color);
+}

src-ui/assets/check_mark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 21.035l-9-8.638 2.791-2.87 6.156 5.874 12.21-12.436 2.843 2.817z"/></svg>

src-ui/assets/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 6v16h-16v-16h16zm2-2h-20v20h20v-20zm-24 17v-21h21v2h-19v19h-2z"/></svg>