BoG F25 + S26

.eslintignore

@@ -8,4 +8,5 @@
 /tests/fixtures/**
 /tests/performance/**
 /tmp/**
-/src/vendor/**
+/src/vendor/**
+src/utils/mapbox/scripts/

.eslintrc.json

@@ -123,7 +123,16 @@
     // Disable false positives for render props
     "react/no-unstable-nested-components": ["error", { "allowAsProps": true }],
     // Allow code like `<>{children}</>` to convert React.ReactNode => React.ReactElement
-    "react/jsx-no-useless-fragment": ["error", { "allowExpressions": true }]
+    "react/jsx-no-useless-fragment": ["error", { "allowExpressions": true }],
+    // Use ts version of no shadow
+    "no-shadow": "off",
+    "@typescript-eslint/no-shadow": [
+      "error",
+      {
+        "ignoreTypeValueShadow": true,
+        "ignoreFunctionTypeParameterNameValueShadow": true
+      }
+    ]
   },
   "overrides": [
     {

.gitignore

@@ -24,3 +24,5 @@ yarn-error.log*
 /.idea
 /.vscode
 .env
+
+archive/

package.json

@@ -39,9 +39,11 @@
     "react-transition-group": "^4.4.2",
     "react-virtualized": "^9.21.2",
     "s-ago": "^2.2.0",
+    "swr": "^2.3.6",
     "tslib": "2.3.0",
     "use-local-storage-state": "^18.1.2",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@bitwarden/cli": "^2022.8.0",

src/components/ActionRow/stylesheet.scss

@@ -8,7 +8,7 @@
   padding: 4px;
 
   .action-row-header {
-    padding: 4px;
+    padding: 5px;
     display: flex;
     align-items: center;
 

src/components/App/content.tsx

@@ -12,12 +12,16 @@ import SponsorBanner from '../SponsorBanner';
 import {
   AppNavigationContext,
   AppMobileNav,
-  NAV_TABS,
   AppMobileNavDisplay,
+  SchedulerPageType,
 } from './navigation';
 import { classes } from '../../utils/misc';
 import { AccountContextValue } from '../../contexts/account';
 import { Term } from '../../types';
+import CourseDetails from '../CourseDetails';
+import SectionDetails from '../SectionDetails';
+
+export const WEB_NAV_TABS = ['Scheduler', 'Map', 'Finals'];
 
 /**
  * Renders the actual content at the root of the app
@@ -26,18 +30,18 @@ import { Term } from '../../types';
  * This component is memoized, so it only re-renders when its context changes.
  */
 function AppContentBase(): React.ReactElement {
-  const { currentTabIndex, setTabIndex, openDrawer } =
+  const { currentTab, setTab, openDrawer, currentSchedulerPage } =
     useContext(AppNavigationContext);
   const captureRef = useRef<HTMLDivElement>(null);
 
   return (
     <>
       <AppMobileNav captureRef={captureRef} />
       <Header
-        currentTab={currentTabIndex}
-        onChangeTab={setTabIndex}
+        currentTab={currentTab}
+        onChangeTab={setTab}
         onToggleMenu={openDrawer}
-        tabs={NAV_TABS}
+        tabs={WEB_NAV_TABS}
         captureRef={captureRef}
       />
       <SponsorBanner />
@@ -54,17 +58,22 @@ function AppContentBase(): React.ReactElement {
             >
               <div>
                 There was en error somewhere somewhere in the{' '}
-                {NAV_TABS[currentTabIndex] ?? '?'} tab and it can&apos;t
-                continue.
+                {currentTab ?? '?'} tab and it can&apos;t continue.
               </div>
               <div>Try refreshing the page to see if it fixes the issue.</div>
             </ErrorDisplay>
           </SkeletonContent>
         )}
       >
-        {currentTabIndex === 0 && <Scheduler />}
-        {currentTabIndex === 1 && <Map />}
-        {currentTabIndex === 2 && <Finals />}
+        {currentTab === 'Scheduler' && <Scheduler />}
+        {currentTab === 'Course details' &&
+          (currentSchedulerPage.type === SchedulerPageType.SECTION_DETAILS ? (
+            <SectionDetails courseId={currentSchedulerPage.courseId} />
+          ) : (
+            <CourseDetails />
+          ))}
+        {currentTab === 'Map' && <Map />}
+        {currentTab === 'Finals' && <Finals />}
         {/* Fake calendar used to capture screenshots */}
         <div className="capture-container" ref={captureRef}>
           <Calendar className="fake-calendar" capture overlayCrns={[]} />
@@ -104,24 +113,24 @@ export function AppSkeleton({
   accountState,
   termsState,
 }: AppSkeletonProps): React.ReactElement {
-  const { currentTabIndex, setTabIndex, openDrawer } =
-    useContext(AppNavigationContext);
+  const { currentTab, setTab, openDrawer } = useContext(AppNavigationContext);
 
   return (
     <>
       <AppMobileNavDisplay />
       <HeaderDisplay
-        currentTab={currentTabIndex}
-        onChangeTab={setTabIndex}
+        currentTab={currentTab}
+        onChangeTab={setTab}
         onToggleMenu={openDrawer}
-        tabs={NAV_TABS}
+        tabs={WEB_NAV_TABS}
         accountState={accountState ?? { type: 'loading' }}
         termsState={
           termsState == null
             ? { type: 'loading' }
             : { type: 'loaded', ...termsState }
         }
         versionsState={{ type: 'loading' }}
+        paletteState={{ type: 'loading' }}
         skeleton
       />
       {children}

src/components/App/navigation.tsx

@@ -14,22 +14,35 @@ import useScreenWidth from '../../hooks/useScreenWidth';
 import { ErrorWithFields } from '../../log';
 import HeaderActionBar from '../HeaderActionBar';
 
-export const NAV_TABS = ['Scheduler', 'Map', 'Finals'];
+export const MOBILE_NAV_TABS = ['Scheduler', 'Course details', 'Map', 'Finals'];
+
+export enum SchedulerPageType {
+  CALENDAR = 'calendar',
+  COURSE_DETAILS = 'course-details',
+  SECTION_DETAILS = 'section-details',
+}
+
+export type SchedulerPageState =
+  | { type: SchedulerPageType.CALENDAR }
+  | { type: SchedulerPageType.COURSE_DETAILS }
+  | { type: SchedulerPageType.SECTION_DETAILS; courseId: string };
 
 export type AppNavigationContextValue = {
-  currentTabIndex: number;
-  setTabIndex: (next: number) => void;
+  currentTab: string;
+  setTab: (next: string) => void;
   isDrawerOpen: boolean;
   openDrawer: () => void;
   closeDrawer: () => void;
+  currentSchedulerPage: SchedulerPageState;
+  setCurrentSchedulerPage: (page: SchedulerPageState) => void;
 };
 
 export const AppNavigationContext =
   React.createContext<AppNavigationContextValue>({
-    currentTabIndex: 0,
-    setTabIndex: (): void => {
+    currentTab: 'Scheduler',
+    setTab: (): void => {
       throw new ErrorWithFields({
-        message: 'empty AppNavigationContext.setTabIndex value being used',
+        message: 'empty AppNavigationContext.setTab value being used',
       });
     },
     isDrawerOpen: false,
@@ -43,6 +56,13 @@ export const AppNavigationContext =
         message: 'empty AppNavigationContext.closeDrawer value being used',
       });
     },
+    currentSchedulerPage: { type: SchedulerPageType.CALENDAR },
+    setCurrentSchedulerPage: (): void => {
+      throw new ErrorWithFields({
+        message:
+          'empty AppNavigationContext.setCurrentSchedulerPage value being used',
+      });
+    },
   });
 
 export type AppNavigationProps = {
@@ -59,7 +79,10 @@ export function AppNavigation({
   const mobile = !useScreenWidth(DESKTOP_BREAKPOINT);
 
   // Allow top-level tab-based navigation
-  const [currentTabIndex, setTabIndex] = useState(0);
+  const [currentTab, setTab] = useState<string>('Scheduler');
+
+  const [currentSchedulerPage, setCurrentSchedulerPage] =
+    useState<SchedulerPageState>({ type: SchedulerPageType.CALENDAR });
 
   // Handle the status of the drawer being open on mobile
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
@@ -75,13 +98,23 @@ export function AppNavigation({
   // Memoize the context value
   const contextValue = useMemo<AppNavigationContextValue>(
     () => ({
-      currentTabIndex,
-      setTabIndex,
+      currentTab,
+      setTab,
       isDrawerOpen,
       openDrawer,
       closeDrawer,
+      currentSchedulerPage,
+      setCurrentSchedulerPage,
     }),
-    [currentTabIndex, setTabIndex, isDrawerOpen, openDrawer, closeDrawer]
+    [
+      currentTab,
+      setTab,
+      isDrawerOpen,
+      openDrawer,
+      closeDrawer,
+      currentSchedulerPage,
+      setCurrentSchedulerPage,
+    ]
   );
 
   return (
@@ -135,7 +168,7 @@ export function AppMobileNavDisplay({
 }: AppMobileNavDisplayProps): React.ReactElement | null {
   const mobile = !useScreenWidth(DESKTOP_BREAKPOINT);
   const largeMobile = useScreenWidth(LARGE_MOBILE_BREAKPOINT);
-  const { currentTabIndex, setTabIndex, isDrawerOpen, closeDrawer } =
+  const { currentTab, setTab, isDrawerOpen, closeDrawer } =
     useContext(AppNavigationContext);
 
   if (!mobile) return null;
@@ -156,9 +189,12 @@ export function AppMobileNavDisplay({
       )}
 
       <NavMenu
-        items={NAV_TABS}
-        currentItem={currentTabIndex}
-        onChangeItem={setTabIndex}
+        items={MOBILE_NAV_TABS}
+        currentItem={currentTab}
+        onChangeItem={(next): void => {
+          setTab(next);
+          closeDrawer();
+        }}
       />
     </NavDrawer>
   );

src/components/App/stylesheet.scss

@@ -21,13 +21,13 @@
     display: flex;
     align-items: stretch;
 
-    .calendar-container {
+    .scheduler-container {
       flex: 1;
       display: flex;
       flex-direction: column;
       align-items: stretch;
       overflow-y: auto;
-
+      gap: 20px;
       .calendar {
         min-height: $calendar-height;
       }
@@ -127,11 +127,11 @@ body.light .App {
           line-height: 28px;
 
           span {
-            color: #C56E5B;
+            color: #c56e5b;
           }
-          
+
           a {
-            color: #C56E5B;
+            color: #c56e5b;
           }
         }
       }
@@ -144,7 +144,7 @@ body.light .App {
     .footer {
       position: absolute;
       bottom: 32px;
-      
+
       img {
         width: 200px;
       }
@@ -186,10 +186,10 @@ body.light .App {
 
     .footer {
       bottom: 18px;
-      
+
       img {
         width: 150px;
       }
     }
   }
-}
+}

src/components/Breadcrumb/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
+
+import './stylesheet.scss';
+
+export type BreadcrumbItem = {
+  label: string;
+  onClick?: () => void;
+};
+
+export type BreadcrumbProps = {
+  items: BreadcrumbItem[];
+};
+
+export default function Breadcrumb({
+  items,
+}: BreadcrumbProps): React.ReactElement {
+  return (
+    <nav className="breadcrumb-container">
+      <ul className="breadcrumb-list">
+        {items.map((item, index) => (
+          <li key={index} className="breadcrumb-item">
+            {item.onClick ? (
+              <button
+                onClick={item.onClick}
+                className="breadcrumb-clickable"
+                type="button"
+              >
+                {item.label}
+              </button>
+            ) : (
+              <span className="breadcrumb-unclickable">{item.label}</span>
+            )}
+            {index < items.length - 1 && (
+              <FontAwesomeIcon
+                icon={faChevronRight}
+                className="breadcrumb-separator"
+              />
+            )}
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}