Land dependency modernization stack: security bumps, TS6+Vite8, lazy catalogs, MUI 9, dep-shedding

.gitignore

@@ -141,6 +141,9 @@ dist
 # SvelteKit build / generate output
 .svelte-kit
 
+# Wrangler local dev cache
+.wrangler/
+
 ### OSX ###
 # General
 .DS_Store

README.md

@@ -5,3 +5,7 @@ Made with ❤️ by [Rahul](https://github.com/rchalamala/), [Eric](https://gith
 In addition, thanks to [Armeet](https://github.com/armeetjatyani/) and others for suggestions/contributions!
 
 Favicon art by Audrey Wong.
+
+## Dependency notes
+
+- `preact` and `@preact/signals` are never imported in `src/` directly — they are runtime peer dependencies of the Schedule-X calendar (`@schedule-x/*`) and must not be removed.

package.json

@@ -5,25 +5,22 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@formkit/auto-animate": "^0.8.2",
+    "@formkit/auto-animate": "^0.9.0",
     "@hello-pangea/dnd": "^18.0.1",
-    "@mui/icons-material": "^7.3.11",
-    "@mui/material": "^7.3.11",
+    "@mui/icons-material": "^9.1.0",
+    "@mui/material": "^9.1.0",
     "@preact/signals": "^2.9.1",
     "@schedule-x/calendar": "^4.6.0",
     "@schedule-x/events-service": "^4.6.0",
     "@schedule-x/react": "^4.1.0",
     "@schedule-x/theme-default": "^4.6.0",
-    "flatpickr": "^4.6.13",
     "fzf": "^0.5.1",
     "ics": "^3.12.0",
     "lz-string": "^1.5.0",
     "motion": "^12.40.0",
     "preact": "^10.29.2",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "react-flatpickr": "^4.0.11",
-    "react-select": "^5.9.0",
     "temporal-polyfill": "^0.3.0",
     "usehooks-ts": "^3.1.1"
   },
@@ -46,11 +43,11 @@
     "oxlint": "^1.69.0",
     "prettier": "^3.8.4",
     "tailwindcss": "^4.3.0",
-    "typescript": "^5.7.2",
-    "vite": "^7.2.4",
-    "vite-plugin-svgr": "^4.5.0",
-    "vite-tsconfig-paths": "^5.1.4",
-    "wrangler": "^4.49.1"
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vite-plugin-svgr": "^5.2.0",
+    "vite-tsconfig-paths": "^6.1.1",
+    "wrangler": "4.98.0"
   },
   "homepage": "."
 }

src/HelpButton.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { m } from "motion/react";
-import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
+import HelpOutlineOutlinedIcon from "@mui/icons-material/HelpOutlineOutlined";
 import Modal from "./Modal";
 import Hyperlink from "./Hyperlink";
 
@@ -16,7 +16,7 @@ export default function HelpButton() {
         className="h-8 w-8 rounded-full border-none bg-white p-0"
         onClick={() => setModalOpen(true)}
       >
-        <HelpOutlineIcon
+        <HelpOutlineOutlinedIcon
           className="text-orange-500 bg-transparent"
           style={{ width: "auto", height: "auto" }}
         />

src/Planner.tsx

@@ -6,15 +6,45 @@ import { createViewWeek, CalendarConfig } from "@schedule-x/calendar";
 import { createEventsServicePlugin } from "@schedule-x/events-service";
 import { useCalendarApp, ScheduleXCalendar } from "@schedule-x/react";
 import { Temporal } from "temporal-polyfill";
-import Flatpickr from "react-flatpickr";
 
 import "@schedule-x/theme-default/dist/index.css";
-import "flatpickr/dist/themes/airbnb.css";
 
 import "./css/planner.css";
 
 const hasWeekendCourse = false;
 
+function formatTime(date: Date): string {
+  return `${String(date.getHours()).padStart(2, "0")}:${String(
+    date.getMinutes(),
+  ).padStart(2, "0")}`;
+}
+
+function TimeInput({
+  value,
+  onChange,
+  label,
+}: {
+  value: Date;
+  onChange: (day: Date) => void;
+  label: string;
+}) {
+  return (
+    <input
+      type="time"
+      className="planner-time-input"
+      aria-label={label}
+      value={formatTime(value)}
+      onChange={(e) => {
+        if (!e.target.value) return;
+        const [hours, minutes] = e.target.value.split(":").map(Number);
+        const day = new Date(value);
+        day.setHours(hours, minutes, 0, 0);
+        onChange(day);
+      }}
+    />
+  );
+}
+
 function CourseToDates(courses: CourseStorage[]): DateData[] {
   const dates: DateData[] = [];
 
@@ -162,27 +192,17 @@ function Planner() {
               className={`flex min-w-0 flex-col items-center gap-y-2 px-0.5 ${idx === 0 ? "col-start-2" : ""}`}
               key={idx}
             >
-              <Flatpickr
-                data-enable-time
-                options={{
-                  dateFormat: "H:i",
-                  enableTime: true,
-                  noCalendar: true,
-                }}
+              <TimeInput
+                label={`Day ${idx + 1} available start time`}
                 value={state.availableTimes[idx][0]}
-                onChange={([day]) => {
+                onChange={(day) => {
                   state.updateAvailableTimes(idx, true, day);
                 }}
               />
-              <Flatpickr
-                data-enable-time
-                options={{
-                  dateFormat: "H:i",
-                  enableTime: true,
-                  noCalendar: true,
-                }}
+              <TimeInput
+                label={`Day ${idx + 1} available end time`}
                 value={state.availableTimes[idx][1]}
-                onChange={([day]) => {
+                onChange={(day) => {
                   state.updateAvailableTimes(idx, false, day);
                 }}
               />

src/Workspace.tsx

@@ -1,7 +1,5 @@
 import { use, useState } from "react";
 import Modal, { useModal } from "./Modal";
-import Select from "react-select";
-import { SingleValue } from "react-select";
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
 import { Fzf } from "fzf";
 import { createEvents } from "ics";
@@ -22,7 +20,13 @@ import {
   decompressFromEncodedURIComponent,
 } from "lz-string";
 
-import { Collapse, IconButton, Switch } from "@mui/material";
+import {
+  Autocomplete,
+  Collapse,
+  IconButton,
+  Switch,
+  TextField,
+} from "@mui/material";
 import { UnfoldLess, UnfoldMore } from "@mui/icons-material";
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import TERM_START_DATES from "./data/term_start_dates.json";
@@ -193,9 +197,9 @@ function SectionDropdown(props: { course: CourseStorage }) {
   const course = props.course;
   const state = use(AppState);
 
-  const onChange = (newSection: SingleValue<Maybe<SectionData>>) => {
+  const onChange = (newSection: Maybe<SectionData>) => {
     course.sectionId =
-      newSection !== null
+      newSection != null
         ? course.courseData.sections.findIndex(
             (s) => s.number === newSection.number,
           )
@@ -206,27 +210,24 @@ function SectionDropdown(props: { course: CourseStorage }) {
 
   return (
     <div className="workspace-entry-section">
-      <Select
-        isClearable
-        placeholder=""
+      <Autocomplete
+        size="small"
         value={
           course.sectionId !== null
-            ? course.courseData.sections.find(
+            ? (course.courseData.sections.find(
                 (c) =>
                   c.number ===
                   course.courseData.sections[course.sectionId!].number,
-              )
+              ) ?? null)
             : null
         }
-        onChange={onChange}
+        onChange={(_event, newSection) => onChange(newSection)}
         options={course.courseData.sections}
         getOptionLabel={(section) => `${section.number}`}
-        isOptionSelected={(section) =>
-          course.sectionId !== null
-            ? section.number ===
-              course.courseData.sections[course.sectionId].number
-            : false
+        isOptionEqualToValue={(option, selected) =>
+          option.number === selected.number
         }
+        renderInput={(params) => <TextField {...params} aria-label="Section" />}
       />
     </div>
   );
@@ -409,20 +410,10 @@ function WorkspaceSearch() {
   const indexedCourses = use(AllCourses);
   const courses = Object.values(indexedCourses);
 
-  // For some reason, options = [] on the second render, even though
-  // courses = [...] by then and options should equal courses.
-  // I came up with this hacky solution to get around that...
-  // The dropdown options should re-render properly
-  let [options, setOptions] = useState<CourseData[]>(courses);
-  const [firstLoad, setFirstLoad] = useState(true);
-  if (firstLoad && options.length === 0) {
-    options = courses;
-  }
-
   const [selectedCourse, setCourse] = useState<Maybe<CourseData>>(null);
 
-  const handleSelect = (courseData: SingleValue<CourseData>) => {
-    setCourse(courseData as CourseData);
+  const handleSelect = (courseData: Maybe<CourseData>) => {
+    setCourse(courseData);
     if (courseData) {
       state.addCourse({
         courseData: courseData,
@@ -438,25 +429,26 @@ function WorkspaceSearch() {
     selector: (item) => `${item.number} ${item.name}`,
   });
 
-  const sortCourses = (input: string) => {
-    setOptions(fzf.find(input).map((item) => item.item));
-    setFirstLoad(false);
-  };
-
   return (
-    <Select
-      isClearable
+    <Autocomplete
+      size="small"
       className="my-3"
-      placeholder="Add a course..."
-      options={options}
+      options={courses}
       value={selectedCourse}
-      getOptionLabel={(course) => `${course?.number} - ${course?.name}`}
-      onChange={handleSelect}
-      isOptionSelected={(course) => course.id === selectedCourse?.id}
-      onInputChange={sortCourses}
-      filterOption={() => {
-        return true;
-      }}
+      getOptionLabel={(course) => `${course.number} - ${course.name}`}
+      isOptionEqualToValue={(option, selected) => option.id === selected.id}
+      onChange={(_event, courseData) => handleSelect(courseData)}
+      filterOptions={(allOptions, { inputValue }) =>
+        inputValue ? fzf.find(inputValue).map((item) => item.item) : allOptions
+      }
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          placeholder={
+            courses.length === 0 ? "Loading courses..." : "Add a course..."
+          }
+        />
+      )}
     />
   );
 }
@@ -603,6 +595,10 @@ export default function Workspace({ term }: { term: string }) {
   });
 
   const importWorkspace = () => {
+    if (Object.keys(indexedCourses).length === 0) {
+      alert("Course data is still loading. Please try again in a moment.");
+      return;
+    }
     const code = prompt("Copy in the workspace code.") || "";
     if (code === "") {
       return;
@@ -697,6 +693,12 @@ export default function Workspace({ term }: { term: string }) {
         <ControlButton
           text="Default Schedule"
           onClick={() => {
+            if (Object.keys(indexedCourses).length === 0) {
+              alert(
+                "Course data is still loading. Please try again in a moment.",
+              );
+              return;
+            }
             state.setCourses(
               // Change based on term
               (DEFAULT_COURSES[term.substring(0, 2)] ?? []).flatMap((name) => {

src/courseData.ts

@@ -1,33 +1,39 @@
-import DATA_FA2023 from "./data/IndexedTotalFA2022-23.json";
-import DATA_WI2023 from "./data/IndexedTotalWI2022-23.json";
-import DATA_SP2023 from "./data/IndexedTotalSP2022-23.json";
-import DATA_FA2024 from "./data/IndexedTotalFA2023-24.json";
-import DATA_WI2024 from "./data/IndexedTotalWI2023-24.json";
-import DATA_SP2024 from "./data/IndexedTotalSP2023-24.json";
-import DATA_FA2025 from "./data/IndexedTotalFA2024-25.json";
-import DATA_WI2025 from "./data/IndexedTotalWI2024-25.json";
-import DATA_SP2025 from "./data/IndexedTotalSP2024-25.json";
-import DATA_FA2026 from "./data/IndexedTotalFA2025-26.json";
-import DATA_WI2026 from "./data/IndexedTotalWI2025-26.json";
-import DATA_SP2026 from "./data/IndexedTotalSP2025-26.json";
-import DATA_FA2027 from "./data/IndexedTotalFA2026-27.json";
-
 export const CURRENT_TERM = "/fa2027";
 
-export const courseDataSources: {
-  [key: string]: { [key: string]: CourseData };
+const courseDataLoaders: {
+  [key: string]: () => Promise<{ default: CourseIndex }>;
 } = {
-  "/fa2023": DATA_FA2023,
-  "/wi2023": DATA_WI2023,
-  "/sp2023": DATA_SP2023,
-  "/fa2024": DATA_FA2024,
-  "/wi2024": DATA_WI2024,
-  "/sp2024": DATA_SP2024,
-  "/fa2025": DATA_FA2025,
-  "/wi2025": DATA_WI2025,
-  "/sp2025": DATA_SP2025,
-  "/fa2026": DATA_FA2026,
-  "/wi2026": DATA_WI2026,
-  "/sp2026": DATA_SP2026,
-  "/fa2027": DATA_FA2027,
+  "/fa2023": () => import("./data/IndexedTotalFA2022-23.json"),
+  "/wi2023": () => import("./data/IndexedTotalWI2022-23.json"),
+  "/sp2023": () => import("./data/IndexedTotalSP2022-23.json"),
+  "/fa2024": () => import("./data/IndexedTotalFA2023-24.json"),
+  "/wi2024": () => import("./data/IndexedTotalWI2023-24.json"),
+  "/sp2024": () => import("./data/IndexedTotalSP2023-24.json"),
+  "/fa2025": () => import("./data/IndexedTotalFA2024-25.json"),
+  "/wi2025": () => import("./data/IndexedTotalWI2024-25.json"),
+  "/sp2025": () => import("./data/IndexedTotalSP2024-25.json"),
+  "/fa2026": () => import("./data/IndexedTotalFA2025-26.json"),
+  "/wi2026": () => import("./data/IndexedTotalWI2025-26.json"),
+  "/sp2026": () => import("./data/IndexedTotalSP2025-26.json"),
+  "/fa2027": () => import("./data/IndexedTotalFA2026-27.json"),
 };
+
+const courseIndexCache: { [key: string]: CourseIndex } = {};
+
+export function getCachedCourseIndex(term: string): CourseIndex | undefined {
+  return courseIndexCache[term];
+}
+
+export async function loadCourseIndex(term: string): Promise<CourseIndex> {
+  const cached = courseIndexCache[term];
+  if (cached) {
+    return cached;
+  }
+  const loader = courseDataLoaders[term];
+  if (!loader) {
+    return {};
+  }
+  const module = await loader();
+  courseIndexCache[term] = module.default;
+  return module.default;
+}

src/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css";