can add existing courses

src/app/CourseList.tsx

@@ -1,6 +1,10 @@
 "use client";
 import { useLocalCoursesSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
-import { getDateKey, getTermName, groupByStartDate } from "@/models/local/utils/timeUtils";
+import {
+  getDateKey,
+  getTermName,
+  groupByStartDate,
+} from "@/models/local/utils/timeUtils";
 import { getCourseUrl } from "@/services/urlUtils";
 import Link from "next/link";
 
@@ -38,4 +42,4 @@ export default function CourseList() {
       ))}
     </div>
   );
-}
+}

src/app/addCourse/AddExistingCourseToGlobalSettings.tsx

@@ -1,8 +1,14 @@
 "use client";
 import ClientOnly from "@/components/ClientOnly";
 import { StoragePathSelector } from "@/components/form/StoragePathSelector";
+import TextInput from "@/components/form/TextInput";
 import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
-import { FC, useState } from "react";
+import {
+  useGlobalSettingsQuery,
+  useUpdateGlobalSettingsMutation,
+} from "@/hooks/localCourse/globalSettingsHooks";
+import { useDirectoryIsCourseQuery } from "@/hooks/localCourse/storageDirectoryHooks";
+import { FC, useEffect, useRef, useState } from "react";
 
 export const AddExistingCourseToGlobalSettings = () => {
   const [showForm, setShowForm] = useState(false);
@@ -27,14 +33,82 @@ export const AddExistingCourseToGlobalSettings = () => {
 
 const ExistingCourseForm: FC<{}> = () => {
   const [path, setPath] = useState("./");
+  const [name, setName] = useState("");
+  const nameInputRef = useRef<HTMLInputElement>(null);
+  const directoryIsCourseQuery = useDirectoryIsCourseQuery(path);
+  const { data: globalSettings } = useGlobalSettingsQuery();
+  const updateSettingsMutation = useUpdateGlobalSettingsMutation();
+
+  // Focus name input when directory becomes a valid course
+  useEffect(() => {
+    console.log("Checking directory:", directoryIsCourseQuery.data);
+    if (directoryIsCourseQuery.data) {
+      console.log("Focusing name input");
+      nameInputRef.current?.focus();
+    }
+  }, [directoryIsCourseQuery.data]);
+
   return (
-    <div>
+    <form
+      onSubmit={async (e) => {
+        e.preventDefault();
+        console.log(path);
+
+        await updateSettingsMutation.mutateAsync({
+          globalSettings: {
+            ...globalSettings,
+            courses: [
+              ...globalSettings.courses,
+              {
+                name,
+                path,
+              },
+            ],
+          },
+        });
+        setName("");
+        setPath("./");
+      }}
+      className="min-w-3xl"
+    >
       <h2>Add Existing Course</h2>
+
+      <div className="flex items-center mt-2 text-slate-500">
+        {directoryIsCourseQuery.isLoading ? (
+          <>
+            <span className="animate-spin mr-2">⏳</span>
+            <span>Checking directory...</span>
+          </>
+        ) : directoryIsCourseQuery.data ? (
+          <>
+            <span className="text-green-600 mr-2">✅</span>
+            <span>This is a valid course directory.</span>
+          </>
+        ) : (
+          <>
+            <span className="text-red-600 mr-2">❌</span>
+            <span>Not a course directory.</span>
+          </>
+        )}
+      </div>
       <StoragePathSelector
-        startingValue={path}
-        submitValue={setPath}
+        value={path}
+        setValue={setPath}
         label={"Course Directory Path"}
       />
-    </div>
+      {directoryIsCourseQuery.data && (
+        <>
+          <TextInput
+            value={name}
+            setValue={setName}
+            label={"Display Name"}
+            inputRef={nameInputRef}
+          />
+          <div className="text-center">
+            <button className="text-center mt-3">Save</button>
+          </div>
+        </>
+      )}
+    </form>
   );
 };

src/app/course/[courseName]/CourseNavigation.tsx

@@ -96,4 +96,4 @@ function getSemesterName(startDate: string) {
   } else {
     return `Fall ${year}`;
   }
-}
+}

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

@@ -18,7 +18,7 @@ export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
   );
 
   const isPastSemester = Date.now() > new Date(settings.endDate).getTime();
-  
+
   const pastWeekNumber = getWeekNumber(
     startDate,
     new Date(Date.now() - four_days_in_milliseconds)
@@ -29,7 +29,8 @@ export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
     new Date(month.year, month.month, 1)
   );
 
-  const shouldCollapse = (pastWeekNumber >= startOfMonthWeekNumber) && !isPastSemester;
+  const shouldCollapse =
+    pastWeekNumber >= startOfMonthWeekNumber && !isPastSemester;
 
   const monthName = new Date(month.year, month.month - 1, 1).toLocaleString(
     "default",

src/app/course/[courseName]/context/CalendarItemsContextProvider.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import { ReactNode } from "react";
 import {
   CalendarItemsContext,

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

@@ -125,5 +125,5 @@ export default function EditPage({
         </>
       }
     />
-  )
+  );
 }

src/app/todaysLectures/OneCourseLectures.tsx

@@ -9,7 +9,7 @@ import { getDateOnlyMarkdownString } from "@/models/local/utils/timeUtils";
 
 export default function OneCourseLectures() {
   const { courseName } = useCourseContext();
-  const {data: weeks} = useLecturesQuery();
+  const { data: weeks } = useLecturesQuery();
 
   const dayAsDate = new Date();
   const dayAsString = getDateOnlyMarkdownString(dayAsDate);