adding breadcrumbs

2026-03-26 07:38:33 -06:00 · 2026-01-05 10:22:12 -07:00
parent 076c0b1025
commit 8c01cb2422
17 changed files with 252 additions and 108 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
@@ -81,19 +81,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]/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/[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]/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" 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>