From e866b0ca1ce3a0f8a319330b267f09e916fec30e Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Fri, 16 Jan 2026 04:38:13 +0100
Subject: [PATCH] feat: add comprehensive analytics tracking and enhance
 practice links

- Add tracking for: coming_soon_click, external_link, header_nav_click,
  footer_link, practice_link, expected_toggle
- Enhance practice links (.ref-see-also) with gradient background and
  button-like styling to encourage learning
- Simplify reference nav (remove sticky positioning)
---
 src/app.js   | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 src/main.css | 26 +++++++++++++++-----------
 2 files changed, 62 insertions(+), 11 deletions(-)

diff --git a/src/app.js b/src/app.js
index cde104f..a199904 100644
--- a/src/app.js
+++ b/src/app.js
@@ -225,6 +225,13 @@ function closeSidebar() {
 function toggleExpectedResult() {
 	state.showExpected = !state.showExpected;
 
+	const engineState = lessonEngine.getCurrentState();
+	track("expected_toggle", {
+		show: state.showExpected,
+		module: engineState.module?.id,
+		lesson: engineState.lessonIndex
+	});
+
 	if (state.showExpected) {
 		elements.expectedOverlay.classList.add("visible");
 		elements.showExpectedBtn.textContent = t("hideExpected");
@@ -2458,6 +2465,46 @@ function init() {
 		if (codeEditor) codeEditor.focus();
 	});
 
+	// Track clicks on "Coming Soon" disabled topic links
+	document.addEventListener("click", (e) => {
+		const disabledLink = e.target.closest(".topic-link-disabled");
+		if (disabledLink) {
+			const topicText = disabledLink.textContent.replace("Coming Soon", "").trim();
+			track("coming_soon_click", { topic: topicText });
+		}
+	});
+
+	// Track external link clicks
+	document.addEventListener("click", (e) => {
+		const link = e.target.closest('a[target="_blank"]');
+		if (link) {
+			track("external_link", { url: link.href, text: link.textContent.trim() });
+		}
+	});
+
+	// Track header nav link clicks (CSS, HTML, Tailwind)
+	document.querySelectorAll(".nav-link[data-section]").forEach((link) => {
+		link.addEventListener("click", () => {
+			track("header_nav_click", { section: link.dataset.section });
+		});
+	});
+
+	// Track footer link clicks
+	document.addEventListener("click", (e) => {
+		const footerLink = e.target.closest(".landing-footer a, .section-footer a, .reference-footer a");
+		if (footerLink && !footerLink.target) {
+			track("footer_link", { href: footerLink.getAttribute("href"), text: footerLink.textContent.trim() });
+		}
+	});
+
+	// Track practice/reference cross-links
+	document.addEventListener("click", (e) => {
+		const refLink = e.target.closest(".ref-see-also a");
+		if (refLink) {
+			track("practice_link", { href: refLink.getAttribute("href"), text: refLink.textContent.trim() });
+		}
+	});
+
 	// Keyboard shortcuts
 	document.addEventListener("keydown", (e) => {
 		// Ctrl+Enter to run code
diff --git a/src/main.css b/src/main.css
index 12f131d..6479c54 100644
--- a/src/main.css
+++ b/src/main.css
@@ -2372,10 +2372,6 @@ input:checked + .toggle-slider::before {
 	background: var(--panel-bg);
 	border-radius: var(--border-radius-md);
 	margin-bottom: var(--spacing-lg);
-	position: sticky;
-	top: 0;
-	z-index: 10;
-	box-shadow: var(--shadow);
 }
 
 .ref-nav-link {
@@ -2532,20 +2528,28 @@ input:checked + .toggle-slider::before {
 /* Cross-reference links in reference pages */
 .ref-see-also {
 	margin-top: var(--spacing-lg);
-	padding-top: var(--spacing-md);
-	border-top: 1px solid var(--border-color);
-	font-size: 0.9rem;
-	color: var(--light-text);
+	padding: var(--spacing-md);
+	background: linear-gradient(135deg, rgba(155, 89, 182, 0.1), rgba(0, 188, 212, 0.1));
+	border-radius: var(--border-radius-md);
+	font-size: 0.95rem;
+	color: var(--text-color);
+	border: 1px solid rgba(155, 89, 182, 0.2);
 }
 
 .ref-see-also a {
-	color: var(--primary-color);
+	color: var(--section-color, var(--primary-color));
 	text-decoration: none;
-	font-weight: 500;
+	font-weight: 600;
+	padding: 0.25rem 0.5rem;
+	background: rgba(255, 255, 255, 0.1);
+	border-radius: var(--border-radius-sm);
+	transition: background 0.2s, transform 0.2s;
 }
 
 .ref-see-also a:hover {
-	text-decoration: underline;
+	background: var(--section-color, var(--primary-color));
+	color: white;
+	transform: translateY(-1px);
 }
 
 /* Responsive reference tables */