First commit

2026-02-07 18:08:42 -06:00
commit b7a86a2d1c
57 changed files with 9188 additions and 0 deletions
--- a/app/(protected)/courses/[slug]/learn/page.tsx
+++ b/app/(protected)/courses/[slug]/learn/page.tsx
@@ -0,0 +1,214 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import LessonRow from "@/components/LessonRow";
+import ProgressBar from "@/components/ProgressBar";
+import { getCourseBySlug } from "@/lib/data/courseCatalog";
+import {
+  getCourseProgress,
+  getCourseProgressPercent,
+  markLessonComplete,
+  setLastLesson,
+} from "@/lib/progress/localProgress";
+import { teacherCoursesUpdatedEventName } from "@/lib/data/teacherCourses";
+import { supabaseBrowser } from "@/lib/supabase/browser";
+import type { Course, Lesson } from "@/types/course";
+
+const lessonContent = (lesson: Lesson) => {
+  if (lesson.type === "video") {
+    return (
+      <div className="space-y-3">
+        <div className="aspect-video rounded-2xl border border-slate-300 bg-[#f6f6f7] p-4">
+          <div className="flex h-full items-center justify-center rounded-xl border-2 border-dashed border-slate-300 text-lg text-slate-500">
+            Video placeholder ({lesson.minutes} min)
+          </div>
+        </div>
+        {lesson.videoUrl ? (
+          <p className="text-sm text-slate-500">
+            Demo video URL: <span className="font-medium text-slate-700">{lesson.videoUrl}</span>
+          </p>
+        ) : null}
+      </div>
+    );
+  }
+
+  if (lesson.type === "reading") {
+    return (
+      <div className="rounded-2xl border border-slate-300 bg-white p-5">
+        <p className="text-lg leading-9 text-slate-700">
+          Reading placeholder content for lesson: {lesson.title}. Replace with full lesson text and references in Phase 2.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-2xl border border-slate-300 bg-white p-5">
+      <p className="text-lg text-slate-700">Interactive placeholder for lesson: {lesson.title}.</p>
+      <button className="acve-button-secondary mt-3 px-3 py-1.5 text-sm" type="button">
+        Start interactive
+      </button>
+    </div>
+  );
+};
+
+export default function CourseLearnPage() {
+  const params = useParams<{ slug: string }>();
+  const slug = params.slug;
+  const [course, setCourse] = useState<Course | undefined>(() => getCourseBySlug(slug));
+  const [hasResolvedCourse, setHasResolvedCourse] = useState(false);
+
+  const [userId, setUserId] = useState("guest");
+  const [isAuthed, setIsAuthed] = useState(false);
+  const [selectedLessonId, setSelectedLessonId] = useState<string | null>(null);
+  const [completedLessonIds, setCompletedLessonIds] = useState<string[]>([]);
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const loadCourse = () => {
+      setCourse(getCourseBySlug(slug));
+      setHasResolvedCourse(true);
+    };
+    loadCourse();
+    window.addEventListener(teacherCoursesUpdatedEventName, loadCourse);
+    return () => window.removeEventListener(teacherCoursesUpdatedEventName, loadCourse);
+  }, [slug]);
+
+  useEffect(() => {
+    const client = supabaseBrowser();
+    if (!client) return;
+
+    client.auth.getUser().then(({ data }) => {
+      setUserId(data.user?.id ?? "guest");
+      setIsAuthed(Boolean(data.user));
+    });
+
+    const { data } = client.auth.onAuthStateChange((_event, session) => {
+      setUserId(session?.user?.id ?? "guest");
+      setIsAuthed(Boolean(session?.user));
+    });
+
+    return () => data.subscription.unsubscribe();
+  }, []);
+
+  useEffect(() => {
+    if (!course) return;
+
+    const progressState = getCourseProgress(userId, course.slug);
+    const fallback = course.lessons[0]?.id ?? null;
+    setSelectedLessonId(progressState.lastLessonId ?? fallback);
+    setCompletedLessonIds(progressState.completedLessonIds);
+    setProgress(getCourseProgressPercent(userId, course.slug, course.lessons.length));
+  }, [course, userId]);
+
+  const completionSet = new Set(completedLessonIds);
+
+  if (!course && !hasResolvedCourse) {
+    return (
+      <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+        <p className="text-slate-600">Loading course...</p>
+      </div>
+    );
+  }
+
+  if (!course) {
+    return (
+      <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+        <h1 className="text-2xl font-bold text-slate-900">Course not found</h1>
+        <p className="mt-2 text-slate-600">The requested course slug does not exist in mock data.</p>
+        <Link className="mt-4 inline-flex rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white" href="/courses">
+          Back to courses
+        </Link>
+      </div>
+    );
+  }
+
+  const selectedLesson =
+    course.lessons.find((lesson) => lesson.id === selectedLessonId) ?? course.lessons[0];
+
+  if (!selectedLesson) {
+    return (
+      <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+        <h1 className="text-2xl font-bold text-slate-900">No lessons available</h1>
+        <p className="mt-2 text-slate-600">This course currently has no lessons configured.</p>
+        <Link className="mt-4 inline-flex rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white" href={`/courses/${course.slug}`}>
+          Back to course
+        </Link>
+      </div>
+    );
+  }
+
+  const isLocked = (lesson: Lesson) => !lesson.isPreview && !isAuthed;
+
+  const onSelectLesson = (lesson: Lesson) => {
+    if (isLocked(lesson)) return;
+    setSelectedLessonId(lesson.id);
+    setLastLesson(userId, course.slug, lesson.id);
+  };
+
+  const onMarkComplete = () => {
+    if (!selectedLesson) return;
+    markLessonComplete(userId, course.slug, selectedLesson.id);
+    const progressState = getCourseProgress(userId, course.slug);
+    setCompletedLessonIds(progressState.completedLessonIds);
+    setProgress(getCourseProgressPercent(userId, course.slug, course.lessons.length));
+  };
+
+  return (
+    <div className="space-y-6">
+      <header className="acve-panel p-6">
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <div>
+            <Link className="inline-flex items-center gap-2 text-base text-slate-600 hover:text-brand md:text-xl" href={`/courses/${course.slug}`}>
+              <span className="text-base">{"<-"}</span>
+              Back to Course
+            </Link>
+            <h1 className="mt-2 text-3xl text-[#222b39] md:text-5xl">Course Content</h1>
+          </div>
+          <div className="min-w-[240px]">
+            <ProgressBar value={progress} label={`${progress}% complete`} />
+          </div>
+        </div>
+      </header>
+
+      <section className="space-y-3">
+        {course.lessons.map((lesson, index) => (
+          <div key={lesson.id} className="space-y-1">
+            <LessonRow
+              index={index}
+              isActive={lesson.id === selectedLesson?.id}
+              isLocked={isLocked(lesson)}
+              lesson={lesson}
+              onSelect={() => onSelectLesson(lesson)}
+            />
+            {completionSet.has(lesson.id) ? (
+              <p className="pl-2 text-sm font-medium text-[#2f9d73]">Completed</p>
+            ) : null}
+          </div>
+        ))}
+      </section>
+
+      <section className="acve-panel space-y-4 p-6">
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <h2 className="text-2xl text-[#222b39] md:text-4xl">{selectedLesson.title}</h2>
+            <p className="mt-1 text-base text-slate-600">
+              {selectedLesson.type} | {selectedLesson.minutes} min
+            </p>
+          </div>
+          <button
+            className="acve-button-primary px-4 py-2 text-sm font-semibold hover:brightness-105"
+            onClick={onMarkComplete}
+            type="button"
+          >
+            Mark complete
+          </button>
+        </div>
+
+        {lessonContent(selectedLesson)}
+      </section>
+    </div>
+  );
+}
--- a/app/(protected)/practice/[slug]/page.tsx
+++ b/app/(protected)/practice/[slug]/page.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import ProgressBar from "@/components/ProgressBar";
+import { getPracticeBySlug, mockPracticeModules } from "@/lib/data/mockPractice";
+
+export default function PracticeExercisePage() {
+  const params = useParams<{ slug: string }>();
+  const practiceModule = getPracticeBySlug(params.slug);
+
+  const [index, setIndex] = useState(0);
+  const [score, setScore] = useState(0);
+  const [finished, setFinished] = useState(false);
+  const [selected, setSelected] = useState<number | null>(null);
+
+  if (!practiceModule) {
+    return (
+      <div className="acve-panel p-6">
+        <h1 className="text-2xl font-bold text-slate-900">Practice module not found</h1>
+        <p className="mt-2 text-slate-600">The requested practice slug does not exist in mock data.</p>
+        <Link className="acve-button-primary mt-4 inline-flex px-4 py-2 text-sm font-semibold" href="/practice">
+          Back to practice
+        </Link>
+      </div>
+    );
+  }
+
+  if (!practiceModule.isInteractive || !practiceModule.questions?.length) {
+    return (
+      <div className="acve-panel p-6">
+        <h1 className="text-2xl font-bold text-slate-900">{practiceModule.title}</h1>
+        <p className="mt-2 text-slate-600">This practice module is scaffolded and will be enabled in a later iteration.</p>
+      </div>
+    );
+  }
+
+  const total = practiceModule.questions.length;
+  const current = practiceModule.questions[index];
+  const progress = Math.round((index / total) * 100);
+
+  const pick = (choiceIndex: number) => {
+    if (selected !== null) return;
+    setSelected(choiceIndex);
+    if (choiceIndex === current.answerIndex) {
+      setScore((value) => value + 1);
+    }
+  };
+
+  const next = () => {
+    if (index + 1 >= total) {
+      setFinished(true);
+      return;
+    }
+    setIndex((value) => value + 1);
+    setSelected(null);
+  };
+
+  const restart = () => {
+    setIndex(0);
+    setScore(0);
+    setSelected(null);
+    setFinished(false);
+  };
+
+  if (finished) {
+    return (
+      <div className="mx-auto max-w-3xl rounded-2xl border border-slate-300 bg-white p-8 text-center shadow-sm">
+        <h1 className="acve-heading text-5xl">Exercise complete</h1>
+        <p className="mt-2 text-3xl text-slate-700">
+          Final score: {score}/{total}
+        </p>
+        <button className="acve-button-primary mt-6 px-6 py-2 text-lg font-semibold hover:brightness-105" onClick={restart} type="button">
+          Restart
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <section className="text-center">
+        <p className="acve-pill mx-auto mb-4 w-fit">Practice and Exercises</p>
+        <h1 className="acve-heading text-4xl md:text-6xl">Master Your Skills</h1>
+      </section>
+
+      <section className="grid gap-4 md:grid-cols-3">
+        {mockPracticeModules.map((module, moduleIndex) => {
+          const isActive = module.slug === practiceModule.slug;
+          return (
+            <div
+              key={module.slug}
+              className={`rounded-2xl border p-6 ${
+                isActive ? "border-brand bg-white shadow-sm" : "border-slate-300 bg-white"
+              }`}
+            >
+              <div className="mb-2 text-3xl text-brand md:text-4xl">{moduleIndex === 0 ? "A/" : moduleIndex === 1 ? "[]" : "O"}</div>
+              <h2 className="text-2xl text-[#222a38] md:text-4xl">{module.title}</h2>
+              <p className="mt-2 text-lg text-slate-600 md:text-2xl">{module.description}</p>
+            </div>
+          );
+        })}
+      </section>
+
+      <section className="acve-panel p-4">
+        <div className="mb-3 flex items-center justify-between gap-4">
+          <p className="text-xl font-semibold text-slate-700">
+            Question {index + 1} / {total}
+          </p>
+          <p className="text-xl font-semibold text-[#222a38] md:text-2xl">Score: {score}/{total}</p>
+        </div>
+        <ProgressBar value={progress} />
+      </section>
+
+      <section className="acve-panel p-6">
+        <div className="rounded-2xl bg-[#f6f6f8] px-6 py-10 text-center">
+          <p className="text-lg text-slate-500 md:text-2xl">Spanish Term</p>
+          <h2 className="acve-heading mt-2 text-3xl md:text-6xl">{current.prompt.replace("Spanish term: ", "")}</h2>
+        </div>
+
+        <div className="mt-6 grid gap-3">
+          {current.choices.map((choice, choiceIndex) => {
+            const isPicked = selected === choiceIndex;
+            const isCorrect = choiceIndex === current.answerIndex;
+            const stateClass =
+              selected === null
+                ? "border-slate-300 hover:bg-slate-50"
+                : isCorrect
+                  ? "border-[#2f9d73] bg-[#edf9f4]"
+                  : isPicked
+                    ? "border-[#bf3c5f] bg-[#fff1f4]"
+                    : "border-slate-300";
+
+            return (
+              <button
+                key={choice}
+                className={`rounded-xl border px-4 py-3 text-left text-base text-slate-800 md:text-xl ${stateClass}`}
+                onClick={() => pick(choiceIndex)}
+                type="button"
+              >
+                {choice}
+              </button>
+            );
+          })}
+        </div>
+
+        <button
+          className="acve-button-primary mt-6 px-6 py-2 text-lg font-semibold hover:brightness-105 disabled:opacity-50"
+          disabled={selected === null}
+          onClick={next}
+          type="button"
+        >
+          {index + 1 === total ? "Finish" : "Next question"}
+        </button>
+      </section>
+    </div>
+  );
+}
--- a/app/(protected)/teacher/courses/[slug]/edit/page.tsx
+++ b/app/(protected)/teacher/courses/[slug]/edit/page.tsx
@@ -0,0 +1,13 @@
+import { requireTeacher } from "@/lib/auth/requireTeacher";
+import TeacherEditCourseForm from "@/components/teacher/TeacherEditCourseForm";
+
+type TeacherEditCoursePageProps = {
+  params: Promise<{ slug: string }>;
+};
+
+export default async function TeacherEditCoursePage({ params }: TeacherEditCoursePageProps) {
+  await requireTeacher();
+  const { slug } = await params;
+
+  return <TeacherEditCourseForm slug={slug} />;
+}
--- a/app/(protected)/teacher/courses/[slug]/lessons/new/page.tsx
+++ b/app/(protected)/teacher/courses/[slug]/lessons/new/page.tsx
@@ -0,0 +1,13 @@
+import { requireTeacher } from "@/lib/auth/requireTeacher";
+import TeacherNewLessonForm from "@/components/teacher/TeacherNewLessonForm";
+
+type TeacherNewLessonPageProps = {
+  params: Promise<{ slug: string }>;
+};
+
+export default async function TeacherNewLessonPage({ params }: TeacherNewLessonPageProps) {
+  await requireTeacher();
+  const { slug } = await params;
+
+  return <TeacherNewLessonForm slug={slug} />;
+}
--- a/app/(protected)/teacher/courses/new/page.tsx
+++ b/app/(protected)/teacher/courses/new/page.tsx
@@ -0,0 +1,7 @@
+import { requireTeacher } from "@/lib/auth/requireTeacher";
+import TeacherNewCourseForm from "@/components/teacher/TeacherNewCourseForm";
+
+export default async function TeacherNewCoursePage() {
+  await requireTeacher();
+  return <TeacherNewCourseForm />;
+}
--- a/app/(protected)/teacher/page.tsx
+++ b/app/(protected)/teacher/page.tsx
@@ -0,0 +1,7 @@
+import { requireTeacher } from "@/lib/auth/requireTeacher";
+import TeacherDashboardClient from "@/components/teacher/TeacherDashboardClient";
+
+export default async function TeacherDashboardPage() {
+  await requireTeacher();
+  return <TeacherDashboardClient />;
+}