add copy btn

Author: hhfrancois

public/src/app/app.html

@@ -181,10 +181,20 @@ <h3 i18n="@@installation.step1.title">Install the CLI</h3>
           <p i18n="@@installation.step1.desc">Download and install the CLI on your computer</p>
 
           <h4 i18n="@@installation.linux">Linux / macOS</h4>
-          <pre><code>curl -fsSL https://raw.githubusercontent.com/softwarity/aipilot-cli/main/install.sh | bash</code></pre>
+          <div class="code-block">
+            <pre><code>curl -fsSL https://raw.githubusercontent.com/softwarity/aipilot-cli/main/install.sh | bash</code></pre>
+            <button class="copy-btn" (click)="copyToClipboard('curl -fsSL https://raw.githubusercontent.com/softwarity/aipilot-cli/main/install.sh | bash', $event)">
+              <span class="material-icons">content_copy</span>
+            </button>
+          </div>
 
           <h4 i18n="@@installation.windows">Windows (PowerShell)</h4>
-          <pre><code>irm https://raw.githubusercontent.com/softwarity/aipilot-cli/main/install.ps1 | iex</code></pre>
+          <div class="code-block">
+            <pre><code>irm https://raw.githubusercontent.com/softwarity/aipilot-cli/main/install.ps1 | iex</code></pre>
+            <button class="copy-btn" (click)="copyToClipboard('irm https://raw.githubusercontent.com/softwarity/aipilot-cli/main/install.ps1 | iex', $event)">
+              <span class="material-icons">content_copy</span>
+            </button>
+          </div>
           <p i18n="@@installation.windowsAlt">Or download directly from <a href="https://github.com/softwarity/aipilot-cli/releases" target="_blank">GitHub Releases</a></p>
         </div>
       </div>

public/src/app/app.ts

@@ -37,4 +37,16 @@ export class App {
     // Chemin relatif: depuis /aipilot-cli/fr/ vers /aipilot-cli/en/
     return `../${lang.code}/`;
   }
+
+  copyToClipboard(text: string, event: Event): void {
+    if (!isPlatformBrowser(this.platformId)) return;
+    const btn = (event.currentTarget as HTMLElement);
+    const icon = btn.querySelector('.material-icons');
+    navigator.clipboard.writeText(text).then(() => {
+      if (icon) {
+        icon.textContent = 'check';
+        setTimeout(() => icon.textContent = 'content_copy', 1500);
+      }
+    });
+  }
 }

public/src/styles.scss

@@ -65,6 +65,39 @@ pre {
   }
 }
 
+.code-block {
+  position: relative;
+
+  .copy-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    padding: 4px;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .material-icons {
+      font-size: 16px;
+      color: var(--text-muted);
+    }
+
+    &:hover {
+      border-color: var(--accent-blue);
+
+      .material-icons { color: var(--accent-blue); }
+    }
+  }
+
+  &:hover .copy-btn { opacity: 1; }
+}
+
 h2 {
   font-size: 1.3rem;
   font-weight: 600;