From a45e78917855b40547970cc704f45a929afa21ec Mon Sep 17 00:00:00 2001
From: UUBulb <35923940+uubulb@users.noreply.github.com>
Date: Mon, 6 Jan 2025 21:02:39 +0800
Subject: [PATCH] improve: replace long line of words with clipboard button
 (#95)

* improve: replace long line of words with clipboard button

* change module path
---
 src/components/copy-button.tsx  | 45 +++++++++++++++++++++++++++++++++
 src/components/note-menu.tsx    |  2 +-
 src/locales/en/translation.json |  4 ++-
 src/routes/alert-rule.tsx       |  7 ++---
 src/routes/cron.tsx             |  3 ++-
 src/routes/notification.tsx     |  3 ++-
 src/routes/server.tsx           |  9 +++++++
 7 files changed, 64 insertions(+), 9 deletions(-)
 create mode 100644 src/components/copy-button.tsx

diff --git a/src/components/copy-button.tsx b/src/components/copy-button.tsx
new file mode 100644
index 0000000..ab2362d
--- /dev/null
+++ b/src/components/copy-button.tsx
@@ -0,0 +1,45 @@
+import { ButtonProps } from "@/components/ui/button"
+import { copyToClipboard } from "@/lib/utils"
+import { forwardRef } from "react"
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { toast } from "sonner"
+
+import { IconButton } from "./xui/icon-button"
+
+interface CopyButtonProps extends ButtonProps {
+    text?: string
+}
+
+export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>((props, ref) => {
+    const { t } = useTranslation()
+    const [copy, setCopy] = useState(false)
+
+    const switchState = async (text?: string) => {
+        if (!text) {
+            toast("Warning", {
+                description: t("EmptyText"),
+            })
+            return
+        }
+
+        if (!copy) {
+            setCopy(true)
+            await copyToClipboard(text)
+            setTimeout(() => {
+                setCopy(false)
+            }, 2 * 1000)
+        }
+    }
+
+    return (
+        <IconButton
+            {...props}
+            ref={ref}
+            variant="outline"
+            size="icon"
+            icon={copy ? "check" : "clipboard"}
+            onClick={() => switchState(props.text)}
+        />
+    )
+})
diff --git a/src/components/note-menu.tsx b/src/components/note-menu.tsx
index 00926b9..5e41824 100644
--- a/src/components/note-menu.tsx
+++ b/src/components/note-menu.tsx
@@ -23,7 +23,7 @@ export const NoteMenu = forwardRef<HTMLButtonElement, NoteMenuProps>((props, ref
     const switchState = async (text?: string) => {
         if (!text) {
             toast("Warning", {
-                description: "You didn't have any note.",
+                description: t("EmptyNote"),
             })
             return
         }
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 7e75e20..7ff67f4 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -176,5 +176,7 @@
     "OnlineUser": "Online User",
     "Total": "Total",
     "ConfirmBlock": "Confirm Block",
-    "RejectPassword": "Reject Password Login"
+    "RejectPassword": "Reject Password Login",
+    "EmptyText": "Text is empty",
+    "EmptyNote": "You didn't have any note."
 }
diff --git a/src/routes/alert-rule.tsx b/src/routes/alert-rule.tsx
index e385ed4..962b9e0 100644
--- a/src/routes/alert-rule.tsx
+++ b/src/routes/alert-rule.tsx
@@ -2,6 +2,7 @@ import { deleteAlertRules } from "@/api/alert-rule"
 import { swrFetcher } from "@/api/api"
 import { ActionButtonGroup } from "@/components/action-button-group"
 import { AlertRuleCard } from "@/components/alert-rule"
+import { CopyButton } from "@/components/copy-button"
 import { HeaderButtonGroup } from "@/components/header-button-group"
 import { NotificationTab } from "@/components/notification-tab"
 import { Checkbox } from "@/components/ui/checkbox"
@@ -87,11 +88,7 @@ export default function AlertRulePage() {
             header: t("Rules"),
             cell: ({ row }) => {
                 const s = row.original
-                return (
-                    <div className="max-w-48 whitespace-normal break-words">
-                        {JSON.stringify(s.rules)}
-                    </div>
-                )
+                return <CopyButton text={JSON.stringify(s.rules)} />
             },
         },
         {
diff --git a/src/routes/cron.tsx b/src/routes/cron.tsx
index 3b55820..d4b5975 100644
--- a/src/routes/cron.tsx
+++ b/src/routes/cron.tsx
@@ -1,6 +1,7 @@
 import { swrFetcher } from "@/api/api"
 import { deleteCron, runCron } from "@/api/cron"
 import { ActionButtonGroup } from "@/components/action-button-group"
+import { CopyButton } from "@/components/copy-button"
 import { CronCard } from "@/components/cron"
 import { HeaderButtonGroup } from "@/components/header-button-group"
 import { Checkbox } from "@/components/ui/checkbox"
@@ -86,7 +87,7 @@ export default function CronPage() {
             accessorKey: "command",
             cell: ({ row }) => {
                 const s = row.original
-                return <div className="max-w-48 whitespace-normal break-words">{s.command}</div>
+                return <CopyButton text={s.command} />
             },
         },
         {
diff --git a/src/routes/notification.tsx b/src/routes/notification.tsx
index 8999d39..51ab606 100644
--- a/src/routes/notification.tsx
+++ b/src/routes/notification.tsx
@@ -1,6 +1,7 @@
 import { swrFetcher } from "@/api/api"
 import { deleteNotification } from "@/api/notification"
 import { ActionButtonGroup } from "@/components/action-button-group"
+import { CopyButton } from "@/components/copy-button"
 import { HeaderButtonGroup } from "@/components/header-button-group"
 import { NotificationTab } from "@/components/notification-tab"
 import { NotifierCard } from "@/components/notifier"
@@ -93,7 +94,7 @@ export default function NotificationPage() {
             accessorFn: (row) => row.url,
             cell: ({ row }) => {
                 const s = row.original
-                return <div className="max-w-64 whitespace-normal break-words">{s.url}</div>
+                return <CopyButton text={s.url} />
             },
         },
         {
diff --git a/src/routes/server.tsx b/src/routes/server.tsx
index 62fc453..2cc0a60 100644
--- a/src/routes/server.tsx
+++ b/src/routes/server.tsx
@@ -1,6 +1,7 @@
 import { swrFetcher } from "@/api/api"
 import { deleteServer, forceUpdateServer } from "@/api/server"
 import { ActionButtonGroup } from "@/components/action-button-group"
+import { CopyButton } from "@/components/copy-button"
 import { HeaderButtonGroup } from "@/components/header-button-group"
 import { InstallCommandsMenu } from "@/components/install-commands"
 import { NoteMenu } from "@/components/note-menu"
@@ -121,6 +122,14 @@ export default function ServerPage() {
                 return <NoteMenu note={{ private: s.note, public: s.public_note }} />
             },
         },
+        {
+            id: "uuid",
+            header: "UUID",
+            cell: ({ row }) => {
+                const s = row.original
+                return <CopyButton text={s.uuid} />
+            },
+        },
         {
             id: "actions",
             header: t("Actions"),