feat: redesign sidebar progress to show milestone progress and total lessons

Author: nextlevelshit

src/app.js

@@ -164,7 +164,8 @@ const elements = {
 	refFooterLessonLinks: document.getElementById("ref-footer-lesson-links"),
 	sectionFooterLessonLinks: document.getElementById("section-footer-lesson-links"),
 	progressFill: document.getElementById("progress-fill"),
-	progressText: document.getElementById("progress-text"),
+	progressCurrent: document.getElementById("progress-current"),
+	progressTotal: document.getElementById("progress-total"),
 	milestonesContainer: document.getElementById("milestones"),
 	resetBtn: document.getElementById("reset-btn"),
 	disableFeedbackToggle: document.getElementById("disable-feedback-toggle"),
@@ -322,9 +323,11 @@ function updateProgressDisplay() {
 	elements.progressFill.style.width = `${progressPercent}%`;
 	elements.progressFill.style.setProperty('--progress-percent', progressPercent);
 
-	// Update progress text - show completed of total lessons
-	elements.progressText.textContent = t("progressTextMilestone", {
-		completed: stats.totalCompleted,
+	// Update progress current - show progress towards next milestone
+	elements.progressCurrent.textContent = `${stats.totalCompleted}/${stats.nextMilestone}`;
+
+	// Update progress total - show total lessons
+	elements.progressTotal.textContent = t("progressTotal", {
 		total: stats.totalLessons
 	});
 

src/i18n.js

@@ -41,6 +41,7 @@ const translations = {
 		progress: "Progress",
 		progressText: "{percent}% Complete ({completed}/{total})",
 		progressTextMilestone: "{completed} of {total} lessons completed",
+		progressTotal: "{total} lessons total",
 		lessons: "Lessons",
 		settings: "Settings",
 		showHints: "Show Hints",
@@ -264,6 +265,7 @@ const translations = {
 		progress: "Fortschritt",
 		progressText: "{percent}% abgeschlossen ({completed}/{total})",
 		progressTextMilestone: "{completed} von {total} Lektionen abgeschlossen",
+		progressTotal: "{total} Lektionen insgesamt",
 		lessons: "Lektionen",
 		settings: "Einstellungen",
 		showHints: "Hinweise anzeigen",
@@ -487,6 +489,7 @@ const translations = {
 		progress: "Postęp",
 		progressText: "{percent}% ukończone ({completed}/{total})",
 		progressTextMilestone: "{completed} z {total} lekcji ukończonych",
+		progressTotal: "{total} lekcji łącznie",
 		lessons: "Lekcje",
 		settings: "Ustawienia",
 		showHints: "Pokaż podpowiedzi",
@@ -709,6 +712,7 @@ const translations = {
 		progress: "Progreso",
 		progressText: "{percent}% completado ({completed}/{total})",
 		progressTextMilestone: "{completed} de {total} lecciones completadas",
+		progressTotal: "{total} lecciones en total",
 		lessons: "Lecciones",
 		settings: "Configuración",
 		showHints: "Mostrar pistas",
@@ -933,6 +937,7 @@ const translations = {
 		progress: "التقدم",
 		progressText: "{percent}% مكتمل ({completed}/{total})",
 		progressTextMilestone: "{completed} من {total} درس مكتمل",
+		progressTotal: "{total} درس إجمالي",
 		lessons: "الدروس",
 		settings: "الإعدادات",
 		showHints: "إظهار التلميحات",
@@ -1152,6 +1157,7 @@ const translations = {
 		progress: "Прогрес",
 		progressText: "{percent}% завершено ({completed}/{total})",
 		progressTextMilestone: "{completed} з {total} уроків завершено",
+		progressTotal: "{total} уроків всього",
 		lessons: "Уроки",
 		settings: "Налаштування",
 		showHints: "Показувати підказки",

src/index.html

@@ -476,10 +476,13 @@ <h4 data-i18n="progress">Progress</h4>
 							<span class="milestone" data-value="75">75</span>
 							<span class="milestone" data-value="100">100</span>
 						</div>
-						<div class="progress-bar">
-							<div class="progress-fill" id="progress-fill"></div>
+						<div class="progress-bar-row">
+							<div class="progress-bar">
+								<div class="progress-fill" id="progress-fill"></div>
+							</div>
+							<span class="progress-current" id="progress-current">0/1</span>
 						</div>
-						<span class="progress-text" id="progress-text">0 of 100</span>
+						<span class="progress-total" id="progress-total">0 of 100 lessons</span>
 					</div>
 				</div>
 

src/main.css

@@ -1040,6 +1040,28 @@ nav.sidebar-section {
 	color: var(--light-text);
 }
 
+.progress-bar-row {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-sm);
+}
+
+.progress-bar-row .progress-bar {
+	flex: 1;
+}
+
+.progress-current {
+	font-size: 0.85rem;
+	font-weight: 600;
+	color: var(--text-color);
+	white-space: nowrap;
+}
+
+.progress-total {
+	font-size: 0.75rem;
+	color: var(--light-text);
+}
+
 /* Milestone Progress */
 .milestone-progress {
 	gap: var(--spacing-sm);