improving sidebar

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

@@ -62,7 +62,7 @@ function CalendarWeek({
   monthNumber: number;
 }) {
   return (
-    <div className="grid grid-cols-7 m-1">
+    <div className="grid grid-cols-7">
       {week.map((day, dayIndex) => (
         <Day key={dayIndex} day={day} month={monthNumber} />
       ))}

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

@@ -25,19 +25,21 @@ export default function CourseCalendar() {
   return (
     <div
       className="
-        h-full 
-        overflow-y-scroll 
+        min-h-0
         border-4
         border-gray-900
         rounded-xl 
         bg-slate-950
+        p-1
       "
     >
-      <CalendarItemsContextProvider>
-        {months.map((month) => (
-          <CalendarMonth key={month.month + "" + month.year} month={month} />
-        ))}
-      </CalendarItemsContextProvider>
+      <div className="h-full overflow-y-scroll pe-1">
+        <CalendarItemsContextProvider>
+          {months.map((month) => (
+            <CalendarMonth key={month.month + "" + month.year} month={month} />
+          ))}
+        </CalendarItemsContextProvider>
+      </div>
     </div>
   );
 }

nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx

@@ -12,14 +12,15 @@ import {
   useQuizzesQueries,
 } from "@/hooks/localCourse/quizHooks";
 import { IModuleItem } from "@/models/local/IModuleItem";
-import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
-import { Suspense, useEffect, useRef, useState } from "react";
+import {
+  dateToMarkdownString,
+  getDateFromString,
+  getDateFromStringOrThrow,
+  getDateOnlyMarkdownString,
+} from "@/models/local/timeUtils";
+import { Fragment, useRef, useState } from "react";
 import Modal from "../../../../components/Modal";
 import NewItemForm from "./NewItemForm";
-import { useCanvasModulesQuery } from "@/hooks/canvas/canvasModuleHooks";
-import { Spinner } from "@/components/Spinner";
-import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
-import { isServer } from "@tanstack/react-query";
 import { ModuleCanvasStatus } from "./ModuleCanvasStatus";
 import ClientOnly from "@/components/ClientOnly";
 import ExpandIcon from "../../../../components/icons/ExpandIcon";
@@ -107,9 +108,21 @@ export default function ExpandableModule({
             </div>
           )}
         </Modal>
-        {moduleItems.map(({ type, item }) => (
-          <div key={item.name}>{item.name}</div>
-        ))}
+        <div className="grid grid-cols-[auto_1fr]">
+
+        {moduleItems.map(({ type, item }) => {
+          const date = getDateFromString(item.dueAt);
+          
+          return (
+            <Fragment key={item.name + type}>
+              <div className="text-end text-slate-500 me-2">
+                {date && getDateOnlyMarkdownString(date)}
+              </div>
+              <div className="">{item.name}</div>
+            </Fragment>
+          );
+        })}
+        </div>
       </div>
     </div>
   );

nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx

@@ -90,8 +90,7 @@ export default function EditAssignment({
           <div className="text-red-300">{error && error}</div>
 
           <div className="px-3 h-full">
-
-          <AssignmentPreview assignment={assignment} />
+            <AssignmentPreview assignment={assignment} />
           </div>
         </div>
       </div>

nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPage.tsx

@@ -9,10 +9,6 @@ import { localPageMarkdownUtils } from "@/models/local/page/localCoursePage";
 import { useEffect, useState } from "react";
 import PagePreview from "./PagePreview";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
-import {
-  useCanvasPagesQuery,
-  useCreateCanvasPageMutation,
-} from "@/hooks/canvas/canvasPageHooks";
 import EditPageButtons from "./EditPageButtons";
 import ClientOnly from "@/components/ClientOnly";
 
@@ -29,7 +25,6 @@ export default function EditPage({
     localPageMarkdownUtils.toMarkdown(page)
   );
   const [error, setError] = useState("");
-
   const { data: settings } = useLocalCourseSettingsQuery();
 
   useEffect(() => {
@@ -78,7 +73,6 @@ export default function EditPage({
           <EditPageButtons
             pageName={pageName}
             moduleName={moduleName}
-            courseCanvasId={settings.canvasId}
           />
         </ClientOnly>
       )}

nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPageButtons.tsx

@@ -16,19 +16,17 @@ import React from "react";
 export default function EditPageButtons({
   moduleName,
   pageName,
-  courseCanvasId,
 }: {
   pageName: string;
   moduleName: string;
-  courseCanvasId: number;
 }) {
   const { courseName } = useCourseContext();
   const { data: settings } = useLocalCourseSettingsQuery();
   const { data: page } = usePageQuery(moduleName, pageName);
-  const { data: canvasPages } = useCanvasPagesQuery(courseCanvasId);
-  const createPageInCanvas = useCreateCanvasPageMutation(courseCanvasId);
-  const updatePageInCanvas = useUpdateCanvasPageMutation(courseCanvasId);
-  const deletePageInCanvas = useDeleteCanvasPageMutation(courseCanvasId);
+  const { data: canvasPages } = useCanvasPagesQuery();
+  const createPageInCanvas = useCreateCanvasPageMutation();
+  const updatePageInCanvas = useUpdateCanvasPageMutation();
+  const deletePageInCanvas = useDeleteCanvasPageMutation();
 
   const pageInCanvas = canvasPages?.find((p) => p.title === pageName);