feat: Responsive catalog with dashboard

frontend/package.json

@@ -9,46 +9,47 @@
 		"start": "serve -s dist -p 3000"
 	},
 	"dependencies": {
-		"@apollo/client": "^3.10.6",
-		"@floating-ui/dom": "^1.6.6",
+		"@apollo/client": "^3.10.8",
+		"@floating-ui/dom": "^1.6.7",
 		"@mapbox/mapbox-gl-directions": "^4.3.1",
-		"@radix-ui/react-checkbox": "^1.1.0",
+		"@radix-ui/react-checkbox": "^1.1.1",
 		"@radix-ui/react-dialog": "^1.1.1",
 		"@radix-ui/react-dropdown-menu": "^2.1.1",
 		"@radix-ui/react-hover-card": "^1.1.1",
 		"@radix-ui/react-radio-group": "^1.2.0",
 		"@radix-ui/react-scroll-area": "^1.1.0",
 		"@radix-ui/react-select": "^2.1.1",
-		"@radix-ui/react-tooltip": "^1.1.1",
+		"@radix-ui/react-separator": "^1.1.0",
+		"@radix-ui/react-tooltip": "^1.1.2",
 		"@shopify/draggable": "^1.1.3",
-		"@tanstack/react-virtual": "^3.7.0",
+		"@tanstack/react-virtual": "^3.8.2",
 		"classnames": "^2.5.1",
 		"fuse.js": "^7.0.0",
 		"graphql": "^16.9.0",
 		"iconoir-react": "^7.7.0",
-		"mapbox-gl": "^3.4.0",
+		"mapbox-gl": "^3.5.1",
 		"moment": "^2.30.1",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
-		"react-router-dom": "^6.24.0",
+		"react-router-dom": "^6.24.1",
 		"recharts": "^2.12.7"
 	},
 	"devDependencies": {
 		"@trivago/prettier-plugin-sort-imports": "^4.3.0",
 		"@types/mapbox-gl": "^3.1.0",
-		"@types/node": "^20.14.8",
+		"@types/node": "^20.14.10",
 		"@types/react": "^18.3.3",
 		"@types/react-dom": "^18.3.0",
-		"@typescript-eslint/eslint-plugin": "^7.14.1",
-		"@typescript-eslint/parser": "^7.14.1",
+		"@typescript-eslint/eslint-plugin": "^7.16.0",
+		"@typescript-eslint/parser": "^7.16.0",
 		"@vitejs/plugin-react": "^4.3.1",
 		"eslint": "^8.56.0",
 		"eslint-plugin-react-hooks": "^4.6.2",
-		"eslint-plugin-react-refresh": "^0.4.7",
+		"eslint-plugin-react-refresh": "^0.4.8",
 		"prettier": "^3.3.2",
-		"sass": "^1.77.6",
+		"sass": "^1.77.7",
 		"serve": "^14.2.3",
-		"typescript": "^5.5.2",
-		"vite": "^5.3.1"
+		"typescript": "^5.5.3",
+		"vite": "^5.3.3"
 	}
 }

frontend/src/App.tsx

@@ -5,102 +5,116 @@ import { IconoirProvider } from "iconoir-react";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
 
 import Catalog from "@/app/Catalog";
+import Enrollment from "@/app/Enrollment";
+import Grades from "@/app/Grades";
 import Landing from "@/app/Landing";
-import BaseLayout from "@/components/BaseLayout";
 import Layout from "@/components/Layout";
 
 const About = lazy(() => import("@/app/About"));
-const Enrollment = lazy(() => import("@/app/Catalog/Class/Enrollment"));
-const Grades = lazy(() => import("@/app/Catalog/Class/Grades"));
-const Overview = lazy(() => import("@/app/Catalog/Class/Overview"));
-const Sections = lazy(() => import("@/app/Catalog/Class/Sections"));
+const CatalogEnrollment = lazy(() => import("@/app/Catalog/Class/Enrollment"));
+const CatalogGrades = lazy(() => import("@/app/Catalog/Class/Grades"));
+const CatalogOverview = lazy(() => import("@/app/Catalog/Class/Overview"));
+const CatalogSections = lazy(() => import("@/app/Catalog/Class/Sections"));
 const Discover = lazy(() => import("@/app/Discover"));
 const Plan = lazy(() => import("@/app/Plan"));
 const Schedule = lazy(() => import("@/app/Schedule"));
 const Compare = lazy(() => import("@/app/Schedule/Compare"));
 const Manage = lazy(() => import("@/app/Schedule/Manage"));
 const Schedules = lazy(() => import("@/app/Schedules"));
 const Map = lazy(() => import("@/app/Map"));
+const Account = lazy(() => import("@/app/Account"));
+const Dashboard = lazy(() => import("@/app/Dashboard"));
 
 const router = createBrowserRouter([
   {
-    element: <Layout />,
+    element: <Dashboard />,
+    path: "dashboard",
+  },
+  {
+    element: <Layout header={false} footer={false} />,
     children: [
       {
-        element: <BaseLayout header={false} footer={false} />,
+        element: <Landing />,
+        index: true,
+      },
+      {
+        element: <Discover />,
+        path: "discover",
+      },
+      {
+        element: <Schedule />,
+        path: "schedules/:scheduleId",
         children: [
           {
-            element: <Landing />,
+            element: <Manage />,
             index: true,
           },
           {
-            element: <Discover />,
-            path: "explore",
-          },
-          {
-            element: <Schedule />,
-            path: "schedules/:scheduleId",
-            children: [
-              {
-                element: <Manage />,
-                index: true,
-              },
-              {
-                element: <Compare />,
-                path: "compare/:comparedScheduleId?",
-              },
-            ],
-          },
-          {
-            element: <Map />,
-            path: "map",
+            element: <Compare />,
+            path: "compare/:comparedScheduleId?",
           },
         ],
       },
       {
-        element: <BaseLayout />,
-        children: [
-          {
-            element: <About />,
-            path: "about",
-          },
-        ],
+        element: <Map />,
+        path: "map",
       },
+    ],
+  },
+  {
+    element: <Layout />,
+    children: [
       {
-        element: <BaseLayout footer={false} />,
+        element: <About />,
+        path: "about",
+      },
+      {
+        element: <Account />,
+        path: "account",
+      },
+    ],
+  },
+  {
+    element: <Layout footer={false} />,
+    children: [
+      {
+        element: <Grades />,
+        path: "grades",
+      },
+      {
+        element: <Enrollment />,
+        path: "enrollment",
+      },
+      {
+        element: <Catalog />,
+        path: "catalog/:year?/:semester?/:subject?/:courseNumber?/:classNumber?",
         children: [
           {
-            element: <Catalog />,
-            path: "catalog/:year?/:semester?/:subject?/:courseNumber?/:classNumber?",
-            children: [
-              {
-                element: <Overview />,
-                index: true,
-              },
-              {
-                element: <Sections />,
-                path: "sections",
-              },
-              {
-                element: <Enrollment />,
-                path: "enrollment",
-              },
-              {
-                element: <Grades />,
-                path: "grades",
-              },
-            ],
+            element: <CatalogOverview />,
+            index: true,
+          },
+          {
+            element: <CatalogSections />,
+            path: "sections",
           },
           {
-            element: <Schedules />,
-            path: "schedules",
+            element: <CatalogEnrollment />,
+            path: "enrollment",
           },
           {
-            element: <Plan />,
-            path: "plan",
+            element: <CatalogGrades />,
+            path: "grades",
           },
         ],
       },
+      {
+        element: <Schedules />,
+        path: "schedules",
+      },
+      {
+        element: <Plan />,
+        path: "plan",
+      },
     ],
   },
 ]);

frontend/src/app/Account/index.tsx

@@ -0,0 +1,7 @@
+export default function Account() {
+  return (
+    <div>
+      <h1>Grades</h1>
+    </div>
+  );
+}

frontend/src/app/Catalog/Catalog.module.scss

@@ -1,7 +1,70 @@
 .root {
+  flex: 1 1 0;
   display: flex;
-  flex-grow: 1;
-  overflow: clip;
-  height: 0;
-  position: relative;
+  min-height: 0;
+
+  .view {
+    flex-grow: 1;
+    overflow: auto;
+  }
+
+  .panel {
+    display: flex;
+    flex-direction: column;
+
+    .header {
+      padding: 12px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid var(--border-color);
+      background-color: var(--foreground-color);
+
+      .title {
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--heading-color);
+        line-height: 1;
+      }
+    }
+
+    .body {
+      flex: 1 1 0;
+      min-height: 0;
+    }
+  }
+
+  @media (width > 992px) {
+    display: flex;
+
+    &:not(.expanded) .panel {
+      display: none;
+    }
+
+    .panel {
+      border-right: 1px solid var(--border-color);
+    }
+
+    .panel .header {
+      display: none;
+    }
+
+    .view {
+      flex-grow: 1;
+    }
+  }
+
+  @media (width <= 992px) {
+    .panel {
+      flex-grow: 1;
+    }
+
+    &.open .panel {
+      display: none;
+    }
+
+    &:not(.open) .view {
+      display: none;
+    }
+  }
 }

frontend/src/app/Catalog/Class/Class.module.scss

@@ -34,21 +34,21 @@
 }
 
 .root {
-  flex-grow: 1;
   display: flex;
   flex-direction: column;
-  overflow: auto;
-
-  @media (width <= 992px) {
-    position: absolute;
-    inset: 0;
-    background-color: var(--background-color);
-    z-index: 3;
-  }
 
   .header {
-    padding: 24px 24px 12px;
+    padding-top: 24px;
     background-color: var(--foreground-color);
+    border-bottom: 1px solid var(--border-color);
+
+    .menu {
+      display: flex;
+      background-color: var(--foreground-color);
+      margin: 0 -12px;
+      padding: 24px 0 12px;
+      align-items: center;
+    }
 
     .row {
       display: flex;
@@ -76,8 +76,8 @@
 
     .heading {
       font-size: 24px;
-      line-height: 1.25;
-      font-weight: 700;
+      font-weight: 660;
+      font-feature-settings: "cv05" on, "cv13" on, "ss07" on, "cv12" on, "cv06" on;
       color: var(--heading-color);
       margin-bottom: 8px;
     }
@@ -89,12 +89,4 @@
       margin-bottom: 16px;
     }
   }
-
-  .menu {
-    display: flex;
-    border-bottom: 1px solid var(--border-color);
-    background-color: var(--foreground-color);
-    padding: 12px;
-    align-items: center;
-  }
 }

frontend/src/app/Catalog/Class/Enrollment/Enrollment.module.scss

@@ -1,5 +1,5 @@
 .root {
-  padding: 24px;
+  padding: 24px 0;
   flex-grow: 1;
   display: flex;
   flex-direction: column;

frontend/src/app/Catalog/Class/Enrollment/Reservations/Reservations.module.scss

@@ -63,7 +63,7 @@
       height: 16px;
       border-radius: 2px;
       overflow: hidden;
-      background-color: var(--button-color);
+      // background-color: var(--button-color);
       transition: all 100ms ease-in-out;
       min-width: 16px;