Update deps, parse timeslots

package.json

@@ -5,19 +5,19 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@chakra-ui/react": "^3.5.1",
+    "@chakra-ui/react": "^3.8.0",
     "@emotion/react": "^11.14.0",
     "@fontsource-variable/inter": "^5.1.1",
     "@fullcalendar/core": "^6.1.15",
     "@fullcalendar/interaction": "^6.1.15",
     "@fullcalendar/react": "^6.1.15",
     "@fullcalendar/timegrid": "^6.1.15",
     "@react-oauth/google": "^0.2.8",
-    "ag-grid-react": "^33.0.4",
+    "ag-grid-react": "^33.1.0",
     "html-entities": "^2.5.2",
     "ical-generator": "^8.1.1",
     "msgpack-lite": "^0.1.26",
-    "nanoid": "^3.3.8",
+    "nanoid": "^5.1.0",
     "next-themes": "^0.4.4",
     "react": "19.0.0",
     "react-dom": "19.0.0",
@@ -39,24 +39,24 @@
     "node": ">=20.0"
   },
   "devDependencies": {
-    "@chakra-ui/cli": "^3.5.1",
-    "@eslint/js": "^9.16.0",
+    "@chakra-ui/cli": "^3.8.0",
+    "@eslint/js": "^9.20.0",
     "@types/gapi.client.calendar-v3": "^0.0.4",
     "@types/msgpack-lite": "^0.1.11",
-    "@types/node": "^22.10.10",
-    "@types/react": "19.0.7",
+    "@types/node": "^22.13.4",
+    "@types/react": "^19.0.8",
     "@types/react-dom": "19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.19.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint": "^9.20.1",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.18",
-    "globals": "^15.14.0",
-    "prettier": "3.4.1",
-    "sass-embedded": "^1.83.4",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "prettier": "^3.5.1",
+    "sass-embedded": "^1.85.0",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.22.0",
-    "vite": "^6.0.11",
+    "typescript-eslint": "^8.24.0",
+    "vite": "^6.1.0",
     "vite-plugin-checker": "^0.8.0",
     "vite-plugin-node-polyfills": "^0.23.0",
     "vite-tsconfig-paths": "^5.1.4"

src/components/ActivityButtons.tsx

@@ -88,6 +88,13 @@ function OverrideLocations(props: { state: State; secs: Sections }) {
       <Input
         value={room}
         onChange={(e) => setRoom(e.target.value)}
+        onKeyUp={(e) => {
+          if (e.key === "Enter") {
+            onConfirm();
+          } else if (e.key === "Escape") {
+            onCancel();
+          }
+        }}
         placeholder="26-100"
       />
       <Button onClick={onConfirm}>
@@ -121,13 +128,13 @@ function ClassManualSections(props: { cls: Class; state: State }) {
   useLayoutEffect(() => setSelected(genSelected(cls)), [cls]);
 
   const RenderOptions = () => {
-    const getLabel = (sec: SectionLockOption) => {
+    const getLabel = (sec: SectionLockOption, humanReadable?: boolean) => {
       if (sec === LockOption.Auto) {
-        return LockOption.Auto;
+        return humanReadable ? "Auto (default)" : LockOption.Auto;
       } else if (sec === LockOption.None) {
         return LockOption.None;
       } else {
-        return sec.rawTime;
+        return humanReadable ? sec.parsedTime : sec.rawTime;
       }
     };
 
@@ -168,9 +175,7 @@ function ClassManualSections(props: { cls: Class; state: State }) {
                 <Stack>
                   {options.map((sec) => (
                     <Radio key={getLabel(sec)} value={getLabel(sec)}>
-                      {getLabel(sec) === LockOption.Auto
-                        ? "Auto (default)"
-                        : getLabel(sec)}
+                      {getLabel(sec, true)}
                     </Radio>
                   ))}
                 </Stack>

src/components/FeedbackBanner.tsx

@@ -1,6 +1,13 @@
-import { Center, Flex, Text, Box, Float, Presence } from "@chakra-ui/react";
+import {
+  Center,
+  Flex,
+  Text,
+  Box,
+  Float,
+  Presence,
+  CloseButton,
+} from "@chakra-ui/react";
 import { LinkButton } from "./ui/link-button";
-import { CloseButton } from "./ui/close-button";
 
 export const FeedbackBanner = (props: {
   isOpen: boolean;

src/components/Footers.tsx

@@ -21,11 +21,7 @@ function AboutDialog() {
       <Link onClick={() => setVisible(true)} colorPalette="blue">
         About
       </Link>
-      <DialogRoot
-        lazyMount
-        open={visible}
-        onOpenChange={() => setVisible(false)}
-      >
+      <DialogRoot open={visible} onOpenChange={() => setVisible(false)}>
         <DialogContent>
           <DialogHeader>
             <DialogTitle>Hydrant</DialogTitle>
@@ -83,11 +79,7 @@ function PrivacyPolicyDialog() {
       <Link onClick={() => setVisible(true)} colorPalette="blue">
         Privacy Policy
       </Link>
-      <DialogRoot
-        lazyMount
-        open={visible}
-        onOpenChange={() => setVisible(false)}
-      >
+      <DialogRoot open={visible} onOpenChange={() => setVisible(false)}>
         <DialogContent>
           <DialogHeader>
             <DialogTitle>Privacy Policy</DialogTitle>

src/components/Header.tsx

@@ -64,7 +64,6 @@ function PreferencesDialog(props: { state: State; preferences: Preferences }) {
   return (
     <>
       <DialogRoot
-        lazyMount
         open={visible}
         onOpenChange={(e) => (e.open ? onOpen() : onCancel())}
       >

src/components/ScheduleSwitcher.tsx

@@ -107,7 +107,6 @@ function SelectWithWarn(props: {
         </SelectContent>
       </SelectRoot>
       <DialogRoot
-        lazyMount
         open={Boolean(confirmSave)}
         onOpenChange={(e) => (!e.open ? setConfirmSave("") : null)}
       >
@@ -150,7 +149,6 @@ function DeleteDialog(props: {
 
   return (
     <DialogRoot
-      lazyMount
       open={show}
       onOpenChange={(e) => setShow(e.open)}
       role="alertdialog"
@@ -188,7 +186,7 @@ function ExportDialog(props: { state: State; children: React.ReactNode }) {
   const [clipboardState, copyToClipboard] = useCopyToClipboard();
 
   return (
-    <DialogRoot lazyMount open={show} onOpenChange={(e) => setShow(e.open)}>
+    <DialogRoot open={show} onOpenChange={(e) => setShow(e.open)}>
       <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent>
         <DialogHeader>

src/components/ui/color-mode.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import type { IconButtonProps } from "@chakra-ui/react";
-import { ClientOnly, IconButton, Skeleton } from "@chakra-ui/react";
+import type { IconButtonProps, SpanProps } from "@chakra-ui/react";
+import { ClientOnly, IconButton, Skeleton, Span } from "@chakra-ui/react";
 import { ThemeProvider, useTheme } from "next-themes";
 import type { ThemeProviderProps } from "next-themes";
 import * as React from "react";
@@ -27,7 +27,7 @@ export interface UseColorModeReturn {
 export function useColorMode(): UseColorModeReturn {
   const { resolvedTheme, setTheme } = useTheme();
   const toggleColorMode = () => {
-    setTheme(resolvedTheme === "light" ? "dark" : "light");
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
   };
   return {
     colorMode: resolvedTheme as ColorMode,
@@ -75,3 +75,35 @@ export const ColorModeButton = React.forwardRef<
     </ClientOnly>
   );
 });
+
+export const LightMode = React.forwardRef<HTMLSpanElement, SpanProps>(
+  function LightMode(props, ref) {
+    return (
+      <Span
+        color="fg"
+        display="contents"
+        className="chakra-theme light"
+        colorPalette="gray"
+        colorScheme="light"
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+export const DarkMode = React.forwardRef<HTMLSpanElement, SpanProps>(
+  function DarkMode(props, ref) {
+    return (
+      <Span
+        color="fg"
+        display="contents"
+        className="chakra-theme dark"
+        colorPalette="gray"
+        colorScheme="dark"
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);

src/lib/class.ts

@@ -109,6 +109,19 @@ export class Section {
     this.room = room;
   }
 
+  /** Get the parsed time for this section in a format similar to the Registrar. */
+  get parsedTime(): string {
+    const [room, days, eveningBool, times] = this.rawTime.split("/");
+
+    const isEvening = eveningBool === "1";
+
+    if (isEvening) {
+      return `${days} EVE (${times}) (${room})`;
+    }
+
+    return `${days}${times} (${room})`;
+  }
+
   /**
    * @param currentSlots - array of timeslots currently occupied
    * @returns number of conflicts this section has with currentSlots