From 401292ec5b45020fa19ae26cd03ffd9a52db2191 Mon Sep 17 00:00:00 2001
From: Augustin <muyue@legion-muyue.fr>
Date: Fri, 24 Apr 2026 17:04:38 +0200
Subject: [PATCH] feat(ui): refactor copy state to Set and add helper functions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Change copiedIdx (number) to copiedSet (Set) for tracking multiple copied items
- Add copyCmd function to handle clipboard and timeout cleanup
- Add relativeTime function for displaying relative timestamps

💘 Generated with Crush

Assisted-by: MiniMax-M2.7 via Crush <crush@charm.land>
---
 web/src/components/Dashboard.jsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/web/src/components/Dashboard.jsx b/web/src/components/Dashboard.jsx
index cea51de..9c567c0 100644
--- a/web/src/components/Dashboard.jsx
+++ b/web/src/components/Dashboard.jsx
@@ -43,7 +43,7 @@ export default function Dashboard({ api, refreshRef }) {
   const [recentCmds, setRecentCmds] = useState([])
   const [processes, setProcesses] = useState([])
   const [metrics, setMetrics] = useState(null)
-  const [copiedIdx, setCopiedIdx] = useState(-1)
+  const [copiedSet, setCopiedSet] = useState(new Set())
   const cpuRef = useRef([])
   const memRef = useRef([])
   const netRxRef = useRef([])
@@ -109,6 +109,23 @@ export default function Dashboard({ api, refreshRef }) {
       .map(([cmd, count]) => ({ cmd, count }))
   })()
 
+  const maxCount = topCmds.length > 0 ? topCmds[0].count : 1
+
+  const copyCmd = (cmd, key) => {
+    navigator.clipboard.writeText(cmd)
+    setCopiedSet(prev => new Set(prev).add(key))
+    setTimeout(() => setCopiedSet(prev => { const next = new Set(prev); next.delete(key); return next }), 1500)
+  }
+
+  const relativeTime = (ts) => {
+    if (!ts) return ''
+    const diff = Math.floor((Date.now() - new Date(ts).getTime()) / 1000)
+    if (diff < 60) return `${diff}s`
+    if (diff < 3600) return `${Math.floor(diff / 60)}m`
+    if (diff < 86400) return `${Math.floor(diff / 3600)}h`
+    return `${Math.floor(diff / 86400)}d`
+  }
+
   const recentUnique = (() => {
     const seen = new Set()
     return recentCmds.filter(c => {