feat: add header level pill on desktop, use native details/summary for sidebar

- Add lesson indicator pill to header (visible on desktop only)
- Logo stays centered, pill on left with burger menu
- Replace emoji arrows with CSS triangles for iOS compatibility
- Use native <details>/<summary> for expand/collapse
- Update tests for new implementation

src/app.js

@@ -48,6 +48,7 @@ const elements = {
 	prevBtn: document.getElementById("prev-btn"),
 	nextBtn: document.getElementById("next-btn"),
 	levelIndicator: document.getElementById("level-indicator"),
+	headerLevelPill: document.getElementById("header-level-pill"),
 
 	// Sidebar
 	sidebarDrawer: document.getElementById("sidebar-drawer"),
@@ -478,6 +479,7 @@ function loadCurrentLesson() {
 
 	// Update level indicator
 	renderLevelIndicator(elements.levelIndicator, engineState.lessonIndex + 1, engineState.totalLessons);
+	renderLevelIndicator(elements.headerLevelPill, engineState.lessonIndex + 1, engineState.totalLessons);
 
 	// Update active lesson in sidebar
 	updateActiveLessonInSidebar(engineState.module.id, engineState.lessonIndex);

src/helpers/renderer.js

@@ -32,30 +32,21 @@ export function renderModuleList(container, modules, onSelectModule, onSelectLes
 	// Create list items for each module
 	modules.forEach((module) => {
 		// Create module container
-		const moduleContainer = document.createElement("div");
+		// Use native <details>/<summary> for expand/collapse
+		const moduleContainer = document.createElement("details");
 		moduleContainer.classList.add("module-container");
-		moduleContainer.setAttribute("role", "treeitem");
+		moduleContainer.dataset.moduleId = module.id;
 
-		// Create module header item (clickable to expand/collapse)
+		// Create module header using <summary>
-		const moduleHeader = document.createElement("button");
+		const moduleHeader = document.createElement("summary");
-		moduleHeader.type = "button";
 		moduleHeader.classList.add("module-list-item", "module-header");
 		moduleHeader.dataset.moduleId = module.id;
-		moduleHeader.setAttribute("aria-expanded", "false");
-		moduleHeader.setAttribute("aria-controls", `lessons-${module.id}`);
 
-		// Create module title with expand/collapse indicator
+		// Create module title
 		const moduleTitle = document.createElement("span");
 		moduleTitle.classList.add("module-title");
 		moduleTitle.textContent = module.title;
 
-		// Create expand/collapse icon
-		const expandIcon = document.createElement("span");
-		expandIcon.classList.add("expand-icon");
-		expandIcon.setAttribute("aria-hidden", "true");
-		expandIcon.innerHTML = "▶"; // Right-pointing triangle
-
-		moduleHeader.appendChild(expandIcon);
 		moduleHeader.appendChild(moduleTitle);
 
 		// Check if the module is completed
@@ -63,13 +54,10 @@ export function renderModuleList(container, modules, onSelectModule, onSelectLes
 			moduleHeader.classList.add("completed");
 		}
 
-		// Lessons container (initially hidden)
+		// Lessons container
 		const lessonsContainer = document.createElement("div");
 		lessonsContainer.classList.add("lessons-container");
 		lessonsContainer.id = `lessons-${module.id}`;
-		lessonsContainer.setAttribute("role", "group");
-		lessonsContainer.setAttribute("aria-label", `${module.title} lessons`);
-		lessonsContainer.style.display = "none"; // Initially collapsed
 
 		// Create list items for each lesson in this module
 		module.lessons.forEach((lesson, index) => {
@@ -105,17 +93,6 @@ export function renderModuleList(container, modules, onSelectModule, onSelectLes
 			lessonsContainer.appendChild(lessonItem);
 		});
 
-		// Toggle expand/collapse when clicking on module header
-		moduleHeader.addEventListener("click", () => {
-			// Toggle visibility of lessons container
-			const isExpanded = lessonsContainer.style.display !== "none";
-			lessonsContainer.style.display = isExpanded ? "none" : "block";
-
-			// Update expand/collapse icon and ARIA state
-			expandIcon.innerHTML = isExpanded ? "▶" : "▼";
-			moduleHeader.setAttribute("aria-expanded", String(!isExpanded));
-		});
-
 		// Add module header and lessons container to module container
 		moduleContainer.appendChild(moduleHeader);
 		moduleContainer.appendChild(lessonsContainer);
@@ -233,20 +210,10 @@ export function updateActiveLessonInSidebar(moduleId, lessonIndex) {
 	if (currentLessonItem) {
 		currentLessonItem.classList.add("active");
 
-		// Make sure parent module is expanded
+		// Make sure parent module is expanded (native <details> element)
-		const parentLessonsContainer = currentLessonItem.parentElement;
+		const parentDetails = currentLessonItem.closest("details.module-container");
-		if (parentLessonsContainer && parentLessonsContainer.classList.contains("lessons-container")) {
+		if (parentDetails) {
-			parentLessonsContainer.style.display = "block";
+			parentDetails.open = true;
-
-			// Update expand icon and ARIA state
-			const moduleHeader = parentLessonsContainer.previousElementSibling;
-			if (moduleHeader) {
-				moduleHeader.setAttribute("aria-expanded", "true");
-				const expandIcon = moduleHeader.querySelector(".expand-icon");
-				if (expandIcon) {
-					expandIcon.innerHTML = "▼"; // Down arrow when expanded
-				}
-			}
 
 			// Scroll to the top of the page
 			document.querySelector("html").scrollTop = 0;

src/index.html

@@ -15,9 +15,12 @@
 		<a href="#main-content" class="skip-link" data-i18n="skipLink">Skip to main content</a>
 		<div class="app-container">
 			<header class="header">
+				<div class="header-left">
 					<button id="menu-btn" class="menu-toggle" data-i18n-aria-label="menuOpen" aria-label="Open menu">
 						<span class="hamburger-icon"></span>
 					</button>
+					<span class="header-level-pill" id="header-level-pill"></span>
+				</div>
 				<a href="#" id="logo-link" class="logo">
 					<img src="./bowl.png" width="40" alt="CODE CRISPIES Logo" />
 					<h1><span class="code-text">CODE</span><span class="crispies-text">CRISPIES</span></h1>

src/main.css

@@ -140,6 +140,47 @@ kbd {
 	background: var(--primary-bg-light);
 }
 
+.header-level-pill {
+	display: none;
+	padding: 4px 12px;
+	background: var(--primary-bg-light);
+	border-radius: 16px;
+	font-size: 0.8rem;
+	color: var(--text-muted);
+	white-space: nowrap;
+	margin-left: var(--spacing-sm);
+}
+
+.header-left {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-sm);
+}
+
+@media (min-width: 769px) {
+	.header-level-pill {
+		display: block;
+	}
+
+	.header {
+		display: grid;
+		grid-template-columns: 1fr auto 1fr;
+		align-items: center;
+	}
+
+	.header-left {
+		justify-self: start;
+	}
+
+	.header .logo {
+		justify-self: center;
+	}
+
+	.header-actions {
+		justify-self: end;
+	}
+}
+
 .hamburger-icon {
 	position: relative;
 	width: 18px;
@@ -936,18 +977,42 @@ nav.sidebar-section {
 	background: var(--primary-bg-light);
 }
 
-.module-header.completed::before {
+/* Native details/summary styling */
-	content: "✓";
+details.module-container {
-	margin-right: 6px;
+	margin: 0;
-	color: var(--success-color);
 }
 
-.expand-icon {
+summary.module-header {
+	list-style: none;
+	cursor: pointer;
+}
+
+summary.module-header::-webkit-details-marker {
+	display: none;
+}
+
+summary.module-header::before {
+	content: "";
+	display: inline-block;
+	width: 0;
+	height: 0;
 	margin-right: 8px;
-	font-size: 10px;
+	border-top: 5px solid transparent;
+	border-bottom: 5px solid transparent;
+	border-left: 6px solid var(--text-muted);
 	transition: transform 0.2s;
 }
 
+details.module-container[open] > summary.module-header::before {
+	transform: rotate(90deg);
+}
+
+.module-header.completed::after {
+	content: "✓";
+	margin-left: 8px;
+	color: var(--success-color);
+}
+
 .lessons-container {
 	margin-left: 16px;
 	border-left: 2px solid var(--border-color);
@@ -1575,10 +1640,16 @@ input:checked + .toggle-slider::before {
 	padding-right: 8px;
 }
 
-/* RTL: Module expand icon */
+/* RTL: Module expand icon (CSS triangle) */
-[dir="rtl"] .module-header .expand-icon {
+[dir="rtl"] summary.module-header::before {
-	margin-left: 6px;
+	margin-left: 8px;
 	margin-right: 0;
+	border-left: none;
+	border-right: 6px solid var(--text-muted);
+}
+
+[dir="rtl"] details.module-container[open] > summary.module-header::before {
+	transform: rotate(-90deg);
 }
 
 /* RTL: Lesson checkmark position */

tests/unit/renderer.test.js

@@ -55,16 +55,16 @@ describe("Renderer Module", () => {
 
 			renderModuleList(container, modules, vi.fn(), onSelectLesson);
 
-			// Lessons should be hidden initially
+			// Module should be collapsed initially (native <details> element)
-			const lessonsContainer = container.querySelector(".lessons-container");
+			const detailsElement = container.querySelector("details.module-container");
-			expect(lessonsContainer.style.display).toBe("none");
+			expect(detailsElement.open).toBe(false);
 
-			// Click module header to expand
+			// Click module header (summary) to expand
-			const moduleHeader = container.querySelector(".module-header");
+			const moduleHeader = container.querySelector("summary.module-header");
 			moduleHeader.click();
 
-			// Lessons should now be visible
+			// Module should now be expanded
-			expect(lessonsContainer.style.display).toBe("block");
+			expect(detailsElement.open).toBe(true);
 
 			// Click a lesson
 			const lessonItems = container.querySelectorAll(".lesson-list-item");