diff --git a/src/pages/content-management/AddPracticeFlow.tsx b/src/pages/content-management/AddPracticeFlow.tsx
index 360d16d..ec93378 100644
--- a/src/pages/content-management/AddPracticeFlow.tsx
+++ b/src/pages/content-management/AddPracticeFlow.tsx
@@ -23,6 +23,17 @@ export function AddPracticeFlow() {
const backTo = searchParams.get("backTo");
const courseId = searchParams.get("courseId");
const moduleId = searchParams.get("moduleId");
+ const lessonId = searchParams.get("lessonId");
+ const lessonTitleRaw = searchParams.get("lessonTitle");
+ const lessonTitleDisplay = (() => {
+ const raw = lessonTitleRaw?.trim();
+ if (!raw) return null;
+ try {
+ return decodeURIComponent(raw);
+ } catch {
+ return raw;
+ }
+ })();
const isModuleContext = backTo === "module";
const isCourseContext = backTo === "modules";
@@ -251,6 +262,23 @@ export function AddPracticeFlow() {
Create a new immersive practice session for students.
+ {lessonId ? (
+
+
Practice for this lesson
+
+ This session will be associated with lesson{" "}
+ #{lessonId}
+ {lessonTitleDisplay ? (
+ <>
+ {" "}
+ — {lessonTitleDisplay}
+ >
+ ) : null}
+ . The module-level flow still uses the same steps; use this context when naming and
+ configuring the practice.
+
+
+ ) : null}
diff --git a/src/pages/content-management/ModuleDetailPage.tsx b/src/pages/content-management/ModuleDetailPage.tsx
index 2a69eb1..f486226 100644
--- a/src/pages/content-management/ModuleDetailPage.tsx
+++ b/src/pages/content-management/ModuleDetailPage.tsx
@@ -398,6 +398,11 @@ export function ModuleDetailPage() {
thumbnailGradient={LESSON_THUMB_GRADIENTS[i % LESSON_THUMB_GRADIENTS.length]}
onEdit={() => openEditLesson(lesson)}
onDelete={() => setDeletingLesson(lesson)}
+ onAddPractice={() =>
+ navigate(
+ `/new-content/learn-english/${level}/courses/add-practice?backTo=module&courseId=${courseId}&moduleId=${moduleId}&lessonId=${lesson.id}&lessonTitle=${encodeURIComponent(lesson.title)}`,
+ )
+ }
/>
))}
diff --git a/src/pages/content-management/components/VideoCard.tsx b/src/pages/content-management/components/VideoCard.tsx
index 4e799c9..cbeba6e 100644
--- a/src/pages/content-management/components/VideoCard.tsx
+++ b/src/pages/content-management/components/VideoCard.tsx
@@ -1,5 +1,5 @@
import { useEffect, useMemo, useState } from "react";
-import { MoreVertical, Edit2, Play, Pencil, Trash2 } from "lucide-react";
+import { MoreVertical, Edit2, Play, Pencil, Trash2, Calendar } from "lucide-react";
import { Button } from "../../../components/ui/button";
import {
Dialog,
@@ -38,6 +38,8 @@ interface VideoCardProps {
hoverModuleActions?: boolean;
onEdit?: () => void;
onDelete?: () => void;
+ /** When set (e.g. on module lesson cards), shows an "Add practice" control scoped to this lesson. */
+ onAddPractice?: () => void;
onPublish?: () => void;
}
@@ -51,6 +53,7 @@ export function VideoCard({
onEdit,
onDelete,
onPublish,
+ onAddPractice,
hoverModuleActions = false,
}: VideoCardProps) {
const [thumbFailed, setThumbFailed] = useState(false);
@@ -342,6 +345,21 @@ export function VideoCard({
{title}
+ {hoverModuleActions && onAddPractice ? (
+ {
+ e.stopPropagation();
+ onAddPractice();
+ }}
+ >
+
+ Add practice
+
+ ) : null}
+
{/* Actions (footer) — not used for API lesson cards with hover tools */}
{!hoverModuleActions ? (