@burdenoff/microfe-technospam 2026.1030.4 → 2026.1030.6

package/dist/technospam/pages/CoursesCourseDetailsPagePage.js

@@ -1,21 +1,22 @@
-import { useTechnoSpam as e } from "../providers/TechnoSpamProvider.js";
-import { useTechnoSpamAnalytics as t } from "../hooks/useTechnoSpamAnalytics.js";
-import { cn as n } from "../utils/cn.js";
-import { PageLayout as r } from "../components/PageLayout.js";
-import { StatCard as i } from "../components/StatCard.js";
-import { MediaCover as a, topicIcon as o } from "../components/MediaCover.js";
-import { formatDate as s, formatDuration as c, humanizeEnum as l } from "../utils/format.js";
-import { EmptyView as u, ErrorView as ee } from "../components/StateViews.js";
-import { TagStrip as te } from "../components/TagStrip.js";
-import { PremiumBadge as ne, UpgradeGate as d } from "../components/UpgradeGate.js";
-import { notify as f } from "../lib/toast.js";
-import { useCourseQuery as re, useEnroll as ie, useIssueCertificate as p, useMyCertificatesQuery as m, useUpdateProgress as ae } from "../api/technospamApi.js";
+import { useTechnoSpam as e, useTechnoSpamNavigate as t } from "../providers/TechnoSpamProvider.js";
+import { useTechnoSpamAnalytics as n } from "../hooks/useTechnoSpamAnalytics.js";
+import { cn as r } from "../utils/cn.js";
+import { PageLayout as i } from "../components/PageLayout.js";
+import { StatCard as a } from "../components/StatCard.js";
+import { MediaCover as o, topicIcon as s } from "../components/MediaCover.js";
+import { formatDate as c, formatDuration as l, humanizeEnum as u } from "../utils/format.js";
+import { EmptyView as d, ErrorView as ee } from "../components/StateViews.js";
+import { TagStrip as f } from "../components/TagStrip.js";
+import { PremiumBadge as te, UpgradeGate as p } from "../components/UpgradeGate.js";
+import { notify as m } from "../lib/toast.js";
+import { useCourseQuery as ne, useEnroll as re, useIssueCertificate as ie, useMyCertificatesQuery as ae } from "../api/technospamApi.js";
 import "../components/index.js";
 import { FOCUS_PARAMS as oe } from "../utils/pageContext.js";
-import { useFocusedRecordParam as se } from "../hooks/useFocusedRecordParam.js";
-import { useEffect as h } from "react";
-import { Award as g, BookOpen as _, CheckCircle2 as v, ChevronDown as y, Clock as b, Eye as x, FileText as S, Layers as C, Lock as w, PlayCircle as T, ShieldCheck as E, Sparkles as D, TrendingUp as O, Trophy as k, Users as ce } from "lucide-react";
-import { useSearchParams as A } from "react-router";
+import { lessonPlayerPath as se } from "../utils/lessonPath.js";
+import { useFocusedRecordParam as ce } from "../hooks/useFocusedRecordParam.js";
+import { useEffect as le } from "react";
+import { ArrowRight as h, Award as g, BookOpen as _, CheckCircle2 as v, ChevronDown as y, Clock as b, Eye as x, FileText as S, Layers as C, Lock as w, PlayCircle as T, ShieldCheck as E, Sparkles as D, TrendingUp as O, Trophy as k, Users as A } from "lucide-react";
+import { useSearchParams as ue } from "react-router";
 import { jsx as j, jsxs as M } from "react/jsx-runtime";
 import { Button as N, GlassCard as P, Skeleton as F } from "@burdenoff/fe-libs/ui";
 //#region src/technospam/pages/CoursesCourseDetailsPagePage.tsx
@@ -52,15 +53,15 @@ function L({ icon: e, children: t }) {
 		children: [e ? /* @__PURE__ */ j(e, { size: 12 }) : null, t]
 	});
 }
-function R({ lesson: e, index: t, done: r, open: i, onToggle: a }) {
-	let o = I[e.kind] ?? I.ARTICLE, s = o.icon, u = `tec-lesson-body-${e.id}`;
+function de({ lesson: e, index: t, done: n, open: i, onToggle: a, onStart: o }) {
+	let s = I[e.kind] ?? I.ARTICLE, c = s.icon, d = `tec-lesson-body-${e.id}`;
 	return /* @__PURE__ */ M("div", {
 		className: "border-b border-border-seam last:border-b-0",
 		children: [/* @__PURE__ */ M("button", {
 			type: "button",
 			onClick: a,
 			"aria-expanded": i,
-			"aria-controls": u,
+			"aria-controls": d,
 			className: "group flex w-full items-center gap-3 rounded-xl px-2 py-3 text-left transition-colors hover:bg-bg-sunken/60",
 			children: [
 				/* @__PURE__ */ j("span", {
@@ -68,8 +69,8 @@ function R({ lesson: e, index: t, done: r, open: i, onToggle: a }) {
 					children: t + 1
 				}),
 				/* @__PURE__ */ j("span", {
-					className: n("flex h-9 w-9 shrink-0 items-center justify-center rounded-lg", r ? "bg-status-success-bg-subtle text-status-success-text" : o.chip),
-					children: j(r ? v : s, { size: 17 })
+					className: r("flex h-9 w-9 shrink-0 items-center justify-center rounded-lg", n ? "bg-status-success-bg-subtle text-status-success-text" : s.chip),
+					children: j(n ? v : c, { size: 17 })
 				}),
 				/* @__PURE__ */ M("div", {
 					className: "min-w-0 flex-1",
@@ -79,21 +80,21 @@ function R({ lesson: e, index: t, done: r, open: i, onToggle: a }) {
 					}), /* @__PURE__ */ M("div", {
 						className: "mt-1 flex flex-wrap items-center gap-2",
 						children: [/* @__PURE__ */ j("span", {
-							className: n("inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium", o.badge),
-							children: l(e.kind)
+							className: r("inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium", s.badge),
+							children: u(e.kind)
 						}), /* @__PURE__ */ M("span", {
 							className: "inline-flex items-center gap-1 text-xs text-text-muted",
 							children: [
 								/* @__PURE__ */ j(b, { size: 12 }),
 								" ",
-								c(e.estimatedMinutes)
+								l(e.estimatedMinutes)
 							]
 						})]
 					})]
 				}),
 				/* @__PURE__ */ M("div", {
 					className: "flex shrink-0 items-center gap-2",
-					children: [r ? /* @__PURE__ */ j(v, {
+					children: [n ? /* @__PURE__ */ j(v, {
 						size: 18,
 						className: "text-status-success-text"
 					}) : e.isPreview ? /* @__PURE__ */ M("span", {
@@ -108,30 +109,39 @@ function R({ lesson: e, index: t, done: r, open: i, onToggle: a }) {
 					}), /* @__PURE__ */ j(y, {
 						size: 16,
 						"aria-hidden": !0,
-						className: n("text-text-muted transition-transform duration-200", i ? "rotate-180" : "")
+						className: r("text-text-muted transition-transform duration-200", i ? "rotate-180" : "")
 					})]
 				})
 			]
 		}), i ? /* @__PURE__ */ j("div", {
-			id: u,
+			id: d,
 			className: "px-2 pb-4 sm:pl-11",
-			children: e.isLocked ? /* @__PURE__ */ j(d, {
+			children: e.isLocked ? /* @__PURE__ */ j(p, {
 				compact: !0,
 				description: "This lesson is part of a paid TechnoSpam plan — its content unlocks once your workspace upgrades."
-			}) : e.content ? /* @__PURE__ */ j("div", {
-				className: "rounded-xl border border-border-seam bg-bg-sunken p-4",
-				children: /* @__PURE__ */ j("p", {
-					className: "whitespace-pre-wrap text-sm leading-relaxed text-text-secondary",
-					children: e.content
-				})
-			}) : /* @__PURE__ */ j("p", {
-				className: "rounded-xl border border-dashed border-border-seam px-4 py-3 text-sm text-text-muted",
-				children: "No content published for this lesson yet."
+			}) : /* @__PURE__ */ M("div", {
+				className: "space-y-3",
+				children: [e.content ? /* @__PURE__ */ j("div", {
+					className: "rounded-xl border border-border-seam bg-bg-sunken p-4",
+					children: /* @__PURE__ */ j("p", {
+						className: "line-clamp-6 whitespace-pre-wrap text-sm leading-relaxed text-text-secondary",
+						children: e.content
+					})
+				}) : null, /* @__PURE__ */ M(N, {
+					size: "sm",
+					onClick: o,
+					"data-testid": `open-lesson-${e.id}`,
+					children: [
+						/* @__PURE__ */ j(T, { size: 15 }),
+						" ",
+						n ? "Review lesson" : "Start lesson"
+					]
+				})]
 			})
 		}) : null]
 	});
 }
-function z({ certificate: e, learnerName: t, courseTitle: n }) {
+function fe({ certificate: e, learnerName: t, courseTitle: n }) {
 	let r = e.status === "REVOKED";
 	return /* @__PURE__ */ M(P, {
 		className: "overflow-hidden p-0",
@@ -184,7 +194,7 @@ function z({ certificate: e, learnerName: t, courseTitle: n }) {
 							children: "Issued on"
 						}), /* @__PURE__ */ j("div", {
 							className: "text-sm text-text-primary",
-							children: s(e.issuedAt)
+							children: c(e.issuedAt)
 						})] })
 					]
 				}),
@@ -192,7 +202,7 @@ function z({ certificate: e, learnerName: t, courseTitle: n }) {
 					className: "rounded-lg border border-status-error-border bg-status-error-bg-subtle px-3 py-2 text-left text-xs text-status-error-text",
 					children: [
 						"This certificate was revoked",
-						e.revokedAt ? ` on ${s(e.revokedAt)}` : "",
+						e.revokedAt ? ` on ${c(e.revokedAt)}` : "",
 						e.revokeReason ? ` — ${e.revokeReason}` : "."
 					]
 				}) : /* @__PURE__ */ M("span", {
@@ -203,10 +213,10 @@ function z({ certificate: e, learnerName: t, courseTitle: n }) {
 		})]
 	});
 }
-function B() {
-	let [s] = A(), y = s.get("id") ?? "", [x, T] = se(oe.lesson), { currentUser: E, workspaceId: D } = e(), { emit: I } = t(), { data: B, loading: V, error: H, refetch: U } = re(y);
-	h(() => {
-		y && I("technospam.course.viewed", {
+function R() {
+	let [c] = ue(), y = c.get("id") ?? "", [x, T] = ce(oe.lesson), { currentUser: E, workspaceId: D } = e(), I = t(), { emit: R } = n(), { data: z, loading: B, error: V, refetch: pe } = ne(y);
+	le(() => {
+		y && R("technospam.course.viewed", {
 			workspaceId: D,
 			entityId: y,
 			entityType: "TEC_COURSE"
@@ -214,109 +224,96 @@ function B() {
 	}, [
 		y,
 		D,
-		I
+		R
 	]);
-	let [W, { loading: G }] = ie(), [le, { loading: ue }] = ae(), { data: de, refetch: fe } = m(y ? { courseId: y } : {}), [pe, { loading: K }] = p(), q = B?.tecCourse ?? null, J = [...q?.lessons ?? []].sort((e, t) => e.position - t.position), Y = (q?.enrollments ?? []).find((e) => e.learnerId === E?.id), X = de?.tecMyCertificates ?? [], Z = X.find((e) => e.status === "ISSUED") ?? X[0], me = !!Y && Y.progressPct >= 100, he = async () => {
-		!y || !E?.id || (I("technospam.course.certificate_claimed", {
+	let [me, { loading: H }] = re(), { data: he, refetch: ge } = ae(y ? { courseId: y } : {}), [_e, { loading: U }] = ie(), W = z?.tecCourse ?? null, G = [...W?.lessons ?? []].sort((e, t) => e.position - t.position), K = (W?.enrollments ?? []).find((e) => e.learnerId === E?.id), q = he?.tecMyCertificates ?? [], J = q.find((e) => e.status === "ISSUED") ?? q[0], ve = !!K && K.progressPct >= 100, ye = async () => {
+		!y || !E?.id || (R("technospam.course.certificate_claimed", {
 			workspaceId: D,
 			entityId: y,
 			entityType: "TEC_COURSE"
-		}), (await pe({ variables: {
+		}), (await _e({ variables: {
 			courseId: y,
 			learnerId: E.id,
 			score: 100
-		} })).data?.tecIssueCertificate && (f.success("Certificate issued", "Your verifiable certificate is ready in My Learning."), await fe()));
-	}, ge = async () => {
-		y && (I("technospam.course.enroll_clicked", {
+		} })).data?.tecIssueCertificate && (m.success("Certificate issued", "Your verifiable certificate is ready in My Learning."), await ge()));
+	}, be = async () => {
+		y && (R("technospam.course.enroll_clicked", {
 			workspaceId: D,
 			entityId: y,
 			entityType: "TEC_COURSE"
-		}), (await W({ variables: { input: { courseId: y } } })).data?.tecEnroll && (I("technospam.course.enrolled", {
+		}), (await me({ variables: { input: { courseId: y } } })).data?.tecEnroll && (R("technospam.course.enrolled", {
 			workspaceId: D,
 			entityId: y,
 			entityType: "TEC_COURSE"
-		}), f.success("Enrolled", `You're enrolled in "${q?.title}".`), await U()));
-	}, _e = async () => {
-		if (!Y) return;
-		let e = Math.min(J.length, Y.lessonsCompleted + 1), t = J.length ? Math.round(e / J.length * 100) : 100;
-		(await le({ variables: { input: {
-			enrollmentId: Y.id,
-			lessonsCompleted: e,
-			progressPct: t
-		} } })).data?.tecUpdateProgress && (I("technospam.course.progress_updated", {
-			workspaceId: D,
-			entityId: Y.id,
-			entityType: "TEC_ENROLLMENT",
-			progressPct: t
-		}), f.success("Progress saved", `${t}% complete`), await U());
+		}), m.success("Enrolled", `You're enrolled in "${W?.title}".`), await pe()));
 	};
-	if (V && !q) return /* @__PURE__ */ M(r, {
+	if (B && !W) return /* @__PURE__ */ M(i, {
 		title: "Course",
 		backPath: "/courses/courses-page",
 		children: [/* @__PURE__ */ j(F, { className: "mb-4 h-40 w-full rounded-2xl" }), /* @__PURE__ */ j(F, { className: "h-64 w-full rounded-xl" })]
 	});
-	if (H || !q) return /* @__PURE__ */ j(r, {
+	if (V || !W) return /* @__PURE__ */ j(i, {
 		title: "Course",
 		backPath: "/courses/courses-page",
-		children: H ? /* @__PURE__ */ j(ee, {
+		children: V ? /* @__PURE__ */ j(ee, {
 			title: "Couldn't load course",
-			error: H
-		}) : /* @__PURE__ */ j(u, {
+			error: V
+		}) : /* @__PURE__ */ j(d, {
 			title: "Course not found",
 			description: "This course may have been unpublished."
 		})
 	});
-	let Q = Y?.lessonsCompleted ?? 0, $ = Math.max(0, J.length - Q), ve = Y && Y.progressPct >= 100 ? "Course complete — claim your certificate below." : $ === 1 ? "1 lesson to go — almost there!" : `${$} lessons to go — keep it up!`, ye = `${q.topic ?? ""} ${q.title}`;
-	return /* @__PURE__ */ M(r, {
+	let Y = K?.lessonsCompleted ?? 0, X = G.find((e) => !e.completedByMe) ?? G[0], Z = G.length > 0 && G.every((e) => e.completedByMe), Q = (e) => I(se(y, e)), $ = Math.max(0, G.length - Y), xe = K && K.progressPct >= 100 ? "Course complete — claim your certificate below." : $ === 1 ? "1 lesson to go — almost there!" : `${$} lessons to go — keep it up!`, Se = `${W.topic ?? ""} ${W.title}`;
+	return /* @__PURE__ */ M(i, {
 		backPath: "/courses/courses-page",
-		title: q.title,
-		description: q.summary ?? void 0,
-		actions: Y ? /* @__PURE__ */ M(N, {
-			onClick: _e,
-			disabled: ue || Q >= J.length,
-			children: [/* @__PURE__ */ j(v, { size: 16 }), Q >= J.length ? "Completed" : "Complete next lesson"]
-		}) : /* @__PURE__ */ M(N, {
-			onClick: ge,
-			disabled: G,
+		title: W.title,
+		description: W.summary ?? void 0,
+		actions: K ? X ? /* @__PURE__ */ M(N, {
+			onClick: () => Q(X.id),
+			"data-testid": "continue-learning",
+			children: [j(Z ? v : h, { size: 16 }), Z ? "Review course" : Y > 0 ? "Continue learning" : "Start course"]
+		}) : null : /* @__PURE__ */ M(N, {
+			onClick: be,
+			disabled: H,
 			children: [
 				/* @__PURE__ */ j(_, { size: 16 }),
 				" ",
-				G ? "Enrolling…" : "Enroll"
+				H ? "Enrolling…" : "Enroll"
 			]
 		}),
 		children: [
-			/* @__PURE__ */ j(a, {
+			/* @__PURE__ */ j(o, {
 				height: "h-40",
-				seed: ye,
-				icon: o(q.topic ?? q.title),
+				seed: Se,
+				icon: s(W.topic ?? W.title),
 				className: "mb-5 rounded-2xl",
 				children: /* @__PURE__ */ M("div", {
 					className: "flex w-full flex-col gap-2",
 					children: [
 						/* @__PURE__ */ j("span", {
 							className: "text-xs font-medium uppercase tracking-wide text-white/80",
-							children: q.topic ?? "Course"
+							children: W.topic ?? "Course"
 						}),
 						/* @__PURE__ */ j("h2", {
 							className: "text-2xl font-bold leading-tight text-white drop-shadow-sm sm:text-3xl",
-							children: q.title
+							children: W.title
 						}),
 						/* @__PURE__ */ M("div", {
 							className: "flex flex-wrap items-center gap-2",
 							children: [
 								/* @__PURE__ */ j(L, {
 									icon: O,
-									children: l(q.level)
+									children: u(W.level)
 								}),
 								/* @__PURE__ */ j(L, {
 									icon: v,
-									children: l(q.status)
+									children: u(W.status)
 								}),
-								q.topic ? /* @__PURE__ */ j(L, {
+								W.topic ? /* @__PURE__ */ j(L, {
 									icon: C,
-									children: q.topic
+									children: W.topic
 								}) : null,
-								q.isPremiumOnly ? /* @__PURE__ */ j(L, {
+								W.isPremiumOnly ? /* @__PURE__ */ j(L, {
 									icon: w,
 									children: "Premium"
 								}) : null
@@ -325,40 +322,40 @@ function B() {
 					]
 				})
 			}),
-			/* @__PURE__ */ j(te, {
-				tags: q.tags,
+			/* @__PURE__ */ j(f, {
+				tags: W.tags,
 				className: "mb-5"
 			}),
 			/* @__PURE__ */ M("div", {
 				className: "mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4",
 				children: [
-					/* @__PURE__ */ j(i, {
+					/* @__PURE__ */ j(a, {
 						label: "Lessons",
-						value: J.length,
+						value: G.length,
 						icon: S,
 						tone: "blue"
 					}),
-					/* @__PURE__ */ j(i, {
+					/* @__PURE__ */ j(a, {
 						label: "Duration",
-						value: c(q.estimatedMinutes),
+						value: l(W.estimatedMinutes),
 						icon: b,
 						tone: "teal"
 					}),
-					/* @__PURE__ */ j(i, {
+					/* @__PURE__ */ j(a, {
 						label: "Enrolled",
-						value: q.enrollments?.length ?? 0,
-						icon: ce,
+						value: W.enrollments?.length ?? 0,
+						icon: A,
 						tone: "indigo"
 					}),
-					/* @__PURE__ */ j(i, {
+					/* @__PURE__ */ j(a, {
 						label: "Your progress",
-						value: Y ? `${Y.progressPct}%` : "Not started",
+						value: K ? `${K.progressPct}%` : "Not started",
 						icon: O,
 						tone: "purple"
 					})
 				]
 			}),
-			Y ? /* @__PURE__ */ M(P, {
+			K ? /* @__PURE__ */ M(P, {
 				className: "mb-6 p-5",
 				children: [
 					/* @__PURE__ */ M("div", {
@@ -375,11 +372,11 @@ function B() {
 							/* @__PURE__ */ M("span", {
 								className: "ml-auto text-sm text-text-secondary",
 								children: [
-									Q,
+									Y,
 									"/",
-									J.length,
+									G.length,
 									" lessons · ",
-									Y.progressPct,
+									K.progressPct,
 									"%"
 								]
 							})
@@ -389,19 +386,19 @@ function B() {
 						className: "h-2.5 w-full overflow-hidden rounded-full bg-bg-sunken",
 						children: /* @__PURE__ */ j("div", {
 							className: "h-full rounded-full bg-gradient-to-r from-accent-primary via-accent-indigo to-accent-purple transition-all duration-500",
-							style: { width: `${Y.progressPct}%` }
+							style: { width: `${K.progressPct}%` }
 						})
 					}),
 					/* @__PURE__ */ j("p", {
 						className: "mt-2 text-xs text-text-muted",
-						children: ve
+						children: xe
 					})
 				]
 			}) : null,
-			Z ? /* @__PURE__ */ M("div", {
+			J ? /* @__PURE__ */ M("div", {
 				className: "mb-6 grid grid-cols-1 gap-4 lg:grid-cols-2",
 				children: [/* @__PURE__ */ M(P, {
-					className: n("flex items-center gap-4 border p-5", Z.status === "REVOKED" ? "border-status-error-border/60 bg-status-error-bg-subtle/20" : "border-status-success-border/60 bg-status-success-bg-subtle/30"),
+					className: r("flex items-center gap-4 border p-5", J.status === "REVOKED" ? "border-status-error-border/60 bg-status-error-bg-subtle/20" : "border-status-success-border/60 bg-status-success-bg-subtle/30"),
 					children: [/* @__PURE__ */ j("span", {
 						className: "flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-status-warning-bg-subtle text-status-warning-text ring-1 ring-status-warning-border/40",
 						children: /* @__PURE__ */ j(k, { size: 26 })
@@ -409,18 +406,18 @@ function B() {
 						className: "min-w-0",
 						children: [/* @__PURE__ */ j("div", {
 							className: "text-base font-semibold text-text-primary",
-							children: Z.status === "REVOKED" ? "Your certificate was revoked" : "You finished this course"
+							children: J.status === "REVOKED" ? "Your certificate was revoked" : "You finished this course"
 						}), /* @__PURE__ */ j("div", {
 							className: "text-sm text-text-muted",
-							children: Z.status === "REVOKED" ? "Contact a workspace admin if you believe this was a mistake." : "Your verifiable certificate of completion is issued — it also appears in My Learning."
+							children: J.status === "REVOKED" ? "Contact a workspace admin if you believe this was a mistake." : "Your verifiable certificate of completion is issued — it also appears in My Learning."
 						})]
 					})]
-				}), /* @__PURE__ */ j(z, {
-					certificate: Z,
+				}), /* @__PURE__ */ j(fe, {
+					certificate: J,
 					learnerName: E?.name ?? void 0,
-					courseTitle: Z.course?.title ?? q.title
+					courseTitle: J.course?.title ?? W.title
 				})]
-			}) : me ? /* @__PURE__ */ M(P, {
+			}) : ve ? /* @__PURE__ */ M(P, {
 				className: "mb-6 flex flex-col items-start gap-4 border border-status-success-border/60 bg-status-success-bg-subtle/40 p-5 sm:flex-row sm:items-center sm:justify-between",
 				children: [/* @__PURE__ */ M("div", {
 					className: "flex items-center gap-4",
@@ -435,12 +432,12 @@ function B() {
 						children: "Claim your verifiable certificate of completion."
 					})] })]
 				}), /* @__PURE__ */ M(N, {
-					onClick: he,
-					disabled: K,
+					onClick: ye,
+					disabled: U,
 					children: [
 						/* @__PURE__ */ j(g, { size: 16 }),
 						" ",
-						K ? "Issuing…" : "Claim certificate"
+						U ? "Issuing…" : "Claim certificate"
 					]
 				})]
 			}) : null,
@@ -457,36 +454,37 @@ function B() {
 									className: "text-accent-primary"
 								}),
 								" Curriculum",
-								q.isPremiumOnly ? /* @__PURE__ */ j(ne, { locked: q.isLocked }) : null
+								W.isPremiumOnly ? /* @__PURE__ */ j(te, { locked: W.isLocked }) : null
 							]
-						}), J.length ? /* @__PURE__ */ M("span", {
+						}), G.length ? /* @__PURE__ */ M("span", {
 							className: "rounded-full bg-status-success-bg-subtle px-2.5 py-1 text-xs font-medium text-status-success-text",
 							children: [
-								Q,
+								Y,
 								"/",
-								J.length,
+								G.length,
 								" completed"
 							]
 						}) : null]
 					}),
-					q.isLocked ? /* @__PURE__ */ j("div", {
+					W.isLocked ? /* @__PURE__ */ j("div", {
 						className: "mb-4",
-						children: /* @__PURE__ */ j(d, {
+						children: /* @__PURE__ */ j(p, {
 							compact: !0,
 							description: "This course is on a paid TechnoSpam plan. Preview lessons below stay free — the rest unlock once your workspace upgrades."
 						})
 					}) : null,
-					J.length === 0 ? /* @__PURE__ */ j("p", {
+					G.length === 0 ? /* @__PURE__ */ j("p", {
 						className: "py-6 text-center text-sm text-text-muted",
 						children: "Lessons for this course are being prepared."
 					}) : /* @__PURE__ */ j("div", {
 						className: "flex flex-col",
-						children: J.map((e, t) => /* @__PURE__ */ j(R, {
+						children: G.map((e, t) => /* @__PURE__ */ j(de, {
 							lesson: e,
 							index: t,
-							done: t < Q,
+							done: !!e.completedByMe,
 							open: x === e.id,
-							onToggle: () => T(x === e.id ? null : e.id)
+							onToggle: () => T(x === e.id ? null : e.id),
+							onStart: () => Q(e.id)
 						}, e.id))
 					})
 				]
@@ -495,6 +493,6 @@ function B() {
 	});
 }
 //#endregion
-export { B as CoursesCourseDetailsPagePage };
+export { R as CoursesCourseDetailsPagePage };
 
 //# sourceMappingURL=CoursesCourseDetailsPagePage.js.map