better lecture ui

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

@@ -14,6 +14,7 @@ import { ItemInDay } from "./ItemInDay";
 import { useTodaysItems } from "./useTodaysItems";
 import Modal from "@/components/Modal";
 import NewItemForm from "../../modules/NewItemForm";
+import { useLecturesByWeekQuery } from "@/hooks/localCourse/lectureHooks";
 
 export default function Day({ day, month }: { day: string; month: number }) {
   const dayAsDate = getDateFromStringOrThrow(
@@ -129,14 +130,18 @@ export default function Day({ day, month }: { day: string; month: number }) {
 
 function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) {
   const { courseName } = useCourseContext();
+  const { data: weeks } = useLecturesByWeekQuery();
+  const todaysLecture = weeks
+    .flatMap((w) => w.lectures)
+    .find((l) => l.date == getDateOnlyMarkdownString(dayAsDate));
   return (
     <div className="flex justify-between">
-      <Link className="ms-1" href={getLectureUrl(courseName, day)}>
-        {dayAsDate.getDate()}
+      <Link className="ms-1 me-1 truncate text-nowrap transition-all hover:font-bold hover:text-slate-300" href={getLectureUrl(courseName, day)}>
+        {dayAsDate.getDate()} {todaysLecture?.name}
       </Link>
       <Modal
         buttonText="+"
-        buttonClass="unstyled hover:font-bold px-1 mb-auto mt-0 pt-0"
+        buttonClass="unstyled hover:font-bold hover:scale-125 px-1 mb-auto mt-0 pt-0"
       >
         {({ closeModal }) => (
           <div>

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

@@ -5,22 +5,25 @@ import {
   useLecturesByWeekQuery,
   useLectureUpdateMutation,
 } from "@/hooks/localCourse/lectureHooks";
-import { Lecture } from "@/models/local/lecture";
 import {
   lectureToString,
   parseLecture,
 } from "@/services/fileStorage/utils/lectureUtils";
 import { useEffect, useState } from "react";
 import LecturePreview from "./LecturePreview";
+import EditLectureTitle from "./EditLectureTitle";
 
 export default function EditLecture({ lectureDay }: { lectureDay: string }) {
   const { data: weeks } = useLecturesByWeekQuery();
   const updateLecture = useLectureUpdateMutation();
+
   const lecture = weeks
     .flatMap(({ lectures }) => lectures.map((lecture) => lecture))
     .find((l) => l.date === lectureDay);
 
-  const startingText = lecture ? lectureToString(lecture) : `Name: Name Here
+  const startingText = lecture
+    ? lectureToString(lecture)
+    : `Name: 
 Date: ${lectureDay}
 ---
 `;
@@ -50,6 +53,7 @@ Date: ${lectureDay}
 
   return (
     <div className="h-full flex flex-col">
+      <EditLectureTitle lectureDay={lectureDay} />
       <div className="columns-2 min-h-0 flex-1">
         <div className="flex-1 h-full">
           <MonacoEditor value={text} onChange={setText} />

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

@@ -0,0 +1,47 @@
+import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import { getDayOfWeek } from "@/models/local/localCourse";
+import { getDateFromString } from "@/models/local/timeUtils";
+import { getLectureWeekName } from "@/services/fileStorage/utils/lectureUtils";
+import { getCourseUrl, getLecturePreviewUrl } from "@/services/urlUtils";
+import { useRouter } from "next/navigation";
+import { useCourseContext } from "../../context/courseContext";
+import Link from "next/link";
+
+export default function EditLectureTitle({
+  lectureDay,
+}: {
+  lectureDay: string;
+}) {
+  const router = useRouter();
+  const { data: settings } = useLocalCourseSettingsQuery();
+  const { courseName } = useCourseContext();
+  const lectureDate = getDateFromString(lectureDay);
+  const lectureWeekName = getLectureWeekName(settings.startDate, lectureDay);
+  return (
+    <div className="flex justify-between">
+      <div className="my-auto">
+        <Link
+          className="btn"
+          href={getCourseUrl(courseName)}
+        >
+          {courseName}
+        </Link>
+      </div>
+      <div className="flex justify-center  ">
+        <h3 className="mt-auto me-3 text-slate-500 ">Lecture</h3>
+        <h1 className="">
+          {lectureDate && getDayOfWeek(lectureDate)}{" "}
+          {lectureWeekName.toUpperCase()}
+        </h1>
+      </div>
+      <div className="text-end my-auto">
+        <Link
+          className="btn"
+          href={getLecturePreviewUrl(courseName, lectureDay)}
+        >
+          preview
+        </Link>
+      </div>
+    </div>
+  );
+}

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

@@ -3,16 +3,10 @@ import { markdownToHTMLSafe } from "@/services/htmlMarkdownUtils";
 
 export default function LecturePreview({ lecture }: { lecture: Lecture }) {
   return (
-    <div>
-      <section>
-        <div className="flex">
-          <div className="flex-1 text-end pe-3">Name</div>
-          <div className="flex-1">{lecture.name}</div>
-        </div>
-        <div className="flex">
-          <div className="flex-1 text-end pe-3">Date</div>
-          <div className="flex-1">{lecture.date}</div>
-        </div>
+    <>
+      <section className="border-b-slate-700 border-b-4">
+        <div className="text-center font-extrabold">{lecture.name}</div>
+        <div className="text-center font-bold text-slate-400">{lecture.date}</div>
       </section>
       <section>
         <div
@@ -22,6 +16,6 @@ export default function LecturePreview({ lecture }: { lecture: Lecture }) {
           }}
         ></div>
       </section>
-    </div>
+    </>
   );
 }

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

@@ -1,4 +1,3 @@
-import React from "react";
 import EditLecture from "./EditLecture";
 import { getDateFromStringOrThrow, getDateOnlyMarkdownString } from "@/models/local/timeUtils";
 

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

@@ -0,0 +1,44 @@
+"use client";
+
+import { useLecturesByWeekQuery } from "@/hooks/localCourse/lectureHooks";
+import LecturePreview from "../LecturePreview";
+import { getLectureUrl } from "@/services/urlUtils";
+import { useCourseContext } from "../../../context/courseContext";
+import Link from "next/link";
+
+export default function LecturePreviewPage({
+  lectureDay,
+}: {
+  lectureDay: string;
+}) {
+  const { courseName } = useCourseContext();
+  const { data: weeks } = useLecturesByWeekQuery();
+  const lecture = weeks
+    .flatMap(({ lectures }) => lectures.map((lecture) => lecture))
+    .find((l) => l.date === lectureDay);
+
+  if (!lecture) {
+    return <div>lecture not found for day</div>;
+  }
+  return (
+    <div className="flex h-full xl:flex-row flex-col ">
+      <div className="flex-shrink flex-1 pb-1 ms-3 xl:ms-0">
+        <Link className="btn" href={getLectureUrl(courseName, lectureDay)}>
+          Edit Page
+        </Link>
+      </div>
+      <div className="flex  justify-center min-h-0 px-2">
+        <div
+          className="
+          w-full max-w-screen-lg 
+          border-slate-700 border-4 rounded-md
+          p-3 overflow-auto
+        "
+        >
+          <LecturePreview lecture={lecture} />
+        </div>
+      </div>
+      <div className="flex-shrink flex-1"></div>
+    </div>
+  );
+}

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

@@ -0,0 +1,21 @@
+import {
+  getDateFromStringOrThrow,
+  getDateOnlyMarkdownString,
+} from "@/models/local/timeUtils";
+import LecturePreviewPage from "./LecturePreviewPage";
+
+export default function Page({
+  params: { lectureDay },
+}: {
+  params: { lectureDay: string };
+}) {
+  const decodedLectureDay = decodeURIComponent(lectureDay);
+  console.log(decodedLectureDay);
+  const lectureDate = getDateFromStringOrThrow(
+    decodedLectureDay,
+    "lecture day in lecture page"
+  );
+  const lectureDayOnly = getDateOnlyMarkdownString(lectureDate);
+
+  return <LecturePreviewPage lectureDay={lectureDayOnly} />;
+}