starting lecture UI

nextjs/src/app/course/[courseName]/calendar/Day.tsx

@@ -10,7 +10,7 @@ import Link from "next/link";
 import { IModuleItem } from "@/models/local/IModuleItem";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
 import { getDayOfWeek } from "@/models/local/localCourse";
-import { getModuleItemUrl } from "@/services/urlUtils";
+import { getLectureUrl, getModuleItemUrl } from "@/services/urlUtils";
 import { LocalAssignment } from "@/models/local/assignment/localAssignment";
 import { LocalQuiz } from "@/models/local/quiz/localQuiz";
 import { LocalCoursePage } from "@/models/local/page/localCoursePage";
@@ -44,7 +44,7 @@ export default function Day({ day, month }: { day: string; month: number }) {
       onDrop={(e) => itemDrop(e, day)}
       onDragOver={(e) => e.preventDefault()}
     >
-      <div className="ms-1">{dayAsDate.getDate()}</div>
+      <DayTitle day={day} dayAsDate={dayAsDate} />
       <div>
         {todaysAssignments.map(({ assignment, moduleName }) => (
           <DraggableListItem
@@ -75,6 +75,15 @@ export default function Day({ day, month }: { day: string; month: number }) {
   );
 }
 
+function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) {
+  const { courseName } = useCourseContext();
+  return (
+    <Link className="ms-1" href={getLectureUrl(courseName, day)}>
+      {dayAsDate.getDate()}
+    </Link>
+  );
+}
+
 function getTodaysItems(todaysModules: {
   [moduleName: string]: {
     assignments: LocalAssignment[];
@@ -127,7 +136,7 @@ function DraggableListItem({
       shallow={true}
       className={
         " border rounded-sm px-1 mx-1 break-all " +
-        " border-slate-600 bg-slate-800 " + 
+        " border-slate-600 bg-slate-800 " +
         " block "
       }
       role="button"

nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLecture.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { MonacoEditor } from "@/components/editor/MonacoEditor";
+import { useState } from "react";
+
+export default function EditLecture({ lectureDay }: { lectureDay: string }) {
+  const [text, setText] = useState("");
+  return (
+    <div className="h-full flex flex-col">
+      <div className="columns-2 min-h-0 flex-1">
+        <div className="flex-1 h-full">
+          <MonacoEditor value={text} onChange={setText} />
+        </div>
+        <div className="h-full">
+          {/* <div className="text-red-300">{error && error}</div> */}
+          {/* <AssignmentPreview assignment={assignment} /> */}
+        </div>
+      </div>
+    </div>
+  );
+}

nextjs/src/app/course/[courseName]/lecture/[lectureDay]/layout.tsx

@@ -0,0 +1,23 @@
+import { Suspense } from "react";
+import CourseContextProvider from "../../context/CourseContextProvider";
+
+export default async function LectureLayout({
+  children,
+  params: { courseName, lectureDay },
+}: {
+  children: React.ReactNode;
+  params: { courseName: string; lectureDay: string };
+}) {
+  const decodedCourseName = decodeURIComponent(courseName);
+  if (courseName.includes(".js.map")) {
+    console.log("cannot load course that is .js.map " + decodedCourseName);
+    return <div></div>;
+  }
+  return (
+    <Suspense>
+      <CourseContextProvider localCourseName={decodedCourseName}>
+        {children}
+      </CourseContextProvider>
+    </Suspense>
+  );
+}

nextjs/src/app/course/[courseName]/lecture/[lectureDay]/page.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import EditLecture from "./EditLecture";
+
+export default function page({
+  params: { lectureDay },
+}: {
+  params: { lectureDay: string };
+}) {
+  const decodedLectureDay = decodeURIComponent(lectureDay);
+  console.log(decodedLectureDay);
+  return <EditLecture lectureDay={decodedLectureDay} />;
+}