From 449ba07633e048510df66509fa52ada28b6ba8f6 Mon Sep 17 00:00:00 2001
From: Hyden Liu <sunupdong@gmail.com>
Date: Fri, 27 Sep 2024 01:48:38 +0800
Subject: [PATCH] feat(about): copy your environment (#649)

---
 apps/renderer/src/lib/environment.ts          | 19 ++++++++++++++++++
 apps/renderer/src/lib/issues.ts               | 20 ++-----------------
 .../src/modules/settings/tabs/about.tsx       |  6 +++++-
 3 files changed, 26 insertions(+), 19 deletions(-)
 create mode 100644 apps/renderer/src/lib/environment.ts

diff --git a/apps/renderer/src/lib/environment.ts b/apps/renderer/src/lib/environment.ts
new file mode 100644
index 000000000..98f5f79d7
--- /dev/null
+++ b/apps/renderer/src/lib/environment.ts
@@ -0,0 +1,19 @@
+import { detectBrowser, getOS } from "./utils"
+
+export const getCurrentEnvironment = () => {
+  const ua = navigator.userAgent
+  const appVersion = APP_VERSION
+  const env = window.electron ? "electron" : "web"
+  const os = getOS()
+  const browser = detectBrowser()
+
+  return [
+    "### Environment",
+    "",
+    `**App Version**: ${appVersion}`,
+    `**OS**: ${os}`,
+    `**User Agent**: ${ua}`,
+    `**Env**: ${env}`,
+    `**Browser**: ${browser}`,
+  ]
+}
diff --git a/apps/renderer/src/lib/issues.ts b/apps/renderer/src/lib/issues.ts
index 16eb7d044..5d4d70489 100644
--- a/apps/renderer/src/lib/issues.ts
+++ b/apps/renderer/src/lib/issues.ts
@@ -1,6 +1,6 @@
 import { repository } from "@pkg"
 
-import { detectBrowser, getOS } from "./utils"
+import { getCurrentEnvironment } from "./environment"
 
 interface IssueOptions {
   title: string
@@ -12,23 +12,7 @@ export const getNewIssueUrl = ({ body, label, title }: Partial<IssueOptions> = {
 
   const searchParams = new URLSearchParams()
 
-  const ua = navigator.userAgent
-  const appVersion = APP_VERSION
-  const env = window.electron ? "electron" : "web"
-  const os = getOS()
-  const browser = detectBrowser()
-
-  const nextBody = [
-    body || "",
-    "",
-    "### Environment",
-    "",
-    `**App Version**: ${appVersion}`,
-    `**OS**: ${os}`,
-    `**User Agent**: ${ua}`,
-    `**Env**: ${env}`,
-    `**Browser**: ${browser}`,
-  ].join("\n")
+  const nextBody = [body || "", "", ...getCurrentEnvironment()].join("\n")
   searchParams.set("body", nextBody)
   if (label) searchParams.set("label", label)
   if (title) searchParams.set("title", title)
diff --git a/apps/renderer/src/modules/settings/tabs/about.tsx b/apps/renderer/src/modules/settings/tabs/about.tsx
index ef5ae99fd..564fb575d 100644
--- a/apps/renderer/src/modules/settings/tabs/about.tsx
+++ b/apps/renderer/src/modules/settings/tabs/about.tsx
@@ -4,14 +4,17 @@ import { Trans, useTranslation } from "react-i18next"
 import { Logo } from "~/components/icons/logo"
 import { Button } from "~/components/ui/button"
 import { styledButtonVariant } from "~/components/ui/button/variants"
+import { CopyButton } from "~/components/ui/code-highlighter"
 import { Divider } from "~/components/ui/divider"
 import { SocialMediaLinks } from "~/constants/social"
+import { getCurrentEnvironment } from "~/lib/environment"
 import { getNewIssueUrl } from "~/lib/issues"
 
 import { SettingsTitle } from "../title"
 
 export const SettingAbout = () => {
   const { t } = useTranslation("settings")
+  const currentEnvironment = getCurrentEnvironment().join("\n")
 
   return (
     <div>
@@ -24,8 +27,9 @@ export const SettingAbout = () => {
             <div className="text-lg font-bold">
               {APP_NAME} {!import.meta.env.PROD ? `(${import.meta.env.MODE})` : ""}
             </div>
-            <div>
+            <div className="flex items-center gap-2">
               <span className="rounded bg-muted px-2 py-1 text-xs">{APP_VERSION}</span>
+              <CopyButton value={currentEnvironment} className="p-1 [&_i]:size-2.5" />
             </div>
           </div>