merged

2026-03-26 07:38:33 -06:00 · 2026-01-15 13:55:59 -07:00
parent 52b8967949 a4a8e3cbb6
commit 55a9fffd54
29 changed files with 473 additions and 196 deletions
--- a/src/app/course/[courseName]/CollapsableSidebar.tsx
+++ b/src/app/course/[courseName]/CollapsableSidebar.tsx
@@ -10,12 +10,15 @@ const collapseThreshold = 1400;

 export default function CollapsableSidebar() {
  const [windowCollapseRecommended, setWindowCollapseRecommended] =
-    useState(window.innerWidth <= collapseThreshold);
+    useState(false);
  const [userCollapsed, setUserCollapsed] = useState<
    "unset" | "collapsed" | "uncollapsed"
  >("unset");

  useEffect(() => {
+    // Initialize on mount
+    setWindowCollapseRecommended(window.innerWidth <= collapseThreshold);
+
    function handleResize() {
      if (window.innerWidth <= collapseThreshold) {
        setWindowCollapseRecommended(true);
--- a/src/app/course/[courseName]/CourseNavigation.tsx
+++ b/src/app/course/[courseName]/CourseNavigation.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { BreadCrumbs } from "@/components/BreadCrumbs";
 import { Spinner } from "@/components/Spinner";
 import {
  useCanvasAssignmentsQuery,
@@ -19,7 +20,6 @@ import {
 } from "@/features/canvas/hooks/canvasQuizHooks";
 import { useLocalCourseSettingsQuery } from "@/features/local/course/localCoursesHooks";
 import { useQueryClient } from "@tanstack/react-query";
-import Link from "next/link";

 export function CourseNavigation() {
  const { data: settings } = useLocalCourseSettingsQuery();
@@ -33,9 +33,8 @@ export function CourseNavigation() {

  return (
    <div className="pb-1 flex flex-row gap-3">
-      <Link href={"/"} className="btn" shallow={true}>
-        Back to Course List
-      </Link>
+      <BreadCrumbs />
+  
      <a
        href={`https://snow.instructure.com/courses/${settings.canvasId}`}
        className="btn"
--- a/src/app/course/[courseName]/calendar/day/DayTitle.tsx
+++ b/src/app/course/[courseName]/calendar/day/DayTitle.tsx
@@ -9,7 +9,7 @@ import { getLectureForDay } from "@/features/local/utils/lectureUtils";
 import { useLecturesSuspenseQuery } from "@/features/local/lectures/lectureHooks";
 import ClientOnly from "@/components/ClientOnly";
 import { Tooltip } from "@/components/Tooltip";
-import { useRef, useState } from "react";
+import { useTooltip } from "@/components/useTooltip";

 export function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) {
  const { courseName } = useCourseContext();
@@ -17,8 +17,7 @@ export function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) {
  const { setIsDragging } = useDragStyleContext();
  const todaysLecture = getLectureForDay(weeks, dayAsDate);
  const modal = useModal();
-  const linkRef = useRef<HTMLAnchorElement>(null);
-  const [tooltipVisible, setTooltipVisible] = useState(false);
+  const { visible, targetRef, showTooltip, hideTooltip } = useTooltip();

  const lectureName = todaysLecture && (todaysLecture.name || "lecture");

@@ -44,9 +43,9 @@ export function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) {
            setIsDragging(true);
          }
        }}
-        ref={linkRef}
-        onMouseEnter={() => setTooltipVisible(true)}
-        onMouseLeave={() => setTooltipVisible(false)}
+        ref={targetRef}
+        onMouseEnter={showTooltip}
+        onMouseLeave={hideTooltip}
      >
        {dayAsDate.getDate()} {lectureName}
      </Link>
@@ -65,8 +64,8 @@ export function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) {
                )}
              </div>
            }
-            targetRef={linkRef}
-            visible={tooltipVisible}
+            targetRef={targetRef}
+            visible={visible}
          />
        )}
      </ClientOnly>
@@ -81,19 +80,19 @@ export function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) {
            xmlns="http://www.w3.org/2000/svg"
            onClick={openModal}
          >
-            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+            <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
            <g
              id="SVGRepo_tracerCarrier"
-              stroke-linecap="round"
-              stroke-linejoin="round"
+              strokeLinecap="round"
+              strokeLinejoin="round"
            ></g>
            <g id="SVGRepo_iconCarrier">
              <path
                d="M6 12H18M12 6V18"
                className=" "
-                stroke-width="3"
-                stroke-linecap="round"
-                stroke-linejoin="round"
+                strokeWidth="3"
+                strokeLinecap="round"
+                strokeLinejoin="round"
              ></path>
            </g>
          </svg>
--- a/src/app/course/[courseName]/calendar/day/ItemInDay.tsx
+++ b/src/app/course/[courseName]/calendar/day/ItemInDay.tsx
@@ -1,13 +1,48 @@
 import { IModuleItem } from "@/features/local/modules/IModuleItem";
 import { getModuleItemUrl } from "@/services/urlUtils";
 import Link from "next/link";
-import { ReactNode, useRef, useState } from "react";
+import { ReactNode } from "react";
 import { useCourseContext } from "../../context/courseContext";
+import { useTooltip } from "@/components/useTooltip";
+import MarkdownDisplay from "@/components/MarkdownDisplay";
 import { DraggableItem } from "../../context/drag/draggingContext";
 import ClientOnly from "@/components/ClientOnly";
 import { useDragStyleContext } from "../../context/drag/dragStyleContext";
 import { Tooltip } from "../../../../../components/Tooltip";

+function getPreviewContent(
+  type: "assignment" | "page" | "quiz",
+  item: IModuleItem
+): ReactNode {
+  if (type === "assignment" && "description" in item) {
+    const assignment = item as {
+      description: string;
+      githubClassroomAssignmentShareLink?: string;
+    };
+    return (
+      <MarkdownDisplay
+        markdown={assignment.description}
+        replaceText={[
+          {
+            source: "insert_github_classroom_url",
+            destination: assignment.githubClassroomAssignmentShareLink || "",
+          },
+        ]}
+      />
+    );
+  } else if (type === "page" && "text" in item) {
+    return <MarkdownDisplay markdown={item.text as string} />;
+  } else if (type === "quiz" && "questions" in item) {
+    const quiz = item as { questions: { text: string }[] };
+    return quiz.questions.map((q, i: number) => (
+      <div key={i} className="">
+        <MarkdownDisplay markdown={q.text as string} />
+      </div>
+    ));
+  }
+  return null;
+}
+
 export function ItemInDay({
  type,
  moduleName,
@@ -23,8 +58,8 @@ export function ItemInDay({
 }) {
  const { courseName } = useCourseContext();
  const { setIsDragging } = useDragStyleContext();
-  const linkRef = useRef<HTMLAnchorElement>(null);
-  const [tooltipVisible, setTooltipVisible] = useState(false);
+  const { visible, targetRef, showTooltip, hideTooltip } = useTooltip(500);
+
  return (
    <div className={" relative group "}>
      <Link
@@ -52,18 +87,26 @@ export function ItemInDay({
          );
          setIsDragging(true);
        }}
-        onMouseEnter={() => setTooltipVisible(true)}
-        onMouseLeave={() => setTooltipVisible(false)}
-        ref={linkRef}
+        onMouseEnter={showTooltip}
+        onMouseLeave={hideTooltip}
+        ref={targetRef}
      >
        {item.name}
      </Link>
      <ClientOnly>
-        <Tooltip
-          message={message}
-          targetRef={linkRef}
-          visible={tooltipVisible && status === "incomplete"}
-        />
+        {status === "published" ? (
+          getPreviewContent(type, item) && (
+            <Tooltip
+              message={
+                <div className="max-w-md">{getPreviewContent(type, item)}</div>
+              }
+              targetRef={targetRef}
+              visible={visible}
+            />
+          )
+        ) : (
+          <Tooltip message={message} targetRef={targetRef} visible={visible} />
+        )}
      </ClientOnly>
    </div>
  );
--- a/src/app/course/[courseName]/lecture/[lectureDay]/EditLectureTitle.tsx
+++ b/src/app/course/[courseName]/lecture/[lectureDay]/EditLectureTitle.tsx
@@ -1,10 +1,11 @@
 import { useLocalCourseSettingsQuery } from "@/features/local/course/localCoursesHooks";
 import { getDateFromString } from "@/features/local/utils/timeUtils";
 import { getLectureWeekName } from "@/features/local/lectures/lectureUtils";
-import { getCourseUrl, getLecturePreviewUrl } from "@/services/urlUtils";
+import { getLecturePreviewUrl } from "@/services/urlUtils";
 import { useCourseContext } from "../../context/courseContext";
 import Link from "next/link";
 import { getDayOfWeek } from "@/features/local/course/localCourseSettings";
+import { BreadCrumbs } from "@/components/BreadCrumbs";

 export default function EditLectureTitle({
  lectureDay,
@@ -17,16 +18,7 @@ export default function EditLectureTitle({
  const lectureWeekName = getLectureWeekName(settings.startDate, lectureDay);
  return (
    <div className="flex justify-between sm:flex-row flex-col">
-      <div className="my-auto">
-        <Link
-          className="btn hidden sm:inline"
-          href={getCourseUrl(courseName)}
-          shallow={true}
-          prefetch={true}
-        >
-          {courseName}
-        </Link>
-      </div>
+      <BreadCrumbs />
      <div className="flex justify-center  ">
        <h3 className="mt-auto me-3 text-slate-500 ">Lecture</h3>
        <h1 className="">
--- a/src/app/course/[courseName]/lecture/[lectureDay]/preview/LecturePreviewPage.tsx
+++ b/src/app/course/[courseName]/lecture/[lectureDay]/preview/LecturePreviewPage.tsx
@@ -1,17 +1,14 @@
 "use client";

 import LecturePreview from "../LecturePreview";
-import { getCourseUrl, getLectureUrl } from "@/services/urlUtils";
-import { useCourseContext } from "../../../context/courseContext";
-import Link from "next/link";
 import { useLecturesSuspenseQuery } from "@/features/local/lectures/lectureHooks";
+import { BreadCrumbs } from "@/components/BreadCrumbs";

 export default function LecturePreviewPage({
  lectureDay,
 }: {
  lectureDay: string;
 }) {
-  const { courseName } = useCourseContext();
  const { data: weeks } = useLecturesSuspenseQuery();
  const lecture = weeks
    .flatMap(({ lectures }) => lectures.map((lecture) => lecture))
@@ -23,20 +20,7 @@ export default function LecturePreviewPage({
  return (
    <div className="flex h-full xl:flex-row flex-col ">
      <div className="flex-shrink flex-1 pb-1 ms-3 xl:ms-0 flex flex-row flex-wrap gap-3 content-start ">
-        <div className="">
-          <Link
-            className="btn"
-            href={getLectureUrl(courseName, lectureDay)}
-            shallow={true}
-          >
-            Edit Lecture
-          </Link>
-        </div>
-        <div className="">
-          <Link className="btn" href={getCourseUrl(courseName)} shallow={true}>
-            Course Calendar
-          </Link>
-        </div>
+        <BreadCrumbs />
      </div>
      <div className="flex  justify-center min-h-0 px-2">
        <div
--- a/src/app/course/[courseName]/modules/NewItemForm.tsx
+++ b/src/app/course/[courseName]/modules/NewItemForm.tsx
@@ -17,6 +17,7 @@ import {
  getDateFromStringOrThrow,
 } from "@/features/local/utils/timeUtils";
 import { useCreateAssignmentMutation } from "@/features/local/assignments/assignmentHooks";
+import { validateFileName } from "@/services/fileNameValidation";

 export default function NewItemForm({
  moduleName: defaultModuleName,
@@ -41,20 +42,6 @@ export default function NewItemForm({
  const [name, setName] = useState("");
  const [nameError, setNameError] = useState("");

-  const validateFileName = (fileName: string): string => {
-    // Check for invalid file system characters
-    const invalidChars = [":", "/", "\\", "*", '"', "<", ">", "|"];
-
-    for (const char of fileName) {
-      if (invalidChars.includes(char)) {
-        return `Name contains invalid character: "${char}". Please avoid: ${invalidChars.join(
-          " "
-        )}`;
-      }
-    }
-    return "";
-  };
-
  const handleNameChange = (newName: string) => {
    setName(newName);
    const error = validateFileName(newName);
--- a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignmentHeader.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignmentHeader.tsx
@@ -1,7 +1,6 @@
-import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
+import { BreadCrumbs } from "@/components/BreadCrumbs";
 import { UpdateAssignmentName } from "./UpdateAssignmentName";
-import { getCourseUrl } from "@/services/urlUtils";
-import Link from "next/link";
+import { RightSingleChevron } from "@/components/icons/RightSingleChevron";

 export default function EditAssignmentHeader({
  moduleName,
@@ -10,22 +9,21 @@ export default function EditAssignmentHeader({
  assignmentName: string;
  moduleName: string;
 }) {
-  const { courseName } = useCourseContext();
  return (
-    <div className="py-1 flex flex-row justify-start gap-3">
-      <Link
-        className="btn"
-        href={getCourseUrl(courseName)}
-        shallow={true}
-        prefetch={true}
-      >
-        {courseName}
-      </Link>
-      <UpdateAssignmentName
-        assignmentName={assignmentName}
-        moduleName={moduleName}
-      />
-      <div className="my-auto">{assignmentName}</div>
+    <div className="py-1 flex flex-row justify-between">
+      <div className="flex flex-row">
+        <BreadCrumbs />
+        <span className="text-slate-500 cursor-default select-none my-auto">
+          <RightSingleChevron />
+        </span>
+        <div className="my-auto px-3">{assignmentName}</div>
+      </div>
+      <div  className="px-1">
+        <UpdateAssignmentName
+          assignmentName={assignmentName}
+          moduleName={moduleName}
+        />
+      </div>
    </div>
  );
 }
--- a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/UpdateAssignmentName.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/UpdateAssignmentName.tsx
@@ -40,8 +40,7 @@ export function UpdateAssignmentName({
              if (name === assignmentName) closeModal();

              setIsLoading(true); // page refresh resets flag
-              try{
-
+              try {
                await updateAssignment.mutateAsync({
                  assignment: assignment,
                  moduleName,
@@ -50,17 +49,28 @@ export function UpdateAssignmentName({
                  previousAssignmentName: assignmentName,
                  courseName,
                });
-                
+
                // update url (will trigger reload...)
                router.replace(
                  getModuleItemUrl(courseName, moduleName, "assignment", name),
                  {}
                );
-              }finally {
+              } finally {
                setIsLoading(false);
              }
            }}
          >
+            <div
+              className="
+                text-yellow-300 
+                bg-yellow-950/30 
+                border-2 
+                rounded-lg 
+                border-yellow-800 
+                p-1 text-sm mb-2"
+            >
+              Warning: does not rename in Canvas
+            </div>
            <TextInput
              value={name}
              setValue={setName}
--- a/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPage.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPage.tsx
@@ -102,13 +102,13 @@ export default function EditPage({
    <EditLayout
      Header={<EditPageHeader pageName={pageName} moduleName={moduleName} />}
      Body={
-        <div className="columns-2 min-h-0 flex-1">
-          <div className="flex-1 h-full">
+        <div className="flex min-h-0 flex-1 gap-4 overflow-hidden">
+          <div className="flex-1 h-full min-w-0 overflow-hidden">
            <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
          </div>
-          <div className="h-full">
+          <div className="flex-1 h-full min-w-0 flex flex-col overflow-hidden">
            <div className="text-red-300">{error && error}</div>
-            <div className="h-full overflow-y-auto">
+            <div className="flex-1 overflow-y-auto">
              <br />
              <PagePreview page={page} />
            </div>
--- a/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPageHeader.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPageHeader.tsx
@@ -1,7 +1,6 @@
-import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
-import { getCourseUrl } from "@/services/urlUtils";
-import Link from "next/link";
 import { UpdatePageName } from "./UpdatePageName";
+import { BreadCrumbs } from "@/components/BreadCrumbs";
+import { RightSingleChevron } from "@/components/icons/RightSingleChevron";

 export default function EditPageHeader({
  moduleName,
@@ -10,19 +9,18 @@ export default function EditPageHeader({
  pageName: string;
  moduleName: string;
 }) {
-  const { courseName } = useCourseContext();
  return (
-    <div className="py-1 flex flex-row justify-start gap-3">
-      <Link
-        className="btn"
-        href={getCourseUrl(courseName)}
-        shallow={true}
-        prefetch={true}
-      >
-        {courseName}
-      </Link>
-      <UpdatePageName pageName={pageName} moduleName={moduleName} />
-      <div className="my-auto">{pageName}</div>
+    <div className="py-1 flex flex-row justify-between">
+      <div className="flex flex-row">
+        <BreadCrumbs />
+        <span className="text-slate-500 cursor-default select-none my-auto">
+          <RightSingleChevron />
+        </span>
+        <div className="my-auto px-3">{pageName}</div>
+      </div>
+      <div className="px-1">
+        <UpdatePageName pageName={pageName} moduleName={moduleName} />
+      </div>
    </div>
  );
 }
--- a/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/UpdatePageName.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/UpdatePageName.tsx
@@ -56,6 +56,17 @@ export function UpdatePageName({
              );
            }}
          >
+            <div
+              className="
+                text-yellow-300 
+                bg-yellow-950/30 
+                border-2 
+                rounded-lg 
+                border-yellow-800 
+                p-1 text-sm mb-2"
+            >
+              Warning: does not rename in Canvas
+            </div>
            <TextInput value={name} setValue={setName} label={"Rename Page"} />
            <button className="w-full my-3">Save New Name</button>
            {isLoading && <Spinner />}
--- a/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuizHeader.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuizHeader.tsx
@@ -1,7 +1,6 @@
-import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
-import { getCourseUrl } from "@/services/urlUtils";
-import Link from "next/link";
+import { RightSingleChevron } from "@/components/icons/RightSingleChevron";
 import { UpdateQuizName } from "./UpdateQuizName";
+import { BreadCrumbs } from "@/components/BreadCrumbs";

 export default function EditQuizHeader({
  moduleName,
@@ -10,19 +9,18 @@ export default function EditQuizHeader({
  quizName: string;
  moduleName: string;
 }) {
-  const { courseName } = useCourseContext();
  return (
-    <div className="py-1 flex flex-row justify-start gap-3">
-      <Link
-        className="btn"
-        href={getCourseUrl(courseName)}
-        shallow={true}
-        prefetch={true}
-      >
-        {courseName}
-      </Link>
-      <UpdateQuizName quizName={quizName} moduleName={moduleName} />
-      <div>{quizName}</div>
+    <div className="py-1 flex flex-row justify-between">
+      <div className="flex flex-row">
+        <BreadCrumbs />
+        <span className="text-slate-500 cursor-default select-none my-auto">
+          <RightSingleChevron />
+        </span>
+        <div className="my-auto px-3">{quizName}</div>
+      </div>
+      <div className="px-1">
+        <UpdateQuizName quizName={quizName} moduleName={moduleName} />
+      </div>
    </div>
  );
 }
--- a/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/UpdateQuizName.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/UpdateQuizName.tsx
@@ -56,6 +56,17 @@ export function UpdateQuizName({
              );
            }}
          >
+            <div
+              className="
+                text-yellow-300 
+                bg-yellow-950/30 
+                border-2 
+                rounded-lg 
+                border-yellow-800 
+                p-1 text-sm mb-2"
+            >
+              Warning: does not rename in Canvas
+            </div>
            <TextInput value={name} setValue={setName} label={"Rename Quiz"} />
            <button className="w-full my-3">Save New Name</button>
            {isLoading && <Spinner />}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -20,7 +20,7 @@ export default async function RootLayout({
  return (
    <html lang="en">
      <head></head>
-      <body className="flex justify-center">
+      <body className="flex justify-center h-screen" suppressHydrationWarning>
        <div className="bg-gray-950 h-screen text-slate-300 w-screen sm:p-1">
          <MyToaster />
          <Suspense>
@@ -29,7 +29,7 @@ export default async function RootLayout({
                <ClientCacheInvalidation></ClientCacheInvalidation>
                {children}
              </DataHydration>
-            </Providers>  
+            </Providers>
          </Suspense>
        </div>
      </body>