Merge branch 'main' into fix/vite-hmr

* chore: removed extra space at calendar footer

* chore: fixed eslint issues

* chore: changed return type to react node

* chore: displaycourses true fixes and checks fixed

* chore: prettier fix

* feat: not working same semester course issue

* feat: modifying components to use the new hook

* feat: small fixes

* fix: remove comments and spaces

* fix: dialog error solved

* fix: add to new schedule

* fix: prettier

* fix: delete unnecessary custom hook and p[rettier

* fix: checks all passing

* fix: added requested changes

* fix: added new conditions

* fix: description fixed

* style: fix Roboto Flex not being used as font in dialog

* fix: made requested changes

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
Co-authored-by: Razboy20 <razboy20@gmail.com>
Co-authored-by: Samuel Gunter <29130894+Samathingamajig@users.noreply.github.com>

.env.example

@@ -0,0 +1,3 @@
+SENTRY_ORG=longhorn-developers
+SENTRY_PROJECT=ut-registration-plus
+SENTRY_AUTH_TOKEN=

flake.lock

@@ -20,11 +20,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1744932701,
+        "lastModified": 1754725699,
-        "narHash": "sha256-fusHbZCyv126cyArUwwKrLdCkgVAIaa/fQJYFlCEqiU=",
+        "narHash": "sha256-iAcj9T/Y+3DBy2J0N+yF9XQQQ8IEb5swLFzs23CdP88=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "b024ced1aac25639f8ca8fdfc2f8c4fbd66c48ef",
+        "rev": "85dbfc7aaf52ecb755f87e577ddbe6dbbdbc1054",
         "type": "github"
       },
       "original": {

flake.nix

@@ -1,24 +1,28 @@
 {
   inputs = {
-    flake-utils.url = "github:numtide/flake-utils";
     nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+    flake-utils.url = "github:numtide/flake-utils";
   };
 
   outputs =
-    inputs:
+    {
-    inputs.flake-utils.lib.eachDefaultSystem (
+      self,
+      nixpkgs,
+      flake-utils,
+    }:
+    flake-utils.lib.eachDefaultSystem (
       system:
       let
-        pkgs = (import (inputs.nixpkgs) { inherit system; });
+        pkgs = (import nixpkgs { inherit system; });
       in
       {
         formatter = pkgs.nixfmt-rfc-style;
 
-        devShell = pkgs.mkShell {
+        devShells.default = pkgs.mkShell {
+          name = "utrp-dev";
           buildInputs = with pkgs; [
-            nodejs_20 # v20.19.0
+            nodejs_20 # v20.19.4
-            pnpm_10 # v10.8.1
+            pnpm_10 # v10.14.0
-            just
           ];
 
           shellHook = ''

package.json

@@ -39,8 +39,8 @@
         "@phosphor-icons/react": "^2.1.7",
         "@sentry/react": "^8.55.0",
         "@tanstack/react-query": "^5.69.0",
-        "@unocss/vite": "^0.63.6",
+		"@unocss/vite": "^66.5.1",
-        "@vitejs/plugin-react": "^4.3.4",
+		"@vitejs/plugin-react": "^5.0.2",
         "chrome-extension-toolkit": "^0.0.54",
         "clsx": "^2.1.1",
         "conventional-changelog": "^6.0.0",
@@ -66,7 +66,7 @@
         "@commitlint/cli": "^19.7.1",
         "@commitlint/config-conventional": "^19.7.1",
         "@commitlint/types": "^19.5.0",
-        "@crxjs/vite-plugin": "2.0.0-beta.21",
+		"@crxjs/vite-plugin": "2.2.0",
         "@iconify-json/bi": "^1.2.2",
         "@iconify-json/ic": "^1.2.2",
         "@iconify-json/iconoir": "^1.2.7",
@@ -88,7 +88,7 @@
         "@types/conventional-changelog": "^3.1.5",
         "@types/gulp": "^4.0.17",
         "@types/gulp-zip": "^4.0.4",
-        "@types/node": "^22.13.5",
+		"@types/node": "^22.18.0",
         "@types/prompts": "^2.4.9",
         "@types/react": "^18.3.18",
         "@types/react-dom": "^18.3.5",
@@ -98,14 +98,14 @@
         "@types/sql.js": "^1.4.9",
         "@typescript-eslint/eslint-plugin": "^7.18.0",
         "@typescript-eslint/parser": "^7.18.0",
-        "@unocss/eslint-config": "^0.63.6",
+		"@unocss/eslint-config": "^66.5.1",
-        "@unocss/postcss": "^0.63.6",
+		"@unocss/postcss": "^66.5.1",
-        "@unocss/preset-uno": "^0.63.6",
+		"@unocss/preset-web-fonts": "^66.5.1",
-        "@unocss/preset-web-fonts": "^0.63.6",
+		"@unocss/preset-wind4": "^66.5.1",
-        "@unocss/reset": "^0.63.6",
+		"@unocss/reset": "^66.5.1",
-        "@unocss/transformer-directives": "^0.63.6",
+		"@unocss/transformer-directives": "^66.5.1",
-        "@unocss/transformer-variant-group": "^0.63.6",
+		"@unocss/transformer-variant-group": "^66.5.1",
-        "@vitejs/plugin-react-swc": "^3.8.0",
+		"@vitejs/plugin-react-swc": "^4.0.1",
         "@vitest/coverage-v8": "^2.1.9",
         "@vitest/ui": "^2.1.9",
         "chalk": "^5.4.1",
@@ -141,11 +141,11 @@
         "semantic-release": "^24.2.3",
         "storybook": "^8.6.0",
         "typescript": "^5.7.3",
-        "unocss": "^0.63.6",
+		"unocss": "^66.5.1",
-        "unocss-preset-primitives": "0.0.2-beta.1",
+		"unocss-preset-primitives": "0.0.2-beta.2",
         "unplugin-icons": "^0.19.3",
-        "vite": "^5.4.14",
+		"vite": "^7.1.5",
-        "vite-plugin-inspect": "^0.8.9",
+		"vite-plugin-inspect": "^11.3.3",
         "vitest": "^2.1.9"
     },
     "engineStrict": true,
@@ -154,15 +154,15 @@
     },
     "pnpm": {
         "patchedDependencies": {
-            "@crxjs/vite-plugin@2.0.0-beta.21": "patches/@crxjs__vite-plugin@2.0.0-beta.21.patch",
+			"@unocss/vite": "patches/@unocss__vite.patch",
-            "@unocss/vite": "patches/@unocss__vite.patch"
+			"@crxjs/vite-plugin": "patches/@crxjs__vite-plugin.patch"
         },
-        "overrides": {
+		"onlyBuiltDependencies": [
-            "es-module-lexer": "^1.5.4"
+			"@swc/core"
-        }
+		]
     },
     "volta": {
-        "node": "20.9.0",
+        "node": "20.19.4",
-        "pnpm": "10.6.5"
+        "pnpm": "10.14.0"
     }
 }

patches/@crxjs__vite-plugin@2.0.0-beta.21.patch

@@ -1,105 +0,0 @@
-diff --git a/dist/index.mjs b/dist/index.mjs
-index 5c3f6291168987c56b816428080e6f1fe9de7107..abaf6290fe9454ae036a81eacbe7dc3be2fdfbc3 100644
---- a/dist/index.mjs
-+++ b/dist/index.mjs
-@@ -499,16 +499,43 @@ ${sourceMap}
-     }),
-     mergeMap(async ({ target, code, deps }) => {
-       await lexer.init;
--      const [imports] = lexer.parse(code, fileName);
-+      const [imports, exports] = lexer.parse(code, fileName);
-       const depSet = new Set(deps);
-       const magic = new MagicString(code);
--      for (const i of imports)
-+      for (const i of imports) {
-         if (i.n) {
-           depSet.add(i.n);
-           const fileName2 = getFileName({ type: "module", id: i.n });
-           const fullImport = code.substring(i.s, i.e);
--          magic.overwrite(i.s, i.e, fullImport.replace(i.n, `/${fileName2}`));
-+          const hmrTimestamp = fullImport.match(/\bt=\d{13}&?\b/);
-+          magic.overwrite(
-+            i.s,
-+            i.e,
-+            fullImport.replace(
-+              i.n,
-+              `/${fileName2}${hmrTimestamp ? `?${hmrTimestamp[0]}` : ""}`
-+            )
-+          );
-+        }
-+      }
-+      for (const e of exports) {
-+        if (e.n === "default") {
-+          const regex = /\s+['"](.*)['"]/y;
-+          regex.lastIndex = e.e;
-+          const fullExport = regex.exec(code)?.[1];
-+          if (!fullExport)
-+            continue;
-+          const start = regex.lastIndex - fullExport.length - 1;
-+          const end = regex.lastIndex - 1;
-+          if (fullExport.startsWith("/node_modules")) {
-+            magic.overwrite(
-+              start,
-+              end,
-+              `http://localhost:5173${fullExport}`
-+            );
-+          }
-         }
-+      }
-       return { target, source: magic.toString(), deps: [...depSet] };
-     })
-   );
-@@ -1229,10 +1256,14 @@ const pluginHMR = () => {
-       handleHotUpdate({ modules, server }) {
-         const { root } = server.config;
-         const relFiles = /* @__PURE__ */ new Set();
--        for (const m of modules)
-+        function getRelFile(file) {
-+          return file.startsWith(root) ? file.slice(server.config.root.length) : file;
-+        }
-+        for (const m of modules) {
-           if (m.id?.startsWith(root)) {
-             relFiles.add(m.id.slice(server.config.root.length));
-           }
-+        }
-         if (inputManifestFiles.background.length) {
-           const background = prefix$1("/", inputManifestFiles.background[0]);
-           if (relFiles.has(background) || modules.some(isImporter(join(server.config.root, background)))) {
-@@ -1244,7 +1275,14 @@ const pluginHMR = () => {
-         for (const [key, script] of contentScripts)
-           if (key === script.id) {
-             if (relFiles.has(script.id) || modules.some(isImporter(join(server.config.root, script.id)))) {
--              relFiles.forEach((relFile) => update(relFile));
-+              modules.filter((mod) => mod.id?.startsWith(root)).forEach((mod) => {
-+                update(getRelFile(mod.id));
-+                if (mod.file?.endsWith(".scss")) {
-+                  mod.importers.forEach((imp) => {
-+                    update(getRelFile(imp.id));
-+                  });
-+                }
-+              });
-             }
-           }
-       }
-@@ -1882,7 +1920,7 @@ const pluginWebAccessibleResources = () => {
-         if (contentScripts.size > 0) {
-           const viteManifest = parseJsonAsset(
-             bundle,
--            "manifest.json"
-+            ".vite/manifest.json"
-           );
-           const viteFiles = /* @__PURE__ */ new Map();
-           for (const [, file] of Object.entries(viteManifest))
-diff --git a/package.json b/package.json
-index e0c47ae66ff399ad3a78abf38d8d93d1f038c55d..f84eb09ffbb5c41094935dd06e04ffe831e2d05a 100644
---- a/package.json
-+++ b/package.json
-@@ -70,7 +70,7 @@
-     "connect-injector": "^0.4.4",
-     "convert-source-map": "^1.7.0",
-     "debug": "^4.3.3",
--    "es-module-lexer": "^0.10.0",
-+    "es-module-lexer": "^1.4.1",
-     "fast-glob": "^3.2.11",
-     "fs-extra": "^10.0.1",
-     "jsesc": "^3.0.2",

patches/@unocss__vite.patch

@@ -1,8 +1,8 @@
 diff --git a/dist/index.mjs b/dist/index.mjs
-index 7210f5fd650a0b7bb36b467fff85feb0d8e4ec63..c8f98bd314daec0b91c514ea9d9fc2b79cea8502 100644
+index 3b94c870f00ce7e70be208199db48a3bd5569830..4aaaec7d5b656f1c4066c6295d5228d746420d17 100644
 --- a/dist/index.mjs
 +++ b/dist/index.mjs
-@@ -369,15 +369,15 @@ const VIRTUAL_ENTRY_ALIAS = [
+@@ -24,8 +24,8 @@ const VIRTUAL_ENTRY_ALIAS = [
    /^(?:virtual:)?uno(?::(.+))?\.css(\?.*)?$/
  ];
  const LAYER_MARK_ALL = "__ALL__";
@@ -10,27 +10,19 @@ index 7210f5fd650a0b7bb36b467fff85feb0d8e4ec63..c8f98bd314daec0b91c514ea9d9fc2b7
 -const RESOLVED_ID_RE = /[/\\]__uno(?:_(.*?))?\.css$/;
 +const RESOLVED_ID_WITH_QUERY_RE = /[/\\]uno(_.*?)?\.css(\?.*)?$/;
 +const RESOLVED_ID_RE = /[/\\]uno(?:_(.*?))?\.css$/;
- function resolveId(id) {
+ 
-   if (id.match(RESOLVED_ID_WITH_QUERY_RE))
+ const defaultPipelineExclude = [cssIdRE];
-     return id;
+ const defaultPipelineInclude = [/\.(vue|svelte|[jt]sx|vine.ts|mdx?|astro|elm|php|phtml|html)($|\?)/];
+@@ -468,7 +468,7 @@ function resolveId(id, importer) {
    for (const alias of VIRTUAL_ENTRY_ALIAS) {
      const match = id.match(alias);
      if (match) {
--      return match[1] ? `/__uno_${match[1]}.css` : "/__uno.css";
+-      let virtual = match[1] ? `__uno_${match[1]}.css` : "__uno.css";
-+      return match[1] ? `/uno_${match[1]}.css` : "/uno.css";
++      let virtual = match[1] ? `uno_${match[1]}.css` : "uno.css";
-     }
+       virtual += match[2] || "";
-   }
+       if (importer)
- }
+         virtual = resolve$1(importer, "..", virtual);
-@@ -652,7 +652,7 @@ function GlobalModeBuildPlugin(ctx) {
+@@ -813,7 +813,7 @@ function GlobalModeDevPlugin(ctx) {
-         css = await applyCssTransform(css, fakeCssId, options.dir, this);
-         const transformHandler = "handler" in cssPost.transform ? cssPost.transform.handler : cssPost.transform;
-         if (isLegacy) {
--          await transformHandler.call({}, css, "/__uno.css");
-+          await transformHandler.call({}, css, "/uno.css");
-         } else {
-           const hash = getHash(css);
-           await transformHandler.call({}, getHashPlaceholder(hash), fakeCssId);
-@@ -914,7 +914,7 @@ function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules,
          const { hash, css } = await generateCSS(layer);
          return {
            // add hash to the chunk of CSS that it will send back to client to check if there is new CSS generated
@@ -39,7 +31,7 @@ index 7210f5fd650a0b7bb36b467fff85feb0d8e4ec63..c8f98bd314daec0b91c514ea9d9fc2b7
            map: { mappings: "" }
          };
        },
-@@ -933,7 +933,7 @@ function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules,
+@@ -832,7 +832,7 @@ function GlobalModeDevPlugin(ctx) {
          if (layer && code.includes("import.meta.hot")) {
            let hmr = `
  try {

src/manifest.ts

@@ -38,7 +38,12 @@ const manifest = defineManifest(async () => ({
     host_permissions: process.env.MODE === 'development' ? [...HOST_PERMISSIONS, '<all_urls>'] : HOST_PERMISSIONS,
     action: {
         default_popup: 'src/pages/popup/index.html',
-        default_icon: `icons/icon_${mode}_32.png`,
+        default_icon: {
+            '16': `icons/icon_${mode}_16.png`,
+            '32': `icons/icon_${mode}_32.png`,
+            '48': `icons/icon_${mode}_48.png`,
+            '128': `icons/icon_${mode}_128.png`,
+        },
     },
     icons: {
         '16': `icons/icon_${mode}_16.png`,

src/pages/content/index.tsx

@@ -1,6 +1,7 @@
 import CourseCatalogMain from '@views/components/CourseCatalogMain';
 import InjectedButton from '@views/components/injected/AddAllButton';
 import DaysCheckbox from '@views/components/injected/DaysCheckbox';
+import ShadedResults from '@views/components/injected/SearchResultShader';
 import getSiteSupport, { SiteSupport } from '@views/lib/getSiteSupport';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
@@ -9,9 +10,8 @@ const support = getSiteSupport(window.location.href);
 
 const renderComponent = (Component: React.ComponentType) => {
     const container = document.createElement('div');
-    container.id = 'extension-root';
-    document.body.appendChild(container);
 
+    // all components are portaled away, not actually rendered to screen
     createRoot(container).render(
         <React.StrictMode>
             <Component />
@@ -30,3 +30,7 @@ if (support === SiteSupport.MY_UT) {
 if (support === SiteSupport.COURSE_CATALOG_SEARCH) {
     renderComponent(DaysCheckbox);
 }
+
+if (support === SiteSupport.COURSE_CATALOG_KWS) {
+    renderComponent(ShadedResults);
+}

src/views/components/CourseCatalogMain.tsx

@@ -15,6 +15,8 @@ import type { SiteSupportType } from '@views/lib/getSiteSupport';
 import { populateSearchInputs } from '@views/lib/populateSearchInputs';
 import React, { useEffect, useRef, useState } from 'react';
 
+import DialogProvider from './common/DialogProvider/DialogProvider';
+
 interface Props {
     support: Extract<SiteSupportType, 'COURSE_CATALOG_DETAILS' | 'COURSE_CATALOG_LIST'>;
 }
@@ -82,28 +84,30 @@ export default function CourseCatalogMain({ support }: Props): JSX.Element | nul
 
     return (
         <ExtensionRoot>
-            <NewSearchLink />
+            <DialogProvider>
-            <RecruitmentBanner />
+                <NewSearchLink />
-            <TableHead>Plus</TableHead>
+                <RecruitmentBanner />
-            {rows.map(
+                <TableHead>Plus</TableHead>
-                row =>
+                {rows.map(
-                    row.course && (
+                    row =>
-                        <TableRow
+                        row.course && (
-                            key={row.course.uniqueId}
+                            <TableRow
-                            row={row}
+                                key={row.course.uniqueId}
-                            isSelected={row.course.uniqueId === selectedCourse?.uniqueId}
+                                row={row}
-                            activeSchedule={activeSchedule}
+                                isSelected={row.course.uniqueId === selectedCourse?.uniqueId}
-                            onClick={handleRowButtonClick(row.course)}
+                                activeSchedule={activeSchedule}
-                        />
+                                onClick={handleRowButtonClick(row.course)}
-                    )
+                            />
-            )}
+                        )
-            <CourseCatalogInjectedPopup
+                )}
-                course={selectedCourse!} // always defined when showPopup is true
+                <CourseCatalogInjectedPopup
-                show={showPopup}
+                    course={selectedCourse!} // always defined when showPopup is true
-                onClose={() => setShowPopup(false)}
+                    show={showPopup}
-                afterLeave={() => setSelectedCourse(null)}
+                    onClose={() => setShowPopup(false)}
-            />
+                    afterLeave={() => setSelectedCourse(null)}
-            {enableScrollToLoad && <AutoLoad addRows={addRows} />}
+                />
+                {enableScrollToLoad && <AutoLoad addRows={addRows} />}
+            </DialogProvider>
         </ExtensionRoot>
     );
 }

src/views/components/calendar/CalendarCourseCellColorPicker/HexColorEditor.tsx

@@ -27,12 +27,10 @@ export default function HexColorEditor({ hexCode, setHexCode }: HexColorEditorPr
     const tagColor = pickFontColor(previewColor.slice(1) as `#${string}`);
 
     const [localHexCode, setLocalHexCode] = React.useState(hexCode);
-    const debouncedSetHexCode = useDebounce((value: string) => setHexCode(value), 500);
+    const debouncedSetHexCode = useDebounce(setHexCode, 500);
 
     React.useEffect(() => {
-        if (hexCode !== localHexCode) {
+        setLocalHexCode(hexCode);
-            setLocalHexCode(hexCode);
-        }
     }, [hexCode]);
 
     React.useEffect(() => {

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

@@ -1,5 +1,5 @@
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
-import { CalendarDots, Export, FilePng, Sidebar } from '@phosphor-icons/react';
+import { CalendarDots, Export, FileCode, FilePng, Sidebar } from '@phosphor-icons/react';
 import styles from '@views/components/calendar/CalendarHeader/CalendarHeader.module.scss';
 import { Button } from '@views/components/common/Button';
 import DialogProvider from '@views/components/common/DialogProvider/DialogProvider';
@@ -11,7 +11,7 @@ import useSchedules from '@views/hooks/useSchedules';
 import clsx from 'clsx';
 import React from 'react';
 
-import { saveAsCal, saveCalAsPng } from '../utils';
+import { handleExportJson, saveAsCal, saveCalAsPng } from '../utils';
 
 interface CalendarHeaderProps {
     sidebarOpen?: boolean;
@@ -98,6 +98,18 @@ export default function CalendarHeader({ sidebarOpen, onSidebarToggle }: Calenda
                                         Save as .cal
                                     </Button>
                                 </MenuItem>
+                                <MenuItem>
+                                    <Button
+                                        className='w-full flex justify-start'
+                                        onClick={() => handleExportJson(activeSchedule.id)}
+                                        color='ut-black'
+                                        size='small'
+                                        variant='minimal'
+                                        icon={FileCode}
+                                    >
+                                        Save as .json
+                                    </Button>
+                                </MenuItem>
                                 {/* <MenuItem>
                                     <Button color='ut-black' size='small' variant='minimal' icon={FileTxt}>
                                         Export Unique IDs

src/views/components/calendar/DiningAppPromo.tsx

@@ -1,5 +1,5 @@
 import { AppStoreLogo, ForkKnife, X as CloseIcon } from '@phosphor-icons/react';
-import { UT_DINING_APP_STORE_URL, UT_DINING_GOOGLE_PLAY_URL } from '@shared/util/appUrls';
+import { UT_DINING_APP_STORE_URL } from '@shared/util/appUrls';
 import { Button } from '@views/components/common/Button';
 import Text from '@views/components/common/Text/Text';
 import React from 'react';

src/views/components/calendar/ResourceLinks.tsx

@@ -14,6 +14,10 @@ interface LinkItem {
 }
 
 const links: LinkItem[] = [
+    {
+        text: "Spring '26 Course Schedule",
+        url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20262/',
+    },
     {
         text: "Fall '25 Course Schedule",
         url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20259/',
@@ -22,10 +26,6 @@ const links: LinkItem[] = [
         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/',
-    // },
     {
         text: 'Course Schedule Archives',
         url: 'https://registrar.utexas.edu/schedules/archive',
@@ -34,10 +34,10 @@ const links: LinkItem[] = [
         text: 'My Degree Audit (IDA)',
         url: 'https://utdirect.utexas.edu/apps/degree/audits/',
     },
-    // {
+    {
-    //     text: "'24-'25 Academic Calendar",
+        text: "'25-'26 Academic Calendar",
-    //     url: 'https://registrar.utexas.edu/calendars/24-25',
+        url: 'https://registrar.utexas.edu/calendars/25-26',
-    // },
+    },
     {
         text: 'Registration Info Sheet (RIS)',
         url: 'https://utdirect.utexas.edu/registrar/ris.WBX',

src/views/components/calendar/utils.ts

@@ -1,4 +1,5 @@
 import { tz, TZDate } from '@date-fns/tz';
+import exportSchedule from '@pages/background/lib/exportSchedule';
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
 import type { Course } from '@shared/types/Course';
 import type { CourseMeeting } from '@shared/types/CourseMeeting';
@@ -261,6 +262,22 @@ export const saveAsCal = async () => {
     downloadBlob(icsString, 'CALENDAR', 'schedule.ics');
 };
 
+/**
+ * Saves current schedule to JSON that can be imported on other devices.
+ * @param id - Provided schedule ID to download
+ */
+export const handleExportJson = async (id: string) => {
+    const jsonString = await exportSchedule(id);
+    if (jsonString) {
+        const schedules = await UserScheduleStore.get('schedules');
+        const schedule = schedules.find(s => s.id === id);
+        const fileName = `${schedule?.name ?? `schedule_${id}`}_${new Date().toISOString().replace(/[:.]/g, '-')}.json`;
+        await downloadBlob(jsonString, 'JSON', fileName);
+    } else {
+        console.error('Error exporting schedule: jsonString is undefined');
+    }
+};
+
 /**
  * Saves the calendar as a PNG image.
  *

src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss

@@ -15,6 +15,11 @@
     @apply font-sans;
     color: #303030;
 
+    // fix font-family on injected pages
+    * {
+        @apply font-sans;
+    }
+
     [data-rfd-drag-handle-context-id=':r1:'] {
         cursor: move;
     }

src/views/components/common/WhatsNewPopup.tsx

@@ -15,7 +15,7 @@ import React, { useEffect, useState } from 'react';
  */
 const WHATSNEW_POPUP_VERSION = 2;
 
-const WHATSNEW_VIDEO_URL = 'https://cdn.longhorns.dev/whats-new-v2.1.2.mp4';
+// const WHATSNEW_VIDEO_URL = 'https://cdn.longhorns.dev/whats-new-v2.1.2.mp4';
 
 type Feature = {
     id: string;
@@ -60,7 +60,7 @@ const NEW_FEATURES = [
  * @returns A JSX of WhatsNewPopupContent component.
  */
 export default function WhatsNewPopupContent(): JSX.Element {
-    const [videoError, setVideoError] = useState(false);
+    const [videoError, _setVideoError] = useState(false);
 
     return (
         <div className='w-full flex flex-row justify-between'>

src/views/components/injected/AddAllButton.tsx

@@ -1,6 +1,5 @@
 import { addCourseByURL } from '@pages/background/lib/addCourseByURL';
 import { background } from '@shared/messages';
-import { validateLoginStatus } from '@shared/util/checkLoginStatus';
 import { Button } from '@views/components/common/Button';
 import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
 import useSchedules from '@views/hooks/useSchedules';
@@ -43,6 +42,8 @@ export default function InjectedButton(): JSX.Element | null {
                 await addCourseByURL(activeSchedule, a);
             }
         } else {
+            // We'll allow the alert for this WIP feature
+            // eslint-disable-next-line no-alert
             window.alert('Logged into UT Registrar.');
         }
     };

src/views/components/injected/CollapsibleCourses/CourseCollapsible.tsx

@@ -1,62 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-
-function getCourseSections() {
-    const table = document.querySelector('table');
-    if (!table) return [];
-
-    const rows = Array.from(table.querySelectorAll('tr'));
-    const sections: { header: HTMLTableRowElement; children: HTMLTableRowElement[] }[] = [];
-    let currentSection: { header: HTMLTableRowElement; children: HTMLTableRowElement[] } | null = null;
-
-    for (const row of rows) {
-        const headerCell = row.querySelector('td.course_header');
-        if (headerCell) {
-            if (currentSection) sections.push(currentSection);
-            currentSection = { header: row, children: [] };
-        } else if (currentSection) {
-            currentSection.children.push(row);
-        }
-    }
-    if (currentSection) sections.push(currentSection);
-    return sections;
-}
-
-const CollapsibleSection: React.FC<{
-    header: HTMLTableRowElement;
-    childrenRows: HTMLTableRowElement[];
-}> = ({ header, childrenRows }) => {
-    const [open, setOpen] = useState(false);
-
-    useEffect(() => {
-        // Hide children rows initially
-        childrenRows.forEach(row => (row.style.display = open ? '' : 'none'));
-        // Clean up on unmount
-        return () => {
-            childrenRows.forEach(row => (row.style.display = ''));
-        };
-    }, [open, childrenRows]);
-
-    // Inject a button into the header cell
-    useEffect(() => {
-        const cell = header.querySelector('td.course_header');
-        if (!cell) return;
-        let button = cell.querySelector('.utrp-collapse-btn') as HTMLButtonElement | null;
-        if (!button) {
-            button = document.createElement('button');
-            button.className = 'utrp-collapse-btn';
-            button.style.marginRight = '8px';
-            cell.prepend(button);
-        }
-        button.textContent = open ? '▼' : '►';
-        button.onclick = () => setOpen(o => !o);
-        // Clean up
-        return () => {
-            button?.remove();
-        };
-    }, [header, open]);
-
-    return null;
-};
-
-export default

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

@@ -1,3 +1,5 @@
+import createSchedule from '@pages/background/lib/createSchedule';
+import switchSchedule from '@pages/background/lib/switchSchedule';
 import {
     ArrowUpRight,
     CalendarDots,
@@ -14,8 +16,10 @@ import { background } from '@shared/messages';
 import type { Course } from '@shared/types/Course';
 import type Instructor from '@shared/types/Instructor';
 import type { UserSchedule } from '@shared/types/UserSchedule';
+import { englishStringifyList } from '@shared/util/string';
 import { Button } from '@views/components/common/Button';
 import { Chip, coreMap, flagMap } from '@views/components/common/Chip';
+import { usePrompt } from '@views/components/common/DialogProvider/DialogProvider';
 import Divider from '@views/components/common/Divider';
 import Link from '@views/components/common/Link';
 import Text from '@views/components/common/Text/Text';
@@ -60,7 +64,7 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
 
     const [isCopied, setIsCopied] = useState<boolean>(false);
     const lastCopyTime = useRef<number>(0);
-
+    const showDialog = usePrompt();
     const getInstructorFullName = (instructor: Instructor) => instructor.toString({ format: 'first_last' });
 
     const handleCopy = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
@@ -112,10 +116,78 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
         }
     };
 
+    const handleAddToNewSchedule = async (close: () => void) => {
+        const newScheduleId = await createSchedule(`${course.semester.season} ${course.semester.year}`);
+        switchSchedule(newScheduleId);
+        addCourse({ course, scheduleId: newScheduleId });
+        close();
+    };
+
     const handleAddOrRemoveCourse = async () => {
+        const uniqueSemesterCodes = [
+            ...new Set(
+                activeSchedule.courses
+                    .map(course => course.semester.code)
+                    .filter((code): code is string => code !== undefined)
+            ),
+        ];
+        uniqueSemesterCodes.sort();
+        const codeToReadableMap: Record<string, string> = {};
+        activeSchedule.courses.forEach(course => {
+            const { code } = course.semester;
+            if (code) {
+                const readable = `${course.semester.season} ${course.semester.year}`;
+                codeToReadableMap[code] = readable;
+            }
+        });
+        const sortedSemesters = uniqueSemesterCodes
+            .map(code => codeToReadableMap[code])
+            .filter((value): value is string => value !== undefined);
+        const activeSemesters = englishStringifyList(sortedSemesters);
+
         if (!activeSchedule) return;
         if (!courseAdded) {
-            addCourse({ course, scheduleId: activeSchedule.id });
+            const currentSemesterCode = course.semester.code;
+            // Show warning if this course is for a different semester than the selected schedule
+            if (
+                activeSchedule.courses.length > 0 &&
+                activeSchedule.courses.every(otherCourse => otherCourse.semester.code !== currentSemesterCode)
+            ) {
+                const dialogButtons = (close: () => void) => (
+                    <>
+                        <Button variant='minimal' color='ut-black' onClick={close}>
+                            Cancel
+                        </Button>
+                        <Button
+                            variant='filled'
+                            color='ut-burntorange'
+                            onClick={() => {
+                                handleAddToNewSchedule(close);
+                            }}
+                        >
+                            Start a new schedule
+                        </Button>
+                    </>
+                );
+
+                showDialog({
+                    title: 'This course section is from a different semester!',
+                    description: (
+                        <>
+                            The section you&apos;re adding is for{' '}
+                            <span className='text-ut-burntorange whitespace-nowrap'>
+                                {course.semester.season} {course.semester.year}
+                            </span>
+                            , but your current schedule contains sections in{' '}
+                            <span className='text-ut-burntorange whitespace-nowrap'>{activeSemesters}</span>. Mixing
+                            semesters in one schedule may cause confusion.
+                        </>
+                    ),
+                    buttons: dialogButtons,
+                });
+            } else {
+                addCourse({ course, scheduleId: activeSchedule.id });
+            }
         } else {
             removeCourse({ course, scheduleId: activeSchedule.id });
         }

src/views/components/injected/SearchResultShader.tsx

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+// @TODO Get a better name for this class
+
+/**
+ * The existing search results (kws), only with alternate shading for easier readability
+ *
+ */
+export default function ShadedResults(): null {
+    useEffect(() => {
+        const table = document.getElementById('kw_results_table');
+        if (!table) {
+            console.error('Results table not found');
+            return;
+        }
+
+        const tbody = table.querySelector('tbody');
+        if (!tbody) {
+            console.error('Table tbody not found');
+            return;
+        }
+
+        const style = document.createElement('style');
+        style.textContent = `
+            #kw_results_table tbody tr:nth-child(even) {
+                background-color: #f0f0f0 !important;
+            }
+            #kw_results_table tbody tr:nth-child(even) td {
+                background-color: #f0f0f0 !important;
+            }
+        `;
+        document.head.appendChild(style);
+
+        return () => {
+            style.remove();
+        };
+    }, []);
+
+    return null;
+}

src/views/components/settings/Settings.tsx

@@ -1,16 +1,13 @@
 // import addCourse from '@pages/background/lib/addCourse';
 import { addCourseByURL } from '@pages/background/lib/addCourseByURL';
 import { deleteAllSchedules } from '@pages/background/lib/deleteSchedule';
-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';
 // import CalendarCourseCell from '@views/components/calendar/CalendarCourseCell';
@@ -32,6 +29,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 
 import IconoirGitFork from '~icons/iconoir/git-fork';
 
+import { handleExportJson } from '../calendar/utils';
 // import { ExampleCourse } from 'src/stories/components/ConflictsWithWarning.stories';;
 import FileUpload from '../common/FileUpload';
 import { useMigrationDialog } from '../common/MigrationDialog';
@@ -232,18 +230,6 @@ export default function Settings(): JSX.Element {
         });
     };
 
-    const handleExportClick = async (id: string) => {
-        const jsonString = await exportSchedule(id);
-        if (jsonString) {
-            const schedules = await UserScheduleStore.get('schedules');
-            const schedule = schedules.find(s => s.id === id);
-            const fileName = `${schedule?.name ?? `schedule_${id}`}_${new Date().toISOString().replace(/[:.]/g, '-')}.json`;
-            await downloadBlob(jsonString, 'JSON', fileName);
-        } else {
-            console.error('Error exporting schedule: jsonString is undefined');
-        }
-    };
-
     const handleImportClick = async (event: React.ChangeEvent<HTMLInputElement>) => {
         const file = event.target.files?.[0];
         if (file) {
@@ -400,7 +386,7 @@ export default function Settings(): JSX.Element {
                                     <Button
                                         variant='outline'
                                         color='ut-burntorange'
-                                        onClick={() => handleExportClick(activeSchedule.id)}
+                                        onClick={() => handleExportJson(activeSchedule.id)}
                                     >
                                         Export
                                     </Button>

src/views/hooks/useWhatsNew.tsx

@@ -5,8 +5,7 @@ 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';
-import useChangelog from './useChangelog';
 
 const LDIconURL = new URL('/src/assets/LD-icon-new.png', import.meta.url).href;
 
@@ -17,8 +16,8 @@ const LDIconURL = new URL('/src/assets/LD-icon-new.png', import.meta.url).href;
  */
 export default function useWhatsNewPopUp(): () => void {
     const showDialog = useDialog();
-    const showChangeLog = useChangelog();
+    // const showChangeLog = useChangelog();
-    const { version } = chrome.runtime.getManifest();
+    // const { version } = chrome.runtime.getManifest();
 
     const showPopUp = () => {
         showDialog(close => ({

src/views/lib/getSiteSupport.ts

@@ -15,6 +15,7 @@ export const SiteSupport = {
     MY_UT: 'MY_UT',
     COURSE_CATALOG_SEARCH: 'COURSE_CATALOG_SEARCH',
     CLASSLIST: 'CLASSLIST',
+    COURSE_CATALOG_KWS: 'COURSE_CATALOG_KWS',
 } as const;
 
 /**
@@ -40,6 +41,9 @@ export default function getSiteSupport(url: string): SiteSupportType | null {
         return SiteSupport.UT_PLANNER;
     }
     if (url.includes('utdirect.utexas.edu/apps/registrar/course_schedule')) {
+        if (url.includes('kws_results')) {
+            return SiteSupport.COURSE_CATALOG_KWS;
+        }
         if (url.includes('results')) {
             return SiteSupport.COURSE_CATALOG_LIST;
         }

unocss.config.ts

@@ -1,4 +1,4 @@
-import presetUno from '@unocss/preset-uno';
+import presetWind4 from '@unocss/preset-wind4';
 import presetWebFonts from '@unocss/preset-web-fonts';
 import transformerDirectives from '@unocss/transformer-directives';
 import transformerVariantGroup from '@unocss/transformer-variant-group';
@@ -50,7 +50,8 @@ export default defineConfig({
         },
     ],
     presets: [
-        presetUno(),
+        presetWind4(),
+        // todo: for some reason, breaking eslint ._.
         presetWebFonts({
             provider: 'none',
             fonts: {

vite.config.ts

@@ -207,6 +207,9 @@ export default defineConfig({
         hmr: {
             clientPort: 5173,
         },
+        cors: {
+            origin: [/chrome-extension:\/\//],
+        },
         proxy: {
             '/debug.html': {
                 target: 'http://localhost:5173',
@@ -256,16 +259,16 @@ export default defineConfig({
             },
         },
     },
-    test: {
+    // test: {
-        coverage: {
+    // 	coverage: {
-            provider: 'v8',
+    // 		provider: "v8",
-        },
+    // 	},
-    },
+    // },
-    css: {
+    // css: {
-        preprocessorOptions: {
+    // 	preprocessorOptions: {
-            scss: {
+    // 		scss: {
-                api: 'modern-compiler',
+    // 			api: "modern-compiler",
-            },
+    // 		},
-        },
+    // 	},
-    },
+    // },
 });