refactor(docs): remove inline JS from docs template

- Removed ~400 lines of inline JavaScript from docs.templ
- Moved toggleSection function to docs.ts (now uses Alpine )
- Added highlightCurrentPage function to docs.ts
- Added initializeCodeCopyButtons function to docs.ts
- Updated template to use x-init for initialization
- Functions exported for use in Alpine.data

web/src/docs.ts

@@ -11,6 +11,24 @@ function toggleSidebar(): void {
   }
 }
 
+function toggleSection(el: HTMLElement): void {
+  const items = el.nextElementSibling as HTMLElement;
+  const arrow = el.querySelector(".section-arrow") as HTMLElement;
+  if (!items || !arrow) return;
+  
+  const isCollapsed = items.getAttribute("data-collapsed") === "true";
+
+  if (isCollapsed) {
+    items.classList.remove("hidden");
+    items.setAttribute("data-collapsed", "false");
+    arrow.style.transform = "rotate(0deg)";
+  } else {
+    items.classList.add("hidden");
+    items.setAttribute("data-collapsed", "true");
+    arrow.style.transform = "rotate(-90deg)";
+  }
+}
+
 function initializeDocsSearch(): void {
   const searchInput = document.getElementById(
     "docs-search",
@@ -89,14 +107,51 @@ function performDocsSearch(query: string): void {
   }
 }
 
-Alpine.data("docs", () => ({
-  toggleSidebar,
-  initializeSearch: initializeDocsSearch,
-}));
+function highlightCurrentPage(): void {
+  const currentPath = window.location.pathname;
+  document.querySelectorAll(".nav-item").forEach((item) => {
+    if (item.getAttribute("href") === currentPath) {
+      item.classList.add("text-accent", "bg-accent/10", "border-r-2", "border-accent");
+    }
+  });
+}
 
-export { toggleSidebar, initializeDocsSearch };
+function initializeCodeCopyButtons(): void {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const hljs = (window as any).hljs;
+  if (hljs) {
+    hljs.highlightAll();
+
+    document.querySelectorAll("pre code").forEach((block) => {
+      const pre = block.parentElement;
+      if (!pre) return;
+      
+      const wrapper = document.createElement("div");
+      wrapper.className = "relative group";
+      pre.parentNode.insertBefore(wrapper, pre);
+      wrapper.appendChild(pre);
+
+      const button = document.createElement("button");
+      button.className = "absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent";
+      button.textContent = "Copy";
+      button.onclick = async () => {
+        await navigator.clipboard.writeText(block.textContent || "");
+        button.textContent = "Copied!";
+        setTimeout(() => {
+          button.textContent = "Copy";
+        }, 2000);
+      };
+      wrapper.appendChild(button);
+    });
+  }
+}
 
 Alpine.data("docs", () => ({
   toggleSidebar,
+  toggleSection,
   initializeSearch: initializeDocsSearch,
+  highlightCurrentPage,
+  initializeCodeCopyButtons,
 }));
+
+export { toggleSidebar, toggleSection, initializeDocsSearch, highlightCurrentPage, initializeCodeCopyButtons };