fix: enhance clipboard copy functionality with fallback for unsupport… (#15)

frontend/src/components/GroupCard.tsx

@@ -11,10 +11,10 @@ interface GroupCardProps {
   onDelete: (groupId: string) => void
 }
 
-const GroupCard = ({ 
-  group, 
-  servers, 
-  onEdit, 
+const GroupCard = ({
+  group,
+  servers,
+  onEdit,
   onDelete
 }: GroupCardProps) => {
   const { t } = useTranslation()
@@ -35,10 +35,31 @@ const GroupCard = ({
   }
 
   const copyToClipboard = () => {
-    navigator.clipboard.writeText(group.id).then(() => {
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    })
+    if (navigator.clipboard && window.isSecureContext) {
+      navigator.clipboard.writeText(group.id).then(() => {
+        setCopied(true)
+        setTimeout(() => setCopied(false), 2000)
+      })
+    } else {
+      // Fallback for HTTP or unsupported clipboard API
+      const textArea = document.createElement('textarea')
+      textArea.value = group.id
+      // Avoid scrolling to bottom
+      textArea.style.position = 'fixed'
+      textArea.style.left = '-9999px'
+      document.body.appendChild(textArea)
+      textArea.focus()
+      textArea.select()
+      try {
+        document.execCommand('copy')
+        setCopied(true)
+        setTimeout(() => setCopied(false), 2000)
+      } catch (err) {
+        alert(t('common.copyFailed') || 'Copy failed')
+        console.error('Copy to clipboard failed:', err)
+      }
+      document.body.removeChild(textArea)
+    }
   }
 
   // Get servers that belong to this group
@@ -52,7 +73,7 @@ const GroupCard = ({
             <h2 className="text-xl font-semibold text-gray-800">{group.name}</h2>
             <div className="flex items-center ml-3">
               <span className="text-xs text-gray-500 mr-1">{group.id}</span>
-              <button 
+              <button
                 onClick={copyToClipboard}
                 className="p-1 text-gray-400 hover:text-gray-600 transition-colors"
                 title={t('common.copy')}
@@ -92,15 +113,14 @@ const GroupCard = ({
         ) : (
           <div className="flex flex-wrap gap-2 mt-2">
             {groupServers.map(server => (
-              <div 
+              <div
                 key={server.name}
                 className="inline-flex items-center px-3 py-1 bg-gray-50 rounded"
               >
                 <span className="font-medium text-gray-700 text-sm">{server.name}</span>
-                <span className={`ml-2 inline-block h-2 w-2 rounded-full ${
-                  server.status === 'connected' ? 'bg-green-500' : 
-                  server.status === 'connecting' ? 'bg-yellow-500' : 'bg-red-500'
-                }`}></span>
+                <span className={`ml-2 inline-block h-2 w-2 rounded-full ${server.status === 'connected' ? 'bg-green-500' :
+                    server.status === 'connecting' ? 'bg-yellow-500' : 'bg-red-500'
+                  }`}></span>
               </div>
             ))}
           </div>