From e21bca16a8f696cf0718035e0886ed4009e369dc Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Sun, 11 Jan 2026 04:38:52 +0100
Subject: [PATCH] feat: populate concept section in renderLesson function

- Add logic to populate concept explanation, diagram, and containerVsItem fields
- Show concept section when concept data exists, hide when not defined
- Clear optional fields to prevent stale data from previous lessons
- Use textContent for text fields and innerHTML for diagram (SVG support)
---
 src/helpers/renderer.js | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/src/helpers/renderer.js b/src/helpers/renderer.js
index c679c78..3da1911 100644
--- a/src/helpers/renderer.js
+++ b/src/helpers/renderer.js
@@ -149,6 +149,47 @@ export function renderLesson(titleEl, descriptionEl, taskEl, previewEl, prefixEl
 		inputEl.value = lesson.initialCode || "";
 	}
 
+	// Populate concept section if available
+	const conceptSection = document.getElementById("concept-section");
+	const conceptExplanation = document.getElementById("concept-explanation");
+	const conceptDiagram = document.getElementById("concept-diagram");
+	const conceptContainerVsItem = document.getElementById("concept-container-vs-item");
+
+	if (lesson.concept && lesson.concept.explanation) {
+		// Show the concept section
+		if (conceptSection) {
+			conceptSection.style.display = "";
+		}
+
+		// Populate explanation (required field)
+		if (conceptExplanation) {
+			conceptExplanation.textContent = lesson.concept.explanation;
+		}
+
+		// Populate optional diagram
+		if (conceptDiagram) {
+			if (lesson.concept.diagram) {
+				conceptDiagram.innerHTML = lesson.concept.diagram;
+			} else {
+				conceptDiagram.innerHTML = "";
+			}
+		}
+
+		// Populate optional containerVsItem explanation
+		if (conceptContainerVsItem) {
+			if (lesson.concept.containerVsItem) {
+				conceptContainerVsItem.textContent = lesson.concept.containerVsItem;
+			} else {
+				conceptContainerVsItem.textContent = "";
+			}
+		}
+	} else {
+		// Hide the concept section if no concept is defined
+		if (conceptSection) {
+			conceptSection.style.display = "none";
+		}
+	}
+
 	// Clear any existing feedback
 	clearFeedback();