units,lesson as standalone

src/modules/client/pages/UnitDetails.jsx

@@ -1,8 +1,8 @@
 import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
 import { useParams, useNavigate } from "react-router-dom";
 import {
-    House, Timer, Layers, LockIcon, SendHorizonal, CheckCheck, CheckCircle2, Circle,
-    FileQuestion, Hourglass, Zap, ClipboardList,
+    House, Timer, Layers, SendHorizonal, CheckCheck, CheckCircle2, Circle,
+    FileQuestion, Hourglass, ClipboardList,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Badge } from "@/components/ui/badge";
@@ -13,6 +13,7 @@ import { useEffect } from "react";
 import { useLibrary } from "@/contexts/ClientLibraryContext";
 import { useClientTiers } from "@/contexts/ClientTiersProvider";
 import { PageMeta } from "@/contexts/MetadataContext";
+import LockedContentPanel from "@/modules/client/components/LockedContentPanel";
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
@@ -63,12 +64,17 @@ const UnitContentCard = ({ unitDetail, onLessonClick, onQuizClick }) => {
                         className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-slate-200 dark:hover:bg-blue-500 transition-colors cursor-pointer"
                         onClick={() => onLessonClick(lesson)}
                     >
-                        <div className="flex items-center gap-3 select-none min-w-0">
+                        <div className="flex items-start gap-3 select-none min-w-0">
                             {lesson.status === "completed"
-                                ? <CheckCircle2 className="size-4 text-emerald-500 shrink-0" />
-                                : <Circle className="size-4 text-muted-foreground/40 shrink-0" />
+                                ? <CheckCircle2 className="size-4 text-emerald-500 shrink-0 mt-0.5" />
+                                : <Circle className="size-4 text-muted-foreground/40 shrink-0 mt-0.5" />
                             }
-                            <span className="text-md text-card-foreground truncate">{lesson.title}</span>
+                            <div className="min-w-0">
+                                <span className="text-md text-card-foreground truncate block">{lesson.title}</span>
+                                {lesson.description && (
+                                    <span className="text-sm text-muted-foreground line-clamp-1 block">{lesson.description}</span>
+                                )}
+                            </div>
                         </div>
                         {lesson.duration_seconds > 0 && (
                             <span className="text-sm shrink-0 ml-2">{formatDuration(lesson.duration_seconds)}</span>
@@ -130,29 +136,7 @@ const UnitDetails = () => {
 
     // ── Deep-link to a locked unit — inline blocked panel, not a redirect ────
     if (unitBlocked) {
-        const course = unitBlockedInfo?.course;
-        const tier = course?.subscription ? tierMap[course.subscription] : null;
-        return (
-            <div className="flex flex-col items-center gap-6 py-32 text-center px-4">
-                <div className="h-16 w-16 rounded-full bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
-                    <LockIcon className="size-7 text-amber-500" />
-                </div>
-                <div className="space-y-2 max-w-sm">
-                    <h2 className="text-xl font-semibold">Premium / Exclusive Content</h2>
-                    <p className="text-sm text-muted-foreground leading-relaxed">
-                        {course
-                            ? `This unit is part of "${course.title}"${tier?.name ? ` (${tier.name} plan)` : ""}. Upgrade your plan or view the course to unlock it.`
-                            : "Upgrade your plan to access this unit."}
-                    </p>
-                </div>
-                <div className="flex flex-col items-center gap-2">
-                    <Button onClick={() => navigate('/plans')} className="gap-1.5">
-                        <Zap className="size-4" /> View Available Plans
-                    </Button>
-                    <p className="text-xs text-muted-foreground">Already subscribed? Your plan may not cover this tier.</p>
-                </div>
-            </div>
-        );
+        return <LockedContentPanel course={unitBlockedInfo?.course} tierMap={tierMap} />;
     }
 
     if (unitDetailLoading) {
@@ -166,7 +150,7 @@ const UnitDetails = () => {
     }
 
     const handleLessonClick = (lesson) => {
-        navigate(`/units/${uuid}/read`, { state: { lessonId: lesson.lesson_id } });
+        navigate(`/lessons/${lesson.uuid}`);
     };
     const handleQuizClick = () => {
         navigate(`/units/${uuid}/read`, { state: { quizId: true } });