feat(release): v2.2.0

* chore: update exec list

* chore: update roles

* chore: update h2

* fix: key

* chore: caps

.github/workflows/best-practices.yml

@@ -13,9 +13,9 @@ jobs:
                   fetch-depth: 0
 
             - name: Setup pnpm
-              uses: pnpm/action-setup@v3
+              uses: pnpm/action-setup@v4
               with:
-                  version: 9
+                  version: 10
 
             - name: Install dependencies
               run: pnpm install
@@ -32,9 +32,9 @@ jobs:
                   fetch-depth: 0
 
             - name: Setup pnpm
-              uses: pnpm/action-setup@v3
+              uses: pnpm/action-setup@v4
               with:
-                  version: 9
+                  version: 10
 
             - name: Install dependencies
               run: pnpm install

.github/workflows/check-types.yml

@@ -13,9 +13,9 @@ jobs:
                   fetch-depth: 0
 
             - name: Setup pnpm
-              uses: pnpm/action-setup@v3
+              uses: pnpm/action-setup@v4
               with:
-                  version: 9
+                  version: 10
 
             - name: Install dependencies
               run: pnpm install

.github/workflows/chromatic.yml

@@ -11,9 +11,9 @@ jobs:
               with:
                   fetch-depth: 0
             - name: Setup pnpm
-              uses: pnpm/action-setup@v3
+              uses: pnpm/action-setup@v4
               with:
-                  version: 9
+                  version: 10
 
             - name: Install dependencies
               run: pnpm install

.github/workflows/tests.yml

@@ -13,9 +13,9 @@ jobs:
                   fetch-depth: 0
 
             - name: Setup pnpm
-              uses: pnpm/action-setup@v3
+              uses: pnpm/action-setup@v4
               with:
-                  version: 9
+                  version: 10
 
             - name: Install dependencies
               run: pnpm install

CHANGELOG.md

@@ -1,3 +1,33 @@
+## [2.2.0](https://github.com/Longhorn-Developers/UT-Registration-Plus/compare/v2.1.1...v2.2.0) (2025-04-06)
+
+### Features
+
+- auto create empty schedule when deleted all schedules ([#552](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/552)) ([7c2beef](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/7c2beef1930fbc887e8ec1aea789016b3150cd21))
+- ensure unique splash text on schedule change ([#554](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/554)) ([9448072](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/94480721124e052426c1f3236e8605c7088df79c))
+- implement a What's New prompt ([#539](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/539)) ([f036d40](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/f036d409e60a39fd1d3cb2f0db53a6056615f336))
+- persist sidebar toggle state ([#569](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/569)) ([6957431](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/695743104c57951ba1957258c60c843f8fae793f))
+- recruitment banner for designer ([#578](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/578)) ([70d4fec](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/70d4fecad61ec3cd3ba839de302fd851e075d073))
+- rework start time to checkboxes ([#553](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/553)) ([ca734dc](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/ca734dcd39a433cfd2e930ea04adeba959b32c36))
+- sticky calendar header and days ([#568](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/568)) ([fa9f78b](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/fa9f78b46e3a2270a44d4cc0691195a7c695cb93))
+
+### Bug Fixes
+
+- ics calendar export dates ([#535](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/535)) ([4a5f67f](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/4a5f67f0fda9f0ef57f821e4b7a55d63f099f579))
+- include logo in screenshot, fix screenshots on small/zoomed windows ([#579](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/579)) ([76b6aa7](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/76b6aa7c150299dfcfa4b3dc00ce2de32f90f75c))
+- merge course labels across pages ([#541](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/541)) ([6c3139b](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/6c3139bf0f324c9a7be826b6c24e8bf142fc53b1))
+- **schedule:** truncate long schedule names in popup ([#564](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/564)) ([3bed9cc](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/3bed9cc27febfe795af0766a913c4845e74cc2da))
+
+## [2.1.1](https://github.com/Longhorn-Developers/UT-Registration-Plus/compare/v2.1.0...v2.1.1) (2025-03-03)
+
+### Features
+
+- add isDeveloper ([c6452c4](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/c6452c4f2b174487e6f51ad546ca1c3f8b4dbc1f))
+- map page ([#390](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/390)) ([2184774](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/218477404fdeacda7b39cd233e4e1e65995935d4))
+
+### Bug Fixes
+
+- import schedule file upload button ([#515](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues/515)) ([766c0bc](https://github.com/Longhorn-Developers/UT-Registration-Plus/commit/766c0bc1b4a75f8146a922cb2eca8871032c1dc9))
+
 ## [2.1.0](https://github.com/Longhorn-Developers/UT-Registration-Plus/compare/v2.0.2...v2.1.0) (2025-02-20)
 
 ### Features

Dockerfile

@@ -2,7 +2,7 @@
 FROM node:20.9.0-alpine AS base
 
 # Install pnpm
-RUN npm install -g pnpm
+RUN npm install -g pnpm@latest-10
 
 # Set working directory
 WORKDIR /app

package.json

@@ -1,7 +1,7 @@
 {
     "name": "ut-registration-plus",
     "displayName": "UT Registration Plus",
-    "version": "2.1.0",
+    "version": "2.2.0",
     "description": "UT Registration Plus is a Chrome extension that allows students to easily register for classes.",
     "private": true,
     "homepage": "https://github.com/Longhorn-Developers/UT-Registration-Plus",
@@ -27,66 +27,69 @@
         "prepare": "husky"
     },
     "dependencies": {
+        "@date-fns/tz": "^1.2.0",
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/modifiers": "^9.0.0",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
         "@headlessui/react": "^2.2.0",
-        "@octokit/rest": "^21.0.2",
+        "@octokit/rest": "^21.1.1",
         "@phosphor-icons/react": "^2.1.7",
-        "@sentry/react": "^8.38.0",
+        "@sentry/react": "^8.55.0",
+        "@tanstack/react-query": "^5.69.0",
         "@unocss/vite": "^0.63.6",
-        "@vitejs/plugin-react": "^4.3.3",
+        "@vitejs/plugin-react": "^4.3.4",
         "chrome-extension-toolkit": "^0.0.54",
         "clsx": "^2.1.1",
         "conventional-changelog": "^6.0.0",
+        "date-fns": "^4.1.0",
         "highcharts": "^11.4.8",
         "highcharts-react-official": "^3.2.1",
-        "html-to-image": "^1.11.11",
+        "html-to-image": "^1.11.13",
-        "husky": "^9.1.6",
+        "husky": "^9.1.7",
         "kc-dabr-wasm": "^0.1.2",
-        "nanoid": "^5.0.8",
+        "nanoid": "^5.1.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-loading-skeleton": "^3.5.0",
-        "react-markdown": "^9.0.1",
+        "react-markdown": "^9.1.0",
         "react-syntax-highlighter": "^15.6.1",
-        "remark-gfm": "^4.0.0",
+        "remark-gfm": "^4.0.1",
-        "sass": "^1.81.0",
+        "sass": "^1.85.1",
         "simple-git": "^3.27.0",
         "sql.js": "1.11.0"
     },
     "devDependencies": {
         "@chromatic-com/storybook": "^2.0.2",
-        "@commitlint/cli": "^19.5.0",
+        "@commitlint/cli": "^19.7.1",
-        "@commitlint/config-conventional": "^19.5.0",
+        "@commitlint/config-conventional": "^19.7.1",
         "@commitlint/types": "^19.5.0",
         "@crxjs/vite-plugin": "2.0.0-beta.21",
-        "@iconify-json/bi": "^1.2.1",
+        "@iconify-json/bi": "^1.2.2",
-        "@iconify-json/ic": "^1.2.1",
+        "@iconify-json/ic": "^1.2.2",
-        "@iconify-json/iconoir": "^1.2.4",
+        "@iconify-json/iconoir": "^1.2.7",
-        "@iconify-json/material-symbols": "^1.2.6",
+        "@iconify-json/material-symbols": "^1.2.14",
-        "@iconify-json/ri": "^1.2.3",
+        "@iconify-json/ri": "^1.2.5",
-        "@iconify-json/streamline": "^1.2.1",
+        "@iconify-json/streamline": "^1.2.2",
         "@semantic-release/exec": "^6.0.3",
-        "@sentry/types": "^8.38.0",
+        "@sentry/types": "^8.55.0",
-        "@storybook/addon-designs": "^8.0.4",
+        "@storybook/addon-designs": "^8.2.0",
-        "@storybook/addon-essentials": "^8.4.4",
+        "@storybook/addon-essentials": "^8.6.0",
-        "@storybook/addon-links": "^8.4.4",
+        "@storybook/addon-links": "^8.6.0",
-        "@storybook/blocks": "^8.4.4",
+        "@storybook/blocks": "^8.6.0",
-        "@storybook/react": "^8.4.4",
+        "@storybook/react": "^8.6.0",
-        "@storybook/react-vite": "^8.4.4",
+        "@storybook/react-vite": "^8.6.0",
-        "@storybook/test": "^8.4.4",
+        "@storybook/test": "^8.6.0",
         "@svgr/core": "^8.1.0",
         "@svgr/plugin-jsx": "^8.1.0",
         "@types/chrome": "^0.0.273",
         "@types/conventional-changelog": "^3.1.5",
         "@types/gulp": "^4.0.17",
         "@types/gulp-zip": "^4.0.4",
-        "@types/node": "^22.9.0",
+        "@types/node": "^22.13.5",
         "@types/prompts": "^2.4.9",
-        "@types/react": "^18.3.12",
+        "@types/react": "^18.3.18",
-        "@types/react-dom": "^18.3.1",
+        "@types/react-dom": "^18.3.5",
         "@types/react-syntax-highlighter": "^15.5.13",
         "@types/semantic-release": "^20.0.6",
         "@types/semver": "^7.5.8",
@@ -100,48 +103,52 @@
         "@unocss/reset": "^0.63.6",
         "@unocss/transformer-directives": "^0.63.6",
         "@unocss/transformer-variant-group": "^0.63.6",
-        "@vitejs/plugin-react-swc": "^3.7.1",
+        "@vitejs/plugin-react-swc": "^3.8.0",
-        "@vitest/coverage-v8": "^2.1.5",
+        "@vitest/coverage-v8": "^2.1.9",
-        "@vitest/ui": "^2.1.5",
+        "@vitest/ui": "^2.1.9",
-        "chalk": "^5.3.0",
+        "chalk": "^5.4.1",
-        "chromatic": "^11.18.1",
+        "chromatic": "^11.26.0",
         "cssnano": "^7.0.6",
         "cssnano-preset-advanced": "^7.0.6",
-        "dotenv": "^16.4.5",
+        "dotenv": "^16.4.7",
-        "es-module-lexer": "^1.5.4",
+        "es-module-lexer": "^1.6.0",
         "eslint": "^8.57.1",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-config-airbnb-typescript": "^18.0.0",
         "eslint-config-prettier": "^9.1.0",
-        "eslint-import-resolver-typescript": "^3.6.3",
+        "eslint-import-resolver-typescript": "^3.8.3",
         "eslint-plugin-import": "^2.31.0",
         "eslint-plugin-import-essentials": "^0.2.1",
-        "eslint-plugin-jsdoc": "^50.5.0",
+        "eslint-plugin-jsdoc": "^50.6.3",
-        "eslint-plugin-prettier": "^5.2.1",
+        "eslint-plugin-prettier": "^5.2.3",
-        "eslint-plugin-react": "^7.37.2",
+        "eslint-plugin-react": "^7.37.4",
         "eslint-plugin-react-hooks": "^4.6.2",
-        "eslint-plugin-react-prefer-function-component": "^3.3.0",
+        "eslint-plugin-react-prefer-function-component": "^3.4.0",
-        "eslint-plugin-react-refresh": "^0.4.14",
+        "eslint-plugin-react-refresh": "^0.4.19",
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "eslint-plugin-storybook": "^0.9.0",
         "eslint-plugin-tsdoc": "^0.3.0",
         "gulp": "^5.0.0",
         "gulp-execa": "^7.0.1",
-        "gulp-zip": "^6.0.0",
+        "gulp-zip": "^6.1.0",
         "path": "^0.12.7",
-        "postcss": "^8.4.49",
+        "postcss": "^8.5.3",
-        "prettier": "^3.3.3",
+        "prettier": "^3.5.2",
         "react-dev-utils": "^12.0.1",
-        "semantic-release": "^24.2.0",
+        "semantic-release": "^24.2.3",
-        "storybook": "^8.4.4",
+        "storybook": "^8.6.0",
-        "typescript": "^5.6.3",
+        "typescript": "^5.7.3",
         "unocss": "^0.63.6",
         "unocss-preset-primitives": "0.0.2-beta.1",
         "unplugin-icons": "^0.19.3",
-        "vite": "^5.4.11",
+        "vite": "^5.4.14",
-        "vite-plugin-inspect": "^0.8.7",
+        "vite-plugin-inspect": "^0.8.9",
-        "vitest": "^2.1.5"
+        "vitest": "^2.1.9"
+    },
+    "engineStrict": true,
+    "engines": {
+        "pnpm": "^10"
     },
     "pnpm": {
         "patchedDependencies": {
@@ -151,5 +158,9 @@
         "overrides": {
             "es-module-lexer": "^1.5.4"
         }
+    },
+    "volta": {
+        "node": "20.9.0",
+        "pnpm": "10.6.5"
     }
 }

scripts/generateChangelog.ts

@@ -27,8 +27,8 @@ interface Props {
 /**
  * Generates a changelog using the conventional-changelog command.
  *
- * @returns {Promise<void>} A promise that resolves when the changelog is generated.
+ * @returns A promise that resolves when the changelog is generated.
- * @throws {Error} If there is an error generating the changelog.
+ * @throws If there is an error generating the changelog.
  */
 async function generateChangelog({ preset, outFile = 'CHANGELOG.md', releaseCount = 1 }: Props): Promise<void> {
     try {

src/assets/insideJokes.tsx

@@ -34,10 +34,8 @@ const splashText: string[] = [
     "The Block of Butter incident of '22",
     'Begun, the midterms have.',
     'You must construct additional schedules',
-    "Arrows of Christ vs Church of Scientology was the crossover we didn't know we needed",
     'THE WALK SIGN IS ON TO CROSS GUADALUPE AND 21ST',
     'Pay attention. Might learn something.',
-    'Long ago, apartment rates lived together in harmony. Then, everything changed when American Campus Communities Inc attacked.',
     'Roll for Initiative!',
     'The line at the on-campus Starbucks is longer than your course waitlist.',
     'The weather changes more often than your class schedule.',
@@ -59,7 +57,7 @@ const splashText: string[] = [
     'follow @sghsri!',
     'Officially part of the SEC',
     'Planner is now acquired by Plus',
-    'Longhorn-Developers is the best UT Student Org',
+    'Longhorn Developers is the best UT Student Org',
     'The Eiffel Tower is the UT Tower of Paris',
     'A pen and paper is old fashioned, but sometimes old ways are best',
     'A heart is like bedrock, destroyable only by cheating',
@@ -69,13 +67,13 @@ const splashText: string[] = [
     'Almost Turing complete',
     '#BF5700',
     'The waitlist is a lie!',
-    `He's a CS Major, but he showers regularly. 🧢`,
+    "He's a CS Major, but he showers regularly. 🧢",
     'A CS major walks into a bar. The bar is empty because it is a CS major.',
     'UT Registration Plus - The only thing that can make registration worse is not having it',
     'UT Registration Plus - We make registration slightly less painful. Slightly.',
     'UT Registration Plus - Do you really want to figure out which professors will ruin your GPA by yourself?',
-    'Ayo tf is a memory leak',
+    "Ayo what's is a memory leak",
-    "lowkey we never thought we'd get this far, how tf are 60k of you people using this",
+    "lowkey we never thought we'd get this far, how are 60k of you people using this",
     "dang we're really out here making a splash",
     "We'd make a joke about A&M, but we're not sure they can read",
     "We've only caused one or two outages, we swear!",
@@ -113,7 +111,7 @@ const splashText: string[] = [
     "Stop trying to make UTRP happen, it's not going to happen!",
     'Befriend the raccoons on campus',
     `It's ${new Date().toLocaleString('en-US', { month: 'long', day: 'numeric' })} and OU still sucks`,
-    'As seen on TV!	',
+    'As seen on TV!',
     "Should you major in Compsci? well, here's a better question. do you wanna have a bad time?",
 ];
 

src/pages/background/events/onUpdate.ts

@@ -1,4 +1,7 @@
 import { ExtensionStore } from '@shared/storage/ExtensionStore';
+import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
+
+import createSchedule from '../lib/createSchedule';
 
 /**
  * Called when the extension is updated (or when the extension is reloaded in development mode)
@@ -8,4 +11,11 @@ export default async function onUpdate() {
         version: chrome.runtime.getManifest().version,
         lastUpdate: Date.now(),
     });
+
+    const schedules = await UserScheduleStore.get('schedules');
+
+    // By invariant, there must always be at least one schedule
+    if (schedules.length === 0) {
+        createSchedule('Schedule 1');
+    }
 }

src/pages/background/lib/createSchedule.ts

@@ -36,5 +36,11 @@ export default async function createSchedule(scheduleName: string) {
     schedules.push(newSchedule);
 
     await UserScheduleStore.set('schedules', schedules);
+
+    // If there is only one schedule, set the active index to the new schedule
+    if (schedules.length <= 1) {
+        await UserScheduleStore.set('activeIndex', 0);
+    }
+
     return newSchedule.id;
 }

src/pages/background/lib/deleteSchedule.ts

@@ -22,6 +22,11 @@ export default async function deleteSchedule(scheduleId: string): Promise<string
     schedules.splice(scheduleIndex, 1);
     await UserScheduleStore.set('schedules', schedules);
 
+    // By invariant, there must always be at least one schedule
+    if (schedules.length === 0) {
+        createSchedule('Schedule 1');
+    }
+
     let newActiveIndex = activeIndex;
     if (scheduleIndex < activeIndex) {
         newActiveIndex = activeIndex - 1;

src/pages/calendar/CalendarMain.tsx

@@ -3,6 +3,7 @@ import Calendar from '@views/components/calendar/Calendar';
 import DialogProvider from '@views/components/common/DialogProvider/DialogProvider';
 import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
 import { MigrationDialog } from '@views/components/common/MigrationDialog';
+import { WhatsNewDialog } from '@views/components/common/WhatsNewPopup';
 import SentryProvider from '@views/contexts/SentryContext';
 import { MessageListener } from 'chrome-extension-toolkit';
 import useKC_DABR_WASM from 'kc-dabr-wasm';
@@ -34,6 +35,7 @@ export default function CalendarMain() {
             <ExtensionRoot className='h-full w-full'>
                 <DialogProvider>
                     <MigrationDialog />
+                    <WhatsNewDialog />
                     <Calendar />
                 </DialogProvider>
             </ExtensionRoot>

src/pages/content/index.tsx

@@ -1,5 +1,6 @@
 import CourseCatalogMain from '@views/components/CourseCatalogMain';
 import InjectedButton from '@views/components/injected/AddAllButton';
+import DaysCheckbox from '@views/components/injected/DaysCheckbox';
 import getSiteSupport, { SiteSupport } from '@views/lib/getSiteSupport';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
@@ -25,3 +26,7 @@ if (support === SiteSupport.COURSE_CATALOG_DETAILS || support === SiteSupport.CO
 if (support === SiteSupport.MY_UT) {
     renderComponent(InjectedButton);
 }
+
+if (support === SiteSupport.COURSE_CATALOG_SEARCH) {
+    renderComponent(DaysCheckbox);
+}

src/pages/map/Map.tsx

@@ -0,0 +1,19 @@
+import DialogProvider from '@views/components/common/DialogProvider/DialogProvider';
+import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
+import Map from '@views/components/map/Map';
+import useKC_DABR_WASM from 'kc-dabr-wasm';
+import React from 'react';
+
+/**
+ * Renders the map page for the UTRP (UT Registration Plus) extension.
+ */
+export default function MapPage() {
+    useKC_DABR_WASM();
+    return (
+        <ExtensionRoot>
+            <DialogProvider>
+                <Map />
+            </DialogProvider>
+        </ExtensionRoot>
+    );
+}

src/pages/map/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <title>UTRP Map</title>
+    </head>
+
+    <body style="min-height: 100vh; height: 0; margin: 0">
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+
+        <script src="./index.tsx" type="module"></script>
+    </body>
+</html>

src/pages/map/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+import Map from './Map';
+
+createRoot(document.getElementById('root')!).render(<Map />);

src/shared/storage/DevStore.ts

@@ -4,6 +4,8 @@ import { createLocalStore, debugStore } from 'chrome-extension-toolkit';
  * A store that is used to store data that is only relevant during development
  */
 interface IDevStore {
+    /** whether the user is a developer */
+    isDeveloper: boolean;
     /** the tabId for the debug tab */
     debugTabId?: number;
     /** whether the debug tab is visible */
@@ -17,6 +19,7 @@ interface IDevStore {
 }
 
 export const DevStore = createLocalStore<IDevStore>({
+    isDeveloper: false,
     debugTabId: undefined,
     isTabReloading: true,
     wasDebugTabVisible: false,

src/shared/storage/ExtensionStore.ts

@@ -8,11 +8,14 @@ interface IExtensionStore {
     version: string;
     /** When was the last update */
     lastUpdate: number;
+    /** The last version of the "What's New" popup that was shown to the user */
+    lastWhatsNewPopupVersion: number;
 }
 
 export const ExtensionStore = createLocalStore<IExtensionStore>({
     version: chrome.runtime.getManifest().version,
     lastUpdate: Date.now(),
+    lastWhatsNewPopupVersion: 0,
 });
 
 debugStore({ ExtensionStore });

src/shared/storage/OptionsStore.ts

@@ -18,6 +18,9 @@ export interface IOptionsStore {
 
     /** whether we should open the calendar in a new tab; default is to focus an existing calendar tab */
     alwaysOpenCalendarInNewTab: boolean;
+
+    /** whether the calendar sidebar should be shown when the calendar is opened */
+    showCalendarSidebar: boolean;
 }
 
 export const OptionsStore = createSyncStore<IOptionsStore>({
@@ -26,6 +29,7 @@ export const OptionsStore = createSyncStore<IOptionsStore>({
     enableScrollToLoad: true,
     enableDataRefreshing: false,
     alwaysOpenCalendarInNewTab: false,
+    showCalendarSidebar: true,
 });
 
 /**
@@ -40,6 +44,7 @@ export const initSettings = async () =>
         enableScrollToLoad: await OptionsStore.get('enableScrollToLoad'),
         enableDataRefreshing: await OptionsStore.get('enableDataRefreshing'),
         alwaysOpenCalendarInNewTab: await OptionsStore.get('alwaysOpenCalendarInNewTab'),
+        showCalendarSidebar: await OptionsStore.get('showCalendarSidebar'),
     }) satisfies IOptionsStore;
 
 // Clothing retailer right

src/shared/types/CRXPages.ts

@@ -5,6 +5,7 @@ export const CRX_PAGES = {
     DEBUG: '/debug.html',
     CALENDAR: '/calendar.html',
     OPTIONS: '/options.html',
+    MAP: '/map.html',
     REPORT: '/report.html',
 } as const;
 

src/shared/types/MIMEType.ts

@@ -17,4 +17,9 @@ const MIMEType = {
  */
 export type MIMETypeKey = keyof typeof MIMEType;
 
+/**
+ * Represents a value of the MIMEType object
+ */
+export type MIMETypeValue = (typeof MIMEType)[MIMETypeKey];
+
 export default MIMEType;

src/shared/util/string.ts

@@ -48,3 +48,22 @@ export const ellipsify = (input: string, chars: number): string => {
     }
     return ellipisifed;
 };
+
+/**
+ *  Stringifies a list of items in English format.
+ *
+ * @param items - The list of items to stringify.
+ * @returns A string representation of the list in English format.
+ * @example
+ * englishStringifyList([]) // ''
+ * englishStringifyList(['Alice']) // 'Alice'
+ * englishStringifyList(['Alice', 'Bob']) // 'Alice and Bob'
+ * englishStringifyList(['Alice', 'Bob', 'Charlie']) // 'Alice, Bob, and Charlie'
+ */
+export const englishStringifyList = (items: readonly string[]): string => {
+    if (items.length === 0) return '';
+    if (items.length === 1) return items[0]!;
+    if (items.length === 2) return `${items[0]} and ${items[1]}`;
+
+    return `${items.slice(0, -1).join(', ')}, and ${items.at(-1)}`;
+};

src/shared/util/tests/string.test.ts

@@ -1,4 +1,4 @@
-import { capitalize, capitalizeFirstLetter, ellipsify } from '@shared/util/string';
+import { capitalize, capitalizeFirstLetter, ellipsify, englishStringifyList } from '@shared/util/string';
 import { describe, expect, it } from 'vitest';
 
 // TODO: Fix `string.ts` and `string.test.ts` to make the tests pass
@@ -54,3 +54,49 @@ describe('ellipsify', () => {
         expect(ellipsify('', 5)).toBe('');
     });
 });
+
+describe('englishStringifyList', () => {
+    it('should handle an empty array', () => {
+        const data = [] satisfies string[];
+        const result = englishStringifyList(data);
+        const expected = '';
+        expect(result).toBe(expected);
+    });
+
+    it('should handle 1 element', () => {
+        const data = ['Alice'] satisfies string[];
+        const result = englishStringifyList(data);
+        const expected = 'Alice';
+        expect(result).toBe(expected);
+    });
+
+    it('should handle 2 elements', () => {
+        const data = ['Alice', 'Bob'] satisfies string[];
+        const result = englishStringifyList(data);
+        const expected = 'Alice and Bob';
+        expect(result).toBe(expected);
+    });
+
+    it('should handle 3 elements', () => {
+        const data = ['Alice', 'Bob', 'Charlie'] satisfies string[];
+        const result = englishStringifyList(data);
+        const expected = 'Alice, Bob, and Charlie';
+        expect(result).toBe(expected);
+    });
+
+    it('should handle n elements', () => {
+        const testcases = [
+            { data: [], expected: '' },
+            { data: ['foo'], expected: 'foo' },
+            { data: ['foo', 'bar'], expected: 'foo and bar' },
+            { data: ['foo', 'bar', 'baz'], expected: 'foo, bar, and baz' },
+            { data: ['a', 'b', 'c', 'd'], expected: 'a, b, c, and d' },
+            { data: 'abcdefghijk'.split(''), expected: 'a, b, c, d, e, f, g, h, i, j, and k' },
+        ] satisfies { data: string[]; expected: string }[];
+
+        for (const { data, expected } of testcases) {
+            const result = englishStringifyList(data);
+            expect(result).toBe(expected);
+        }
+    });
+});

src/shared/util/tests/time.test.ts

@@ -3,11 +3,13 @@ import { describe, expect, it } from 'vitest';
 
 describe('sleep', () => {
     it('should resolve after the specified number of milliseconds', async () => {
-        const start = Date.now();
+        const start = performance.now();
         const milliseconds = 1000;
         await sleep(milliseconds);
-        const end = Date.now();
+        const end = performance.now();
         const elapsed = end - start;
-        expect(elapsed).toBeGreaterThanOrEqual(milliseconds);
+        // Flaky test due to JS's lack of precision in setTimeout,
+        // so we allow for a 1ms difference
+        expect(elapsed).toBeGreaterThanOrEqual(milliseconds - 1);
     });
 });

src/stories/components/UpdateText.stories.tsx

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import type { UpdateTextProps } from '@views/components/common/UpdateText';
-import UpdateText from '@views/components/common/UpdateText';
-import React from 'react';
-
-const meta = {
-    title: 'Components/Common/UpdateText',
-    component: UpdateText,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        courses: { control: 'object' },
-    },
-} satisfies Meta<typeof UpdateText>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const Template = (args: React.JSX.IntrinsicAttributes & UpdateTextProps) => <UpdateText {...args} />;
-
-export const Default: Story = {
-    render: Template,
-    args: {
-        courses: ['12345', '23456', '34567', '45678', '56789'],
-    },
-};
-Default.args = {
-    courses: ['12345', '23456', '34567', '45678', '56789'],
-};

src/stories/components/WhatsNewPopup.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '@views/components/common/Button';
+import DialogProvider from '@views/components/common/DialogProvider/DialogProvider';
+import WhatsNewPopup from '@views/components/common/WhatsNewPopup';
+import useWhatsNewPopUp from '@views/hooks/useWhatsNew';
+import React from 'react';
+
+const meta = {
+    title: 'Components/Common/WhatsNewPopup',
+    component: WhatsNewPopup,
+    parameters: {
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+        layout: 'centered',
+    },
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+} satisfies Meta<typeof WhatsNewPopup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+    render: () => (
+        <DialogProvider>
+            <InnerComponent />
+        </DialogProvider>
+    ),
+};
+
+const InnerComponent = () => {
+    const handleOnClick = useWhatsNewPopUp();
+
+    return (
+        <Button color='ut-burntorange' onClick={handleOnClick}>
+            Open Dialog
+        </Button>
+    );
+};

src/stories/injected/mocked.ts

@@ -174,3 +174,137 @@ export const mikeScottCS314Schedule: UserSchedule = new UserSchedule({
     hours: 3,
     updatedAt: Date.now(),
 });
+
+export const multiMeetingMultiInstructorCourse: Course = new Course({
+    colors: {
+        primaryColor: '#ef4444',
+        secondaryColor: '#991b1b',
+    },
+    core: [],
+    courseName: '44-REPORTING TEXAS',
+    creditHours: 3,
+    department: 'J',
+    description: [
+        "Contemporary social, professional, and intellectual concerns with the practice of journalism. Students work as online reporters, photographers, and editors for the School of Journalism's Reporting Texas Web site.",
+        'Prerequisite: Graduate standing; additional prerequisites vary with the topic.',
+        'Designed to accommodate 35 or fewer students. Course number may be repeated for credit when the topics vary.',
+    ],
+    flags: [],
+    fullName: 'J 395 44-REPORTING TEXAS',
+    instructionMode: 'In Person',
+    instructors: [
+        {
+            firstName: 'JOHN',
+            fullName: 'SCHWARTZ, JOHN R',
+            lastName: 'SCHWARTZ',
+            middleInitial: 'R',
+        },
+        {
+            firstName: 'JOHN',
+            fullName: 'BRIDGES, JOHN A III',
+            lastName: 'BRIDGES',
+            middleInitial: 'A',
+        },
+    ],
+    isReserved: true,
+    number: '395',
+    schedule: {
+        meetings: [
+            {
+                days: ['Tuesday', 'Thursday'],
+                endTime: 660,
+                location: {
+                    building: 'CMA',
+                    room: '6.146',
+                },
+                startTime: 570,
+            },
+            {
+                days: ['Friday'],
+                endTime: 960,
+                location: {
+                    building: 'DMC',
+                    room: '3.208',
+                },
+                startTime: 780,
+            },
+        ],
+    },
+    scrapedAt: 1742491957535,
+    semester: {
+        code: '20259',
+        season: 'Fall',
+        year: 2025,
+    },
+    status: 'OPEN',
+    uniqueId: 10335,
+    url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20259/10335/',
+});
+
+export const multiMeetingMultiInstructorSchedule: UserSchedule = new UserSchedule({
+    courses: [multiMeetingMultiInstructorCourse],
+    id: 'mmmis',
+    name: 'Multi Meeting Multi Instructor Schedule',
+    hours: 3,
+    updatedAt: Date.now(),
+});
+
+export const chatterjeeCS429Course: Course = new Course({
+    colors: {
+        primaryColor: '#0284c7',
+        secondaryColor: '#0c4a6e',
+    },
+    core: [],
+    courseName: 'COMP ORGANIZATN AND ARCH',
+    creditHours: 4,
+    department: 'C S',
+    description: [
+        'Restricted to computer science majors.',
+        'An introduction to low-level computer design ranging from the basics of digital design to the hardware/software interface for application programs. Includes basic systems principles of pipelining and caching, and requires writing and understanding programs at multiple levels.',
+        'Computer Science 429 and 429H may not both be counted.',
+        'Prerequisite: The following courses with a grade of at least C-: Computer Science 311 or 311H; and Computer Science 314 or 314H.',
+    ],
+    flags: [],
+    fullName: 'C S 429 COMP ORGANIZATN AND ARCH',
+    instructionMode: 'In Person',
+    instructors: [
+        {
+            firstName: 'SIDDHARTHA',
+            fullName: 'CHATTERJEE, SIDDHARTHA',
+            lastName: 'CHATTERJEE',
+        },
+    ],
+    isReserved: true,
+    number: '429',
+    schedule: {
+        meetings: [
+            {
+                days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday'],
+                endTime: 1020,
+                location: {
+                    building: 'UTC',
+                    room: '3.102',
+                },
+                startTime: 960,
+            },
+            {
+                days: ['Friday'],
+                endTime: 660,
+                location: {
+                    building: 'GSB',
+                    room: '2.122',
+                },
+                startTime: 540,
+            },
+        ],
+    },
+    scrapedAt: 1742496630445,
+    semester: {
+        code: '20259',
+        season: 'Fall',
+        year: 2025,
+    },
+    status: 'OPEN',
+    uniqueId: 54795,
+    url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20259/54795/',
+});

src/views/components/CourseCatalogMain.tsx

@@ -13,7 +13,7 @@ import { CourseCatalogScraper } from '@views/lib/CourseCatalogScraper';
 import getCourseTableRows from '@views/lib/getCourseTableRows';
 import type { SiteSupportType } from '@views/lib/getSiteSupport';
 import { populateSearchInputs } from '@views/lib/populateSearchInputs';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 interface Props {
     support: Extract<SiteSupportType, 'COURSE_CATALOG_DETAILS' | 'COURSE_CATALOG_LIST'>;
@@ -27,6 +27,8 @@ export default function CourseCatalogMain({ support }: Props): JSX.Element | nul
     const [selectedCourse, setSelectedCourse] = useState<Course | null>(null);
     const [showPopup, setShowPopup] = useState(false);
     const [enableScrollToLoad, setEnableScrollToLoad] = useState<boolean>(false);
+    const prevCourseTitleRef = useRef<string | null>(null);
+    const tbody = document.querySelector('table tbody')!;
 
     useEffect(() => {
         populateSearchInputs();
@@ -43,6 +45,9 @@ export default function CourseCatalogMain({ support }: Props): JSX.Element | nul
         const ccs = new CourseCatalogScraper(support);
         const scrapedRows = ccs.scrape(tableRows, true);
         setRows(scrapedRows);
+        prevCourseTitleRef.current =
+            scrapedRows.findLast(row => row.course === null)?.element.querySelector('.course_header')?.textContent ??
+            null;
     }, [support]);
 
     useEffect(() => {
@@ -51,8 +56,17 @@ export default function CourseCatalogMain({ support }: Props): JSX.Element | nul
 
     const addRows = (newRows: ScrapedRow[]) => {
         newRows.forEach(row => {
-            document.querySelector('table tbody')!.appendChild(row.element);
+            const courseTitle = row.element.querySelector('.course_header')?.textContent ?? null;
+            if (row.course === null) {
+                if (courseTitle !== prevCourseTitleRef.current) {
+                    tbody.appendChild(row.element);
+                    prevCourseTitleRef.current = courseTitle;
+                }
+            } else {
+                tbody.appendChild(row.element);
+            }
         });
+
         setRows([...rows, ...newRows]);
     };
 

src/views/components/PopupMain.tsx

@@ -66,11 +66,19 @@ export default function PopupMain(): JSX.Element {
     };
 
     useEffect(() => {
-        const randomIndex = Math.floor(Math.random() * splashText.length);
+        setFunny(prevFunny => {
-        setFunny(
+            // Ensure that the next splash text is not the same as the previous one
-            splashText[randomIndex] ?? 'If you are seeing this, something has gone horribly wrong behind the scenes.'
+            const splashTextWithoutCurrent = splashText.filter(text => text !== prevFunny);
-        );
+            const randomIndex = Math.floor(Math.random() * splashTextWithoutCurrent.length);
-    }, []);
+
+            return (
+                splashTextWithoutCurrent[randomIndex] ??
+                'If you are seeing this, something has gone horribly wrong behind the scenes.'
+            );
+        });
+
+        // Generate a new splash text every time the active schedule changes
+    }, [activeSchedule.id]);
 
     const handleOpenOptions = async () => {
         const url = chrome.runtime.getURL('/options.html');

src/views/components/calendar/Calendar.tsx

@@ -1,8 +1,10 @@
 import { Sidebar } from '@phosphor-icons/react';
 import type { CalendarTabMessages } from '@shared/messages/CalendarMessages';
+import { OptionsStore } from '@shared/storage/OptionsStore';
 import type { Course } from '@shared/types/Course';
 import { CRX_PAGES } from '@shared/types/CRXPages';
 import { openReportWindow } from '@shared/util/openReportWindow';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import CalendarBottomBar from '@views/components/calendar/CalendarBottomBar';
 import CalendarGrid from '@views/components/calendar/CalendarGrid';
 import CalendarHeader from '@views/components/calendar/CalendarHeader/CalendarHeader';
@@ -13,8 +15,10 @@ import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalog
 import { CalendarContext } from '@views/contexts/CalendarContext';
 import useCourseFromUrl from '@views/hooks/useCourseFromUrl';
 import { useFlattenedCourseSchedule } from '@views/hooks/useFlattenedCourseSchedule';
+import useWhatsNewPopUp from '@views/hooks/useWhatsNew';
 import { MessageListener } from 'chrome-extension-toolkit';
 import clsx from 'clsx';
+import type { ReactNode } from 'react';
 import React, { useEffect, useState } from 'react';
 
 import OutwardArrowIcon from '~icons/material-symbols/arrow-outward';
@@ -27,13 +31,32 @@ import CalendarFooter from './CalendarFooter';
 /**
  * Calendar page component
  */
-export default function Calendar(): JSX.Element {
+export default function Calendar(): ReactNode {
     const { courseCells, activeSchedule } = useFlattenedCourseSchedule();
+    const asyncCourseCells = courseCells.filter(block => block.async);
+    const displayBottomBar = asyncCourseCells && asyncCourseCells.length > 0;
 
     const [course, setCourse] = useState<Course | null>(useCourseFromUrl());
 
     const [showPopup, setShowPopup] = useState<boolean>(course !== null);
-    const [showSidebar, setShowSidebar] = useState<boolean>(true);
+    const showWhatsNewDialog = useWhatsNewPopUp();
+
+    const queryClient = useQueryClient();
+    const { data: showSidebar, isPending: isSidebarStatePending } = useQuery({
+        queryKey: ['settings', 'showCalendarSidebar'],
+        queryFn: () => OptionsStore.get('showCalendarSidebar'),
+        staleTime: Infinity, // Prevent loading state on refocus
+    });
+
+    const { mutate: setShowSidebar } = useMutation({
+        mutationKey: ['settings', 'showCalendarSidebar'],
+        mutationFn: async (showSidebar: boolean) => {
+            OptionsStore.set('showCalendarSidebar', showSidebar);
+        },
+        onSuccess: (_, showSidebar) => {
+            queryClient.setQueryData(['settings', 'showCalendarSidebar'], showSidebar);
+        },
+    });
 
     useEffect(() => {
         const listener = new MessageListener<CalendarTabMessages>({
@@ -59,10 +82,12 @@ export default function Calendar(): JSX.Element {
         if (course) setShowPopup(true);
     }, [course]);
 
+    if (isSidebarStatePending) return null;
+
     return (
         <CalendarContext.Provider value>
             <div className='h-full w-full flex flex-col'>
-                <div className='h-screen flex overflow-auto'>
+                <div className='h-screen flex overflow-auto screenshot:calendar-target'>
                     <div
                         className={clsx(
                             'py-spacing-6 relative h-full min-h-screen w-full flex flex-none flex-col justify-between overflow-clip whitespace-nowrap border-r border-ut-offwhite/50 shadow-[2px_0_10px,rgba(214_210_196_/_.1)] motion-safe:duration-300 motion-safe:ease-out-expo motion-safe:transition-[max-width] screenshot:hidden',
@@ -99,19 +124,34 @@ export default function Calendar(): JSX.Element {
                             <ResourceLinks />
                             <Divider orientation='horizontal' size='100%' />
                             {/* <TeamLinks /> */}
-                            <a
+                            <div className='flex flex-col gap-spacing-3'>
-                                href={CRX_PAGES.REPORT}
+                                <a
-                                className='flex items-center gap-spacing-2 text-ut-burntorange underline-offset-2 hover:underline'
+                                    href={CRX_PAGES.REPORT}
-                                target='_blank'
+                                    className='flex items-center gap-spacing-2 text-ut-burntorange underline-offset-2 hover:underline'
-                                rel='noreferrer'
+                                    target='_blank'
-                                onClick={event => {
+                                    rel='noreferrer'
-                                    event.preventDefault();
+                                    onClick={event => {
-                                    openReportWindow();
+                                        event.preventDefault();
-                                }}
+                                        openReportWindow();
-                            >
+                                    }}
-                                <Text variant='p'>Send us Feedback!</Text>
+                                >
-                                <OutwardArrowIcon className='h-4 w-4' />
+                                    <Text variant='p'>Send us Feedback!</Text>
-                            </a>
+                                    <OutwardArrowIcon className='h-4 w-4' />
+                                </a>
+                                <a
+                                    href=''
+                                    className='flex items-center gap-spacing-2 text-ut-burntorange underline-offset-2 hover:underline'
+                                    target='_blank'
+                                    rel='noreferrer'
+                                    onClick={event => {
+                                        event.preventDefault();
+                                        showWhatsNewDialog();
+                                    }}
+                                >
+                                    <Text variant='p'>What&apos;s New!</Text>
+                                    <OutwardArrowIcon className='h-4 w-4' />
+                                </a>
+                            </div>
                         </div>
 
                         <CalendarFooter />
@@ -123,7 +163,7 @@ export default function Calendar(): JSX.Element {
                                 // scrollbarGutter: 'stable',
                             }
                         }
-                        className='h-full flex flex-grow flex-col overflow-x-scroll px-spacing-5'
+                        className='z-1 h-full flex flex-grow flex-col overflow-x-scroll [&>*]:px-spacing-5'
                     >
                         <CalendarHeader
                             sidebarOpen={showSidebar}
@@ -131,7 +171,11 @@ export default function Calendar(): JSX.Element {
                                 setShowSidebar(!showSidebar);
                             }}
                         />
-                        <div className='min-h-2xl min-w-5xl flex-grow overflow-auto pl-spacing-3 pt-spacing-3 screenshot:min-h-xl'>
+                        <div
+                            className={clsx('min-h-2xl min-w-5xl flex-grow gap-0 pl-spacing-3 screenshot:min-h-xl', {
+                                'screenshot:flex-grow-0': displayBottomBar, // html-to-image seems to have a bug with flex-grow
+                            })}
+                        >
                             <CalendarGrid courseCells={courseCells} setCourse={setCourse} />
                         </div>
                         <CalendarBottomBar courseCells={courseCells} setCourse={setCourse} />

src/views/components/calendar/CalendarBottomBar.tsx

@@ -3,6 +3,7 @@ import Text from '@views/components/common/Text/Text';
 import { ColorPickerProvider } from '@views/contexts/ColorPickerContext';
 import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
 import clsx from 'clsx';
+import type { ReactNode } from 'react';
 import React from 'react';
 
 import CalendarCourseBlock from './CalendarCourseCell';
@@ -18,44 +19,38 @@ type CalendarBottomBarProps = {
  * @param courses - The list of courses to display in the calendar.
  * @returns The rendered bottom bar component.
  */
-export default function CalendarBottomBar({ courseCells, setCourse }: CalendarBottomBarProps): JSX.Element {
+export default function CalendarBottomBar({ courseCells, setCourse }: CalendarBottomBarProps): ReactNode {
     const asyncCourseCells = courseCells?.filter(block => block.async);
     const displayCourses = asyncCourseCells && asyncCourseCells.length > 0;
 
+    if (!displayCourses) return null;
+
     return (
         <div className='w-full flex pl-spacing-7 pr-spacing-3 pt-spacing-4'>
-            <div
+            <div className='flex flex-grow items-center gap-1 text-nowrap'>
-                className={clsx('flex flex-grow items-center gap-1 text-nowrap', {
+                <Text variant='p' className='text-ut-black uppercase'>
-                    'py-7.5': !displayCourses,
+                    Async / Other
-                })}
+                </Text>
-            >
+                <Text variant='h4' className='text-theme-offwhite/50'>
-                {displayCourses && (
+                    —
-                    <>
+                </Text>
-                        <Text variant='p' className='text-ut-black uppercase'>
+                <div className='inline-flex gap-2.5'>
-                            Unscheduled
+                    <ColorPickerProvider>
-                        </Text>
+                        {asyncCourseCells.map(block => {
-                        <Text variant='h4' className='text-theme-offwhite/50'>
+                            const { courseDeptAndInstr, status, className } = block.componentProps;
-                            —
+                            return (
-                        </Text>
+                                <CalendarCourseBlock
-                        <div className='inline-flex gap-2.5'>
+                                    key={block.course.uniqueId}
-                            <ColorPickerProvider>
+                                    courseDeptAndInstr={courseDeptAndInstr}
-                                {asyncCourseCells.map(block => {
+                                    status={status}
-                                    const { courseDeptAndInstr, status, className } = block.componentProps;
+                                    className={clsx(className, 'w-35! h-12.5! items-center')}
-                                    return (
+                                    onClick={() => setCourse(block.course)}
-                                        <CalendarCourseBlock
+                                    blockData={block}
-                                            key={block.course.uniqueId}
+                                />
-                                            courseDeptAndInstr={courseDeptAndInstr}
+                            );
-                                            status={status}
+                        })}
-                                            className={clsx(className, 'w-35! h-12.5! items-center')}
+                    </ColorPickerProvider>
-                                            onClick={() => setCourse(block.course)}
+                </div>
-                                            blockData={block}
-                                        />
-                                    );
-                                })}
-                            </ColorPickerProvider>
-                        </div>
-                    </>
-                )}
             </div>
         </div>
     );

src/views/components/calendar/CalendarGrid.tsx

@@ -3,7 +3,7 @@ import CalendarCourseCell from '@views/components/calendar/CalendarCourseCell';
 import Text from '@views/components/common/Text/Text';
 import { ColorPickerProvider } from '@views/contexts/ColorPickerContext';
 import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import CalendarCell from './CalendarGridCell';
 
@@ -30,13 +30,13 @@ function makeGridRow(row: number, cols: number): JSX.Element {
     const hour = hoursOfDay[row]!;
 
     return (
-        <>
+        <Fragment key={row}>
             <CalendarHour hour={hour} />
             <div className='grid-row-span-2 w-4 border-b border-r border-gray-300' />
             {[...Array(cols).keys()].map(col => (
                 <CalendarCell key={`${row}${col}`} row={row} col={col} />
             ))}
-        </>
+        </Fragment>
     );
 }
 
@@ -56,23 +56,40 @@ export default function CalendarGrid({
     setCourse,
 }: React.PropsWithChildren<Props>): JSX.Element {
     return (
-        <div className='grid grid-cols-[auto_auto_repeat(5,1fr)] grid-rows-[auto_repeat(26,1fr)] h-full'>
+        <div className='grid grid-cols-[auto_auto_repeat(5,1fr)] grid-rows-[auto_auto_repeat(27,1fr)] h-full'>
+            {/* Cover top left corner of grid, so time gets cut off at the top of the partial border */}
+            <div className='sticky top-[85px] z-10 col-span-2 h-3 bg-white' />
             {/* Displaying day labels */}
-            <div />
-            <div className='w-4 border-b border-r border-gray-300' />
             {daysOfWeek.map(day => (
-                <div className='h-4 flex items-end justify-center border-b border-r border-gray-300 pb-1.5'>
+                <div
-                    <Text key={day} variant='small' className='text-center text-ut-burntorange' as='div'>
+                    // Full height with background to prevent grid lines from showing behind
-                        {day}
+                    className='sticky top-[85px] z-10 row-span-2 h-7 flex flex-col items-end self-start justify-end bg-white'
-                    </Text>
+                    key={day}
+                >
+                    {/* Partial border height because that's what Isaiah wants */}
+                    <div className='h-4 w-full flex items-end border-b border-r border-gray-300'>
+                        {/* Alignment for text */}
+                        <div className='h-[calc(1.75rem_-_1px)] w-full flex items-center justify-center'>
+                            <Text variant='small' className='text-center text-ut-burntorange' as='div'>
+                                {day}
+                            </Text>
+                        </div>
+                    </div>
                 </div>
             ))}
+            {/* empty slot, for alignment */}
+            <div />
+            {/* time tick for the first hour */}
+            <div className='h-4 w-4 self-end border-b border-r border-gray-300' />
             {[...Array(13).keys()].map(i => makeGridRow(i, 5))}
             <CalendarHour hour={21} />
             {Array(6)
                 .fill(1)
-                .map(() => (
+                .map((_, i) => (
-                    <div className='h-4 flex items-end justify-center border-r border-gray-300' />
+                    // Key suppresses warning about duplicate keys,
+                    // and index is fine because it doesn't change between renders
+                    // eslint-disable-next-line react/no-array-index-key
+                    <div key={i} className='h-4 flex items-end justify-center border-r border-gray-300' />
                 ))}
             <ColorPickerProvider>
                 {courseCells && <AccountForCourseConflicts courseCells={courseCells} setCourse={setCourse} />}

src/views/components/calendar/CalendarGridCell.tsx

@@ -17,8 +17,8 @@ function CalendarCell({ row, col }: Props): JSX.Element {
         <div
             className='h-full w-full flex items-center border-b border-r border-gray-300'
             style={{
-                gridColumn: col + 3,
+                gridColumn: col + 3, // start in the 3rd 1-index column
-                gridRow: `${2 * row + 2} / ${2 * row + 4}`,
+                gridRow: `${2 * row + 3} / ${2 * row + 5}`, // Span 2 rows, skip 2 header rows
             }}
         >
             <div className='h-0 w-full border-t border-gray-300/25' />

src/views/components/calendar/CalendarHeader/CalendarHeader.tsx

@@ -5,6 +5,7 @@ import { Button } from '@views/components/common/Button';
 import DialogProvider from '@views/components/common/DialogProvider/DialogProvider';
 import Divider from '@views/components/common/Divider';
 import { ExtensionRootWrapper, styleResetClass } from '@views/components/common/ExtensionRoot/ExtensionRoot';
+import { LargeLogo } from '@views/components/common/LogoIcon';
 import ScheduleTotalHoursAndCourses from '@views/components/common/ScheduleTotalHoursAndCourses';
 import useSchedules from '@views/hooks/useSchedules';
 import clsx from 'clsx';
@@ -27,7 +28,7 @@ export default function CalendarHeader({ sidebarOpen, onSidebarToggle }: Calenda
     return (
         <div
             style={{ scrollbarGutter: 'stable' }}
-            className='sticky left-0 right-0 min-h-[85px] flex items-center gap-5 overflow-x-scroll overflow-y-hidden pl-spacing-7 pt-spacing-5'
+            className='sticky left-0 right-0 top-0 z-10 min-h-[85px] flex items-center gap-5 overflow-x-scroll overflow-y-hidden bg-white pl-spacing-7 pt-spacing-5'
         >
             {!sidebarOpen && (
                 <Button
@@ -39,6 +40,9 @@ export default function CalendarHeader({ sidebarOpen, onSidebarToggle }: Calenda
                 />
             )}
 
+            <LargeLogo className='hidden! screenshot:flex!' />
+            <Divider className='self-center hidden! screenshot:block!' size='2.5rem' orientation='vertical' />
+
             <div className='min-w-[11.5rem] screenshot:transform-origin-left screenshot:scale-120'>
                 <ScheduleTotalHoursAndCourses
                     scheduleName={activeSchedule.name}
@@ -62,7 +66,7 @@ export default function CalendarHeader({ sidebarOpen, onSidebarToggle }: Calenda
                                 className={clsx([
                                     styleResetClass,
                                     'mt-spacing-3',
-                                    'min-w-max cursor-pointer origin-top-right rounded bg-white p-1 text-black shadow-lg transition border border-ut-offwhite/50 focus:outline-none',
+                                    'min-w-max cursor-pointer origin-top-right rounded bg-white p-1 text-black shadow-lg transition border border-ut-offwhite/50 focus:outline-none z-20',
                                     'data-[closed]:(opacity-0 scale-95)',
                                     'data-[enter]:(ease-out-expo duration-150)',
                                     'data-[leave]:(ease-out duration-50)',

src/views/components/calendar/ResourceLinks.tsx

@@ -14,6 +14,14 @@ interface LinkItem {
 }
 
 const links: LinkItem[] = [
+    {
+        text: "Fall '25 Course Schedule",
+        url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20259/',
+    },
+    {
+        text: "Summer '25 Course Schedule",
+        url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20256/',
+    },
     {
         text: "Spring '25 Course Schedule",
         url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20252/',
@@ -27,10 +35,6 @@ const links: LinkItem[] = [
         url: 'https://utdirect.utexas.edu/apps/degree/audits/',
     },
     // {
-    //     text: "Summer '24 Course Schedule",
-    //     url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20246/',
-    // },
-    // {
     //     text: "'24-'25 Academic Calendar",
     //     url: 'https://registrar.utexas.edu/calendars/24-25',
     // },

src/views/components/calendar/academic-calendars.ts

@@ -0,0 +1,200 @@
+type Digit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+type Year = `20${Digit}${Digit}`;
+type Month = `0${Exclude<Digit, 0>}` | `1${'0' | '1' | '2'}`;
+type Day = `0${Exclude<Digit, 0>}` | `${1 | 2}${Digit}` | '30' | '31';
+type DateStr = `${Year}-${Month}-${Day}`;
+type SemesterDigit = 2 | 6 | 9;
+type SemesterIdentifier = `20${Digit}${Digit}${SemesterDigit}`;
+
+type AcademicCalendarSemester = {
+    year: number;
+    semester: 'Fall' | 'Spring' | 'Summer';
+    firstClassDate: DateStr;
+    lastClassDate: DateStr;
+    breakDates: (DateStr | [DateStr, DateStr])[];
+};
+
+/**
+ * UT Austin's academic calendars, split by semester.
+ *
+ * See https://registrar.utexas.edu/calendars for future years.
+ */
+export const academicCalendars = {
+    '20229': {
+        year: 2022,
+        semester: 'Fall',
+        firstClassDate: '2022-08-22',
+        lastClassDate: '2022-12-05',
+        breakDates: [
+            '2022-09-05', // Labor Day holiday
+            ['2022-11-21', '2022-11-26'], // Fall break / Thanksgiving
+        ],
+    },
+    '20232': {
+        year: 2023,
+        semester: 'Spring',
+        firstClassDate: '2023-01-09',
+        lastClassDate: '2023-04-24',
+        breakDates: [
+            '2023-01-16', // Martin Luther King, Jr. Day
+            ['2023-03-13', '2023-03-18'], // Spring Break
+        ],
+    },
+    '20236': {
+        year: 2023,
+        semester: 'Summer',
+        firstClassDate: '2023-06-01',
+        lastClassDate: '2023-08-11',
+        breakDates: [
+            '2023-06-19', // Juneteenth holiday
+            '2023-07-04', // Independence Day holiday
+        ],
+    },
+    '20239': {
+        year: 2023,
+        semester: 'Fall',
+        firstClassDate: '2023-08-21',
+        lastClassDate: '2023-12-04',
+        breakDates: [
+            '2023-09-04', // Labor Day holiday
+            ['2023-11-20', '2023-11-25'], // Fall break / Thanksgiving
+        ],
+    },
+    '20242': {
+        year: 2024,
+        semester: 'Spring',
+        firstClassDate: '2024-01-16',
+        lastClassDate: '2024-04-29',
+        breakDates: [
+            '2024-01-15', // Martin Luther King, Jr. Day
+            ['2024-03-11', '2024-03-16'], // Spring Break
+        ],
+    },
+    '20246': {
+        year: 2024,
+        semester: 'Summer',
+        firstClassDate: '2024-06-06',
+        lastClassDate: '2024-08-16',
+        breakDates: [
+            '2024-06-19', // Juneteenth holiday
+            '2024-07-04', // Independence Day holiday
+        ],
+    },
+    '20249': {
+        year: 2024,
+        semester: 'Fall',
+        firstClassDate: '2024-08-26',
+        lastClassDate: '2024-12-09',
+        breakDates: [
+            '2024-09-02', // Labor Day holiday
+            ['2024-11-25', '2024-11-30'], // Fall break / Thanksgiving
+        ],
+    },
+    '20252': {
+        year: 2025,
+        semester: 'Spring',
+        firstClassDate: '2025-01-13',
+        lastClassDate: '2025-04-28',
+        breakDates: [
+            '2025-01-20', // Martin Luther King, Jr. Day
+            ['2025-03-17', '2025-03-22'], // Spring Break
+        ],
+    },
+    '20256': {
+        year: 2025,
+        semester: 'Summer',
+        firstClassDate: '2025-06-05',
+        lastClassDate: '2025-08-15',
+        breakDates: [
+            '2025-06-19', // Juneteenth holiday
+            '2025-07-04', // Independence Day holiday
+        ],
+    },
+    '20259': {
+        year: 2025,
+        semester: 'Fall',
+        firstClassDate: '2025-08-25',
+        lastClassDate: '2025-12-08',
+        breakDates: [
+            '2025-09-01', // Labor Day holiday
+            ['2025-11-24', '2025-11-29'], // Fall break / Thanksgiving
+        ],
+    },
+    '20262': {
+        year: 2026,
+        semester: 'Spring',
+        firstClassDate: '2026-01-12',
+        lastClassDate: '2026-04-27',
+        breakDates: [
+            '2026-01-19', // Martin Luther King, Jr. Day
+            ['2026-03-16', '2026-03-21'], // Spring Break
+        ],
+    },
+    '20266': {
+        year: 2026,
+        semester: 'Summer',
+        firstClassDate: '2026-06-04',
+        lastClassDate: '2026-08-14',
+        breakDates: [
+            '2026-06-19', // Juneteenth holiday
+            '2026-07-04', // Independence Day holiday
+        ],
+    },
+    '20269': {
+        year: 2026,
+        semester: 'Fall',
+        firstClassDate: '2026-08-24',
+        lastClassDate: '2026-12-07',
+        breakDates: [
+            '2026-09-07', // Labor Day holiday
+            ['2026-11-23', '2026-11-28'], // Fall break / Thanksgiving
+        ],
+    },
+    '20272': {
+        year: 2027,
+        semester: 'Spring',
+        firstClassDate: '2027-01-11',
+        lastClassDate: '2027-04-26',
+        breakDates: [
+            '2027-01-18', // Martin Luther King, Jr. Day
+            ['2027-03-15', '2027-03-20'], // Spring Break
+        ],
+    },
+    '20276': {
+        year: 2027,
+        semester: 'Summer',
+        firstClassDate: '2027-06-03',
+        lastClassDate: '2027-08-13',
+        breakDates: [
+            '2027-07-04', // Independence Day holiday
+        ],
+    },
+    '20279': {
+        year: 2027,
+        semester: 'Fall',
+        firstClassDate: '2027-08-23',
+        lastClassDate: '2027-12-06',
+        breakDates: [
+            '2027-09-06', // Labor Day holiday
+            ['2027-11-22', '2027-11-27'], // Fall break / Thanksgiving
+        ],
+    },
+    '20282': {
+        year: 2028,
+        semester: 'Spring',
+        firstClassDate: '2028-01-18',
+        lastClassDate: '2028-05-01',
+        breakDates: [
+            ['2028-03-13', '2028-03-18'], // Spring Break
+        ],
+    },
+    '20286': {
+        year: 2028,
+        semester: 'Summer',
+        firstClassDate: '2028-06-08',
+        lastClassDate: '2028-08-18',
+        breakDates: [
+            '2028-07-04', // Independence Day holiday
+        ],
+    },
+} as const satisfies Partial<Record<SemesterIdentifier, AcademicCalendarSemester>>;

src/views/components/calendar/utils.test.ts

@@ -1,6 +1,31 @@
-import { describe, expect, it } from 'vitest';
+import { tz } from '@date-fns/tz';
+import { Course } from '@shared/types/Course';
+import { UserSchedule } from '@shared/types/UserSchedule';
+import type { Serialized } from 'chrome-extension-toolkit';
+import { format as formatDate, parseISO } from 'date-fns';
+import {
+    chatterjeeCS429Course,
+    multiMeetingMultiInstructorCourse,
+    multiMeetingMultiInstructorSchedule,
+} from 'src/stories/injected/mocked';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
-import { formatToHHMMSS } from './utils';
+import { allDatesInRanges, formatToHHMMSS, meetingToIcsString, nextDayInclusive, scheduleToIcsString } from './utils';
+
+// Do all timezone calculations relative to UT's timezone
+const TIMEZONE = 'America/Chicago';
+const TZ = tz(TIMEZONE);
+
+// Date and datetime formats used by iCal
+const ISO_DATE_FORMAT = 'yyyy-MM-dd';
+const ISO_BASIC_DATETIME_FORMAT = "yyyyMMdd'T'HHmmss";
+
+/**
+ * Simulate serialized class instance, without the class's methods
+ *
+ * serde <-- Serialize, Deserialize
+ */
+const serde = <T>(data: T) => JSON.parse(JSON.stringify(data)) as Serialized<T>;
 
 describe('formatToHHMMSS', () => {
     it('should format minutes to HHMMSS format', () => {
@@ -24,3 +49,431 @@ describe('formatToHHMMSS', () => {
         expect(result).toBe(expected);
     });
 });
+
+describe('nextDayInclusive', () => {
+    it('should return the same date if the given day is the same as the target day', () => {
+        const date = parseISO('2024-01-01', { in: TZ }); // Monday
+        const day = 1; // Monday
+        const result = nextDayInclusive(date, day);
+        expect(formatDate(result, ISO_DATE_FORMAT)).toBe('2024-01-01');
+    });
+
+    it('should return the next day if the given day is not the same as the target day', () => {
+        const date = parseISO('2024-07-18', { in: TZ }); // Thursday
+        const day = 2; // Tuesday
+        const result = nextDayInclusive(date, day);
+        expect(formatDate(result, ISO_DATE_FORMAT)).toBe('2024-07-23');
+    });
+
+    it('should wrap around years', () => {
+        const date = parseISO('2025-12-28', { in: TZ }); // Sunday
+        const day = 5; // Friday
+        const result = nextDayInclusive(date, day);
+        expect(formatDate(result, ISO_DATE_FORMAT)).toBe('2026-01-02');
+    });
+
+    it('should handle leap day', () => {
+        const date = parseISO('2024-02-27', { in: TZ }); // Tuesday
+        const day = 4; // Thursday
+        const result = nextDayInclusive(date, day);
+        expect(formatDate(result, ISO_DATE_FORMAT)).toBe('2024-02-29');
+    });
+
+    it('should handle an entire week of inputs', () => {
+        const date = parseISO('2024-08-20', { in: TZ }); // Tuesday
+        const days = [0, 1, 2, 3, 4, 5, 6] as const;
+        const results = days.map(day => nextDayInclusive(date, day));
+        const resultsFormatted = results.map(result => formatDate(result, ISO_DATE_FORMAT));
+        const expectedResults = [
+            '2024-08-25',
+            '2024-08-26',
+            '2024-08-20', // Same date
+            '2024-08-21',
+            '2024-08-22',
+            '2024-08-23',
+            '2024-08-24',
+        ];
+
+        for (let i = 0; i < days.length; i++) {
+            expect(resultsFormatted[i]).toBe(expectedResults[i]);
+        }
+    });
+
+    it('should maintain hours/minutes/seconds', () => {
+        const date = parseISO('20250115T143021', { in: TZ }); // Wednesday
+        const days = [0, 1, 2, 3, 4, 5, 6] as const;
+        const results = days.map(day => nextDayInclusive(date, day));
+        const resultsFormatted = results.map(result => formatDate(result, ISO_BASIC_DATETIME_FORMAT));
+        const expectedResults = [
+            '20250119T143021',
+            '20250120T143021',
+            '20250121T143021',
+            '20250115T143021',
+            '20250116T143021',
+            '20250117T143021',
+            '20250118T143021',
+        ];
+
+        for (let i = 0; i < days.length; i++) {
+            expect(resultsFormatted[i]).toBe(expectedResults[i]);
+        }
+    });
+});
+
+describe('allDatesInRanges', () => {
+    it('should handle empty array', () => {
+        const dateRanges = [] satisfies string[];
+        const result = allDatesInRanges(dateRanges);
+        const expected = [] satisfies Date[];
+        expect(result).toEqual(expected);
+    });
+
+    it('should handle a single date', () => {
+        const dateRanges = ['2025-03-14'] satisfies (string | [string, string])[];
+        const result = allDatesInRanges(dateRanges);
+        const expected = ['2025-03-14'].map(dateStr => parseISO(dateStr, { in: TZ })) satisfies Date[];
+        expect(result).toEqual(expected);
+    });
+
+    it('should handle a single date', () => {
+        const dateRanges = ['2025-03-14'] satisfies string[];
+        const result = allDatesInRanges(dateRanges);
+        const expected = ['2025-03-14'].map(dateStr => parseISO(dateStr, { in: TZ })) satisfies Date[];
+        expect(result).toEqual(expected);
+    });
+
+    it('should handle a single date range', () => {
+        const dateRanges = [['2025-03-14', '2025-03-19']] satisfies (string | [string, string])[];
+        const result = allDatesInRanges(dateRanges);
+        const expected = ['2025-03-14', '2025-03-15', '2025-03-16', '2025-03-17', '2025-03-18', '2025-03-19'].map(
+            dateStr => parseISO(dateStr, { in: TZ })
+        ) satisfies Date[];
+        expect(result).toEqual(expected);
+    });
+
+    it('should handle multiple dates/date ranges', () => {
+        const dateRanges = [
+            '2025-02-14',
+            ['2025-03-14', '2025-03-19'],
+            '2026-12-01',
+            ['2026-12-03', '2026-12-05'],
+        ] satisfies (string | [string, string])[];
+        const result = allDatesInRanges(dateRanges);
+        const expected = [
+            '2025-02-14', // '2025-02-14'
+            '2025-03-14', // ['2025-03-14', '2025-03-19']
+            '2025-03-15',
+            '2025-03-16',
+            '2025-03-17',
+            '2025-03-18',
+            '2025-03-19',
+            '2026-12-01', // '2026-12-01'
+            '2026-12-03', // ['2026-12-03', '2026-12-05'
+            '2026-12-04',
+            '2026-12-05',
+        ].map(dateStr => parseISO(dateStr, { in: TZ })) satisfies Date[];
+        expect(result).toEqual(expected);
+    });
+
+    it('should handle month-/year-spanning ranges', () => {
+        const dateRanges = [
+            ['2023-02-27', '2023-03-02'],
+            ['2023-12-27', '2024-01-03'],
+        ] satisfies (string | [string, string])[];
+        const result = allDatesInRanges(dateRanges);
+        const expected = [
+            '2023-02-27', // ['2023-02-27', '2023-03-2']
+            '2023-02-28',
+            '2023-03-01',
+            '2023-03-02',
+            '2023-12-27', // ['2023-12-27', '2024-01-3']
+            '2023-12-28',
+            '2023-12-29',
+            '2023-12-30',
+            '2023-12-31',
+            '2024-01-01',
+            '2024-01-02',
+            '2024-01-03',
+        ].map(dateStr => parseISO(dateStr, { in: TZ })) satisfies Date[];
+        expect(result).toEqual(expected);
+    });
+
+    it('should handle leap years', () => {
+        const dateRanges = [
+            ['2023-02-27', '2023-03-02'],
+            ['2024-02-27', '2024-03-02'],
+            ['2025-02-27', '2025-03-02'],
+        ] satisfies (string | [string, string])[];
+        const result = allDatesInRanges(dateRanges);
+        const expected = [
+            '2023-02-27', // ['2023-02-27', '2023-03-2']
+            '2023-02-28',
+            '2023-03-01',
+            '2023-03-02',
+            '2024-02-27', // ['2024-02-27', '2024-03-2']
+            '2024-02-28',
+            '2024-02-29',
+            '2024-03-01',
+            '2024-03-02',
+            '2025-02-27', // ['2025-02-27', '2025-03-2']
+            '2025-02-28',
+            '2025-03-01',
+            '2025-03-02',
+        ].map(dateStr => parseISO(dateStr, { in: TZ })) satisfies Date[];
+        expect(result).toEqual(expected);
+    });
+});
+
+describe('meetingToIcsString', () => {
+    it('should handle a one-day meeting with one instructor', () => {
+        const course = serde(multiMeetingMultiInstructorCourse);
+        course.instructors = course.instructors.slice(0, 1);
+        const meeting = course.schedule.meetings[1]!;
+        const result = meetingToIcsString(course, meeting);
+        const expected = (
+            `BEGIN:VEVENT
+            DTSTART;TZID=America/Chicago:20250829T130000
+            DTEND;TZID=America/Chicago:20250829T160000
+            RRULE:FREQ=WEEKLY;BYDAY=FR;UNTIL=20251209T060000Z
+            EXDATE;TZID=America/Chicago:20251128T130000
+            ` +
+            // Only skips one Thanksgiving break day
+            `SUMMARY:J 395 – 44-REPORTING TEXAS
+            LOCATION:DMC 3.208
+            DESCRIPTION:Unique number: 10335\\nTaught by John Schwartz
+            END:VEVENT`
+        ).replaceAll(/^\s+/gm, '');
+        expect(result).toBe(expected);
+    });
+
+    it('should handle unique numbers below 5 digits', () => {
+        const course = serde(multiMeetingMultiInstructorCourse);
+        course.instructors = course.instructors.slice(0, 1);
+        course.uniqueId = 4269;
+        const meeting = course.schedule.meetings[1]!;
+        const result = meetingToIcsString(course, meeting);
+        const expected = `BEGIN:VEVENT
+            DTSTART;TZID=America/Chicago:20250829T130000
+            DTEND;TZID=America/Chicago:20250829T160000
+            RRULE:FREQ=WEEKLY;BYDAY=FR;UNTIL=20251209T060000Z
+            EXDATE;TZID=America/Chicago:20251128T130000
+            SUMMARY:J 395 – 44-REPORTING TEXAS
+            LOCATION:DMC 3.208
+            DESCRIPTION:Unique number: 04269\\nTaught by John Schwartz
+            END:VEVENT`.replaceAll(/^\s+/gm, '');
+        expect(result).toBe(expected);
+    });
+
+    it('should handle a one-day meeting with multiple instructors', () => {
+        const course = serde(multiMeetingMultiInstructorCourse);
+        const meeting = course.schedule.meetings[1]!;
+        const result = meetingToIcsString(course, meeting);
+        const expected = `BEGIN:VEVENT
+            DTSTART;TZID=America/Chicago:20250829T130000
+            DTEND;TZID=America/Chicago:20250829T160000
+            RRULE:FREQ=WEEKLY;BYDAY=FR;UNTIL=20251209T060000Z
+            EXDATE;TZID=America/Chicago:20251128T130000
+            SUMMARY:J 395 – 44-REPORTING TEXAS
+            LOCATION:DMC 3.208
+            DESCRIPTION:Unique number: 10335\\nTaught by John Schwartz and John Bridges
+            END:VEVENT`.replaceAll(/^\s+/gm, '');
+        expect(result).toBe(expected);
+    });
+
+    it('should gracefully error on an out of range semester code', () => {
+        const course = serde(multiMeetingMultiInstructorCourse);
+        const meeting = course.schedule.meetings[0]!;
+        vi.spyOn(console, 'error').mockReturnValue(undefined);
+        course.semester = {
+            season: 'Fall',
+            year: 2010,
+            code: '20109',
+        };
+        const result = meetingToIcsString(course, meeting);
+        expect(result).toBeNull();
+        expect(console.error).toBeCalledWith(
+            `No academic calendar found for semester code: 20109; course uniqueId: ${course.uniqueId}`
+        );
+    });
+
+    it('should handle a multi-day meeting with multiple instructors', () => {
+        const course = serde(multiMeetingMultiInstructorCourse);
+        const meeting = course.schedule.meetings[0]!;
+        const result = meetingToIcsString(course, meeting);
+        const expected = `BEGIN:VEVENT
+            DTSTART;TZID=America/Chicago:20250826T093000
+            DTEND;TZID=America/Chicago:20250826T110000
+            RRULE:FREQ=WEEKLY;BYDAY=TU,TH;UNTIL=20251209T060000Z
+            EXDATE;TZID=America/Chicago:20251125T093000,20251127T093000
+            SUMMARY:J 395 – 44-REPORTING TEXAS
+            LOCATION:CMA 6.146
+            DESCRIPTION:Unique number: 10335\\nTaught by John Schwartz and John Bridges
+            END:VEVENT`.replaceAll(/^\s+/gm, '');
+        expect(result).toBe(expected);
+    });
+
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+});
+
+describe('scheduleToIcsString', () => {
+    it('should handle an empty schedule', () => {
+        const schedule = serde(
+            new UserSchedule({
+                courses: [],
+                hours: 0,
+                id: 'fajowe',
+                name: 'fajowe',
+                updatedAt: Date.now(),
+            })
+        );
+        const result = scheduleToIcsString(schedule);
+        const expected = `BEGIN:VCALENDAR
+                VERSION:2.0
+                CALSCALE:GREGORIAN
+                X-WR-CALNAME:My Schedule
+                END:VCALENDAR`.replaceAll(/^\s+/gm, '');
+        expect(result).toBe(expected);
+    });
+
+    it('should handle a schedule with courses but no meetings', () => {
+        const schedule = serde(
+            new UserSchedule({
+                courses: [
+                    new Course({
+                        ...multiMeetingMultiInstructorCourse,
+                        schedule: {
+                            meetings: [],
+                        },
+                    }),
+                ],
+                hours: 0,
+                id: 'fajowe',
+                name: 'fajowe',
+                updatedAt: Date.now(),
+            })
+        );
+        const result = scheduleToIcsString(schedule);
+        const expected = `BEGIN:VCALENDAR
+                VERSION:2.0
+                CALSCALE:GREGORIAN
+                X-WR-CALNAME:My Schedule
+                END:VCALENDAR`.replaceAll(/^\s+/gm, '');
+        expect(result).toBe(expected);
+    });
+
+    it('should handle a schedule with courses but out-of-range semester', () => {
+        vi.spyOn(console, 'error').mockReturnValue(undefined);
+        const schedule = serde(
+            new UserSchedule({
+                courses: [
+                    new Course({
+                        ...multiMeetingMultiInstructorCourse,
+                        semester: {
+                            season: 'Fall',
+                            year: 2010,
+                            code: '20109',
+                        },
+                    }),
+                ],
+                hours: 0,
+                id: 'fajowe',
+                name: 'fajowe',
+                updatedAt: Date.now(),
+            })
+        );
+        const result = scheduleToIcsString(schedule);
+        const expected = `BEGIN:VCALENDAR
+                VERSION:2.0
+                CALSCALE:GREGORIAN
+                X-WR-CALNAME:My Schedule
+                END:VCALENDAR`.replaceAll(/^\s+/gm, '');
+        expect(result).toBe(expected);
+    });
+
+    it('should handle a single course with multiple meetings', () => {
+        const schedule = serde(multiMeetingMultiInstructorSchedule);
+        const result = scheduleToIcsString(schedule);
+        const expected = `BEGIN:VCALENDAR
+            VERSION:2.0
+            CALSCALE:GREGORIAN
+            X-WR-CALNAME:My Schedule
+            BEGIN:VEVENT
+            DTSTART;TZID=America/Chicago:20250826T093000
+            DTEND;TZID=America/Chicago:20250826T110000
+            RRULE:FREQ=WEEKLY;BYDAY=TU,TH;UNTIL=20251209T060000Z
+            EXDATE;TZID=America/Chicago:20251125T093000,20251127T093000
+            SUMMARY:J 395 – 44-REPORTING TEXAS
+            LOCATION:CMA 6.146
+            DESCRIPTION:Unique number: 10335\\nTaught by John Schwartz and John Bridges
+            END:VEVENT
+            BEGIN:VEVENT
+            DTSTART;TZID=America/Chicago:20250829T130000
+            DTEND;TZID=America/Chicago:20250829T160000
+            RRULE:FREQ=WEEKLY;BYDAY=FR;UNTIL=20251209T060000Z
+            EXDATE;TZID=America/Chicago:20251128T130000
+            SUMMARY:J 395 – 44-REPORTING TEXAS
+            LOCATION:DMC 3.208
+            DESCRIPTION:Unique number: 10335\\nTaught by John Schwartz and John Bridges
+            END:VEVENT
+            END:VCALENDAR`.replaceAll(/^\s+/gm, '');
+        expect(result).toBe(expected);
+    });
+
+    it('should handle a complex schedule', () => {
+        const schedule = serde(multiMeetingMultiInstructorSchedule);
+        schedule.courses.push(chatterjeeCS429Course);
+        const result = scheduleToIcsString(schedule);
+        const expected = (
+            `BEGIN:VCALENDAR
+            VERSION:2.0
+            CALSCALE:GREGORIAN
+            X-WR-CALNAME:My Schedule
+            BEGIN:VEVENT
+            DTSTART;TZID=America/Chicago:20250826T093000
+            DTEND;TZID=America/Chicago:20250826T110000
+            RRULE:FREQ=WEEKLY;BYDAY=TU,TH;UNTIL=20251209T060000Z
+            EXDATE;TZID=America/Chicago:20251125T093000,20251127T093000
+            SUMMARY:J 395 – 44-REPORTING TEXAS
+            LOCATION:CMA 6.146
+            DESCRIPTION:Unique number: 10335\\nTaught by John Schwartz and John Bridges
+            END:VEVENT
+            BEGIN:VEVENT
+            DTSTART;TZID=America/Chicago:20250829T130000
+            DTEND;TZID=America/Chicago:20250829T160000
+            RRULE:FREQ=WEEKLY;BYDAY=FR;UNTIL=20251209T060000Z
+            EXDATE;TZID=America/Chicago:20251128T130000
+            SUMMARY:J 395 – 44-REPORTING TEXAS
+            LOCATION:DMC 3.208
+            DESCRIPTION:Unique number: 10335\\nTaught by John Schwartz and John Bridges
+            END:VEVENT
+            BEGIN:VEVENT
+            DTSTART;TZID=America/Chicago:20250825T160000
+            DTEND;TZID=America/Chicago:20250825T170000
+            RRULE:FREQ=WEEKLY;BYDAY=MO,TU,WE,TH;UNTIL=20251209T060000Z
+            ` +
+            // Skips Labor Day and only relevant days of Thanksgiving
+            `EXDATE;TZID=America/Chicago:20250901T160000,20251124T160000,20251125T160000,20251126T160000,20251127T160000
+            SUMMARY:C S 429 – COMP ORGANIZATN AND ARCH
+            LOCATION:UTC 3.102
+            DESCRIPTION:Unique number: 54795\\nTaught by Siddhartha Chatterjee
+            END:VEVENT
+            BEGIN:VEVENT
+            DTSTART;TZID=America/Chicago:20250829T090000
+            DTEND;TZID=America/Chicago:20250829T110000
+            RRULE:FREQ=WEEKLY;BYDAY=FR;UNTIL=20251209T060000Z
+            EXDATE;TZID=America/Chicago:20251128T090000
+            SUMMARY:C S 429 – COMP ORGANIZATN AND ARCH
+            LOCATION:GSB 2.122
+            DESCRIPTION:Unique number: 54795\\nTaught by Siddhartha Chatterjee
+            END:VEVENT
+            END:VCALENDAR`
+        ).replaceAll(/^\s+/gm, '');
+        expect(result).toBe(expected);
+    });
+
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+});

src/views/components/calendar/utils.ts

@@ -1,9 +1,36 @@
+import { tz, TZDate } from '@date-fns/tz';
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
+import type { Course } from '@shared/types/Course';
+import type { CourseMeeting } from '@shared/types/CourseMeeting';
+import Instructor from '@shared/types/Instructor';
 import type { UserSchedule } from '@shared/types/UserSchedule';
 import { downloadBlob } from '@shared/util/downloadBlob';
+import { englishStringifyList } from '@shared/util/string';
 import type { Serialized } from 'chrome-extension-toolkit';
+import type { DateArg, Day } from 'date-fns';
+import {
+    addDays,
+    eachDayOfInterval,
+    format as formatDate,
+    formatISO,
+    getDay,
+    nextDay,
+    parseISO,
+    set as setMultiple,
+} from 'date-fns';
 import { toBlob } from 'html-to-image';
 
+import { academicCalendars } from './academic-calendars';
+
+// Do all timezone calculations relative to UT's timezone
+const TIMEZONE_ID = 'America/Chicago';
+const TZ = tz(TIMEZONE_ID);
+
+// Datetime format used by iCal, not directly supported by date-fns
+// (date-fns adds the timezone to the end, but iCal doesn't want it)
+const ISO_BASIC_DATETIME_FORMAT = "yyyyMMdd'T'HHmmss";
+
+// iCal uses two-letter codes for days of the week
 export const CAL_MAP = {
     Sunday: 'SU',
     Monday: 'MO',
@@ -14,6 +41,17 @@ export const CAL_MAP = {
     Saturday: 'SA',
 } as const satisfies Record<string, string>;
 
+// Date objects' day field goes by index like this
+const DAY_NAME_TO_NUMBER = {
+    Sunday: 0,
+    Monday: 1,
+    Tuesday: 2,
+    Wednesday: 3,
+    Thursday: 4,
+    Friday: 5,
+    Saturday: 6,
+} as const satisfies Record<string, number>;
+
 /**
  * Retrieves the schedule from the UserScheduleStore based on the active index.
  * @returns A promise that resolves to the retrieved schedule.
@@ -38,50 +76,186 @@ export const formatToHHMMSS = (minutes: number) => {
     return `${hours}${mins}00`;
 };
 
+/**
+ * Formats a date in the format YYYYMMDD'T'HHmmss, which is the format used by iCal.
+ *
+ * @param date - The date to format.
+ * @returns The formatted date string.
+ */
+const iCalDateFormat = <DateType extends Date>(date: DateArg<DateType>) =>
+    formatDate(date, ISO_BASIC_DATETIME_FORMAT, { in: TZ });
+
+/**
+ * Returns the next day of the given date, inclusive of the given day.
+ *
+ * If the given date is the given day, the same date is returned.
+ *
+ * For example, a Monday targeting a Wednesday will return the next Wednesday,
+ * but if it was targeting a Monday it would return the same date.
+ *
+ * @param date - The date to increment.
+ * @param day - The day to increment to. (0 = Sunday, 1 = Monday, etc.)
+ * @returns The next day of the given date, inclusive of the given day.
+ */
+export const nextDayInclusive = (date: Date, day: Day): TZDate => {
+    if (getDay(date, { in: TZ }) === day) {
+        return new TZDate(date, TIMEZONE_ID);
+    }
+
+    return nextDay(date, day, { in: TZ });
+};
+
+/**
+ * Returns an array of all the dates (as Date objects) in the given date ranges.
+ *
+ * @param dateRanges - An array of date ranges.
+ * Each date range can be a string (in which case it is interpreted as a single date)
+ * or an array of two strings (in which case it is interpreted as a date range, inclusive).
+ * @returns An array of all the dates (as Date objects) in the given date ranges.
+ *
+ * @example
+ * allDatesInRanges(['2025-01-01', ['2025-03-14', '2025-03-16']]) // ['2025-01-01', '2025-03-14', '2025-03-15', '2025-03-16'] (as Date objects)
+ *
+ * @remarks Does not remove duplicate dates.
+ */
+export const allDatesInRanges = (dateRanges: readonly (string | [string, string])[]): Date[] =>
+    dateRanges.flatMap(breakDate => {
+        if (Array.isArray(breakDate)) {
+            return eachDayOfInterval({
+                start: parseISO(breakDate[0], { in: TZ }),
+                end: parseISO(breakDate[1], { in: TZ }),
+            });
+        }
+
+        return parseISO(breakDate, { in: TZ });
+    });
+
+/**
+ * Creates a VEVENT string for a meeting of a course.
+ *
+ * @param course - The course object
+ * @param meeting - The meeting object
+ * @returns A string representation of the meeting in the iCalendar format (ICS)
+ */
+export const meetingToIcsString = (course: Serialized<Course>, meeting: Serialized<CourseMeeting>): string | null => {
+    const { startTime, endTime, days, location } = meeting;
+    if (!course.semester.code) {
+        console.error(`No semester found for course uniqueId: ${course.uniqueId}`);
+        return null;
+    }
+
+    if (days.length === 0) {
+        console.error(`No days found for course uniqueId: ${course.uniqueId}`);
+        return null;
+    }
+
+    if (!Object.prototype.hasOwnProperty.call(academicCalendars, course.semester.code)) {
+        console.error(
+            `No academic calendar found for semester code: ${course.semester.code}; course uniqueId: ${course.uniqueId}`
+        );
+        return null;
+    }
+    const academicCalendar = academicCalendars[course.semester.code as keyof typeof academicCalendars];
+
+    const startDate = nextDayInclusive(
+        parseISO(academicCalendar.firstClassDate, { in: TZ }),
+        DAY_NAME_TO_NUMBER[days[0]!]
+    );
+
+    const startTimeHours = Math.floor(startTime / 60);
+    const startTimeMinutes = startTime % 60;
+    const startTimeDate = setMultiple(startDate, { hours: startTimeHours, minutes: startTimeMinutes }, { in: TZ });
+
+    const endTimeHours = Math.floor(endTime / 60);
+    const endTimeMinutes = endTime % 60;
+    const endTimeDate = setMultiple(startDate, { hours: endTimeHours, minutes: endTimeMinutes }, { in: TZ });
+
+    const untilDate = addDays(parseISO(academicCalendar.lastClassDate, { in: TZ }), 1);
+
+    const daysNumSet = new Set(days.map(d => DAY_NAME_TO_NUMBER[d]));
+    const excludedDates = allDatesInRanges(academicCalendar.breakDates)
+        // Don't need to exclude Tues/Thurs if it's a MWF class, etc.
+        .filter(date => daysNumSet.has(getDay(date, { in: TZ }) as Day))
+        .map(date => setMultiple(date, { hours: startTimeHours, minutes: startTimeMinutes }, { in: TZ }));
+
+    const startDateFormatted = iCalDateFormat(startTimeDate);
+    const endDateFormatted = iCalDateFormat(endTimeDate);
+    // Convert days to ICS compatible format, e.g. MO,WE,FR
+    const icsDays = days.map(day => CAL_MAP[day]).join(',');
+
+    // per spec, UNTIL must be in UTC
+    const untilDateFormatted = formatISO(untilDate, { format: 'basic', in: tz('utc') });
+    const excludedDatesFormatted = excludedDates.map(date => iCalDateFormat(date));
+
+    const uniqueNumberFormatted = course.uniqueId.toString().padStart(5, '0');
+
+    // The list part of "Taught by Michael Scott and Siddhartha Chatterjee Beasley"
+    const instructorsFormatted = englishStringifyList(
+        course.instructors
+            .map(instructor => Instructor.prototype.toString.call(instructor, { format: 'first_last' }))
+            .filter(name => name !== '')
+    );
+
+    // Construct event string
+    let icsString = 'BEGIN:VEVENT\n';
+    icsString += `DTSTART;TZID=${TIMEZONE_ID}:${startDateFormatted}\n`;
+    icsString += `DTEND;TZID=${TIMEZONE_ID}:${endDateFormatted}\n`;
+    icsString += `RRULE:FREQ=WEEKLY;BYDAY=${icsDays};UNTIL=${untilDateFormatted}\n`;
+    icsString += `EXDATE;TZID=${TIMEZONE_ID}:${excludedDatesFormatted.join(',')}\n`;
+    icsString += `SUMMARY:${course.department} ${course.number} \u2013 ${course.courseName}\n`;
+
+    if (location?.building || location?.building) {
+        const locationFormatted = `${location?.building ?? ''} ${location?.room ?? ''}`.trim();
+        icsString += `LOCATION:${locationFormatted}\n`;
+    }
+
+    icsString += `DESCRIPTION:Unique number: ${uniqueNumberFormatted}`;
+    if (instructorsFormatted) {
+        // Newlines need to be double-escaped
+        icsString += `\\nTaught by ${instructorsFormatted}`;
+    }
+    icsString += '\n';
+
+    icsString += 'END:VEVENT';
+
+    return icsString;
+};
+
+/**
+ * Creates a VCALENDAR string for a schedule of a user.
+ * @param schedule - The schedule object
+ * @returns A string representation of the schedule in the iCalendar format (ICS)
+ */
+export const scheduleToIcsString = (schedule: Serialized<UserSchedule>) => {
+    let icsString = 'BEGIN:VCALENDAR\nVERSION:2.0\nCALSCALE:GREGORIAN\nX-WR-CALNAME:My Schedule\n';
+
+    const vevents = schedule.courses
+        .flatMap(course => course.schedule.meetings.map(meeting => meetingToIcsString(course, meeting)))
+        .filter(event => event !== null)
+        .join('\n');
+
+    if (vevents.length > 0) {
+        icsString += `${vevents}\n`;
+    }
+
+    icsString += 'END:VCALENDAR';
+
+    return icsString;
+};
+
 /**
  * Saves the current schedule as a calendar file in the iCalendar format (ICS).
  * Fetches the current active schedule and converts it into an ICS string.
  * Downloads the ICS file to the user's device.
  */
 export const saveAsCal = async () => {
-    const schedule = await getSchedule(); // Assumes this fetches the current active schedule
+    const schedule = await getSchedule();
-
-    let icsString = 'BEGIN:VCALENDAR\nVERSION:2.0\nCALSCALE:GREGORIAN\nX-WR-CALNAME:My Schedule\n';
 
     if (!schedule) {
         throw new Error('No schedule found');
     }
 
-    schedule.courses.forEach(course => {
+    const icsString = scheduleToIcsString(schedule);
-        course.schedule.meetings.forEach(meeting => {
-            const { startTime, endTime, days, location } = meeting;
-
-            // Format start and end times to HHMMSS
-            const formattedStartTime = formatToHHMMSS(startTime);
-            const formattedEndTime = formatToHHMMSS(endTime);
-
-            // Map days to ICS compatible format
-            console.log(days);
-            const icsDays = days.map(day => CAL_MAP[day]).join(',');
-            console.log(icsDays);
-
-            // Assuming course has date started and ended, adapt as necessary
-            // const year = new Date().getFullYear(); // Example year, adapt accordingly
-            // Example event date, adapt startDate according to your needs
-            const startDate = `20240101T${formattedStartTime}`;
-            const endDate = `20240101T${formattedEndTime}`;
-
-            icsString += `BEGIN:VEVENT\n`;
-            icsString += `DTSTART:${startDate}\n`;
-            icsString += `DTEND:${endDate}\n`;
-            icsString += `RRULE:FREQ=WEEKLY;BYDAY=${icsDays}\n`;
-            icsString += `SUMMARY:${course.fullName}\n`;
-            icsString += `LOCATION:${location?.building ?? ''} ${location?.room ?? ''}\n`;
-            icsString += `END:VEVENT\n`;
-        });
-    });
-
-    icsString += 'END:VCALENDAR';
 
     downloadBlob(icsString, 'CALENDAR', 'schedule.ics');
 };
@@ -92,31 +266,38 @@ export const saveAsCal = async () => {
  * @param calendarRef - The reference to the calendar component.
  */
 export const saveCalAsPng = () => {
+    const WIDTH_PX = 1165;
+    const HEIGHT_PX = 754;
+    const SCALE = 2;
+
     const rootNode = document.createElement('div');
     rootNode.style.backgroundColor = 'white';
     rootNode.style.position = 'fixed';
     rootNode.style.zIndex = '1000';
     rootNode.style.top = '-10000px';
     rootNode.style.left = '-10000px';
-    rootNode.style.width = '1165px';
+    rootNode.style.width = `${WIDTH_PX}px`;
-    rootNode.style.height = '754px';
+    rootNode.style.height = `${HEIGHT_PX}px`;
     document.body.appendChild(rootNode);
 
     const clonedNode = document.querySelector('#root')!.cloneNode(true) as HTMLDivElement;
     clonedNode.style.backgroundColor = 'white';
     (clonedNode.firstChild as HTMLDivElement).classList.add('screenshot-in-progress');
 
-    return new Promise<void>((resolve, reject) => {
+    const calendarTarget = clonedNode.querySelector('.screenshot\\:calendar-target') as HTMLDivElement;
-        requestAnimationFrame(async () => {
+    calendarTarget.style.width = `${WIDTH_PX}px`;
-            rootNode.appendChild(clonedNode);
+    calendarTarget.style.height = `${HEIGHT_PX}px`;
 
+    return new Promise<void>((resolve, reject) => {
+        rootNode.appendChild(clonedNode);
+        requestAnimationFrame(async () => {
             try {
                 const screenshotBlob = await toBlob(clonedNode, {
                     cacheBust: true,
-                    canvasWidth: 1165 * 2,
+                    canvasWidth: WIDTH_PX * SCALE,
-                    canvasHeight: 754 * 2,
+                    canvasHeight: HEIGHT_PX * SCALE,
                     skipAutoScale: true,
-                    pixelRatio: 2,
+                    pixelRatio: SCALE,
                 });
 
                 if (!screenshotBlob) {

src/views/components/common/DialogProvider/DialogProvider.tsx

@@ -46,7 +46,7 @@ export function usePrompt(): (info: PromptInfo, options?: DialogOptions) => void
                         {info.description}
                     </Text>
                 ),
-                className: 'max-w-[400px] flex flex-col gap-2.5 p-6.25',
+                className: 'max-w-[415px] flex flex-col gap-2.5 p-6.25 border border-ut-offwhite/50',
             },
             options
         );

src/views/components/common/ExtensionRoot/ExtensionRoot.tsx

@@ -1,6 +1,7 @@
 // import '@unocss/reset/tailwind-compat.css';
 import 'uno.css';
 
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import clsx from 'clsx';
 import React, { forwardRef } from 'react';
 
@@ -8,6 +9,8 @@ import styles from './ExtensionRoot.module.scss';
 
 export const styleResetClass = styles.extensionRoot;
 
+const queryClient = new QueryClient();
+
 /**
  * A wrapper component for the extension elements that adds some basic styling to them
  */
@@ -16,7 +19,9 @@ export default function ExtensionRoot(props: React.HTMLProps<HTMLDivElement>): J
 
     return (
         <React.StrictMode>
-            <div className={clsx(styleResetClass, 'h-full', className)} {...others} />
+            <QueryClientProvider client={queryClient}>
+                <div className={clsx(styleResetClass, 'h-full', className)} {...others} />
+            </QueryClientProvider>
         </React.StrictMode>
     );
 }

src/views/components/common/FileUpload.tsx

@@ -1,4 +1,5 @@
 import type { Icon, IconProps } from '@phosphor-icons/react';
+import type { MIMETypeValue } from '@shared/types/MIMEType';
 import type { ThemeColor } from '@shared/types/ThemeColors';
 import { getThemeColorHexByName, getThemeColorRgbByName } from '@shared/util/themeColors';
 import Text from '@views/components/common/Text/Text';
@@ -16,6 +17,7 @@ interface Props {
     disabled?: boolean;
     title?: string;
     color: ThemeColor;
+    accept?: MIMETypeValue | MIMETypeValue[];
 }
 
 /**
@@ -34,6 +36,7 @@ export default function FileUpload({
     disabled,
     title,
     color,
+    accept,
     children,
 }: React.PropsWithChildren<Props>): JSX.Element {
     const Icon = icon;
@@ -41,6 +44,9 @@ export default function FileUpload({
     const colorHex = getThemeColorHexByName(color);
     const colorRgb = getThemeColorRgbByName(color)?.join(' ');
 
+    // Convert accept to a comma-separated string if it's an array
+    const acceptValue = Array.isArray(accept) ? accept.join(',') : accept;
+
     return (
         <label
             style={
@@ -78,7 +84,13 @@ export default function FileUpload({
                     {children}
                 </Text>
             )}
-            <input type='file' className='hidden' disabled={disabled} onChange={disabled ? undefined : onChange} />
+            <input
+                type='file'
+                {...(accept ? { accept: acceptValue } : {})}
+                className='hidden'
+                disabled={disabled}
+                onChange={disabled ? undefined : onChange}
+            />
         </label>
     );
 }

src/views/components/common/MigrationDialog.tsx

@@ -102,7 +102,7 @@ export function useMigrationDialog() {
                 {
                     title: 'This extension has updated!',
                     description:
-                        "You may have already began planning your Spring '25 schedule. Click the button below to transfer your saved schedules into a new schedule. (You may be required to login to the UT Registrar)",
+                        "You may have already began planning your Fall '25 schedule. Click the button below to transfer your saved schedules into a new schedule. (You may be required to login to the UT Registrar)",
 
                     buttons: close => <MigrationButtons close={close} />,
                 },

src/views/components/common/ScheduleDropdown.tsx

@@ -24,8 +24,12 @@ export default function ScheduleDropdown({ defaultOpen, children }: ScheduleDrop
                 {({ open }) => (
                     <>
                         <DisclosureButton className='w-full flex items-center border-none bg-transparent px-3.5 py-2.5 text-left'>
-                            <div className='flex-1'>
+                            <div className='flex-1 min-w-0 overflow-hidden'>
-                                <Text as='div' variant='h3' className='w-100% text-ut-burntorange normal-case!'>
+                                <Text
+                                    as='div'
+                                    variant='h3'
+                                    className='w-full truncate whitespace-nowrap text-ut-burntorange normal-case!'
+                                >
                                     {activeSchedule ? activeSchedule.name : 'Schedule'}
                                 </Text>
                                 <div className='flex gap-2.5 text-theme-black leading-[75%]!'>

src/views/components/common/ScheduleListItem.tsx

@@ -109,12 +109,14 @@ export default function ScheduleListItem({ schedule, onClick }: ScheduleListItem
 
     const handleDelete = () => {
         showDialog({
-            title: 'Are you sure?',
+            title: 'Delete schedule?',
             description: (
                 <>
-                    <Text>Deleting</Text>
+                    <Text>Deleting </Text>
-                    <Text className='text-ut-burntorange'> {schedule.name} </Text>
+                    <Text className='text-ut-burntorange'>{schedule.name}</Text>
-                    <Text>is permanent and will remove all added courses from that schedule.</Text>
+                    <Text> is permanent and will remove all added courses from </Text>
+                    <Text className='text-ut-burntorange'>{schedule.name}</Text>
+                    <Text>.</Text>
                 </>
             ),
             // eslint-disable-next-line react/no-unstable-nested-components
@@ -126,12 +128,13 @@ export default function ScheduleListItem({ schedule, onClick }: ScheduleListItem
                     <Button
                         variant='filled'
                         color='theme-red'
+                        icon={Trash}
                         onClick={() => {
                             close();
                             deleteSchedule(schedule.id);
                         }}
                     >
-                        Delete Permanently
+                        Delete permanently
                     </Button>
                 </>
             ),

src/views/components/common/UpdateText.tsx

@@ -1,39 +0,0 @@
-import Text from '@views/components/common/Text/Text';
-import React from 'react';
-
-/**
- * Props for the Update Text
- */
-export type UpdateTextProps = {
-    courses: string[];
-};
-
-/**
- * UpdateText component displays a message indicating that the extension has been updated
- * and lists the unique course numbers from the old version.
- *
- * @param courses - An array of course unique numbers to be displayed.
- * @returns The rendered UpdateText component.
- */
-export default function UpdateText({ courses }: UpdateTextProps): JSX.Element {
-    return (
-        <div className='max-w-64 flex flex-col justify-center gap-2'>
-            <div className='flex flex-col gap-0 text-center'>
-                <Text variant='h4' className='text-ut-burntorange'>
-                    This extension has updated!
-                </Text>
-                <Text variant='p' className='text-ut-black'>
-                    You may have already began planning your Spring 2025 schedule. Here are the Unique Numbers you had
-                    from the old version: (Please open each link and re-add course to your new schedule)
-                </Text>
-            </div>
-            <div className='flex flex-col gap-1 text-center'>
-                {courses.map(course => (
-                    <Text key={course} variant='p' className='text-ut-orange underline'>
-                        {course}
-                    </Text>
-                ))}
-            </div>
-        </div>
-    );
-}

src/views/components/common/WhatsNewPopup.tsx

@@ -0,0 +1,148 @@
+import type { IconProps } from '@phosphor-icons/react';
+import { CloudX, Copy, Exam, MapPinArea, Palette } from '@phosphor-icons/react';
+import { ExtensionStore } from '@shared/storage/ExtensionStore';
+import Text from '@views/components/common/Text/Text';
+import useWhatsNewPopUp from '@views/hooks/useWhatsNew';
+import React, { useEffect, useState } from 'react';
+
+/**
+ * This is the version of the 'What's New' features popup.
+ *
+ * It is used to check if the popup has already been shown to the user or not
+ *
+ * It should be incremented every time the "What's New" popup is updated.
+ */
+const WHATSNEW_POPUP_VERSION = 1;
+
+const WHATSNEW_VIDEO_URL = 'https://cdn.longhorns.dev/whats-new-v2.1.2.mp4';
+
+type Feature = {
+    id: string;
+    icon: React.ForwardRefExoticComponent<IconProps>;
+    title: string | JSX.Element;
+    description: string;
+};
+
+const NEW_FEATURES = [
+    {
+        id: 'custom-course-colors',
+        icon: Palette,
+        title: 'Custom Course Colors',
+        description: 'Paint your schedule in your favorite color theme',
+    },
+    {
+        id: 'quick-copy',
+        icon: Copy,
+        title: 'Quick Copy',
+        description: 'Quickly copy a course unique number to your clipboard',
+    },
+    {
+        id: 'updated-grades',
+        icon: Exam,
+        title: 'Updated Grades',
+        description: 'Fall 2024 grades are now available in the grade distribution',
+    },
+    {
+        id: 'ut-map',
+        icon: MapPinArea,
+        title: (
+            <div className='flex flex-row items-center'>
+                UTRP Map
+                <span className='mx-2 border border-ut-burntorange rounded px-2 py-0.5 text-xs text-ut-burntorange font-medium'>
+                    BETA
+                </span>
+            </div>
+        ),
+        description: 'Find directions to your classes with our beta map feature in the settings page',
+    },
+] as const satisfies readonly Feature[];
+
+/**
+ * WhatsNewPopupContent component.
+ *
+ * This component displays the content of the WhatsNew dialog.
+ * It shows the new features that have been added to the extension.
+ *
+ * @returns A JSX of WhatsNewPopupContent component.
+ */
+export default function WhatsNewPopupContent(): JSX.Element {
+    const [videoError, setVideoError] = useState(false);
+
+    return (
+        <div className='w-full flex flex-row justify-between'>
+            <div className='w-full flex flex-col-reverse items-center justify-between gap-spacing-7 md:flex-row'>
+                <div className='grid grid-cols-1 w-fit items-center gap-spacing-6 sm:grid-cols-2 md:w-[277px] md:flex md:flex-col md:flex-nowrap'>
+                    {NEW_FEATURES.map(({ id, icon: Icon, title, description }) => (
+                        <div key={id} className='w-full flex items-center justify-between gap-spacing-5'>
+                            <Icon width='40' height='40' className='text-ut-burntorange' />
+                            <div className='w-full flex flex-col gap-spacing-1'>
+                                <Text variant='h4' className='text-ut-burntorange font-bold!'>
+                                    {title}
+                                </Text>
+                                <Text variant='p' className='text-ut-black'>
+                                    {description}
+                                </Text>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+                <div className='h-full max-w-[464px] w-full flex items-center justify-center'>
+                    {videoError ? (
+                        <div className='h-full w-full flex items-center justify-center border border-ut-offwhite/50 rounded'>
+                            <div className='flex flex-col items-center justify-center p-spacing-2'>
+                                <CloudX size={52} className='text-ut-black/50' />
+                                <Text variant='h4' className='text-center text-ut-black/50'>
+                                    Failed to load video. Please try again later.
+                                </Text>
+                            </div>
+                        </div>
+                    ) : (
+                        <video
+                            className='h-fit w-full flex items-center justify-center border border-ut-offwhite/50 rounded object-cover'
+                            autoPlay
+                            loop
+                            muted
+                        >
+                            <source src={WHATSNEW_VIDEO_URL} type='video/mp4' onError={() => setVideoError(true)} />
+                        </video>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+/**
+ * WhatsNewDialog component.
+ *
+ * This component is responsible for checking if the extension has already been updated
+ * and if so, it displays the WhatsNew dialog. Then it updates the state to show that the
+ * dialog has been shown.
+ *
+ * @returns An empty fragment.
+ *
+ * @remarks
+ * The component uses the `useWhatsNew` hook to show the WhatsNew dialog and the
+ * `useEffect` hook to perform the check on component mount. It also uses the `ExtensionStore`
+ * to view the state of the dialog.
+ */
+export function WhatsNewDialog(): null {
+    const showPopUp = useWhatsNewPopUp();
+
+    useEffect(() => {
+        const checkUpdate = async () => {
+            const version = await ExtensionStore.get('lastWhatsNewPopupVersion');
+            if (version !== WHATSNEW_POPUP_VERSION) {
+                await ExtensionStore.set('lastWhatsNewPopupVersion', WHATSNEW_POPUP_VERSION);
+                showPopUp();
+            }
+        };
+
+        checkUpdate();
+
+        // This is on purpose
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return null;
+}

src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx

@@ -140,7 +140,7 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
             tickWidth: 1,
             tickLength: 10,
             tickColor: '#9CADB7',
-            crosshair: { color: extendedColors.theme.offwhite },
+            crosshair: { color: `${extendedColors.theme.offwhite}50` },
             lineColor: '#9CADB7',
         },
         yAxis: {
@@ -260,7 +260,7 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
                                 ))}
                         </select>
                         <Link variant='small' href={UT_GRADE_DISTRIBUTION_URL} className='link'>
-                            About the data
+                            Data Source
                         </Link>
                     </div>
                     {distributions[semester] && !distributions[semester]!.instructorIncluded && (

src/views/components/injected/DaysCheckbox.tsx

@@ -0,0 +1,89 @@
+import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] as const;
+/**
+ * Component that transforms the days dropdown into a series of checkboxes
+ * on the course catalog search page
+ *
+ * @returns The rendered checkbox component or null if the container is not found.
+ */
+export default function DaysCheckbox(): JSX.Element | null {
+    const [container, setContainer] = useState<HTMLDivElement | null>(null);
+    const [daysValue, setDaysValue] = useState<number[]>([0, 0, 0, 0, 0, 0]);
+
+    useEffect(() => {
+        const daysDropdown = document.getElementById('mtg_days_st') as HTMLSelectElement | null;
+        if (!daysDropdown) {
+            console.error('Days dropdown not found');
+            return;
+        }
+
+        const formElement = daysDropdown.closest('.form_element')!;
+        const checkboxContainer = document.createElement('div');
+
+        // Create a hidden input to store the value
+        const hiddenInput = document.createElement('input');
+        hiddenInput.type = 'hidden';
+        hiddenInput.name = 'mtg_days_st';
+        hiddenInput.id = 'mtg_days_st_hidden';
+        hiddenInput.value = daysDropdown.value;
+
+        // Remove old dropdown
+        formElement.innerHTML = '';
+
+        // Add the label back
+        const newLabel = document.createElement('label');
+        newLabel.className = 'primary_label';
+        newLabel.htmlFor = 'mtg_days_st_hidden';
+        newLabel.textContent = 'AND days';
+
+        formElement.appendChild(newLabel);
+        formElement.appendChild(hiddenInput);
+        formElement.appendChild(checkboxContainer);
+        setContainer(checkboxContainer);
+
+        return () => {
+            checkboxContainer.remove();
+        };
+    }, []);
+
+    useEffect(() => {
+        // Update hidden input when daysValue changes
+        const hiddenInput = document.getElementById('mtg_days_st_hidden') as HTMLInputElement | null;
+        if (hiddenInput) {
+            hiddenInput.value = daysValue.join('');
+        }
+    }, [daysValue]);
+
+    const handleDayChange = (position: number, checked: boolean) => {
+        setDaysValue(prev => prev.with(position, checked ? 1 : 0));
+    };
+
+    if (!container) {
+        return null;
+    }
+
+    return ReactDOM.createPortal(
+        <ExtensionRoot>
+            <ul className='text-black font-[Verdana,_"Helvetica_Neue",_Helvetica,_Arial,_sans-serif]'>
+                {days.map((day, index) => (
+                    <li key={day}>
+                        <input
+                            type='checkbox'
+                            id={`day_${day}`}
+                            checked={daysValue[index] === 1}
+                            onChange={e => {
+                                handleDayChange(index, e.target.checked);
+                            }}
+                            className='form-checkbox m-[3px_3px_3px_4px]'
+                        />{' '}
+                        <label htmlFor={`day_${day}`}>{day}</label>
+                    </li>
+                ))}
+            </ul>
+        </ExtensionRoot>,
+        container
+    );
+}

src/views/components/injected/RecruitmentBanner/RecruitmentBanner.tsx

@@ -1,14 +1,49 @@
 import Link from '@views/components/common/Link';
 import Text from '@views/components/common/Text/Text';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import styles from './RecruitmentBanner.module.scss';
 
 const DISCORD_URL = 'https://discord.gg/7pQDBGdmb7';
 const GITHUB_URL = 'https://github.com/Longhorn-Developers/UT-Registration-Plus';
+const DESIGNER_APPLICATION_URL =
+    'https://docs.google.com/forms/d/e/1FAIpQLSdX1Bb37tW6s1bkdIW3GJoTGcM_Uc-2DzFOFMXxGdn1jZ3K1A/viewform';
 
-const RECRUIT_FROM_DEPARTMENTS = ['C S', 'ECE', 'MIS', 'CSE', 'EE', 'ITD', 'DES'];
+// The lists below _must_ be mutually exclusive
+const DEVELOPER_RECRUIT_FROM_DEPARTMENTS = new Set(['C S', 'ECE', 'MIS', 'CSE', 'EE', 'ITD']);
+const DESIGNER_RECRUIT_FROM_DEPARTMENTS = new Set(['I', 'DES', 'AET']);
+
+type RecruitmentType = 'DEVELOPER' | 'DESIGNER' | 'NONE';
+
+const DeveloperRecruitmentBanner = () => (
+    <div className={styles.container}>
+        <Text className='text-white'>
+            Interested in helping us develop UT Registration Plus? Check out our{' '}
+            <Link className='text-ut-orange!' href={DISCORD_URL}>
+                Discord Server
+            </Link>{' '}
+            and{' '}
+            <Link className='text-ut-orange!' href={GITHUB_URL}>
+                GitHub
+            </Link>
+            !
+        </Text>
+    </div>
+);
+
+const DesignerRecruitmentBanner = () => (
+    <div className={styles.container}>
+        <Text className='text-white'>
+            Design for thousands of UT students through Longhorn Developers on real-world projects like UT Reg.
+            Plus.—build your portfolio and collaborate in Figma. Apply{' '}
+            <Link className='text-ut-orange!' href={DESIGNER_APPLICATION_URL}>
+                here
+            </Link>
+            !
+        </Text>
+    </div>
+);
 
 /**
  * This adds a new column to the course catalog table header.
@@ -17,47 +52,37 @@ const RECRUIT_FROM_DEPARTMENTS = ['C S', 'ECE', 'MIS', 'CSE', 'EE', 'ITD', 'DES'
  */
 export default function RecruitmentBanner(): JSX.Element | null {
     const [container, setContainer] = useState<HTMLDivElement | null>(null);
+    const recruitmentType = useMemo<RecruitmentType>(getRecruitmentType, []);
 
     useEffect(() => {
-        if (!canRecruitFrom()) {
+        if (recruitmentType === 'NONE') {
             return;
         }
+
         const container = document.createElement('div');
         container.setAttribute('id', 'ut-registration-plus-table-head');
 
         const table = document.querySelector('table');
         table!.before(container);
         setContainer(container);
-    }, []);
+    }, [recruitmentType]);
 
-    if (!container) {
+    if (!container || recruitmentType === 'NONE') {
         return null;
     }
 
     return createPortal(
-        <div className={styles.container}>
+        recruitmentType === 'DEVELOPER' ? <DeveloperRecruitmentBanner /> : <DesignerRecruitmentBanner />,
-            <Text color='white'>
-                Interested in helping us develop UT Registration Plus? Check out our{' '}
-                <Link color='white' href={DISCORD_URL}>
-                    Discord Server
-                </Link>{' '}
-                and{' '}
-                <Link color='white' href={GITHUB_URL}>
-                    GitHub
-                </Link>
-                !
-            </Text>
-        </div>,
         container
     );
 }
 
 /**
- * Determines if recruitment can be done from the current department.
+ * Determines what type of recruitment can be done from the current department.
  *
- * @returns True if recruitment can be done from the current department, false otherwise.
+ * @returns 'DEVELOPER' or 'DESIGNER' if the current department recruits for that respective type, otherwise 'NONE'
  */
-export const canRecruitFrom = (): boolean => {
+export const getRecruitmentType = (): RecruitmentType => {
     const params = ['fos_fl', 'fos_cn'];
     let department = '';
     params.forEach(p => {
@@ -66,8 +91,18 @@ export const canRecruitFrom = (): boolean => {
             department = param;
         }
     });
+
     if (!department) {
-        return false;
+        return 'NONE';
     }
-    return RECRUIT_FROM_DEPARTMENTS.includes(department);
+
+    if (DEVELOPER_RECRUIT_FROM_DEPARTMENTS.has(department)) {
+        return 'DEVELOPER';
+    }
+
+    if (DESIGNER_RECRUIT_FROM_DEPARTMENTS.has(department)) {
+        return 'DESIGNER';
+    }
+
+    return 'NONE';
 };

src/views/components/map/CampusMap.tsx

@@ -0,0 +1,795 @@
+/* eslint-disable no-nested-ternary */
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import DaySelector from './DaySelector';
+import DevToggles from './DevToggles';
+import FullscreenButton from './FullscreenButton';
+import { graphNodes } from './graphNodes';
+import type { ProcessInPersonMeetings } from './Map';
+import { Path } from './Path';
+import { calcDirectPathStats, PathStats } from './PathStats';
+import TimeWarningLabel from './TimeWarningLabel';
+import type { DayCode, NodeId, NodeType } from './types';
+import { DAY_MAPPING } from './types';
+import { getMidpoint } from './utils';
+import ZoomPanControls from './ZoomPanControls';
+
+// Image: 783x753
+const UTMapURL = new URL('/src/assets/UT-Map.svg', import.meta.url).href;
+
+const minZoom = 0.5;
+const maxZoom = 5;
+const zoomStep = 1.2;
+
+// Define zoom level thresholds for showing different levels of detail
+const ZOOM_LEVELS = {
+    LOW: 0.8, // Show minimal buildings at this zoom level and below
+    MEDIUM: 1.5, // Show moderate amount of buildings
+    HIGH: 2.5, // Show all buildings with full details
+} as const;
+
+type SelectedBuildings = {
+    start: NodeId | null;
+    end: NodeId | null;
+};
+
+type CampusMapProps = {
+    processedCourses: ProcessInPersonMeetings[];
+};
+
+/**
+ * Component representing the campus map with interactive features.
+ *
+ * @param processedCourses - Array of processed courses.
+ * @returns The rendered CampusMap component.
+ *
+ * @remarks
+ * This component renders a map of the campus with interactive features such as:
+ * - Selecting buildings to create a path.
+ * - Displaying daily paths between sequential classes.
+ * - Highlighting paths with less than 15 minutes transition time.
+ * - Zooming and panning the map.
+ * - Toggling visibility of different map elements.
+ *
+ * The rendered output includes:
+ * - An image of the campus map.
+ * - An SVG overlay with paths and buildings.
+ * - Controls for selecting the day and displaying path information.
+ * - Dev controls for toggling element visibility.
+ * - Zoom and pan controls.
+ */
+export default function CampusMap({ processedCourses }: CampusMapProps): JSX.Element {
+    // Core state
+    const [selected, setSelected] = useState<SelectedBuildings>({
+        start: null,
+        end: null,
+    });
+    const [selectedDay, setSelectedDay] = useState<DayCode | null>(null);
+    const [hoveredPathIndex, setHoveredPathIndex] = useState<number | null>(null);
+    const [toggledPathIndex, setToggledPathIndex] = useState<number | null>(null);
+
+    // Dev toggle state
+    const [dynamicRendering, setDynamicRendering] = useState<boolean>(true);
+    const [showBuildings, setShowBuildings] = useState<boolean>(true);
+    const [showBuildingText, setShowBuildingText] = useState<boolean>(true);
+    const [showPrioritizedOnly, setShowPrioritizedOnly] = useState<boolean>(false);
+    const [showIntersections, setShowIntersections] = useState<boolean>(false);
+    const [showWalkways, setShowWalkways] = useState<boolean>(false);
+
+    // Zoom and pan state
+    const [zoomLevel, setZoomLevel] = useState<number>(1);
+    const [panPosition, setPanPosition] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
+    const [isDragging, setIsDragging] = useState<boolean>(false);
+    const [dragStart, setDragStart] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
+
+    // Refs
+    const mapContainerRef = useRef<HTMLDivElement | null>(null);
+
+    // Function to calculate the current viewport in SVG coordinates
+    const calculateViewport = useCallback(() => {
+        if (!mapContainerRef.current) return null;
+
+        const container = mapContainerRef.current;
+        const rect = container.getBoundingClientRect();
+
+        // SVG dimensions from viewBox
+        const svgWidth = 783;
+        const svgHeight = 753;
+
+        // Calculate visible area in SVG coordinates
+        const scaleFactor = 1 / zoomLevel;
+        const visibleWidth = rect.width * scaleFactor;
+        const visibleHeight = rect.height * scaleFactor;
+
+        // Calculate the center point in SVG coordinates after pan
+        const centerX = svgWidth / 2 - panPosition.x * scaleFactor;
+        const centerY = svgHeight / 2 - panPosition.y * scaleFactor;
+
+        return {
+            left: centerX - visibleWidth / 2,
+            right: centerX + visibleWidth / 2,
+            top: centerY - visibleHeight / 2,
+            bottom: centerY + visibleHeight / 2,
+            width: visibleWidth,
+            height: visibleHeight,
+        };
+    }, [zoomLevel, panPosition]);
+
+    // Check if a node is in the viewport
+    const isNodeInViewport = useCallback(
+        (
+            node: { x: number; y: number },
+            viewport: {
+                left: number;
+                right: number;
+                top: number;
+                bottom: number;
+            } | null
+        ) => {
+            if (!dynamicRendering) return true;
+            if (!viewport) return true;
+
+            return (
+                node.x >= viewport.left &&
+                node.x <= viewport.right &&
+                node.y >= viewport.top &&
+                node.y <= viewport.bottom
+            );
+        },
+        [dynamicRendering]
+    );
+
+    // Path calculations
+    const getDailyPaths = useCallback((courses: ProcessInPersonMeetings[]) => {
+        const sortedCourses = [...courses].sort((a, b) => a.normalizedStartTime - b.normalizedStartTime);
+
+        const paths = [];
+
+        for (let i = 0; i < sortedCourses.length - 1; i++) {
+            const currentCourse = sortedCourses[i];
+            const nextCourse = sortedCourses[i + 1];
+
+            if (currentCourse && nextCourse && currentCourse.location?.building && nextCourse.location?.building) {
+                paths.push({
+                    start: currentCourse.location.building,
+                    end: nextCourse.location.building,
+                    startTime: currentCourse.normalizedEndTime,
+                    endTime: nextCourse.normalizedStartTime,
+                    colors: currentCourse.colors,
+                    startCourseName: currentCourse.fullName,
+                    endCourseName: nextCourse.fullName,
+                });
+            }
+        }
+
+        return paths;
+    }, []);
+
+    const relevantPaths = useMemo(() => {
+        if (!selectedDay) return [];
+
+        const coursesForDay = processedCourses.filter(course => course.day === DAY_MAPPING[selectedDay]);
+
+        const paths = getDailyPaths(coursesForDay);
+
+        return paths.map(path => ({
+            ...path,
+            timeBetweenClasses: Math.floor(path.endTime - path.startTime),
+        }));
+    }, [selectedDay, processedCourses, getDailyPaths]);
+
+    // Memoized set of important buildings - buildings in active paths or daily routes
+    const importantBuildings = useMemo(() => {
+        const result = new Set<NodeId>();
+
+        // Add selected buildings
+        if (selected.start) result.add(selected.start);
+        if (selected.end) result.add(selected.end);
+
+        // Add buildings in the daily paths
+        relevantPaths?.forEach(path => {
+            result.add(path.start);
+            result.add(path.end);
+        });
+
+        return result;
+    }, [selected.start, selected.end, relevantPaths]);
+
+    // Memoized set of buildings to show based on zoom level and grid clustering
+    const visibleBuildings = useMemo(() => {
+        // Start with important buildings (selected or in active paths)
+        const result = new Set<NodeId>(importantBuildings);
+        const viewport = calculateViewport();
+
+        if (!dynamicRendering) {
+            Object.entries(graphNodes).forEach(([id, node]) => {
+                if (node.type === 'building' && isNodeInViewport(node, viewport)) {
+                    result.add(id);
+                }
+            });
+            return result;
+        }
+
+        // If showing prioritized buildings only, return just the important ones
+        if (showPrioritizedOnly) {
+            return result;
+        }
+
+        // If we're zoomed in enough, show all buildings in viewport
+        if (zoomLevel >= ZOOM_LEVELS.HIGH) {
+            Object.entries(graphNodes).forEach(([id, node]) => {
+                if (node.type === 'building' && isNodeInViewport(node, viewport)) {
+                    result.add(id);
+                }
+            });
+            return result;
+        }
+
+        // At medium zoom, show more buildings but still cluster them
+        if (zoomLevel >= ZOOM_LEVELS.MEDIUM) {
+            // Create a grid-based clustering with medium density
+            const gridSize = 40;
+            const grid: Record<string, NodeId[]> = {};
+
+            Object.entries(graphNodes).forEach(([id, node]) => {
+                if (node.type === 'building' && isNodeInViewport(node, viewport)) {
+                    const gridX = Math.floor(node.x / gridSize);
+                    const gridY = Math.floor(node.y / gridSize);
+                    const gridId = `${gridX}-${gridY}`;
+
+                    if (!grid[gridId]) {
+                        grid[gridId] = [];
+                    }
+                    grid[gridId].push(id);
+                }
+            });
+
+            // Select one building per grid cell
+            Object.values(grid).forEach(buildings => {
+                if (buildings.length > 0) {
+                    // Sort to ensure consistent selection
+                    const sorted = [...buildings].sort();
+                    if (sorted[0]) {
+                        result.add(sorted[0]);
+                    }
+                }
+            });
+            return result;
+        }
+
+        // At low zoom, create a sparser grid
+        const gridSize = 70;
+        const grid: Record<string, NodeId[]> = {};
+
+        Object.entries(graphNodes).forEach(([id, node]) => {
+            if (node.type === 'building' && isNodeInViewport(node, viewport)) {
+                const gridX = Math.floor(node.x / gridSize);
+                const gridY = Math.floor(node.y / gridSize);
+                const gridId = `${gridX}-${gridY}`;
+
+                if (!grid[gridId]) {
+                    grid[gridId] = [];
+                }
+                grid[gridId].push(id);
+            }
+        });
+
+        // Select one building per grid cell
+        Object.values(grid).forEach(buildings => {
+            if (buildings.length > 0) {
+                // Sort to ensure consistent selection
+                const sorted = [...buildings].sort();
+                if (sorted[0]) {
+                    result.add(sorted[0]);
+                }
+
+                // For grid cells with many buildings, maybe show a second one too
+                if (sorted.length > 3 && zoomLevel > ZOOM_LEVELS.LOW && sorted[1]) {
+                    result.add(sorted[1]);
+                }
+            }
+        });
+
+        return result;
+    }, [importantBuildings, calculateViewport, dynamicRendering, showPrioritizedOnly, zoomLevel, isNodeInViewport]);
+
+    // Determine which intersections to show based on zoom level
+    const visibleIntersections = useMemo(() => {
+        const result = new Set<NodeId>();
+        const viewport = calculateViewport();
+
+        // Only process if intersections should be shown
+        if (!showIntersections) return result;
+
+        if (!dynamicRendering) {
+            Object.entries(graphNodes).forEach(([id, node]) => {
+                if (node.type === 'intersection' && isNodeInViewport(node, viewport)) {
+                    result.add(id);
+                }
+            });
+            return result;
+        }
+
+        // Show all intersections at high zoom
+        if (zoomLevel >= ZOOM_LEVELS.HIGH) {
+            Object.entries(graphNodes).forEach(([id, node]) => {
+                if (node.type === 'intersection' && isNodeInViewport(node, viewport)) {
+                    result.add(id);
+                }
+            });
+            return result;
+        }
+
+        // At medium zoom, show a subset
+        if (zoomLevel >= ZOOM_LEVELS.MEDIUM) {
+            Object.entries(graphNodes).forEach(([id, node]) => {
+                if (node.type === 'intersection' && isNodeInViewport(node, viewport)) {
+                    // Show every 2nd intersection
+                    const nodeIndex = parseInt(id.replace(/\D/g, '') || '0', 10);
+                    if (nodeIndex % 2 === 0) {
+                        result.add(id);
+                    }
+                }
+            });
+            return result;
+        }
+
+        // At low zoom, show very few intersections
+        Object.entries(graphNodes).forEach(([id, node]) => {
+            if (node.type === 'intersection' && isNodeInViewport(node, viewport)) {
+                // Show only every 4th intersection
+                const nodeIndex = parseInt(id.replace(/\D/g, '') || '0', 10);
+                if (nodeIndex % 4 === 0) {
+                    result.add(id);
+                }
+            }
+        });
+
+        return result;
+    }, [calculateViewport, dynamicRendering, showIntersections, zoomLevel, isNodeInViewport]);
+
+    // Determine which walkways to show based on zoom level
+    const visibleWalkways = useMemo(() => {
+        const result = new Set<NodeId>();
+        const viewport = calculateViewport();
+
+        // Only process if walkways should be shown
+        if (!showWalkways) return result;
+
+        if (!dynamicRendering) {
+            Object.entries(graphNodes).forEach(([id, node]) => {
+                if (node.type === 'walkway' && isNodeInViewport(node, viewport)) {
+                    result.add(id);
+                }
+            });
+            return result;
+        }
+
+        // Show all walkways at high zoom
+        if (zoomLevel >= ZOOM_LEVELS.HIGH) {
+            Object.entries(graphNodes).forEach(([id, node]) => {
+                if (node.type === 'walkway' && isNodeInViewport(node, viewport)) {
+                    result.add(id);
+                }
+            });
+            return result;
+        }
+
+        // At medium zoom, show a subset
+        if (zoomLevel >= ZOOM_LEVELS.MEDIUM) {
+            Object.entries(graphNodes).forEach(([id, node]) => {
+                if (node.type === 'walkway' && isNodeInViewport(node, viewport)) {
+                    // Show every 3rd walkway
+                    const nodeIndex = parseInt(id.replace(/\D/g, '') || '0', 10);
+                    if (nodeIndex % 3 === 0) {
+                        result.add(id);
+                    }
+                }
+            });
+            return result;
+        }
+
+        // At low zoom, show very few walkways
+        Object.entries(graphNodes).forEach(([id, node]) => {
+            if (node.type === 'walkway' && isNodeInViewport(node, viewport)) {
+                // Show only every 5th walkway
+                const nodeIndex = parseInt(id.replace(/\D/g, '') || '0', 10);
+                if (nodeIndex % 5 === 0) {
+                    result.add(id);
+                }
+            }
+        });
+
+        return result;
+    }, [calculateViewport, dynamicRendering, showWalkways, zoomLevel, isNodeInViewport]);
+
+    // Determine if a node should be shown based on type and zoom level
+    const shouldShowNode = useCallback(
+        (type: NodeType, id: NodeId): boolean => {
+            // Always show selected buildings
+            if (id === selected.start || id === selected.end) return true;
+
+            switch (type) {
+                case 'building':
+                    return showBuildings && visibleBuildings.has(id);
+                case 'intersection':
+                    return visibleIntersections.has(id);
+                case 'walkway':
+                    return visibleWalkways.has(id);
+                default:
+                    return false;
+            }
+        },
+        [showBuildings, selected, visibleBuildings, visibleIntersections, visibleWalkways]
+    );
+
+    // Get the appropriate node size based on zoom level with maximum cap
+    const getNodeSize = useCallback(
+        (type: NodeType): number => {
+            const baseSize = type === 'building' ? 6 : 4;
+            const minSize = baseSize * 0.8; // Minimum size at low zoom
+            const maxSize = baseSize * 0.5; // Maximum size cap
+
+            // If below minimum zoom level
+            if (zoomLevel <= ZOOM_LEVELS.LOW) {
+                return minSize;
+            }
+
+            // If above maximum zoom level, cap the size
+            if (zoomLevel >= ZOOM_LEVELS.HIGH) {
+                return maxSize;
+            }
+
+            // Scale size gradually between LOW and HIGH zoom levels
+            const zoomRatio = (zoomLevel - ZOOM_LEVELS.LOW) / (ZOOM_LEVELS.HIGH - ZOOM_LEVELS.LOW);
+            return minSize + zoomRatio * (maxSize - minSize);
+        },
+        [zoomLevel]
+    );
+
+    // Get the appropriate text size based on zoom level with maximum cap
+    const getTextSize = useCallback((): number => {
+        const minSize = 12; // Minimum text size at low zoom
+        const maxSize = 8; // Maximum text size cap
+
+        // If below minimum zoom level
+        if (zoomLevel <= ZOOM_LEVELS.LOW) {
+            return minSize;
+        }
+
+        // If above maximum zoom level, cap the size
+        if (zoomLevel >= ZOOM_LEVELS.HIGH) {
+            return maxSize;
+        }
+
+        // Scale text size gradually between LOW and HIGH zoom levels
+        const zoomRatio = (zoomLevel - ZOOM_LEVELS.LOW) / (ZOOM_LEVELS.HIGH - ZOOM_LEVELS.LOW);
+        return minSize + zoomRatio * (maxSize - minSize);
+    }, [zoomLevel]);
+
+    // Determine if text should be shown for a node
+    const shouldShowText = useCallback(
+        (type: NodeType, id: NodeId): boolean => {
+            // If building text is disabled in dev controls, don't show any text
+            if (!showBuildingText) return false;
+
+            if (type !== 'building') return false;
+
+            // Always show text for selected buildings
+            if (id === selected.start || id === selected.end) return true;
+
+            // Show text based on zoom level
+            return zoomLevel >= ZOOM_LEVELS.LOW;
+        },
+        [zoomLevel, selected, showBuildingText]
+    );
+
+    // Zoom and pan handlers
+    const handleZoomIn = useCallback(() => {
+        setZoomLevel(prev => Math.min(prev * zoomStep, maxZoom));
+    }, []);
+
+    const handleZoomOut = useCallback(() => {
+        setZoomLevel(prev => Math.max(prev / zoomStep, minZoom));
+    }, []);
+
+    const handleResetZoomPan = useCallback(() => {
+        setZoomLevel(1);
+        setPanPosition({ x: 0, y: 0 });
+    }, []);
+
+    const handleWheel = useCallback((e: React.WheelEvent) => {
+        e.preventDefault();
+        if (e.deltaY < 0) {
+            setZoomLevel(prev => Math.min(prev * zoomStep, maxZoom));
+        } else {
+            setZoomLevel(prev => Math.max(prev / zoomStep, minZoom));
+        }
+    }, []);
+
+    const handleMouseDown = useCallback((e: React.MouseEvent) => {
+        if (e.button !== 0) return; // Only handle left mouse button
+        setIsDragging(true);
+        setDragStart({ x: e.clientX, y: e.clientY });
+    }, []);
+
+    const handleMouseMove = useCallback(
+        (e: React.MouseEvent) => {
+            if (!isDragging) return;
+
+            const dx = e.clientX - dragStart.x;
+            const dy = e.clientY - dragStart.y;
+
+            setPanPosition(prev => ({ x: prev.x + dx, y: prev.y + dy }));
+            setDragStart({ x: e.clientX, y: e.clientY });
+        },
+        [isDragging, dragStart]
+    );
+
+    const handleMouseUp = useCallback(() => {
+        setIsDragging(false);
+    }, []);
+
+    const handleMouseLeave = useCallback(() => {
+        setIsDragging(false);
+    }, []);
+
+    // Event handlers
+    const handleDaySelect = useCallback((day: DayCode) => {
+        setSelectedDay(prevDay => (prevDay === day ? null : day));
+        setHoveredPathIndex(null);
+        setToggledPathIndex(null);
+    }, []);
+
+    const handleBuildingSelect = useCallback((buildingId: NodeId) => {
+        setSelected(prev => {
+            if (!prev.start) return { ...prev, start: buildingId };
+            if (!prev.end) return { ...prev, end: buildingId };
+            return { start: buildingId, end: null };
+        });
+    }, []);
+
+    const handlePathClick = useCallback((index: number) => {
+        setToggledPathIndex(prevIndex => (prevIndex === index ? null : index));
+    }, []);
+
+    const shouldShowPath = useCallback(
+        (index: number) => {
+            if (hoveredPathIndex !== null) {
+                return hoveredPathIndex === index;
+            }
+            if (toggledPathIndex !== null) {
+                return toggledPathIndex === index;
+            }
+            return true;
+        },
+        [hoveredPathIndex, toggledPathIndex]
+    );
+
+    // Global mouse up handler
+    useEffect(() => {
+        const handleGlobalMouseUp = () => {
+            setIsDragging(false);
+        };
+
+        window.addEventListener('mouseup', handleGlobalMouseUp);
+        return () => {
+            window.removeEventListener('mouseup', handleGlobalMouseUp);
+        };
+    }, []);
+
+    return (
+        <div className='relative h-full w-full overflow-hidden' ref={mapContainerRef}>
+            {/* Map container with zoom and pan applied */}
+            <div
+                className={`relative h-full w-full ${isDragging ? 'cursor-grabbing' : 'cursor-grab'}`}
+                style={{
+                    transform: `scale(${zoomLevel}) translate(${panPosition.x / zoomLevel}px, ${panPosition.y / zoomLevel}px)`,
+                    transformOrigin: 'center center',
+                    transition: isDragging ? 'none' : 'transform 0.1s ease-out',
+                }}
+                onWheel={handleWheel}
+                onMouseDown={handleMouseDown}
+                onMouseMove={handleMouseMove}
+                onMouseUp={handleMouseUp}
+                onMouseLeave={handleMouseLeave}
+            >
+                {/* Map Image */}
+                <img src={UTMapURL} alt='UT Campus Map' className='h-full w-full object-contain' draggable={false} />
+
+                {/* SVG Overlay - ensuring it matches the image dimensions */}
+                <svg
+                    className='absolute left-0 top-0 h-full w-full'
+                    viewBox='0 0 783 753'
+                    preserveAspectRatio='xMidYMid meet'
+                >
+                    {/* Render buildings, intersections, and walkways */}
+                    {Object.entries(graphNodes).map(
+                        ([id, node]) =>
+                            shouldShowNode(node.type, id) && (
+                                <g key={id}>
+                                    <circle
+                                        cx={node.x}
+                                        cy={node.y}
+                                        r={getNodeSize(node.type)}
+                                        fill={
+                                            id === selected.start
+                                                ? '#579D42'
+                                                : id === selected.end
+                                                  ? '#D10000'
+                                                  : node.type === 'building'
+                                                    ? '#BF5700'
+                                                    : node.type === 'intersection'
+                                                      ? '#9CADB7'
+                                                      : '#D6D2C400'
+                                        }
+                                        stroke={node.type !== 'walkway' ? 'white' : 'green'}
+                                        strokeWidth={zoomLevel < ZOOM_LEVELS.MEDIUM ? '1.5' : '2'}
+                                        className='cursor-pointer opacity-90'
+                                        onClick={() => handleBuildingSelect(id)}
+                                    />
+                                    {node.type === 'building' && shouldShowText(node.type, id) && (
+                                        <text
+                                            x={node.x + 12}
+                                            y={node.y + 4}
+                                            fill='#000000'
+                                            fontSize={getTextSize()}
+                                            className='font-bold'
+                                            style={{
+                                                // Fade in text based on zoom level for smooth transition
+                                                opacity: zoomLevel < ZOOM_LEVELS.LOW ? zoomLevel / ZOOM_LEVELS.LOW : 1,
+                                            }}
+                                        >
+                                            {id}
+                                        </text>
+                                    )}
+                                </g>
+                            )
+                    )}
+
+                    {/* Render daily schedule paths */}
+                    {relevantPaths.map(
+                        (path, index) =>
+                            shouldShowPath(index) && (
+                                // eslint-disable-next-line react/no-array-index-key
+                                <g key={`${path.start}-${path.end}-${index}`}>
+                                    <Path
+                                        startId={path.start}
+                                        endId={path.end}
+                                        graph={graphNodes}
+                                        color={path.colors?.primaryColor || '#BF5700'}
+                                        className='stroke-4 opacity-50 transition-opacity duration-300 hover:opacity-80'
+                                    />
+                                    {path.timeBetweenClasses < 15 &&
+                                        (() => {
+                                            const midpoint = getMidpoint(path.start, path.end);
+                                            return midpoint ? (
+                                                <TimeWarningLabel
+                                                    x={midpoint.x}
+                                                    y={midpoint.y}
+                                                    minutes={path.timeBetweenClasses}
+                                                />
+                                            ) : null;
+                                        })()}
+                                </g>
+                            )
+                    )}
+
+                    {/* Render user-selected path */}
+                    {selected.start && selected.end && (
+                        <Path
+                            startId={selected.start}
+                            endId={selected.end}
+                            graph={graphNodes}
+                            color='#BF5700'
+                            className='opacity-75 transition-opacity duration-300 hover:opacity-100'
+                        />
+                    )}
+                </svg>
+            </div>
+
+            {/* Fixed position controls that don't move with zoom/pan */}
+            <div className='absolute left-8 top-8 z-10 flex flex-col gap-4'>
+                {/* Day Selector */}
+                <DaySelector selectedDay={selectedDay} onDaySelect={handleDaySelect} />
+
+                {/* Zoom and Pan Controls */}
+                <ZoomPanControls
+                    zoomIn={handleZoomIn}
+                    zoomOut={handleZoomOut}
+                    resetZoomPan={handleResetZoomPan}
+                    zoomLevel={zoomLevel}
+                />
+
+                {/* Fullscreen Button */}
+                <FullscreenButton containerRef={mapContainerRef} />
+
+                {/* Dev Toggles */}
+                <DevToggles
+                    dynamicRendering={dynamicRendering}
+                    showBuildings={showBuildings}
+                    showIntersections={showIntersections}
+                    showWalkways={showWalkways}
+                    showBuildingText={showBuildingText}
+                    showPrioritizedOnly={showPrioritizedOnly}
+                    onToggleDynamicRendering={() => setDynamicRendering(prev => !prev)}
+                    onToggleBuildings={() => setShowBuildings(prev => !prev)}
+                    onToggleIntersections={() => setShowIntersections(prev => !prev)}
+                    onToggleWalkways={() => setShowWalkways(prev => !prev)}
+                    onToggleBuildingText={() => setShowBuildingText(prev => !prev)}
+                    onTogglePrioritizedOnly={() => setShowPrioritizedOnly(prev => !prev)}
+                />
+            </div>
+
+            {/* Path information */}
+            <div className='absolute right-8 top-8 z-10 max-h-[calc(100vh-120px)] flex flex-col gap-4 overflow-y-auto'>
+                {/* Path Statistics - show when a path is selected */}
+                {selected.start && selected.end && <PathStats startId={selected.start} endId={selected.end} />}
+
+                {/* Daily Paths Statistics - show when day is selected */}
+                {relevantPaths.length > 0 && (
+                    <div className='rounded-md bg-white/90 p-3 shadow-sm'>
+                        <div className='mb-2'>
+                            <p className='text-sm font-medium'>Daily Transitions</p>
+                            <p className='text-xs text-gray-600'>
+                                Total time:{' '}
+                                {relevantPaths.reduce(
+                                    (total, path) =>
+                                        total +
+                                        (calcDirectPathStats({ startId: path.start, endId: path.end })
+                                            ?.walkingTimeMinutes || 0),
+                                    0
+                                )}{' '}
+                                min
+                            </p>
+                            <p className='text-xs text-gray-600'>
+                                Total distance:{' '}
+                                {relevantPaths.reduce(
+                                    (total, path) =>
+                                        total +
+                                        (calcDirectPathStats({ startId: path.start, endId: path.end })
+                                            ?.distanceInFeet || 0),
+                                    0
+                                )}{' '}
+                                ft
+                            </p>
+                        </div>
+                        <div className='space-y-4'>
+                            {relevantPaths.map((path, index) => (
+                                <div
+                                    // eslint-disable-next-line react/no-array-index-key
+                                    key={`path-info-${index}`}
+                                    className={`cursor-pointer space-y-1 text-xs transition-colors duration-200 ${
+                                        toggledPathIndex === index ? 'bg-gray-100' : ''
+                                    }`}
+                                    style={{
+                                        borderLeft: `3px solid ${path.colors?.primaryColor || '#BF5700'}`,
+                                    }}
+                                    onMouseEnter={() => setHoveredPathIndex(index)}
+                                    onMouseLeave={() => setHoveredPathIndex(null)}
+                                    onClick={() => handlePathClick(index)}
+                                >
+                                    <p className='ml-2'>{path.startCourseName}</p>
+                                    <p className='ml-2'>
+                                        (
+                                        {
+                                            calcDirectPathStats({ startId: path.start, endId: path.end })
+                                                ?.walkingTimeMinutes
+                                        }{' '}
+                                        min,{' '}
+                                        {calcDirectPathStats({ startId: path.start, endId: path.end })?.distanceInFeet}{' '}
+                                        ft)
+                                        {' - '}
+                                        {path.timeBetweenClasses} min transition
+                                        {path.timeBetweenClasses < 15 && ' ⚠️'}
+                                    </p>
+                                    <p className='ml-2'>{path.endCourseName}</p>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

src/views/components/map/DaySelector.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { Button } from '../common/Button';
+import type { DayCode } from './types';
+import { DAY_MAPPING } from './types';
+
+interface DaySelectorProps {
+    selectedDay: DayCode | null;
+    onDaySelect: (day: DayCode) => void;
+}
+
+/**
+ * DaySelector component allows users to select a day from a list of days.
+ *
+ * @param selectedDay - The currently selected day.
+ * @param onDaySelect - Callback function to handle day selection.
+ *
+ * @returns The rendered DaySelector component.
+ */
+// const DaySelector = ({ selectedDay, onDaySelect }: DaySelectorProps): JSX.Element => (
+export default function DaySelector({ selectedDay, onDaySelect }: DaySelectorProps): JSX.Element {
+    return (
+        <div className='flex gap-2 rounded-md bg-white/90 p-2 shadow-sm'>
+            {(Object.keys(DAY_MAPPING) as DayCode[]).map(day => (
+                <Button
+                    key={day}
+                    onClick={() => onDaySelect(day)}
+                    color='ut-burntorange'
+                    variant={selectedDay === day ? 'filled' : 'minimal'}
+                    size='mini'
+                    className='px-3 py-1'
+                >
+                    {day}
+                </Button>
+            ))}
+        </div>
+    );
+}

src/views/components/map/DevToggles.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+
+interface DevTogglesProps {
+    dynamicRendering: boolean;
+    showBuildings: boolean;
+    showIntersections: boolean;
+    showWalkways: boolean;
+    showBuildingText: boolean;
+    showPrioritizedOnly: boolean;
+    onToggleDynamicRendering: () => void;
+    onToggleBuildings: () => void;
+    onToggleIntersections: () => void;
+    onToggleWalkways: () => void;
+    onToggleBuildingText: () => void;
+    onTogglePrioritizedOnly: () => void;
+}
+
+/**
+ * DevToggles component allows developers to toggle visibility of map elements.
+ *
+ * @param dynamicRendering - Whether to enable dynamic rendering.
+ * @param showBuildings - Whether to show buildings on the map.
+ * @param showIntersections - Whether to show intersections on the map.
+ * @param showWalkways - Whether to show walkways on the map.
+ * @param onToggleDynamicRendering - Callback function to toggle dynamic rendering.
+ * @param onToggleBuildings - Callback function to toggle buildings visibility.
+ * @param onToggleIntersections - Callback function to toggle intersections visibility.
+ * @param onToggleWalkways - Callback function to toggle walkways visibility.
+ *
+ * @returns The rendered DevToggles component.
+ */
+export default function DevToggles({
+    dynamicRendering,
+    showBuildings,
+    showIntersections,
+    showWalkways,
+    showBuildingText,
+    showPrioritizedOnly,
+    onToggleDynamicRendering,
+    onToggleBuildings,
+    onToggleIntersections,
+    onToggleWalkways,
+    onToggleBuildingText,
+    onTogglePrioritizedOnly,
+}: DevTogglesProps): JSX.Element {
+    const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
+
+    return (
+        <div className='flex flex-col gap-2 rounded-md bg-white/90 p-2 shadow-sm'>
+            <div className='flex items-center justify-between text-xs text-gray-700 font-semibold'>
+                <span>Dev Controls</span>
+                <button
+                    onClick={() => setIsCollapsed(prev => !prev)}
+                    className='ml-2 p-1 text-gray-500 hover:text-gray-800'
+                >
+                    <svg
+                        xmlns='http://www.w3.org/2000/svg'
+                        width='14'
+                        height='14'
+                        viewBox='0 0 24 24'
+                        fill='none'
+                        stroke='currentColor'
+                        strokeWidth='2'
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                    >
+                        {isCollapsed ? <polyline points='6 9 12 15 18 9' /> : <polyline points='18 15 12 9 6 15' />}
+                    </svg>
+                </button>
+            </div>
+            {!isCollapsed && (
+                <div className='flex flex-col gap-1'>
+                    <label className='flex cursor-pointer items-center gap-2 text-xs'>
+                        <input type='checkbox' checked={dynamicRendering} onChange={onToggleDynamicRendering} />
+                        Dynamic Rendering
+                    </label>
+                    <label className='flex cursor-pointer items-center gap-2 text-xs'>
+                        <input type='checkbox' checked={showBuildings} onChange={onToggleBuildings} />
+                        Show Buildings
+                    </label>
+                    <label className='flex cursor-pointer items-center gap-2 text-xs'>
+                        <input type='checkbox' checked={showBuildingText} onChange={onToggleBuildingText} />
+                        Show Building Text
+                    </label>
+                    <label className='flex cursor-pointer items-center gap-2 text-xs'>
+                        <input type='checkbox' checked={showPrioritizedOnly} onChange={onTogglePrioritizedOnly} />
+                        Prioritized Buildings Only
+                    </label>
+                    <label className='flex cursor-pointer items-center gap-2 text-xs'>
+                        <input type='checkbox' checked={showIntersections} onChange={onToggleIntersections} />
+                        Show Intersections
+                    </label>
+                    <label className='flex cursor-pointer items-center gap-2 text-xs'>
+                        <input type='checkbox' checked={showWalkways} onChange={onToggleWalkways} />
+                        Show Walkways
+                    </label>
+                </div>
+            )}
+        </div>
+    );
+}

src/views/components/map/FullscreenButton.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react';
+
+import { Button } from '../common/Button';
+
+interface FullscreenButtonProps {
+    containerRef: React.RefObject<HTMLDivElement>;
+}
+
+/**
+ * FullscreenButton component provides a toggle for fullscreen mode
+ *
+ * @param containerRef - Reference to the container element to make fullscreen.
+ *
+ * @returns The rendered FullscreenButton component.
+ */
+export default function FullscreenButton({ containerRef }: FullscreenButtonProps): JSX.Element {
+    const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
+
+    useEffect(() => {
+        const handleFullscreenChange = () => {
+            setIsFullscreen(!!document.fullscreenElement);
+        };
+
+        document.addEventListener('fullscreenchange', handleFullscreenChange);
+        return () => {
+            document.removeEventListener('fullscreenchange', handleFullscreenChange);
+        };
+    }, []);
+
+    const toggleFullscreen = () => {
+        if (!document.fullscreenElement && containerRef.current) {
+            containerRef.current.requestFullscreen().catch(err => {
+                console.error(`Error attempting to enable fullscreen: ${err.message}`);
+            });
+        } else if (document.fullscreenElement) {
+            document.exitFullscreen().catch(err => {
+                console.error(`Error attempting to exit fullscreen: ${err.message}`);
+            });
+        }
+    };
+
+    return (
+        <div className='rounded-md bg-white/90 p-2 shadow-sm'>
+            <Button
+                onClick={toggleFullscreen}
+                color='ut-burntorange'
+                variant='minimal'
+                size='mini'
+                className='flex items-center gap-1 px-3 py-1'
+            >
+                <svg
+                    xmlns='http://www.w3.org/2000/svg'
+                    width='16'
+                    height='16'
+                    viewBox='0 0 24 24'
+                    fill='none'
+                    stroke='currentColor'
+                    strokeWidth='2'
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                >
+                    {isFullscreen ? (
+                        <path d='M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3' />
+                    ) : (
+                        <path d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3' />
+                    )}
+                </svg>
+                {isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
+            </Button>
+        </div>
+    );
+}

src/views/components/map/Map.tsx

@@ -0,0 +1,287 @@
+import type { Course, StatusType } from '@shared/types/Course';
+import type { CourseMeeting } from '@shared/types/CourseMeeting';
+import { Button } from '@views/components/common/Button';
+import Divider from '@views/components/common/Divider';
+import { LargeLogo } from '@views/components/common/LogoIcon';
+import Text from '@views/components/common/Text/Text';
+import useChangelog from '@views/hooks/useChangelog';
+import useSchedules from '@views/hooks/useSchedules';
+import React, { useCallback, useEffect } from 'react';
+
+import IconoirGitFork from '~icons/iconoir/git-fork';
+
+import CalendarFooter from '../calendar/CalendarFooter';
+import { CalendarSchedules } from '../calendar/CalendarSchedules';
+import ImportantLinks from '../calendar/ImportantLinks';
+import TeamLinks from '../calendar/TeamLinks';
+import CampusMap from './CampusMap';
+import { type DAY, DAYS } from './types';
+
+const manifest = chrome.runtime.getManifest();
+const LDIconURL = new URL('/src/assets/LD-icon.png', import.meta.url).href;
+
+const dayToNumber = {
+    Monday: 0,
+    Tuesday: 1,
+    Wednesday: 2,
+    Thursday: 3,
+    Friday: 4,
+    Saturday: 5,
+    Sunday: 6,
+} as const satisfies Record<string, number>;
+
+/**
+ * Represents the details of an in-person meeting process.
+ *
+ * day - The day of the meeting.
+ * dayIndex - The index of the day in the week.
+ * fullName - The full name of the person.
+ * uid - The unique identifier of the person.
+ * time - The time of the meeting.
+ * normalizedStartTime - The normalized start time of the meeting.
+ * normalizedEndTime - The normalized end time of the meeting.
+ * startIndex - The start index of the meeting.
+ * endIndex - The end index of the meeting.
+ * location - The location of the meeting.
+ * status - The status of the meeting.
+ * colors - The colors associated with the course.
+ * course - The course details.
+ */
+export type ProcessInPersonMeetings = {
+    day: DAY;
+    dayIndex: number;
+    fullName: string;
+    uid: number;
+    time: string;
+    normalizedStartTime: number;
+    normalizedEndTime: number;
+    startIndex: number;
+    endIndex: number;
+    location: CourseMeeting['location'];
+    status: StatusType;
+    colors: Course['colors'];
+    course: Course;
+};
+
+/**
+ * Converts minutes to an index value.
+ * @param minutes - The number of minutes.
+ * @returns The index value.
+ */
+const convertMinutesToIndex = (minutes: number): number => Math.floor((minutes - 420) / 30);
+
+/**
+ * Renders the map component for the UTRP (UT Registration Plus) extension.
+ */
+export default function Map(): JSX.Element {
+    const handleChangelogOnClick = useChangelog();
+    const [activeSchedule] = useSchedules();
+
+    /**
+     * Function to extract and format basic course information
+     */
+    function extractCourseInfo(course: Course) {
+        const {
+            status,
+            schedule: { meetings },
+        } = course;
+
+        let courseDeptAndInstr = `${course.department} ${course.number}`;
+
+        const mainInstructor = course.instructors[0];
+        if (mainInstructor) {
+            courseDeptAndInstr += ` – ${mainInstructor.toString({ format: 'first_last' })}`;
+        }
+
+        return { status, courseDeptAndInstr, meetings, course };
+    }
+
+    // /**
+    //  * Function to process each in-person class into its distinct meeting objects for calendar grid
+    //  */
+    // function processAsyncCourses({
+    //     courseDeptAndInstr,
+    //     status,
+    //     course,
+    // }: {
+    //     courseDeptAndInstr: string;
+    //     status: StatusType;
+    //     course: Course;
+    // }): CalendarGridCourse[] {
+    //     return [
+    //         {
+    //             calendarGridPoint: {
+    //                 dayIndex: -1,
+    //                 startIndex: -1,
+    //                 endIndex: -1,
+    //             },
+    //             componentProps: {
+    //                 courseDeptAndInstr,
+    //                 status,
+    //                 colors: course.colors,
+    //             },
+    //             course,
+    //             async: true,
+    //         },
+    //     ];
+    // }
+
+    /**
+     * Function to process each in-person class into its distinct meeting objects for calendar grid
+     */
+    function processInPersonMeetings(
+        meeting: CourseMeeting,
+        courseDeptAndInstr: string,
+        status: StatusType,
+        course: Course
+    ) {
+        const { days, location, startTime, endTime } = meeting;
+        const time = meeting.getTimeString({ separator: '-' });
+        const timeAndLocation = `${time}${location ? ` - ${location.building} ${location.room}` : ''}`;
+
+        const midnightIndex = 1440;
+        const normalizingTimeFactor = 720;
+        const normalizedStartTime = startTime >= midnightIndex ? startTime - normalizingTimeFactor : startTime;
+        const normalizedEndTime = endTime >= midnightIndex ? endTime - normalizingTimeFactor : endTime;
+
+        return days.map(day => ({
+            day,
+            dayIndex: dayToNumber[day],
+            // fullName: `${courseDeptAndInstr} - ${timeAndLocation}`,
+            fullName: `${timeAndLocation} - ${courseDeptAndInstr}`,
+            uid: course.uniqueId,
+            time,
+            normalizedStartTime,
+            normalizedEndTime,
+            startIndex: convertMinutesToIndex(normalizedStartTime),
+            endIndex: convertMinutesToIndex(normalizedEndTime),
+            location,
+            status,
+            colors: course.colors,
+            course,
+        }));
+    }
+
+    const processedCourses: ProcessInPersonMeetings[] = activeSchedule.courses.flatMap(course => {
+        const { status, courseDeptAndInstr, meetings } = extractCourseInfo(course);
+
+        // if (meetings.length === 0) {
+        //     return processAsyncCourses({ courseDeptAndInstr, status, course });
+        // }
+
+        return meetings.flatMap(meeting =>
+            // if (meeting.days.includes(DAY_MAP.S) || meeting.startTime < 480) {
+            //     return processAsyncCourses({ courseDeptAndInstr, status, course });
+            // }
+
+            processInPersonMeetings(meeting, courseDeptAndInstr, status, course)
+        );
+    });
+
+    const generateWeekSchedule = useCallback((): Record<DAY, string[]> => {
+        const weekSchedule: Record<string, string[]> = {};
+
+        processedCourses.forEach(course => {
+            const { day } = course;
+
+            // Add the course to the day's schedule
+            if (!weekSchedule[day]) weekSchedule[day] = [];
+            weekSchedule[day].push(course.fullName);
+        });
+
+        // TODO: Not the best way to do this
+        // currently weekSchedule is an object with keys as days and values as an array of courses
+        // we want to display the days in order, so we create a new object with the days in order
+
+        const orderedWeekSchedule: Record<DAY, string[]> = {
+            Monday: [],
+            Tuesday: [],
+            Wednesday: [],
+            Thursday: [],
+            Friday: [],
+            Saturday: [],
+            Sunday: [],
+        };
+
+        DAYS.forEach(day => {
+            if (weekSchedule[day]) {
+                orderedWeekSchedule[day] = weekSchedule[day];
+            }
+        });
+
+        // Sort each day based on the start time of the course
+        Object.entries(orderedWeekSchedule).forEach(([day, courses]) => {
+            orderedWeekSchedule[day as DAY] = courses.sort((courseA, courseB) => {
+                const courseAStartTime = processedCourses.find(
+                    course => course.fullName === courseA
+                )?.normalizedStartTime;
+                const courseBStartTime = processedCourses.find(
+                    course => course.fullName === courseB
+                )?.normalizedStartTime;
+
+                return (courseAStartTime ?? 0) - (courseBStartTime ?? 0);
+            });
+        });
+
+        return orderedWeekSchedule;
+    }, [processedCourses]);
+
+    useEffect(() => {
+        console.log('Active Schedule: ', activeSchedule);
+        console.log('processedCourses:', processedCourses);
+        console.log('generateWeekSchedule():', generateWeekSchedule());
+    }, [activeSchedule, processedCourses, generateWeekSchedule]);
+
+    return (
+        <div>
+            <header className='flex items-center gap-5 overflow-x-auto overflow-y-hidden border-b border-ut-offwhite px-7 py-4 md:overflow-x-hidden'>
+                <LargeLogo />
+                <Divider className='mx-2 self-center md:mx-4' size='2.5rem' orientation='vertical' />
+                <Text variant='h1' className='flex-1 text-ut-burntorange'>
+                    UTRP Map
+                </Text>
+                <div className='hidden flex-row items-center justify-end gap-6 screenshot:hidden lg:flex'>
+                    <Button variant='minimal' color='theme-black' onClick={handleChangelogOnClick}>
+                        <IconoirGitFork className='h-6 w-6 text-ut-gray' />
+                        <Text variant='small' className='text-ut-gray font-normal'>
+                            v{manifest.version} - {process.env.NODE_ENV}
+                        </Text>
+                    </Button>
+                    <img src={LDIconURL} alt='LD Icon' className='h-10 w-10 rounded-lg' />
+                </div>
+            </header>
+            <div className='h-full flex flex-row'>
+                <div className='h-full flex flex-none flex-col justify-between pb-5 screenshot:hidden'>
+                    <div className='mb-3 h-full w-fit flex flex-col overflow-auto pb-2 pl-4.5 pr-4 pt-5'>
+                        <CalendarSchedules />
+                        <Divider orientation='horizontal' size='100%' className='my-5' />
+                        <ImportantLinks />
+                        <Divider orientation='horizontal' size='100%' className='my-5' />
+                        <TeamLinks />
+                    </div>
+                    <CalendarFooter />
+                </div>
+                <div className='flex p-12'>
+                    <CampusMap processedCourses={processedCourses} />
+                </div>
+
+                {/* Show week schedule */}
+                <div className='flex flex-col py-12'>
+                    <p className='text-lg font-medium'>Week Schedule:</p>
+                    {Object.entries(generateWeekSchedule()).map(([day, courses]) => (
+                        <div key={day} className='flex flex-col pb-4'>
+                            <p className='text-sm font-medium'>{day}</p>
+                            <ul>
+                                {courses.map(course => (
+                                    <li key={course} className='text-xs'>
+                                        {course}
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}

src/views/components/map/Path.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { PathFinder } from './PathFinder';
+import { type Graph, isValidNode, type NodeId } from './types';
+
+type PathProps = {
+    startId: NodeId;
+    endId: NodeId;
+    graph: Graph;
+    color: string;
+    className?: string;
+};
+
+/**
+ * Renders a path between two nodes in a graph.
+ *
+ * @param startId - The ID of the starting node.
+ * @param endId - The ID of the ending node.
+ * @param graph - The graph object containing nodes and edges.
+ * @param color - The color of the path.
+ * @param className - Additional CSS classes for the path.
+ *
+ * @returns The rendered path as a series of SVG lines, or null if an error occurs.
+ */
+export const Path = ({ startId, endId, graph, color, className = '' }: PathProps): JSX.Element | null => {
+    try {
+        const pathFinder = new PathFinder(graph);
+        const path = pathFinder.findPath(startId, endId);
+
+        return (
+            <>
+                {path.slice(0, -1).map((nodeId, index) => {
+                    const nextNodeId = path[index + 1];
+                    if (!nextNodeId) return null;
+
+                    const start = graph[nodeId];
+                    const end = graph[nextNodeId];
+
+                    if (!isValidNode(start) || !isValidNode(end)) return null;
+
+                    return (
+                        <line
+                            key={`${nodeId}-${nextNodeId}`}
+                            x1={start.x}
+                            y1={start.y}
+                            x2={end.x}
+                            y2={end.y}
+                            strokeLinecap='round'
+                            stroke={color}
+                            // TODO: use clsx
+                            className={`stroke-8 ${className} opacity-50`}
+                        />
+                    );
+                })}
+            </>
+        );
+    } catch (error) {
+        console.error('Error rendering path:', error instanceof Error ? error.message : 'Unknown error');
+        return null;
+    }
+};

src/views/components/map/PathFinder.ts

@@ -0,0 +1,193 @@
+/* eslint-disable max-classes-per-file */
+import {
+    DIRECT_PATH_THRESHOLD,
+    type DistanceMap,
+    type Graph,
+    isValidNode,
+    type MapNode,
+    NEIGHBOR_DISTANCE_THRESHOLD,
+    type NodeId,
+    type PreviousMap,
+} from './types';
+import { calculateDistance, getNeighbors } from './utils';
+
+/**
+ * Custom error class for handling pathfinding errors.
+ */
+export class PathFindingError extends Error {
+    constructor(message: string) {
+        super(message);
+        this.name = 'PathFindingError';
+    }
+}
+
+/**
+ * The `PathFinder` class is responsible for finding the shortest path between nodes in a graph.
+ * It uses Dijkstra's algorithm to compute the shortest path and supports bidirectional connections.
+ */
+export class PathFinder {
+    private graph: Graph;
+    private nodeConnections: Map<NodeId, Set<NodeId>>;
+
+    constructor(graph: Graph) {
+        this.graph = graph;
+        this.nodeConnections = this.buildNodeConnections();
+    }
+
+    private buildNodeConnections(): Map<NodeId, Set<NodeId>> {
+        const connections = new Map<NodeId, Set<NodeId>>();
+
+        // Initialize connections for each node
+        Object.keys(this.graph).forEach(nodeId => {
+            connections.set(nodeId, new Set<NodeId>());
+        });
+
+        // Build bidirectional connections
+        Object.keys(this.graph).forEach(nodeId => {
+            const neighbors = getNeighbors(nodeId, this.graph);
+            neighbors.forEach(neighbor => {
+                connections.get(nodeId)?.add(neighbor);
+                connections.get(neighbor)?.add(nodeId);
+            });
+        });
+
+        return connections;
+    }
+
+    public findPath(startId: NodeId, endId: NodeId): NodeId[] {
+        const startNode = this.graph[startId];
+        const endNode = this.graph[endId];
+
+        // Validate input
+        if (!isValidNode(startNode)) {
+            throw new PathFindingError(`Invalid start node: ${startId}`);
+        }
+        if (!isValidNode(endNode)) {
+            throw new PathFindingError(`Invalid end node: ${endId}`);
+        }
+
+        // Check for direct path possibility
+        if (this.shouldUseDirectPath(startNode, endNode)) {
+            return [startId, endId];
+        }
+
+        // Initialize Dijkstra's algorithm data structures
+        const distances = Object.keys(this.graph).reduce<DistanceMap>((acc, nodeId) => {
+            acc[nodeId] = nodeId === startId ? 0 : Infinity;
+            return acc;
+        }, {});
+
+        const previous = Object.keys(this.graph).reduce<PreviousMap>((acc, nodeId) => {
+            acc[nodeId] = null;
+            return acc;
+        }, {});
+
+        const unvisited = new Set(Object.keys(this.graph));
+
+        // Main Dijkstra's algorithm loop
+        while (unvisited.size > 0) {
+            const current = this.getMinDistanceNode(distances, unvisited);
+            if (current === null) break;
+
+            if (current === endId) break;
+
+            unvisited.delete(current);
+
+            // Use pre-computed connections
+            const neighbors = this.nodeConnections.get(current) ?? new Set<NodeId>();
+            neighbors.forEach(neighbor => {
+                if (!unvisited.has(neighbor)) return;
+
+                const currentNode = this.graph[current];
+                const neighborNode = this.graph[neighbor];
+
+                if (!isValidNode(currentNode) || !isValidNode(neighborNode)) return;
+
+                const distance = calculateDistance(currentNode, neighborNode);
+                const totalDistance = distances[current]! + distance;
+
+                if (totalDistance < distances[neighbor]!) {
+                    distances[neighbor] = totalDistance;
+                    previous[neighbor] = current;
+                }
+            });
+        }
+
+        // Reconstruct and validate path
+        const path = this.reconstructPath(previous, startId, endId);
+
+        // Verify path distance is reasonable
+        const totalPathDistance = this.calculatePathDistance(path);
+        if (totalPathDistance > NEIGHBOR_DISTANCE_THRESHOLD * path.length) {
+            console.warn(`Long path detected (${totalPathDistance.toFixed(2)} units) from ${startId} to ${endId}`);
+        }
+
+        return path;
+    }
+
+    private calculatePathDistance(path: NodeId[]): number {
+        let totalDistance = 0;
+        for (let i = 0; i < path.length - 1; i++) {
+            const currentNode = this.graph[path[i]!];
+            const nextNode = this.graph[path[i + 1]!];
+            if (isValidNode(currentNode) && isValidNode(nextNode)) {
+                totalDistance += calculateDistance(currentNode, nextNode);
+            }
+        }
+        return totalDistance;
+    }
+
+    private shouldUseDirectPath(start: MapNode, end: MapNode): boolean {
+        const distance = calculateDistance(start, end);
+        return distance <= DIRECT_PATH_THRESHOLD;
+    }
+
+    private getMinDistanceNode(distances: DistanceMap, unvisited: Set<NodeId>): NodeId | null {
+        let minDistance = Infinity;
+        let minNode: NodeId | null = null;
+
+        unvisited.forEach(nodeId => {
+            const distance = distances[nodeId] ?? Infinity;
+            if (distance < minDistance) {
+                minDistance = distance;
+                minNode = nodeId;
+            }
+        });
+
+        return minNode;
+    }
+
+    private reconstructPath(previous: PreviousMap, startId: NodeId, endId: NodeId): NodeId[] {
+        const path: NodeId[] = [];
+        let currentNode: NodeId | null = endId;
+
+        // Keep track of visited nodes to prevent infinite loops
+        const visited = new Set<NodeId>();
+
+        while (currentNode !== null) {
+            // Prevent infinite loops
+            if (visited.has(currentNode)) {
+                throw new PathFindingError('Circular path detected during reconstruction');
+            }
+            visited.add(currentNode);
+
+            path.unshift(currentNode);
+            const prevNode: NodeId | null = previous[currentNode] ?? null;
+
+            // If we can't find the previous node and we haven't reached the start,
+            // then the path is broken
+            if (prevNode === undefined) {
+                throw new PathFindingError('Path reconstruction failed: broken path chain');
+            }
+
+            currentNode = prevNode;
+        }
+
+        // Verify that we actually found a path to the start
+        if (path[0] !== startId) {
+            throw new PathFindingError('No valid path found between the specified nodes');
+        }
+
+        return path;
+    }
+}

src/views/components/map/PathStats.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+
+import { graphNodes } from './graphNodes';
+import { isValidNode, PIXELS_TO_FEET, WALKING_SPEED } from './types';
+
+type PathStatsProps = {
+    startId: string;
+    endId: string;
+};
+
+/**
+ * Calculates the direct path statistics between two nodes.
+ *
+ * @param startId - The ID of the starting node.
+ * @param endId - The ID of the ending node.
+ *
+ * @returns The distance in feet and walking time in minutes between the two nodes.
+ */
+export const calcDirectPathStats = ({ startId, endId }: PathStatsProps) => {
+    const startNode = graphNodes[startId];
+    const endNode = graphNodes[endId];
+
+    if (!isValidNode(startNode) || !isValidNode(endNode)) {
+        return null;
+    }
+
+    // Calculate distance in pixels
+    const distanceInPixels = Math.sqrt((endNode.x - startNode.x) ** 2 + (endNode.y - startNode.y) ** 2);
+
+    // Convert to feet and calculate time
+    const distanceInFeet = Math.round(distanceInPixels * PIXELS_TO_FEET);
+    const walkingTimeMinutes = Math.ceil(distanceInFeet / WALKING_SPEED);
+
+    return {
+        distanceInFeet,
+        walkingTimeMinutes,
+    };
+};
+
+/**
+ * Component to display statistics about a path between two nodes on a map.
+ *
+ * @param startId - The ID of the starting node.
+ * @param endId - The ID of the ending node.
+ *
+ * @returns A JSX element displaying the path statistics, or null if the nodes are invalid.
+ */
+export const PathStats = ({ startId, endId }: PathStatsProps): JSX.Element | null => {
+    const startNode = graphNodes[startId];
+    const endNode = graphNodes[endId];
+
+    if (!isValidNode(startNode) || !isValidNode(endNode)) {
+        return null;
+    }
+
+    // Calculate distance in pixels
+    const distanceInPixels = Math.sqrt((endNode.x - startNode.x) ** 2 + (endNode.y - startNode.y) ** 2);
+
+    // Convert to feet and calculate time
+    const distanceInFeet = Math.round(distanceInPixels * PIXELS_TO_FEET);
+    const walkingTimeMinutes = Math.ceil(distanceInFeet / WALKING_SPEED);
+
+    return (
+        <div className='rounded-md bg-white/90 p-3 shadow-sm space-y-2'>
+            <h3 className='text-sm font-medium'>Path Statistics</h3>
+            <div className='space-y-1'>
+                <div className='flex justify-between text-xs'>
+                    <span>Distance:</span>
+                    <span className='font-medium'>{distanceInFeet} ft</span>
+                </div>
+                <div className='flex justify-between text-xs'>
+                    <span>Walking Time:</span>
+                    <span className='font-medium'>{walkingTimeMinutes} min</span>
+                </div>
+                <div className='flex justify-between text-xs'>
+                    <span>From:</span>
+                    <span className='font-medium'>{startId}</span>
+                </div>
+                <div className='flex justify-between text-xs'>
+                    <span>To:</span>
+                    <span className='font-medium'>{endId}</span>
+                </div>
+            </div>
+        </div>
+    );
+};

src/views/components/map/TimeWarningLabel.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+interface TimeWarningLabelProps {
+    x: number;
+    y: number;
+    minutes: number;
+}
+
+/**
+ * TimeWarningLabel component that renders a warning label on a map.
+ * The label consists of a circle with a text inside it, indicating the number of minutes.
+ *
+ * @param x - The x-coordinate for the center of the circle.
+ * @param y - The y-coordinate for the center of the circle.
+ * @param minutes - The number of minutes to display inside the circle.
+ *
+ * @returns A JSX element representing the warning label.
+ */
+export default function TimeWarningLabel({ x, y, minutes }: TimeWarningLabelProps): JSX.Element {
+    return (
+        <g>
+            <circle cx={x} cy={y} r={12} fill='white' stroke='#FF4444' strokeWidth={2} />
+            <text
+                x={x}
+                y={y}
+                textAnchor='middle'
+                dominantBaseline='middle'
+                fill='#FF4444'
+                fontSize='10'
+                fontWeight='bold'
+            >
+                {minutes}&apos;
+            </text>
+        </g>
+    );
+}

src/views/components/map/ZoomPanControls.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import { Button } from '../common/Button';
+
+interface ZoomPanControlsProps {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetZoomPan: () => void;
+    zoomLevel: number;
+}
+
+/**
+ * ZoomPanControls component provides buttons for zooming and panning.
+ *
+ * @param zoomIn - Function to zoom in the map.
+ * @param zoomOut - Function to zoom out the map.
+ * @param resetZoomPan - Function to reset zoom and pan to default.
+ * @param zoomLevel - Current zoom level.
+ *
+ * @returns The rendered ZoomPanControls component.
+ */
+export default function ZoomPanControls({
+    zoomIn,
+    zoomOut,
+    resetZoomPan,
+    zoomLevel,
+}: ZoomPanControlsProps): JSX.Element {
+    return (
+        <div className='flex gap-2 rounded-md bg-white/90 p-2 shadow-sm'>
+            <Button onClick={zoomIn} color='ut-burntorange' variant='minimal' size='mini' className='px-3 py-1'>
+                <svg
+                    xmlns='http://www.w3.org/2000/svg'
+                    width='16'
+                    height='16'
+                    viewBox='0 0 24 24'
+                    fill='none'
+                    stroke='currentColor'
+                    strokeWidth='2'
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                >
+                    <circle cx='11' cy='11' r='8' />
+                    <line x1='21' y1='21' x2='16.65' y2='16.65' />
+                    <line x1='11' y1='8' x2='11' y2='14' />
+                    <line x1='8' y1='11' x2='14' y2='11' />
+                </svg>
+            </Button>
+            <Button onClick={zoomOut} color='ut-burntorange' variant='minimal' size='mini' className='px-3 py-1'>
+                <svg
+                    xmlns='http://www.w3.org/2000/svg'
+                    width='16'
+                    height='16'
+                    viewBox='0 0 24 24'
+                    fill='none'
+                    stroke='currentColor'
+                    strokeWidth='2'
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                >
+                    <circle cx='11' cy='11' r='8' />
+                    <line x1='21' y1='21' x2='16.65' y2='16.65' />
+                    <line x1='8' y1='11' x2='14' y2='11' />
+                </svg>
+            </Button>
+            <Button onClick={resetZoomPan} color='ut-burntorange' variant='minimal' size='mini' className='px-3 py-1'>
+                <svg
+                    xmlns='http://www.w3.org/2000/svg'
+                    width='16'
+                    height='16'
+                    viewBox='0 0 24 24'
+                    fill='none'
+                    stroke='currentColor'
+                    strokeWidth='2'
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                >
+                    <path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' />
+                    <polyline points='9 22 9 12 15 12 15 22' />
+                </svg>
+            </Button>
+            <span className='flex items-center text-xs font-medium'>{Math.round(zoomLevel * 100)}%</span>
+        </div>
+    );
+}

src/views/components/map/types.ts

@@ -0,0 +1,124 @@
+// Constants
+export const WALKING_SPEED = 246.4; // ~2.8 mph in feet per minute
+export const PIXELS_TO_FEET = 9.3895; // Approximate scale factor
+
+export const DIRECT_PATH_THRESHOLD = 50; // Units for direct path calculation
+export const NEIGHBOR_DISTANCE_THRESHOLD = 25; // Increased threshold for neighbor connections
+
+/**
+ * Represents the type of a node in the map.
+ *
+ * - 'building': A node representing a building.
+ * - 'intersection': A node representing an intersection.
+ * - 'walkway': A node representing a walkway.
+ */
+export type NodeType = 'building' | 'intersection' | 'walkway';
+
+/**
+ * Represents the coordinates of a node on a map.
+ *
+ * @typeparam x - The x-coordinate of the node.
+ * @typeparam y - The y-coordinate of the node.
+ */
+export type NodeCoordinates = {
+    x: number;
+    y: number;
+};
+
+/**
+ * Represents a map node with specific coordinates and a type.
+ *
+ * @typeparam type - The type of the node.
+ */
+export type MapNode = NodeCoordinates & {
+    type: NodeType;
+};
+
+/**
+ * Represents a graph structure where each key is a string identifier
+ * and the value is a MapNode. This type is used to define the overall
+ * structure of a graph in the application.
+ */
+export type Graph = Record<string, MapNode>;
+
+/**
+ * Represents a distance measurement.
+ */
+export type Distance = number;
+
+/**
+ * Represents the unique identifier for a node in the map.
+ */
+export type NodeId = string;
+
+/**
+ * A map that associates a node identifier with a distance.
+ *
+ * @typeparam NodeId - The unique identifier for a node.
+ * @typeparam Distance - The distance associated with the node.
+ */
+export type DistanceMap = Record<NodeId, Distance>;
+
+/**
+ * A type representing a mapping of node identifiers to their previous node identifiers.
+ *
+ * @typeparam NodeId - The identifier of the current node.
+ * @typeparam NodeId - The identifier of the previous node, or null if there is no previous node.
+ */
+export type PreviousMap = Record<NodeId, NodeId | null>;
+
+/**
+ * type guard to check if the given node is a valid MapNode.
+ *
+ * A valid MapNode is defined as:
+ * - Not undefined
+ * - Has numeric `x` and `y` properties
+ * - Has a `type` property that is either 'building', 'intersection', or 'walkway'
+ *
+ * @param node - The node to validate.
+ * @returns True if the node is a valid MapNode, false otherwise.
+ */
+export const isValidNode = (node: MapNode | undefined): node is MapNode =>
+    node !== undefined &&
+    typeof node.x === 'number' &&
+    typeof node.y === 'number' &&
+    (node.type === 'building' || node.type === 'intersection' || node.type === 'walkway');
+
+/**
+ * Represents the code for a day of the week.
+ *
+ * - 'M'   : Monday
+ * - 'T'   : Tuesday
+ * - 'W'   : Wednesday
+ * - 'TH' : Thursday
+ * - 'F'   : Friday
+ */
+export type DayCode = 'M' | 'T' | 'W' | 'TH' | 'F';
+
+/**
+ * An array of strings representing the days of the week.
+ * The days are ordered starting from Monday to Sunday.
+ */
+export const DAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] as const;
+
+/**
+ * Represents a day of the week.
+ *
+ * @remarks
+ * This type is derived from the `DAYS` array, representing one of its elements.
+ * It is used to ensure that only valid days of the week are assigned to variables of this type.
+ */
+export type DAY = (typeof DAYS)[number];
+
+type DayMapping = Record<DayCode, DAY>;
+
+/**
+ * A constant object that maps single-letter day abbreviations to their full names.
+ */
+export const DAY_MAPPING = {
+    M: 'Monday',
+    T: 'Tuesday',
+    W: 'Wednesday',
+    TH: 'Thursday',
+    F: 'Friday',
+} as const satisfies DayMapping;

src/views/components/map/utils.ts

@@ -0,0 +1,111 @@
+import { graphNodes } from './graphNodes';
+import type { Graph, MapNode, NodeCoordinates, NodeId } from './types';
+import { isValidNode, NEIGHBOR_DISTANCE_THRESHOLD } from './types';
+
+/**
+ * Calculates the Euclidean distance between two points.
+ *
+ * @param point1 - The coordinates of the first point.
+ * @param point2 - The coordinates of the second point.
+ * @returns The distance between the two points.
+ */
+export const calculateDistance = (point1: NodeCoordinates, point2: NodeCoordinates): number =>
+    Math.sqrt((point2.x - point1.x) ** 2 + (point2.y - point1.y) ** 2);
+
+/**
+ * Finds the nearest nodes to a given node in a graph.
+ *
+ * @param nodeId - The ID of the node for which to find the nearest nodes.
+ * @param graph - The graph containing all nodes.
+ * @returns An array of node IDs representing the nearest nodes.
+ *
+ * The function first checks if the current node is valid. If not, it returns an empty array.
+ * It then calculates the distances to all other valid nodes in the graph.
+ * The nodes are sorted by distance, and the function first attempts to connect to the nearest intersections.
+ * If no intersections are found, it connects to the nearest buildings.
+ */
+const findNearestNodes = (nodeId: NodeId, graph: Graph): NodeId[] => {
+    const currentNode = graph[nodeId];
+    if (!isValidNode(currentNode)) return [];
+
+    // Calculate distances to all other nodes
+    const distances = Object.entries(graph)
+        .filter((entry): entry is [string, MapNode] => {
+            const [id, node] = entry;
+            return id !== nodeId && isValidNode(node);
+        })
+        .map(([id, node]) => ({
+            id,
+            distance: calculateDistance(currentNode, node),
+            isIntersection: node.type === 'intersection',
+        }))
+        .sort((a, b) => a.distance - b.distance);
+
+    // First try to connect to nearest intersections
+    const nearestIntersections = distances
+        .filter(node => node.isIntersection)
+        .slice(0, 2)
+        .map(node => node.id);
+
+    if (nearestIntersections.length > 0) {
+        return nearestIntersections;
+    }
+
+    // If no intersections found, connect to nearest buildings
+    return distances.slice(0, 2).map(node => node.id);
+};
+
+/**
+ * Retrieves the neighboring nodes of a given node within a graph.
+ *
+ * @param nodeId - The ID of the node for which neighbors are to be found.
+ * @param graph - The graph containing all nodes and their connections.
+ * @returns An array of node IDs representing the neighbors of the given node.
+ *
+ * This function first checks if the current node is valid. If not, it returns an empty array.
+ * It then filters the graph to find all valid neighboring nodes within a specified distance threshold.
+ * If no direct neighbors are found, it attempts to connect to the nearest intersection or building.
+ */
+export const getNeighbors = (nodeId: NodeId, graph: Graph): NodeId[] => {
+    const currentNode = graph[nodeId];
+    if (!isValidNode(currentNode)) return [];
+
+    // Get all possible neighbors within the increased threshold
+    const neighbors = Object.entries(graph)
+        .filter((entry): entry is [string, MapNode] => {
+            const [id, node] = entry;
+            if (!isValidNode(node) || id === nodeId) return false;
+            const distance = calculateDistance(currentNode, node);
+            return distance < NEIGHBOR_DISTANCE_THRESHOLD;
+        })
+        .map(([id]) => id);
+
+    // If no direct neighbors found, connect to the nearest intersection or building
+    if (neighbors.length === 0) {
+        const nearestNodes = findNearestNodes(nodeId, graph);
+        return nearestNodes;
+    }
+
+    return neighbors;
+};
+
+/**
+ * Calculates the midpoint between two nodes identified by their IDs.
+ *
+ * @param startId - The ID of the starting node.
+ * @param endId - The ID of the ending node.
+ * @returns An object containing the x and y coordinates of the midpoint, or null if either node is invalid.
+ */
+export const getMidpoint = (startId: string, endId: string) => {
+    const startNode = graphNodes[startId];
+    const endNode = graphNodes[endId];
+
+    if (!isValidNode(startNode) || !isValidNode(endNode)) {
+        return null;
+    }
+
+    return {
+        x: (startNode.x + endNode.x) / 2,
+        y: (startNode.y + endNode.y) / 2,
+    };
+};

src/views/components/settings/Settings.tsx

@@ -5,8 +5,11 @@ import exportSchedule from '@pages/background/lib/exportSchedule';
 import importSchedule from '@pages/background/lib/importSchedule';
 import { CalendarDots, Trash } from '@phosphor-icons/react';
 import { background } from '@shared/messages';
+import { DevStore } from '@shared/storage/DevStore';
 import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
+import { CRX_PAGES } from '@shared/types/CRXPages';
+import MIMEType from '@shared/types/MIMEType';
 import { downloadBlob } from '@shared/util/downloadBlob';
 // import { addCourseByUrl } from '@shared/util/courseUtils';
 // import { getCourseColors } from '@shared/util/colors';
@@ -36,14 +39,14 @@ import { useMigrationDialog } from '../common/MigrationDialog';
 import DevMode from './DevMode';
 import Preview from './Preview';
 
-const DISPLAY_PREVIEWS = false;
-const PREVIEW_SECTION_DIV_CLASSNAME = DISPLAY_PREVIEWS ? 'w-1/2 space-y-4' : 'flex-grow space-y-4';
-
 const manifest = chrome.runtime.getManifest();
 
 const gitHubStatsService = new GitHubStatsService();
 const includeMergedPRs = false;
 
+const DISPLAY_PREVIEWS = false;
+const PREVIEW_SECTION_DIV_CLASSNAME = DISPLAY_PREVIEWS ? 'w-1/2 space-y-4' : 'flex-grow space-y-4';
+
 /**
  * Custom hook for enabling developer mode.
  *
@@ -103,6 +106,8 @@ export default function Settings(): JSX.Element {
     const [activeSchedule] = useSchedules();
     // const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
 
+    const [isDeveloper, setIsDeveloper] = useState<boolean>(false);
+
     const showDialog = usePrompt();
     const handleChangelogOnClick = useChangelog();
 
@@ -132,6 +137,16 @@ export default function Settings(): JSX.Element {
             setCalendarNewTab(alwaysOpenCalendarInNewTab);
         };
 
+        const initDS = async () => {
+            const isDev = await DevStore.get('isDeveloper');
+            setIsDeveloper(isDev);
+        };
+
+        const ds_l1 = DevStore.listen('isDeveloper', async ({ newValue }) => {
+            setIsDeveloper(newValue);
+        });
+
+        initDS();
         fetchGitHubStats();
         initAndSetSettings();
 
@@ -182,6 +197,8 @@ export default function Settings(): JSX.Element {
             OptionsStore.removeListener(l4);
             OptionsStore.removeListener(l5);
 
+            DevStore.removeListener(ds_l1);
+
             window.removeEventListener('keydown', handleKeyPress);
         };
     }, []);
@@ -255,6 +272,7 @@ export default function Settings(): JSX.Element {
     const [devMode, toggleDevMode] = useDevMode(10);
 
     if (devMode) {
+        DevStore.set('isDeveloper', true);
         return <DevMode />;
     }
 
@@ -397,7 +415,12 @@ export default function Settings(): JSX.Element {
                                         </Text>
                                         <p className='text-sm text-gray-600'>Import from a schedule file</p>
                                     </div>
-                                    <FileUpload variant='filled' color='ut-burntorange' onChange={handleImportClick}>
+                                    <FileUpload
+                                        variant='filled'
+                                        color='ut-burntorange'
+                                        onChange={handleImportClick}
+                                        accept={MIMEType.JSON}
+                                    >
                                         Import Schedule
                                     </FileUpload>
                                 </div>
@@ -501,6 +524,64 @@ export default function Settings(): JSX.Element {
                         <h2 className='mb-4 text-xl text-ut-black font-semibold' onClick={toggleDevMode}>
                             Developer Mode
                         </h2>
+
+                        <div className='flex items-center justify-between'>
+                            <div className='max-w-xs'>
+                                <Text variant='h4' className='text-ut-burntorange font-semibold'>
+                                    UTRP Map
+                                </Text>
+                                <span className='mx-2 border border-ut-burntorange rounded px-2 py-0.5 text-xs text-ut-burntorange font-medium'>
+                                    BETA
+                                </span>
+                                <p className='text-sm text-gray-600'>
+                                    Navigate campus efficiently with our interactive map tool that integrates with your
+                                    schedule
+                                </p>
+                            </div>
+                            <Button
+                                variant='outline'
+                                color='ut-burntorange'
+                                onClick={() => {
+                                    const mapPageUrl = chrome.runtime.getURL(CRX_PAGES.MAP);
+                                    background.openNewTab({ url: mapPageUrl });
+                                }}
+                            >
+                                Try UTRP Map
+                            </Button>
+                        </div>
+
+                        {isDeveloper && (
+                            <>
+                                <Divider size='auto' orientation='horizontal' />
+
+                                <div className='flex items-center justify-between'>
+                                    <div className='max-w-xs'>
+                                        <Text variant='h4' className='text-ut-burntorange font-semibold'>
+                                            Debug Page
+                                        </Text>
+                                        <span className='mx-2 border border-ut-gray rounded px-2 py-0.5 text-xs text-ut-gray font-medium'>
+                                            DEV
+                                        </span>
+                                        <p className='text-sm text-gray-600'>
+                                            Open the developer debug page to view extension storage and debug logs
+                                        </p>
+                                    </div>
+                                    <Button
+                                        variant='outline'
+                                        color='ut-burntorange'
+                                        onClick={() => {
+                                            const debugPageUrl = chrome.runtime.getURL(CRX_PAGES.DEBUG);
+                                            background.openNewTab({ url: debugPageUrl });
+                                        }}
+                                    >
+                                        Open Debug Page
+                                    </Button>
+                                </div>
+                            </>
+                        )}
+
+                        <Divider size='auto' orientation='horizontal' />
+
                         <Button variant='filled' color='ut-black' onClick={() => addCourseByURL(activeSchedule)}>
                             Add course by link
                         </Button>
@@ -514,7 +595,9 @@ export default function Settings(): JSX.Element {
 
                 <section className='my-8 lg:my-0 lg:ml-4 lg:w-1/2'>
                     <section>
-                        <h2 className='mb-4 text-xl text-ut-black font-semibold'>LONGHORN DEVELOPERS ADMINS</h2>
+                        <h2 className='mb-4 text-xl text-ut-black font-semibold'>
+                            LONGHORN DEVELOPERS (LHD) EXECUTIVE BOARD
+                        </h2>
                         <div className='grid grid-cols-2 gap-4 2xl:grid-cols-4 md:grid-cols-3'>
                             {LONGHORN_DEVELOPERS_ADMINS.map(admin => (
                                 <div
@@ -530,7 +613,11 @@ export default function Settings(): JSX.Element {
                                     >
                                         {admin.name}
                                     </Text>
-                                    <p className='text-sm text-gray-600'>{admin.role}</p>
+                                    {admin.role.map(role => (
+                                        <p key={admin.githubUsername} className='text-sm text-gray-600'>
+                                            {role}
+                                        </p>
+                                    ))}
                                     {showGitHubStats && githubStats && (
                                         <div className='mt-2'>
                                             <p className='text-xs text-gray-500'>GitHub Stats (UTRP repo):</p>
@@ -576,7 +663,11 @@ export default function Settings(): JSX.Element {
                                     >
                                         {swe.name}
                                     </Text>
-                                    <p className='text-sm text-gray-600'>{swe.role}</p>
+                                    {swe.role.map(role => (
+                                        <p key={swe.githubUsername} className='text-sm text-gray-600'>
+                                            {role}
+                                        </p>
+                                    ))}
                                     {showGitHubStats && githubStats && (
                                         <div className='mt-2'>
                                             <p className='text-xs text-gray-500'>GitHub Stats (UTRP repo):</p>

src/views/hooks/tests/useFlattenedCourseSchedule.test.ts

@@ -5,7 +5,7 @@ import { convertMinutesToIndex } from '../useFlattenedCourseSchedule';
 describe('useFlattenedCourseSchedule', () => {
     it('should convert minutes to index correctly', () => {
         const minutes = 480; // 8:00 AM
-        const expectedIndex = 2; // (480 - 420) / 30 = 2
+        const expectedIndex = 3; // (480 - 480) / 30 + 2 + 1 = 3
         const result = convertMinutesToIndex(minutes);
         expect(result).toBe(expectedIndex);
     });

src/views/hooks/useEnforceScheduleLimit.tsx

@@ -21,19 +21,19 @@ export function useEnforceScheduleLimit(): () => boolean {
     return useCallback(() => {
         if (schedules.length >= SCHEDULE_LIMIT) {
             showDialog({
-                title: `You have ${SCHEDULE_LIMIT} active schedules!`,
+                title: `You have too many schedules!`,
 
                 description: (
                     <>
                         To encourage organization,{' '}
-                        <span className='text-ut-burntorange'>please consider removing some unused schedules</span> you
+                        <span className='text-ut-burntorange'>please consider deleting any unused schedules</span> you
                         may have.
                     </>
                 ),
 
                 buttons: close => (
                     <Button variant='filled' color='ut-burntorange' onClick={close}>
-                        I Understand
+                        I understand
                     </Button>
                 ),
             });

src/views/hooks/useFlattenedCourseSchedule.ts

@@ -52,7 +52,9 @@ export interface FlattenedCourseSchedule {
  * @param minutes - The number of minutes.
  * @returns The index value.
  */
-export const convertMinutesToIndex = (minutes: number): number => Math.floor((minutes - 420) / 30);
+export const convertMinutesToIndex = (minutes: number): number =>
+    // 480 = 8 a.m., 30 = 30 minute slots, 2 header rows, and grid rows start at 1
+    Math.floor((minutes - 480) / 30) + 2 + 1;
 
 /**
  * Get the active schedule, and convert it to be render-able into a calendar.

src/views/hooks/useWhatsNew.tsx

@@ -0,0 +1,46 @@
+import { Button } from '@views/components/common/Button';
+import Text from '@views/components/common/Text/Text';
+import WhatsNewPopupContent from '@views/components/common/WhatsNewPopup';
+import { useDialog } from '@views/contexts/DialogContext';
+import React from 'react';
+
+import { LogoIcon } from '../components/common/LogoIcon';
+import useChangelog from './useChangelog';
+
+/**
+ * Custom hook that provides a function to display a what's new dialog.
+ *
+ * @returns A function that, when called, shows a dialog with the changelog.
+ */
+export default function useWhatsNewPopUp(): () => void {
+    const showDialog = useDialog();
+    const showChangeLog = useChangelog();
+    const { version } = chrome.runtime.getManifest();
+
+    const showPopUp = () => {
+        showDialog(close => ({
+            className: 'w-[830px] flex flex-col items-center gap-spacing-7 p-spacing-8',
+            title: (
+                <div className='flex items-center justify-between gap-4'>
+                    <LogoIcon width='48' height='48' />
+                    <Text variant='h1' className='text-theme-black'>
+                        What&apos;s New in UT Registration Plus
+                    </Text>
+                </div>
+            ),
+            description: <WhatsNewPopupContent />,
+            buttons: (
+                <div className='flex flex-row items-end gap-spacing-4'>
+                    <Button onClick={showChangeLog} variant='minimal' color='ut-black'>
+                        Read Changelog v{version}
+                    </Button>
+                    <Button onClick={close} color='ut-burntorange'>
+                        Get started
+                    </Button>
+                </div>
+            ),
+        }));
+    };
+
+    return showPopUp;
+}

src/views/lib/getGitHubStats.ts

@@ -5,7 +5,7 @@ import type { CachedData } from '@shared/types/CachedData';
 // Types
 type TeamMember = {
     name: string;
-    role: string;
+    role: string[];
     githubUsername: string;
 };
 
@@ -40,21 +40,38 @@ const REPO_NAME = 'UT-Registration-Plus';
 const CONTRIBUTORS_API_ROUTE = `/repos/${REPO_OWNER}/${REPO_NAME}/stats/contributors`;
 
 export const LONGHORN_DEVELOPERS_ADMINS = [
-    { name: 'Sriram Hariharan', role: 'Founder', githubUsername: 'sghsri' },
+    { name: 'Sriram Hariharan', role: ['LHD Co-Founder', 'UTRP Founder'], githubUsername: 'sghsri' },
-    { name: 'Elie Soloveichik', role: 'Staff Engineer', githubUsername: 'Razboy20' },
+    {
-    { name: 'Diego Perez', role: 'Staff Engineer', githubUsername: 'doprz' },
+        name: 'Elie Soloveichik',
-    { name: 'Lukas Zenick', role: 'Senior Software Engineer', githubUsername: 'Lukas-Zenick' },
+        role: ['LHD Co-Founder', 'Learning and Development Director', 'UTRP Senior SWE'],
-    { name: 'Isaiah Rodriguez', role: 'Chief Operations and Design Officer', githubUsername: 'IsaDavRod' },
+        githubUsername: 'Razboy20',
-    { name: 'Samuel Gunter', role: 'Senior Software Engineer', githubUsername: 'Samathingamajig' },
+    },
-    { name: 'Derek Chen', role: 'Senior Software Engineer', githubUsername: 'DereC4' },
+    {
+        name: 'Diego Perez',
+        role: ['LHD Co-Founder', 'Software Engineering Director', 'UTRP Senior SWE'],
+        githubUsername: 'doprz',
+    },
+    { name: 'Isaiah Rodriguez', role: ['LHD Co-Founder', 'President and UI/UX Director'], githubUsername: 'IsaDavRod' },
+    {
+        name: 'Samuel Gunter',
+        role: ['Administrative Director', 'UTRP Co-Lead', 'UTRP Senior SWE'],
+        githubUsername: 'Samathingamajig',
+    },
+    {
+        name: 'Derek Chen',
+        role: ['Communications Director', 'UTRP Co-Lead', 'UTRP Senior SWE'],
+        githubUsername: 'DereC4',
+    },
+    { name: 'Kabir Ramzan', role: ['Events Director'], githubUsername: 'CMEONE' },
 ] as const satisfies TeamMember[];
 
 export const LONGHORN_DEVELOPERS_SWE = [
-    { name: 'Preston Cook', role: 'Software Engineer', githubUsername: 'Preston-Cook' },
+    { name: 'Preston Cook', role: ['Software Engineer'], githubUsername: 'Preston-Cook' },
-    { name: 'Ethan Lanting', role: 'Software Engineer', githubUsername: 'EthanL06' },
+    { name: 'Ethan Lanting', role: ['Software Engineer'], githubUsername: 'EthanL06' },
-    { name: 'Casey Charleston', role: 'Software Engineer', githubUsername: 'caseycharleston' },
+    { name: 'Casey Charleston', role: ['Software Engineer'], githubUsername: 'caseycharleston' },
-    { name: 'Vinson', role: 'Software Engineer', githubUsername: 'vinsonzheng499' },
+    { name: 'Lukas Zenick', role: ['LHD Alumni', 'Senior Software Engineer'], githubUsername: 'Lukas-Zenick' },
-    { name: 'Vivek', role: 'Software Engineer', githubUsername: 'vivek12311' },
+    { name: 'Vinson', role: ['LHD Alumni', 'Software Engineer'], githubUsername: 'vinsonzheng499' },
+    { name: 'Vivek', role: ['LHD Alumni', 'Software Engineer'], githubUsername: 'vivek12311' },
 ] as const satisfies TeamMember[];
 
 /**

src/views/lib/getSiteSupport.ts

@@ -13,6 +13,7 @@ export const SiteSupport = {
     MY_CALENDAR: 'MY_CALENDAR',
     REPORT_ISSUE: 'REPORT_ISSUE',
     MY_UT: 'MY_UT',
+    COURSE_CATALOG_SEARCH: 'COURSE_CATALOG_SEARCH',
     CLASSLIST: 'CLASSLIST',
 } as const;
 
@@ -45,6 +46,7 @@ export default function getSiteSupport(url: string): SiteSupportType | null {
         if (document.querySelector('#details')) {
             return SiteSupport.COURSE_CATALOG_DETAILS;
         }
+        return SiteSupport.COURSE_CATALOG_SEARCH;
     }
     if (url.includes('utdirect.utexas.edu') && (url.includes('waitlist') || url.includes('classlist'))) {
         return SiteSupport.WAITLIST;

unocss.config.ts

@@ -26,7 +26,7 @@ export default defineConfig({
     ],
     shortcuts: {
         focusable: 'outline-none ring-blue-500/50 dark:ring-blue-400/60 ring-0 focus-visible:ring-4',
-        btn: 'h-10 w-auto flex cursor-pointer justify-center items-center gap-spacing-3 rounded-1 px-spacing-5 py-0 text-4.5 btn-transition disabled:(cursor-not-allowed opacity-50) active:enabled:scale-96 focusable',
+        btn: 'h-10 w-auto flex cursor-pointer justify-center items-center gap-spacing-3 rounded-1 px-spacing-5 py-0 text-4.5 btn-transition disabled:(cursor-not-allowed opacity-50) active:enabled:scale-96 active:has-enabled:scale-96 focusable',
         link: 'text-ut-burntorange link:text-ut-burntorange underline underline-offset-2 hover:text-ut-orange focus-visible:text-ut-orange focusable btn-transition ease-out-expo',
         linkanimate:
             'relative cursor-pointer transition duration-100 ease-out after:(absolute left-0.4 right-0.4 h-2px scale-x-95 bg-ut-orange opacity-0 transition duration-250 ease-out-expo content-empty -bottom-0.75 -translate-y-0.5) active:scale-95 hover:text-ut-orange focus-visible:text-ut-orange hover:after:(opacity-100) !hover:after:translate-y-0 !hover:after:scale-x-100',

vite.config.ts

@@ -168,6 +168,7 @@ export default defineConfig({
         renameFile('src/pages/options/index.html', 'options.html'),
         renameFile('src/pages/calendar/index.html', 'calendar.html'),
         renameFile('src/pages/report/index.html', 'report.html'),
+        renameFile('src/pages/map/index.html', 'map.html'),
         renameFile('src/pages/404/index.html', '404.html'),
         vitePluginRunCommandOnDemand({
             // afterServerStart: 'pnpm gulp forceDisableUseDynamicUrl',
@@ -225,6 +226,10 @@ export default defineConfig({
                 target: 'http://localhost:5173',
                 rewrite: path => path.replace('report', 'src/pages/report/index'),
             },
+            '/map.html': {
+                target: 'http://localhost:5173',
+                rewrite: path => path.replace('map', 'src/pages/map/index'),
+            },
             '/404.html': {
                 target: 'http://localhost:5173',
                 rewrite: path => path.replace('404', 'src/pages/404/index'),
@@ -244,6 +249,7 @@ export default defineConfig({
                 calendar: 'src/pages/calendar/index.html',
                 options: 'src/pages/options/index.html',
                 report: 'src/pages/report/index.html',
+                map: 'src/pages/map/index.html',
                 404: 'src/pages/404/index.html',
             },
             output: {