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/shared/storage/OptionsStore.ts

@@ -3,20 +3,44 @@ import { createSyncStore, debugStore } from 'chrome-extension-toolkit';
 /**
  * A store that is used for storing user options
  */
-interface IOptionsStore {
-    /** whether we should automatically highlight conflicts on the course schedule page */
-    shouldHighlightConflicts: boolean;
-    /** whether we should automatically scroll to load more courses on the course schedule page (without having to click next) */
-    shouldScrollToLoad: boolean;
+export interface IOptionsStore {
+    /** whether we should enable course status chips (indicator for waitlisted, cancelled, and closed courses) */
+    enableCourseStatusChips: boolean;
 
-    // url: URL;
+    /** whether we should enable course's time and location in the extension's popup */
+    enableTimeAndLocationInPopup: boolean;
+
+    /** whether we should automatically highlight conflicts on the course schedule page (adds a red strikethrough to courses that have conflicting times) */
+    enableHighlightConflicts: boolean;
+
+    /** whether we should automatically scroll to load more courses on the course schedule page (without having to click next) */
+    enableScrollToLoad: boolean;
+
+    /** whether we should automatically refresh the data for the waitlist, course status, and other info with the latest data from UT's site */
+    enableDataRefreshing: boolean;
 }
 
 export const OptionsStore = createSyncStore<IOptionsStore>({
-    shouldHighlightConflicts: true,
-    shouldScrollToLoad: true,
+    enableCourseStatusChips: false,
+    enableTimeAndLocationInPopup: false,
+    enableHighlightConflicts: true,
+    enableScrollToLoad: true,
+    enableDataRefreshing: true,
 });
 
+/**
+ * Initializes the settings by retrieving the values from the OptionsStore.
+ * @returns {Promise<IOptionsStore>} A promise that resolves to an object satisfying the IOptionsStore interface.
+ */
+export const initSettings = async () =>
+    ({
+        enableCourseStatusChips: await OptionsStore.get('enableCourseStatusChips'),
+        enableTimeAndLocationInPopup: await OptionsStore.get('enableTimeAndLocationInPopup'),
+        enableHighlightConflicts: await OptionsStore.get('enableHighlightConflicts'),
+        enableScrollToLoad: await OptionsStore.get('enableScrollToLoad'),
+        enableDataRefreshing: await OptionsStore.get('enableDataRefreshing'),
+    }) satisfies IOptionsStore;
+
 // Clothing retailer right
 
 debugStore({ OptionsStore });

src/shared/util/experimental.ts

@@ -1,3 +0,0 @@
-export const enableCourseStatusChips: boolean = false;
-export const constenableSettingsPage: boolean = false;
-export const enableCourseRefreshing: boolean = false;