mirror of
https://github.com/rgrgogu/new_starr.git
synced 2026-09-27 00:12:54 +08:00
@@ -21,6 +21,7 @@ export const LessonCard = ({ lesson, onViewDetails }) => {
|
||||
const locked = lesson.is_locked;
|
||||
const duration = formatDuration(lesson.duration_seconds);
|
||||
const unitCount = Number(lesson.unit_count ?? 0);
|
||||
const courses = lesson.courses ?? [];
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -34,14 +35,23 @@ export const LessonCard = ({ lesson, onViewDetails }) => {
|
||||
onClick={() => onViewDetails(lesson)}
|
||||
>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{locked ? (
|
||||
{locked && (
|
||||
<Badge variant="secondary">
|
||||
<LockIcon className="size-3" /> Locked
|
||||
</Badge>
|
||||
) : unitCount > 0 ? (
|
||||
<Badge variant="outline"><Layers className="size-3" /> In {unitCount} unit{unitCount === 1 ? "" : "s"}</Badge>
|
||||
)}
|
||||
{unitCount > 0 ? (
|
||||
<Badge variant="outline">
|
||||
<Layers className="size-3" /> In {unitCount} unit{unitCount === 1 ? "" : "s"}
|
||||
{courses[0] && (
|
||||
<>
|
||||
{" "}· <span className="truncate max-w-[120px] inline-block align-bottom">{courses[0].title}</span>
|
||||
{courses.length > 1 ? ` +${courses.length - 1}` : ""}
|
||||
</>
|
||||
)}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="text-muted-foreground">Standalone</Badge>
|
||||
!locked && <Badge variant="outline" className="text-muted-foreground">Standalone</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -20,6 +20,7 @@ export const UnitCard = ({ unit, onViewDetails }) => {
|
||||
const duration = formatDuration(unit.duration_seconds);
|
||||
const lessonCount = Number(unit.lesson_count ?? 0);
|
||||
const courseCount = Number(unit.course_count ?? 0);
|
||||
const courses = unit.courses ?? [];
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -33,14 +34,19 @@ export const UnitCard = ({ unit, onViewDetails }) => {
|
||||
onClick={() => onViewDetails(unit)}
|
||||
>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{locked ? (
|
||||
{locked && (
|
||||
<Badge variant="secondary">
|
||||
<LockIcon className="size-3" /> Locked
|
||||
</Badge>
|
||||
) : courseCount > 0 ? (
|
||||
<Badge variant="outline"><BookOpen className="size-3" /> In {courseCount} course{courseCount === 1 ? "" : "s"}</Badge>
|
||||
)}
|
||||
{courseCount > 0 ? (
|
||||
<Badge variant="outline">
|
||||
<BookOpen className="size-3" />
|
||||
<span className="truncate max-w-[140px] inline-block align-bottom">{courses[0]?.title ?? "Course"}</span>
|
||||
{courseCount > 1 ? ` +${courseCount - 1}` : ""}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="text-muted-foreground">Standalone</Badge>
|
||||
!locked && <Badge variant="outline" className="text-muted-foreground">Standalone</Badge>
|
||||
)}
|
||||
{unit.quiz_id && (
|
||||
<Badge variant="outline"><ClipboardList className="size-3" /> Quiz</Badge>
|
||||
|
||||
@@ -143,8 +143,6 @@ function ClientNav() {
|
||||
const navigate = useNavigate()
|
||||
const { user, logout } = useAuth()
|
||||
|
||||
const navRef = useRef(null)
|
||||
|
||||
// Background fetches only — nav rendering never waits on these
|
||||
const { achievements, getAchievements } = useProfile()
|
||||
const { myTier, tierMap, tierCategories, getMyTier, getTierCategories } = useClientTiers()
|
||||
@@ -162,19 +160,6 @@ function ClientNav() {
|
||||
if (tierCategories.length === 0) getTierCategories();
|
||||
}, [user]);
|
||||
|
||||
// Used by sticky overlays (e.g. StickyAnnouncementBar) to avoid overlapping the fixed header.
|
||||
useEffect(() => {
|
||||
if (!navRef.current) return
|
||||
const update = () => {
|
||||
document.documentElement.style.setProperty('--navbar-h', `${navRef.current.offsetHeight}px`)
|
||||
}
|
||||
update()
|
||||
|
||||
const ro = new ResizeObserver(update)
|
||||
ro.observe(navRef.current)
|
||||
return () => ro.disconnect()
|
||||
}, [])
|
||||
|
||||
// ── Derive directly from auth user — same pattern as admin UserMenu ──────
|
||||
// No extra fetch, no loading state, no flicker on reload.
|
||||
const given = user?.personal_info?.name?.given_name ?? ""
|
||||
@@ -235,7 +220,7 @@ function ClientNav() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav ref={navRef} className="bg-card fixed w-full z-50 top-0 border-b border-default">
|
||||
<nav className="bg-card w-full border-b border-default">
|
||||
<div className="flex flex-wrap items-center justify-between mx-auto py-3 px-6">
|
||||
|
||||
{/* Logo */}
|
||||
@@ -357,11 +342,30 @@ const ClientLayout = () => {
|
||||
const currentHandle = matches.at(-1)?.handle ?? {}
|
||||
const showFooter = currentHandle.showFooter ?? true
|
||||
|
||||
// Sticky announcement bar and nav stack inside one fixed header instead of
|
||||
// each being independently `fixed top-0` (which made them overlap). Height
|
||||
// is measured off this wrapper so --navbar-h always reflects the combined
|
||||
// space, whether or not an announcement is currently showing.
|
||||
const headerRef = useRef(null)
|
||||
useEffect(() => {
|
||||
if (!headerRef.current) return
|
||||
const update = () => {
|
||||
document.documentElement.style.setProperty('--navbar-h', `${headerRef.current.offsetHeight}px`)
|
||||
}
|
||||
update()
|
||||
|
||||
const ro = new ResizeObserver(update)
|
||||
ro.observe(headerRef.current)
|
||||
return () => ro.disconnect()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<ClientProvider>
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<ClientNav />
|
||||
<StickyAnnouncementBar />
|
||||
<header ref={headerRef} className="fixed top-0 left-0 right-0 z-50 flex flex-col">
|
||||
<StickyAnnouncementBar />
|
||||
<ClientNav />
|
||||
</header>
|
||||
<div className="flex-1 flex flex-col">
|
||||
<Outlet />
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { House, Timer, ChevronLeft, ChevronRight, LockIcon, Tag, Tags, Check, ShoppingCart } from "lucide-react";
|
||||
import { House, Timer, ChevronLeft, ChevronRight, LockIcon, Tag, Tags, Check, ShoppingCart, Search } from "lucide-react";
|
||||
import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
@@ -170,6 +170,7 @@ const CoursesList = () => {
|
||||
|
||||
const [tierCategories, setTierCategories] = useState([]);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [searchInput, setSearchInput] = useState("");
|
||||
const [search, setSearch] = useState("");
|
||||
const [subFilter, setSubFilter] = useState("All");
|
||||
const [categoryFilter, setCategoryFilter] = useState("All");
|
||||
@@ -215,6 +216,8 @@ const CoursesList = () => {
|
||||
const totalPages = Math.max(1, Math.ceil(filtered.length / ITEMS_PER_PAGE));
|
||||
const paginated = filtered.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);
|
||||
|
||||
const runSearch = () => { setSearch(searchInput); setCurrentPage(1); };
|
||||
|
||||
const handleViewDetails = (course) => {
|
||||
if (course.is_locked) {
|
||||
setSelectedCourse(course);
|
||||
@@ -242,26 +245,20 @@ const CoursesList = () => {
|
||||
{/* Search & Filters */}
|
||||
<div className="fixed top-[67px] left-0 right-0 z-10 bg-card border-b lg:static lg:bg-transparent lg:border-none py-3 xs:px-4 md:px-6 lg:px-0">
|
||||
<div className="flex items-center xs:flex-col lg:flex-row gap-4">
|
||||
<Input
|
||||
placeholder="Search courses..."
|
||||
className="w-full bg-card lg:max-w-64 text-sm"
|
||||
value={search}
|
||||
onChange={(e) => { setSearch(e.target.value); setCurrentPage(1); }}
|
||||
/>
|
||||
<div className="flex items-center gap-2 w-full lg:max-w-64">
|
||||
<Input
|
||||
placeholder="Search courses..."
|
||||
className="w-full bg-card text-sm"
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter") runSearch(); }}
|
||||
/>
|
||||
<Button size="icon" variant="outline" className="shrink-0 bg-card" onClick={runSearch} aria-label="Search">
|
||||
<Search />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex gap-4 items-start w-full">
|
||||
<Select value="courses" onValueChange={(v) => {
|
||||
if (v === "units") navigate("/units");
|
||||
if (v === "lessons") navigate("/lessons");
|
||||
}}>
|
||||
<SelectTrigger className="w-full lg:w-48 bg-card">
|
||||
<SelectValue placeholder="Browse" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="courses">Courses</SelectItem>
|
||||
<SelectItem value="units">Units</SelectItem>
|
||||
<SelectItem value="lessons">Lessons</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
|
||||
<Select value={subFilter} onValueChange={(v) => { setSubFilter(v); setCurrentPage(1); }}>
|
||||
<SelectTrigger className="w-full lg:w-48 bg-card">
|
||||
@@ -276,6 +273,19 @@ const CoursesList = () => {
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value="courses" onValueChange={(v) => {
|
||||
if (v === "units") navigate("/units");
|
||||
if (v === "lessons") navigate("/lessons");
|
||||
}}>
|
||||
<SelectTrigger className="w-full lg:w-48 bg-card">
|
||||
<SelectValue placeholder="Browse" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="courses">Courses</SelectItem>
|
||||
<SelectItem value="units">Units</SelectItem>
|
||||
<SelectItem value="lessons">Lessons</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{allCategories.length > 0 && (
|
||||
<Select value={categoryFilter} onValueChange={(v) => { setCategoryFilter(v); setCurrentPage(1); }}>
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
House, Timer, SendHorizonal, CheckCheck, ListChecks, ArrowRight, Layers, Hourglass,
|
||||
House, SendHorizonal, CheckCheck, Check, Hourglass,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useEffect } from "react";
|
||||
@@ -21,13 +22,64 @@ function formatDuration(seconds = 0) {
|
||||
return `${m}min`;
|
||||
}
|
||||
|
||||
// ─── Sibling lessons sidebar (unit context) ────────────────────────────────────
|
||||
|
||||
const UnitLessonsSidebar = ({ unitDetail, currentLessonUuid, onSelect }) => {
|
||||
if (!unitDetail) return null;
|
||||
const lessons = unitDetail.lessons ?? [];
|
||||
|
||||
return (
|
||||
<aside className="lg:w-80 shrink-0 bg-muted xs:px-4 xs:py-8 lg:px-4 lg:py-8 flex flex-col gap-3">
|
||||
<span className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">{unitDetail.title}</span>
|
||||
<div className="flex flex-col gap-1">
|
||||
{lessons.map((l) => {
|
||||
const isCurrent = l.uuid === currentLessonUuid;
|
||||
const completed = l.status === "completed";
|
||||
return (
|
||||
<div
|
||||
key={l.lesson_id}
|
||||
onClick={() => onSelect(l)}
|
||||
className={cn(
|
||||
"flex items-center justify-between gap-2 py-2.5 px-3 rounded-lg cursor-pointer text-sm transition-colors",
|
||||
isCurrent
|
||||
? "bg-background border shadow-sm font-medium text-card-foreground"
|
||||
: "hover:bg-background/60"
|
||||
)}
|
||||
>
|
||||
<span className={cn(
|
||||
"truncate",
|
||||
!isCurrent && !completed && "text-muted-foreground"
|
||||
)}>
|
||||
{l.title}
|
||||
</span>
|
||||
{completed ? (
|
||||
<Check className="size-4 text-emerald-500 shrink-0" />
|
||||
) : formatDuration(l.duration_seconds) && (
|
||||
<span className={cn(
|
||||
"text-xs shrink-0",
|
||||
isCurrent ? "text-blue-600 dark:text-blue-400" : "text-muted-foreground"
|
||||
)}>
|
||||
{formatDuration(l.duration_seconds)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
};
|
||||
|
||||
// ─── Lesson Details ─────────────────────────────────────────────────────────
|
||||
|
||||
const LessonDetails = () => {
|
||||
const { uuid } = useParams();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { getLesson, lesson, lessonLoading, unitBlocked, unitBlockedInfo, resetLesson } = useLibrary();
|
||||
const {
|
||||
getLesson, lesson, lessonLoading, unitBlocked, unitBlockedInfo, resetLesson,
|
||||
getUnitDetail, unitDetail, resetUnitDetail,
|
||||
} = useLibrary();
|
||||
const { tierMap, getTierCategories } = useClientTiers();
|
||||
|
||||
const hasCompleted = lesson?.status === "completed";
|
||||
@@ -41,6 +93,13 @@ const LessonDetails = () => {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [uuid]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasUnit) return;
|
||||
getUnitDetail(unit.uuid);
|
||||
return () => resetUnitDetail();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [unit?.uuid]);
|
||||
|
||||
const items = [
|
||||
{ label: "Home", icon: <House className="size-4" />, to: `/dashboard` },
|
||||
{ label: "Lessons", to: `/lessons` },
|
||||
@@ -67,96 +126,64 @@ const LessonDetails = () => {
|
||||
if (!hasUnit) return;
|
||||
navigate(`/units/${unit.uuid}/read`, { state: { lessonId: lesson.lesson_id } });
|
||||
};
|
||||
const handleSelectSibling = (sibling) => {
|
||||
if (sibling.uuid === uuid) return;
|
||||
navigate(`/lessons/${sibling.uuid}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex-1 flex flex-col">
|
||||
<PageMeta title={`${lesson.title} - STARR`} description={lesson.description} />
|
||||
<div className="my-17">
|
||||
<div className="flex flex-col gap-8">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div
|
||||
className="flex-1 flex flex-col lg:flex-row items-stretch"
|
||||
style={{ paddingTop: "var(--navbar-h)" }}
|
||||
>
|
||||
<div className="flex flex-col gap-6 flex-1 min-w-0 xs:px-4 xs:py-8 lg:px-16 lg:py-10">
|
||||
<AppBreadcrumb items={items} />
|
||||
|
||||
{/* Hero */}
|
||||
<div className="bg-primary dark:bg-accent/50">
|
||||
<div className="lg:container lg:mx-auto flex flex-col gap-6 xs:px-6 xs:py-6 lg:px-4 lg:py-16">
|
||||
<AppBreadcrumb
|
||||
color={{ link: { color: "text-white" }, page: { color: "text-white" } }}
|
||||
items={items}
|
||||
/>
|
||||
<div className="flex lg:flex-row items-start justify-between w-full text-white">
|
||||
<div className="flex flex-col gap-4">
|
||||
<h1 className="font-bold xs:text-2xl lg:text-4xl">{lesson.title}</h1>
|
||||
<p className="max-w-2xl xs:text-sm lg:text-lg">{lesson.description ?? ""}</p>
|
||||
{lesson.duration_seconds > 0 && (
|
||||
<div className="[&_svg]:size-4 flex gap-1.5 items-center">
|
||||
<Timer />
|
||||
{formatDuration(lesson.duration_seconds)}
|
||||
</div>
|
||||
)}
|
||||
<div className="w-fit">
|
||||
{!hasUnit ? (
|
||||
<div className="flex items-center gap-2 rounded-lg border bg-muted px-4 py-2.5 text-sm text-muted-foreground">
|
||||
<Hourglass className="size-4 shrink-0" />
|
||||
This lesson isn't part of a unit yet. Check back later.
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
className="w-fit bg-blue-500"
|
||||
onClick={handleStart}
|
||||
>
|
||||
{hasCompleted
|
||||
? <><CheckCheck /> Start Again</>
|
||||
: <><SendHorizonal /> Start Lesson</>
|
||||
}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 max-w-2xl">
|
||||
<h1 className="font-bold xs:text-2xl lg:text-3xl">{lesson.title}</h1>
|
||||
<p className="text-muted-foreground">{lesson.description ?? ""}</p>
|
||||
</div>
|
||||
|
||||
{lesson.objectives?.length > 0 && (
|
||||
<div className="bg-background border rounded-lg p-4 flex flex-col gap-3 max-w-2xl">
|
||||
<span className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">What you'll learn</span>
|
||||
<ul className="flex flex-col gap-2">
|
||||
{lesson.objectives.map((obj) => (
|
||||
<li key={obj.objective_id} className="flex items-start gap-2 text-card-foreground">
|
||||
<Check className="size-4 text-emerald-500 shrink-0 mt-0.5" />
|
||||
{obj.text}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Body */}
|
||||
<div className="lg:container lg:mx-auto flex flex-col gap-6 xs:px-3 xs:-mt-5 lg:-mt-0">
|
||||
<div className="flex flex-col gap-8 max-w-3xl">
|
||||
<div className="space-y-4">
|
||||
<div className="font-bold text-2xl">About this lesson</div>
|
||||
<div className="space-y-4 text-muted-foreground lg:text-lg">
|
||||
<p>{lesson.description ?? ""}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{lesson.objectives?.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
<div className="font-bold text-2xl flex items-center gap-2">
|
||||
<ListChecks className="size-5 text-muted-foreground" />
|
||||
Objectives
|
||||
</div>
|
||||
<ul className="space-y-2">
|
||||
{lesson.objectives.map((obj) => (
|
||||
<li key={obj.objective_id} className="flex items-start gap-2 text-muted-foreground lg:text-lg">
|
||||
<span className="mt-2.5 size-1.5 rounded-full bg-muted-foreground/60 shrink-0" />
|
||||
{obj.text}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasUnit && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate(`/units/${unit.uuid}`)}
|
||||
className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors w-fit"
|
||||
>
|
||||
<Layers className="size-4" />
|
||||
Part of unit: <span className="font-medium text-foreground">{unit.title}</span>
|
||||
<ArrowRight className="size-3.5" />
|
||||
</button>
|
||||
)}
|
||||
<div className="w-fit">
|
||||
{!hasUnit ? (
|
||||
<div className="flex items-center gap-2 rounded-lg border bg-muted px-4 py-2.5 text-sm text-muted-foreground">
|
||||
<Hourglass className="size-4 shrink-0" />
|
||||
This lesson isn't part of a unit yet. Check back later.
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Button className="w-fit bg-blue-500" onClick={handleStart}>
|
||||
{hasCompleted
|
||||
? <><CheckCheck /> Start Again</>
|
||||
: <><SendHorizonal /> Start Lesson</>
|
||||
}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hasUnit && (
|
||||
<UnitLessonsSidebar
|
||||
unitDetail={unitDetail}
|
||||
currentLessonUuid={uuid}
|
||||
onSelect={handleSelectSibling}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { House, ChevronLeft, ChevronRight, Layers } from "lucide-react";
|
||||
import { House, ChevronLeft, ChevronRight, Layers, Search } from "lucide-react";
|
||||
import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
@@ -70,6 +70,7 @@ const LessonsList = () => {
|
||||
const { tierMap, getTierCategories } = useClientTiers();
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [searchInput, setSearchInput] = useState("");
|
||||
const [search, setSearch] = useState("");
|
||||
const [lockFilter, setLockFilter] = useState("All");
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
@@ -98,6 +99,8 @@ const LessonsList = () => {
|
||||
const totalPages = Math.max(1, Math.ceil(filtered.length / ITEMS_PER_PAGE));
|
||||
const paginated = filtered.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);
|
||||
|
||||
const runSearch = () => { setSearch(searchInput); setCurrentPage(1); };
|
||||
|
||||
const handleViewDetails = (lesson) => {
|
||||
if (lesson.is_locked) {
|
||||
setSelectedLesson(lesson);
|
||||
@@ -122,12 +125,18 @@ const LessonsList = () => {
|
||||
{/* Search & Filters */}
|
||||
<div className="fixed top-[67px] left-0 right-0 z-10 bg-card border-b lg:static lg:bg-transparent lg:border-none py-3 xs:px-4 md:px-6 lg:px-0">
|
||||
<div className="flex items-center xs:flex-col lg:flex-row gap-4">
|
||||
<Input
|
||||
placeholder="Search lessons..."
|
||||
className="w-full bg-card lg:max-w-64 text-sm"
|
||||
value={search}
|
||||
onChange={(e) => { setSearch(e.target.value); setCurrentPage(1); }}
|
||||
/>
|
||||
<div className="flex items-center gap-2 w-full lg:max-w-64">
|
||||
<Input
|
||||
placeholder="Search lessons..."
|
||||
className="w-full bg-card text-sm"
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter") runSearch(); }}
|
||||
/>
|
||||
<Button size="icon" variant="outline" className="shrink-0 bg-card" onClick={runSearch} aria-label="Search">
|
||||
<Search />
|
||||
</Button>
|
||||
</div>
|
||||
<Select value={lockFilter} onValueChange={(v) => { setLockFilter(v); setCurrentPage(1); }}>
|
||||
<SelectTrigger className="w-full lg:w-48 bg-card">
|
||||
<SelectValue placeholder="Access" />
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
House, Timer, Layers, SendHorizonal, CheckCheck, CheckCircle2, Circle,
|
||||
FileQuestion, Hourglass, ClipboardList,
|
||||
House, Timer, CheckCircle2, Check, ClipboardList, Hourglass,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { motion } from "framer-motion";
|
||||
import { useEffect } from "react";
|
||||
@@ -25,87 +25,91 @@ function formatDuration(seconds = 0) {
|
||||
return `${m}min`;
|
||||
}
|
||||
|
||||
// ─── Content card (single unit — lessons + quiz, no multi-unit spine) ─────────
|
||||
// ─── Lessons roadmap (single unit — lessons in order + trailing quiz row) ─────
|
||||
|
||||
const UnitContentCard = ({ unitDetail, onLessonClick, onQuizClick }) => {
|
||||
const LessonsRoadmap = ({ unitDetail, currentLessonId, onLessonClick, onContinue, onQuizClick }) => {
|
||||
const lessons = unitDetail.lessons ?? [];
|
||||
const quiz = unitDetail.quiz ?? null;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="rounded-xl border bg-card"
|
||||
initial={{ opacity: 0, y: 14 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.35, ease: "easeOut" }}
|
||||
>
|
||||
<div className="px-4 py-4 border-b flex flex-col gap-2">
|
||||
<div className="[&_svg]:size-4 text-md text-muted-foreground flex items-center gap-4">
|
||||
{lessons.length > 0 && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Layers /> {lessons.length} {lessons.length === 1 ? "Lesson" : "Lessons"}
|
||||
</div>
|
||||
)}
|
||||
{unitDetail.duration_seconds > 0 && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Timer /> {formatDuration(unitDetail.duration_seconds)}
|
||||
</div>
|
||||
)}
|
||||
{quiz && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<FileQuestion /> Quiz
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 p-1.5">
|
||||
{lessons.map((lesson) => (
|
||||
<div
|
||||
<div className="flex flex-col gap-1">
|
||||
{lessons.map((lesson, index) => {
|
||||
const completed = lesson.status === "completed";
|
||||
const isCurrent = lesson.lesson_id === currentLessonId;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={lesson.lesson_id}
|
||||
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"
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, ease: "easeOut" }}
|
||||
className={cn(
|
||||
"flex items-center justify-between gap-3 py-3 px-3 rounded-lg cursor-pointer transition-colors",
|
||||
isCurrent ? "bg-blue-50 dark:bg-blue-950/40" : "hover:bg-muted/60"
|
||||
)}
|
||||
onClick={() => onLessonClick(lesson)}
|
||||
>
|
||||
<div className="flex items-start gap-3 select-none min-w-0">
|
||||
{lesson.status === "completed"
|
||||
? <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" />
|
||||
}
|
||||
<div className="flex items-start gap-3 min-w-0">
|
||||
<div className={cn(
|
||||
"w-7 h-7 rounded-full border bg-background flex items-center justify-center text-xs font-medium shrink-0",
|
||||
completed
|
||||
? "border-emerald-500 text-emerald-500"
|
||||
: isCurrent
|
||||
? "border-blue-500 text-blue-500"
|
||||
: "border-border text-muted-foreground"
|
||||
)}>
|
||||
{completed ? <Check className="size-3.5" /> : index + 1}
|
||||
</div>
|
||||
<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>
|
||||
)}
|
||||
<span className={cn(
|
||||
"block truncate",
|
||||
completed || isCurrent ? "font-medium text-card-foreground" : "text-muted-foreground"
|
||||
)}>
|
||||
{lesson.title}
|
||||
</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{formatDuration(lesson.duration_seconds) ?? "—"}
|
||||
{completed && " · Completed"}
|
||||
{isCurrent && !completed && " · In progress"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{lesson.duration_seconds > 0 && (
|
||||
<span className="text-sm shrink-0 ml-2">{formatDuration(lesson.duration_seconds)}</span>
|
||||
{isCurrent && !completed && (
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-blue-500 shrink-0"
|
||||
onClick={(e) => { e.stopPropagation(); onContinue(lesson); }}
|
||||
>
|
||||
Continue
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
|
||||
{quiz && (
|
||||
<div
|
||||
className="flex items-center justify-between py-2 px-3 mt-1 rounded-lg border border-dashed border-blue-300 dark:border-blue-700 bg-blue-50/60 dark:bg-blue-950/30 hover:bg-blue-100 dark:hover:bg-blue-900/40 transition-colors cursor-pointer"
|
||||
onClick={() => onQuizClick()}
|
||||
>
|
||||
<div className="flex items-center gap-3 select-none min-w-0">
|
||||
{quiz.has_passed
|
||||
? <CheckCircle2 className="size-4 text-emerald-500 shrink-0" />
|
||||
: <ClipboardList className="size-4 text-blue-500 shrink-0" />
|
||||
}
|
||||
<span className="text-sm font-medium text-blue-700 dark:text-blue-300 truncate">{quiz.title || "Quiz"}</span>
|
||||
</div>
|
||||
<Badge className={cn(
|
||||
"shrink-0 ml-2 text-[10px]",
|
||||
quiz.has_passed
|
||||
? "bg-green-100 text-green-700 border border-green-400 dark:bg-green-900/40 dark:text-green-400 dark:border-green-700"
|
||||
: "bg-blue-100 text-blue-700 border border-blue-300 dark:bg-blue-900/40 dark:text-blue-400 dark:border-blue-700"
|
||||
)}>
|
||||
{quiz.has_passed ? "Passed" : "Quiz"}
|
||||
</Badge>
|
||||
{quiz && (
|
||||
<div
|
||||
className="flex items-center justify-between py-3 px-3 mt-1 rounded-lg border border-dashed border-blue-300 dark:border-blue-700 bg-blue-50/60 dark:bg-blue-950/30 hover:bg-blue-100 dark:hover:bg-blue-900/40 transition-colors cursor-pointer"
|
||||
onClick={() => onQuizClick()}
|
||||
>
|
||||
<div className="flex items-center gap-3 select-none min-w-0">
|
||||
{quiz.has_passed
|
||||
? <CheckCircle2 className="size-5 text-emerald-500 shrink-0" />
|
||||
: <ClipboardList className="size-5 text-blue-500 shrink-0" />
|
||||
}
|
||||
<span className="font-medium text-blue-700 dark:text-blue-300 truncate">{quiz.title || "Quiz"}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
<Badge className={cn(
|
||||
"shrink-0 ml-2 text-[10px]",
|
||||
quiz.has_passed
|
||||
? "bg-green-100 text-green-700 border border-green-400 dark:bg-green-900/40 dark:text-green-400 dark:border-green-700"
|
||||
: "bg-blue-100 text-blue-700 border border-blue-300 dark:bg-blue-900/40 dark:text-blue-400 dark:border-blue-700"
|
||||
)}>
|
||||
{quiz.has_passed ? "Passed" : "Quiz"}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -118,7 +122,6 @@ const UnitDetails = () => {
|
||||
const { getUnitDetail, unitDetail, unitDetailLoading, unitBlocked, unitBlockedInfo, resetUnitDetail } = useLibrary();
|
||||
const { tierMap, getTierCategories } = useClientTiers();
|
||||
|
||||
const hasCompleted = !!unitDetail?.is_completed;
|
||||
const contentNotReady = !unitDetail?.duration_seconds;
|
||||
|
||||
useEffect(() => {
|
||||
@@ -149,9 +152,17 @@ const UnitDetails = () => {
|
||||
);
|
||||
}
|
||||
|
||||
const lessons = unitDetail?.lessons ?? [];
|
||||
const completedCount = lessons.filter((l) => l.status === "completed").length;
|
||||
const currentLesson = lessons.find((l) => l.status !== "completed") ?? null;
|
||||
const progressPct = lessons.length > 0 ? Math.round((completedCount / lessons.length) * 100) : 0;
|
||||
|
||||
const handleLessonClick = (lesson) => {
|
||||
navigate(`/lessons/${lesson.uuid}`);
|
||||
};
|
||||
const handleContinue = (lesson) => {
|
||||
navigate(`/units/${uuid}/read`, { state: { lessonId: lesson.lesson_id } });
|
||||
};
|
||||
const handleQuizClick = () => {
|
||||
navigate(`/units/${uuid}/read`, { state: { quizId: true } });
|
||||
};
|
||||
@@ -159,74 +170,45 @@ const UnitDetails = () => {
|
||||
return (
|
||||
<div>
|
||||
<PageMeta title={unitDetail ? `${unitDetail.title} - STARR` : undefined} description={unitDetail?.description} />
|
||||
<div className="my-17">
|
||||
<div className="flex flex-col gap-8">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="xs:my-20 lg:my-28 lg:container lg:mx-auto xs:px-4 lg:px-4 flex flex-col gap-6 max-w-3xl">
|
||||
<AppBreadcrumb items={items} />
|
||||
|
||||
{/* Hero */}
|
||||
<div className="bg-primary dark:bg-accent/50">
|
||||
<div className="lg:container lg:mx-auto flex flex-col gap-6 xs:px-6 xs:py-6 lg:px-4 lg:py-16">
|
||||
<AppBreadcrumb
|
||||
color={{ link: { color: "text-white" }, page: { color: "text-white" } }}
|
||||
items={items}
|
||||
/>
|
||||
<div className="flex lg:flex-row items-start justify-between w-full text-white">
|
||||
<div className="flex flex-col gap-4">
|
||||
<h1 className="font-bold xs:text-2xl lg:text-4xl">{unitDetail?.title ?? "Unit"}</h1>
|
||||
<p className="max-w-2xl xs:text-sm lg:text-lg">{unitDetail?.description ?? ""}</p>
|
||||
{unitDetail?.duration_seconds > 0 && (
|
||||
<div className="[&_svg]:size-4 flex gap-1.5 items-center">
|
||||
<Timer />
|
||||
{formatDuration(unitDetail.duration_seconds)}
|
||||
</div>
|
||||
)}
|
||||
<div className="w-fit">
|
||||
{contentNotReady ? (
|
||||
<div className="flex items-center gap-2 rounded-lg border bg-muted px-4 py-2.5 text-sm text-muted-foreground">
|
||||
<Hourglass className="size-4 shrink-0" />
|
||||
This unit is currently being prepared. Please check back later.
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
className="w-fit bg-blue-500"
|
||||
onClick={() => navigate(`/units/${uuid}/read`)}
|
||||
>
|
||||
{hasCompleted
|
||||
? <><CheckCheck /> Start Again</>
|
||||
: <><SendHorizonal /> Start Learning</>
|
||||
}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="lg:container lg:mx-auto flex flex-col gap-6 xs:px-3 xs:-mt-5 lg:-mt-0">
|
||||
<div className="flex flex-col gap-8 max-w-3xl">
|
||||
<div className="space-y-4">
|
||||
<div className="font-bold text-2xl">About this unit</div>
|
||||
<div className="space-y-4 text-muted-foreground lg:text-lg">
|
||||
<p>{unitDetail?.description ?? ""}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{unitDetail && !contentNotReady && (
|
||||
<div className="space-y-4">
|
||||
<div className="font-bold text-2xl">Unit content</div>
|
||||
<UnitContentCard
|
||||
unitDetail={unitDetail}
|
||||
onLessonClick={handleLessonClick}
|
||||
onQuizClick={handleQuizClick}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
<span className="text-xs font-semibold tracking-wide text-blue-600 dark:text-blue-400 uppercase">Unit</span>
|
||||
<h1 className="font-bold xs:text-2xl lg:text-4xl">{unitDetail?.title ?? "Unit"}</h1>
|
||||
<p className="text-muted-foreground lg:text-lg">{unitDetail?.description ?? ""}</p>
|
||||
</div>
|
||||
|
||||
{contentNotReady ? (
|
||||
<div className="flex items-center gap-2 rounded-lg border bg-muted px-4 py-2.5 text-sm text-muted-foreground w-fit">
|
||||
<Hourglass className="size-4 shrink-0" />
|
||||
This unit is currently being prepared. Please check back later.
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground [&_svg]:size-4">
|
||||
<span>{lessons.length} {lessons.length === 1 ? "lesson" : "lessons"}</span>
|
||||
<span>·</span>
|
||||
<span className="flex items-center gap-1"><Timer /> {formatDuration(unitDetail.duration_seconds) ?? "—"} total</span>
|
||||
<span>·</span>
|
||||
<span className="text-blue-600 dark:text-blue-400 font-medium">{completedCount} of {lessons.length} complete</span>
|
||||
</div>
|
||||
<Progress value={progressPct} />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<h2 className="font-bold text-xl">Lessons in this unit</h2>
|
||||
<LessonsRoadmap
|
||||
unitDetail={unitDetail}
|
||||
currentLessonId={currentLesson?.lesson_id}
|
||||
onLessonClick={handleLessonClick}
|
||||
onContinue={handleContinue}
|
||||
onQuizClick={handleQuizClick}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { House, ChevronLeft, ChevronRight, Layers } from "lucide-react";
|
||||
import { House, ChevronLeft, ChevronRight, Layers, Search } from "lucide-react";
|
||||
import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
@@ -70,6 +70,7 @@ const UnitsList = () => {
|
||||
const { tierMap, getTierCategories } = useClientTiers();
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [searchInput, setSearchInput] = useState("");
|
||||
const [search, setSearch] = useState("");
|
||||
const [lockFilter, setLockFilter] = useState("All");
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
@@ -98,6 +99,8 @@ const UnitsList = () => {
|
||||
const totalPages = Math.max(1, Math.ceil(filtered.length / ITEMS_PER_PAGE));
|
||||
const paginated = filtered.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);
|
||||
|
||||
const runSearch = () => { setSearch(searchInput); setCurrentPage(1); };
|
||||
|
||||
const handleViewDetails = (unit) => {
|
||||
if (unit.is_locked) {
|
||||
setSelectedUnit(unit);
|
||||
@@ -122,12 +125,18 @@ const UnitsList = () => {
|
||||
{/* Search & Filters */}
|
||||
<div className="fixed top-[67px] left-0 right-0 z-10 bg-card border-b lg:static lg:bg-transparent lg:border-none py-3 xs:px-4 md:px-6 lg:px-0">
|
||||
<div className="flex items-center xs:flex-col lg:flex-row gap-4">
|
||||
<Input
|
||||
placeholder="Search units..."
|
||||
className="w-full bg-card lg:max-w-64 text-sm"
|
||||
value={search}
|
||||
onChange={(e) => { setSearch(e.target.value); setCurrentPage(1); }}
|
||||
/>
|
||||
<div className="flex items-center gap-2 w-full lg:max-w-64">
|
||||
<Input
|
||||
placeholder="Search units..."
|
||||
className="w-full bg-card text-sm"
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter") runSearch(); }}
|
||||
/>
|
||||
<Button size="icon" variant="outline" className="shrink-0 bg-card" onClick={runSearch} aria-label="Search">
|
||||
<Search />
|
||||
</Button>
|
||||
</div>
|
||||
<Select value={lockFilter} onValueChange={(v) => { setLockFilter(v); setCurrentPage(1); }}>
|
||||
<SelectTrigger className="w-full lg:w-48 bg-card">
|
||||
<SelectValue placeholder="Access" />
|
||||
|
||||
Reference in New Issue
Block a user