From 1b2a9a4efd3fe29cbb2fa7814eea9df1fb8c2869 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Thu, 30 Jan 2025 20:00:34 +0900
Subject: [PATCH] [Update] Add Copyable version label.

---
 src-ui/app/config_page/ConfigPage.jsx         | 17 +------
 src-ui/app/config_page/ConfigPage.module.scss |  8 ---
 .../version_label/VersionLabel.jsx            | 49 +++++++++++++++++++
 .../version_label/VersionLabel.module.scss    | 33 +++++++++++++
 src-ui/assets/check_mark.svg                  |  1 +
 src-ui/assets/copy.svg                        |  1 +
 6 files changed, 86 insertions(+), 23 deletions(-)
 create mode 100644 src-ui/app/config_page/version_label/VersionLabel.jsx
 create mode 100644 src-ui/app/config_page/version_label/VersionLabel.module.scss
 create mode 100644 src-ui/assets/check_mark.svg
 create mode 100644 src-ui/assets/copy.svg

diff --git a/src-ui/app/config_page/ConfigPage.jsx b/src-ui/app/config_page/ConfigPage.jsx
index 6eb33644..7c71a5fd 100644
--- a/src-ui/app/config_page/ConfigPage.jsx
+++ b/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>
     );
diff --git a/src-ui/app/config_page/ConfigPage.module.scss b/src-ui/app/config_page/ConfigPage.module.scss
index 28d2fd0e..2eb9bab6 100644
--- a/src-ui/app/config_page/ConfigPage.module.scss
+++ b/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);
 }
\ No newline at end of file
diff --git a/src-ui/app/config_page/version_label/VersionLabel.jsx b/src-ui/app/config_page/version_label/VersionLabel.jsx
new file mode 100644
index 00000000..f6325165
--- /dev/null
+++ b/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>
+    );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/version_label/VersionLabel.module.scss b/src-ui/app/config_page/version_label/VersionLabel.module.scss
new file mode 100644
index 00000000..78edf79c
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/src-ui/assets/check_mark.svg b/src-ui/assets/check_mark.svg
new file mode 100644
index 00000000..f26495dd
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src-ui/assets/copy.svg b/src-ui/assets/copy.svg
new file mode 100644
index 00000000..6260e2a0
--- /dev/null
+++ b/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>
\ No newline at end of file