can remove courses from main page now

globalSettings.yml

@@ -9,19 +9,7 @@ courses:
     name: UX
   - path: ./1425/2025-fall-alex/modules/
     name: "1425"
-  - path: ./1405/2025_spring_alex/
-    name: 1405_old
   - path: ./3840_Telemetry/2025_spring_alex/modules/
     name: Telem and Ops
-  - path: ./4850_AdvancedFE/2024-fall-alex/modules/
-    name: Old Adv Frontend
-  - path: ./1430/2025-spring-jonathan/Modules/
-    name: Jonathan UX
-  - path: ./1400/2025_spring_alex/modules/
-    name: 1400-spring
-  - path: ./1420/2024-fall/Modules/
-    name: 1420_old
-  - path: ./3820_BackEnd/2025-fall/Modules/
-    name: jonathan-backend
   - path: ./4850_AdvancedFE/2026-spring-alex/modules
     name: Adv Frontend Spring

src/app/CourseList.tsx

@@ -1,5 +1,10 @@
 "use client";
+import { Toggle } from "@/components/form/Toggle";
 import { useLocalCoursesSettingsQuery } from "@/features/local/course/localCoursesHooks";
+import {
+  useGlobalSettingsQuery,
+  useUpdateGlobalSettingsMutation,
+} from "@/features/local/globalSettings/globalSettingsHooks";
 import {
   getDateKey,
   getTermName,
@@ -7,42 +12,122 @@ import {
 } from "@/features/local/utils/timeUtils";
 import { getCourseUrl } from "@/services/urlUtils";
 import Link from "next/link";
+import { useState } from "react";
+import Modal, { useModal } from "@/components/Modal";
+import { Spinner } from "@/components/Spinner";
 
 export default function CourseList() {
   const { data: allSettings } = useLocalCoursesSettingsQuery();
+  const [isDeleting, setIsDeleting] = useState(false);
 
   const coursesByStartDate = groupByStartDate(allSettings);
 
   const sortedDates = Object.keys(coursesByStartDate).sort();
 
-  console.log(allSettings, coursesByStartDate);
-
   return (
-    <div className="flex flex-row ">
-      {sortedDates.map((startDate) => (
-        <div
-          key={startDate}
-          className=" border-4 border-slate-800 rounded p-3 m-3"
-        >
-          <div className="text-center">{getTermName(startDate)}</div>
-          {coursesByStartDate[getDateKey(startDate)].map((settings) => (
-            <div key={settings.name}>
-              <Link
-                href={getCourseUrl(settings.name)}
-                shallow={true}
-                prefetch={true}
-                className="
-                  font-bold text-xl block
-                  transition-all hover:scale-105 hover:underline hover:text-slate-200
-                  mb-3
-                "
-              >
-                {settings.name}
-              </Link>
-            </div>
-          ))}
-        </div>
-      ))}
+    <div>
+      <Toggle
+        label={"Delete Mode"}
+        value={isDeleting}
+        onChange={(set) => setIsDeleting(set)}
+      />
+      <div className="flex flex-row ">
+        {sortedDates.map((startDate) => (
+          <div
+            key={startDate}
+            className=" border-4 border-slate-800 rounded p-3 m-3"
+          >
+            <div className="text-center">{getTermName(startDate)}</div>
+            {coursesByStartDate[getDateKey(startDate)].map((settings) => (
+              <CourseItem
+                key={settings.name}
+                courseName={settings.name}
+                isDeleting={isDeleting}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function CourseItem({
+  courseName,
+  isDeleting,
+}: {
+  courseName: string;
+  isDeleting: boolean;
+}) {
+  const { data: globalSettings } = useGlobalSettingsQuery();
+  const updateSettingsMutation = useUpdateGlobalSettingsMutation();
+  const modal = useModal();
+
+  return (
+    <div className="flex items-center gap-2">
+      <Link
+        href={getCourseUrl(courseName)}
+        shallow={true}
+        prefetch={true}
+        className="
+          font-bold text-xl block
+          transition-all hover:scale-105 hover:underline hover:text-slate-200
+          mb-3
+        "
+      >
+        {courseName}
+      </Link>
+      {isDeleting && (
+        <Modal
+          modalControl={modal}
+          buttonText="−"
+          buttonClass="
+            unstyled
+            text-red-200 hover:text-red-400 
+            bg-red-950
+            font-bold text-2xl 
+            transition-all hover:scale-110
+            mb-3
+          "
+          modalWidth="w-1/3"
+        >
+          {({ closeModal }) => (
+            <div>
+              <div className="text-center">
+                Are you sure you want to remove {courseName} from global
+                settings?
+              </div>
+              <br />
+              <div className="flex justify-around gap-3">
+                <button
+                  onClick={async () => {
+                    await updateSettingsMutation.mutateAsync({
+                      globalSettings: {
+                        ...globalSettings,
+                        courses: globalSettings.courses.filter(
+                          (course) => course.name !== courseName
+                        ),
+                      },
+                    });
+                    closeModal();
+                  }}
+                  disabled={updateSettingsMutation.isPending}
+                  className="btn-danger"
+                >
+                  Yes
+                </button>
+                <button
+                  onClick={closeModal}
+                  disabled={updateSettingsMutation.isPending}
+                >
+                  No
+                </button>
+              </div>
+              {updateSettingsMutation.isPending && <Spinner />}
+            </div>
+          )}
+        </Modal>
+      )}
     </div>
   );
 }

src/components/form/Toggle.tsx

@@ -0,0 +1,37 @@
+import type { FC } from "react";
+
+export const Toggle: FC<{
+  label: string;
+  value: boolean;
+  onChange: (checked: boolean) => void;
+}> = ({ label, value, onChange }) => {
+  return (
+    <label
+      className="
+        flex align-middle p-2 cursor-pointer
+        text-gray-300
+        hover:text-blue-400
+        transition-colors duration-200 ease-in-out
+      "
+    >
+      <input
+        type="checkbox"
+        className="appearance-none peer"
+        checked={value}
+        onChange={(e) => onChange(e.target.checked)}
+      />
+      <span
+        className={`
+          w-12 h-6 flex items-center flex-shrink-0 mx-3 p-1
+          bg-gray-600 rounded-full
+          duration-300 ease-in-out
+          peer-checked:bg-blue-600
+          after:w-4 after:h-4 after:bg-white after:rounded-full after:shadow-md
+          after:duration-300 peer-checked:after:translate-x-6
+          group-hover:after:translate-x-1
+        `}
+      ></span>
+      <span className="">{label}</span>
+    </label>
+  );
+};