feat(about): copy your environment (#649)

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}`,
+  ]
+}

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)

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>