From 7c4aa1c88b2702c4ee10abf8aea342a3a52dd3fc Mon Sep 17 00:00:00 2001
From: Zied <zinzied@gmail.com>
Date: Wed, 25 Feb 2026 11:19:01 +0100
Subject: [PATCH] feat: add copy full content button

---
 web-app/src/pages/SkillDetail.jsx | 34 ++++++++++++++++++++++++-------
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/web-app/src/pages/SkillDetail.jsx b/web-app/src/pages/SkillDetail.jsx
index 4d7c99df..ddc448db 100644
--- a/web-app/src/pages/SkillDetail.jsx
+++ b/web-app/src/pages/SkillDetail.jsx
@@ -10,6 +10,7 @@ export function SkillDetail() {
     const [content, setContent] = useState('');
     const [loading, setLoading] = useState(true);
     const [copied, setCopied] = useState(false);
+    const [copiedFull, setCopiedFull] = useState(false);
     const [error, setError] = useState(null);
     const [customContext, setCustomContext] = useState('');
 
@@ -61,6 +62,16 @@ export function SkillDetail() {
         setTimeout(() => setCopied(false), 2000);
     };
 
+    const copyFullToClipboard = () => {
+        const finalPrompt = customContext.trim()
+            ? `${content}\n\nContext:\n${customContext}`
+            : content;
+
+        navigator.clipboard.writeText(finalPrompt);
+        setCopiedFull(true);
+        setTimeout(() => setCopiedFull(false), 2000);
+    };
+
     if (loading) {
         return (
             <div className="flex items-center justify-center min-h-[50vh]">
@@ -109,13 +120,22 @@ export function SkillDetail() {
                                 {skill.description}
                             </p>
                         </div>
-                        <button
-                            onClick={copyToClipboard}
-                            className="flex items-center justify-center space-x-2 bg-slate-900 hover:bg-slate-800 text-white dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-200 px-4 py-2.5 rounded-lg font-medium transition-colors min-w-[140px]"
-                        >
-                            {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-                            <span>{copied ? 'Copied!' : 'Copy Prompt'}</span>
-                        </button>
+                        <div className="flex flex-col sm:flex-row gap-2">
+                            <button
+                                onClick={copyToClipboard}
+                                className="flex items-center justify-center space-x-2 bg-slate-100 hover:bg-slate-200 text-slate-900 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700 px-4 py-2.5 rounded-lg font-medium transition-colors min-w-[140px] border border-slate-200 dark:border-slate-700"
+                            >
+                                {copied ? <Check className="h-4 w-4 text-green-600 dark:text-green-400" /> : <Copy className="h-4 w-4" />}
+                                <span>{copied ? 'Copied!' : 'Copy @Skill'}</span>
+                            </button>
+                            <button
+                                onClick={copyFullToClipboard}
+                                className="flex items-center justify-center space-x-2 bg-slate-900 hover:bg-slate-800 text-white dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-200 px-4 py-2.5 rounded-lg font-medium transition-colors min-w-[140px]"
+                            >
+                                {copiedFull ? <Check className="h-4 w-4 text-green-400" /> : <FileCode className="h-4 w-4" />}
+                                <span>{copiedFull ? 'Copied Content!' : 'Copy Full Content'}</span>
+                            </button>
+                        </div>
                     </div>
 
                     <div className="mt-6 border-t border-slate-200 dark:border-slate-800 pt-6">