feat: settings page (#260)

* feat: setup settings page boilerplate

* feat: split view into halves

* feat: add preview for Customization Options section

* feat: add OptionStore logic and LD icon

* feat: add courseStatusChips functionality

* feat: migrate experimental settings to proper settings

* feat: center Preview children and add className override

* feat: add GitHub stats

* feat: open GitHub user profile onclick

* feat: get user GitHub stats

* feat: refactor into useGitHubStats hook

* feat: toggle GitHub stats when the user presses the 'S' key

* chore: update title

* fix: remove extra file

* feat: refactor and add DialogProvider

* fix: import

* test: this commit has issues

* fix: no schedule bug

* fix: longhorn developers icon not rendering in prod builds

* feat(pr-review): fix UI and comment out experimental code

* chore: run lint and prettier

* feat: add responsive design

* feat: use @octokit/rest and fix GitHub stats

src/views/components/calendar/CalendarCourseCell.tsx

@@ -1,11 +1,11 @@
+import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
 import type { StatusType } from '@shared/types/Course';
 import { Status } from '@shared/types/Course';
 import type { CourseColors } from '@shared/types/ThemeColors';
 import { pickFontColor } from '@shared/util/colors';
-import { enableCourseStatusChips } from '@shared/util/experimental';
 import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import ClosedIcon from '~icons/material-symbols/lock';
 import WaitlistIcon from '~icons/material-symbols/timelapse';
@@ -43,6 +43,21 @@ export default function CalendarCourseCell({
     className,
     onClick,
 }: CalendarCourseCellProps): JSX.Element {
+    const [enableCourseStatusChips, setEnableCourseStatusChips] = useState<boolean>(false);
+
+    useEffect(() => {
+        initSettings().then(({ enableCourseStatusChips }) => setEnableCourseStatusChips(enableCourseStatusChips));
+
+        const l1 = OptionsStore.listen('enableCourseStatusChips', async ({ newValue }) => {
+            setEnableCourseStatusChips(newValue);
+            // console.log('enableCourseStatusChips', newValue);
+        });
+
+        return () => {
+            OptionsStore.removeListener(l1);
+        };
+    }, []);
+
     let rightIcon: React.ReactNode | null = null;
     if (enableCourseStatusChips) {
         if (status === Status.WAITLISTED) {