feat: add copy code button with clipboard support to code viewer panel

Author: Prag-18

static/script.js

@@ -416,4 +416,69 @@ if (isDetailPage) {
     if (evt.key === "Escape") closeCodePanel();
   });
 
+  // ----------------------------------------------------------
+  // Copy Code button
+  // ----------------------------------------------------------
+  var btnCopyCode  = document.getElementById("btn-copy-code");
+  var copyToast    = document.getElementById("copy-toast");
+  var toastTimeout = null;
+
+  function showCopySuccess() {
+    if (!btnCopyCode) return;
+
+    // Swap icons on the button
+    var copyIcon  = btnCopyCode.querySelector(".copy-icon");
+    var checkIcon = btnCopyCode.querySelector(".check-icon");
+    var btnLabel  = btnCopyCode.querySelector(".copy-btn-label");
+
+    if (copyIcon)  copyIcon.style.display  = "none";
+    if (checkIcon) checkIcon.style.display = "inline";
+    if (btnLabel)  btnLabel.textContent    = "Copied!";
+    btnCopyCode.classList.add("copied");
+    btnCopyCode.disabled = true;
+
+    // Show toast
+    if (copyToast) {
+      copyToast.classList.add("show");
+    }
+
+    // Auto-reset after 2.5 s
+    clearTimeout(toastTimeout);
+    toastTimeout = setTimeout(function () {
+      if (copyIcon)  copyIcon.style.display  = "inline";
+      if (checkIcon) checkIcon.style.display = "none";
+      if (btnLabel)  btnLabel.textContent    = "Copy Code";
+      btnCopyCode.classList.remove("copied");
+      btnCopyCode.disabled = false;
+      if (copyToast) copyToast.classList.remove("show");
+    }, 2500);
+  }
+
+  if (btnCopyCode) {
+    btnCopyCode.addEventListener("click", function () {
+      var code = codeContentEl ? codeContentEl.textContent : "";
+      if (!code || code === "Loading..." || code === "Loading starter code...") return;
+
+      // Use Clipboard API with textarea fallback
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(code).then(showCopySuccess).catch(function () {
+          fallbackCopy(code);
+        });
+      } else {
+        fallbackCopy(code);
+      }
+    });
+  }
+
+  function fallbackCopy(text) {
+    var ta = document.createElement("textarea");
+    ta.value = text;
+    ta.style.cssText = "position:fixed;top:-9999px;left:-9999px;opacity:0";
+    document.body.appendChild(ta);
+    ta.focus();
+    ta.select();
+    try { document.execCommand("copy"); showCopySuccess(); } catch (e) { /* silent fail */ }
+    document.body.removeChild(ta);
+  }
+
 } // end isDetailPage

static/style.css

@@ -1440,6 +1440,60 @@ select:focus {
   transition: background var(--t);
 }
 .code-panel-close:hover { background: rgba(255,255,255,0.13); }
+
+/* Copy Code button */
+.btn-copy-code {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(79, 110, 247, 0.15);
+  border: 1px solid rgba(79, 110, 247, 0.35);
+  border-radius: var(--r-xs);
+  padding: 6px 14px;
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--indigo-500);
+  cursor: pointer;
+  transition: background var(--t), border-color var(--t), color var(--t), transform 0.1s ease;
+}
+.btn-copy-code:hover {
+  background: rgba(79, 110, 247, 0.28);
+  border-color: var(--indigo-500);
+  color: #a5b4fc;
+}
+.btn-copy-code:active { transform: scale(0.97); }
+.btn-copy-code.copied {
+  background: rgba(16, 185, 129, 0.18);
+  border-color: rgba(16, 185, 129, 0.4);
+  color: #6ee7b7;
+}
+
+/* Copy success toast */
+.copy-toast {
+  position: fixed;
+  bottom: 28px;
+  left: 50%;
+  transform: translateX(-50%) translateY(20px);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: #10b981;
+  color: #fff;
+  font-size: 0.88rem;
+  font-weight: 600;
+  padding: 10px 20px;
+  border-radius: var(--r-full);
+  box-shadow: 0 6px 24px rgba(16, 185, 129, 0.45);
+  z-index: 500;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.25s ease, transform 0.25s ease;
+}
+.copy-toast.show {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
 .code-viewer {
   flex: 1; overflow: auto;
   padding: 24px 28px;

templates/project.html

@@ -221,6 +221,11 @@ <h3 class="sidebar-card-title">
       </div>
       <div class="code-panel-actions">
         <a href="/project/{{ project.id }}/download" class="code-panel-download">Download file</a>
+        <button class="btn-copy-code" id="btn-copy-code" aria-label="Copy code to clipboard">
+          <svg class="copy-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+          <svg class="check-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="display:none"><polyline points="20 6 9 17 4 12"/></svg>
+          <span class="copy-btn-label">Copy Code</span>
+        </button>
         <button class="code-panel-close" id="code-panel-close">Close</button>
       </div>
     </div>
@@ -230,6 +235,12 @@ <h3 class="sidebar-card-title">
   <!-- Dark overlay behind the code panel -->
   <div class="code-panel-overlay" id="code-panel-overlay"></div>
 
+  <!-- Copy success toast notification -->
+  <div class="copy-toast" id="copy-toast" role="status" aria-live="polite">
+    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+    Copied to clipboard!
+  </div>
+
   <!-- ============================================================
        Footer
        ============================================================ -->
@@ -248,7 +259,7 @@ <h3 class="sidebar-card-title">
 
   <!-- Pass project ID to the JavaScript without hardcoding -->
   <script>
-    var PROJECT_ID = {{ project.id }};
+    var PROJECT_ID = parseInt("{{ project.id }}", 10);
   </script>
   <script src="/static/script.js"></script>
 </body>