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/pages/background/lib/deleteSchedule.ts

@@ -1,5 +1,7 @@
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
 
+import createSchedule from './createSchedule';
+
 /**
  * Deletes a schedule with the specified name.
  *
@@ -32,3 +34,14 @@ export default async function deleteSchedule(scheduleId: string): Promise<string
     }
     return undefined;
 }
+
+/**
+ * Deletes all schedules.
+ *
+ * @returns A promise that resolves when all schedules are deleted
+ */
+export async function deleteAllSchedules(): Promise<void> {
+    await UserScheduleStore.set('schedules', []);
+    await UserScheduleStore.set('activeIndex', 0);
+    await createSchedule('Schedule 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 { MessageListener } from 'chrome-extension-toolkit';
+import useKC_DABR_WASM from 'kc-dabr-wasm';
 import React, { useEffect } from 'react';
 
 /**
@@ -10,6 +11,7 @@ import React, { useEffect } from 'react';
  * @returns entire page
  */
 export default function CalendarMain() {
+    useKC_DABR_WASM();
     useEffect(() => {
         const tabInfoListener = new MessageListener<TabInfoMessages>({
             getTabInfo: ({ sendResponse }) => {

src/pages/options/App.tsx

@@ -1,35 +0,0 @@
-import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
-import Link from '@views/components/common/Link';
-import React from 'react';
-
-/**
- *
- */
-export default function App() {
-    return (
-        <ExtensionRoot>
-            <div className='text-base'>
-                <div className='font-serif'>
-                    <i>&ldquo;Real powerusers modify the sourcecode instead of using settings&rdquo;</i> - doprz
-                </div>
-                <div className='font-serif'>
-                    <i>
-                        &ldquo;become hackerman, go to{' '}
-                        <Link
-                            href='https://github.com/Longhorn-Developers/UT-Registration-Plus'
-                            className='link font-serif! italic!'
-                        >
-                            github
-                        </Link>{' '}
-                        yay&rdquo;
-                    </i>{' '}
-                    - razboy20
-                </div>
-                <p className='mt-2.5 text-sm text-ut-gray'>
-                    {import.meta.env.VITE_PACKAGE_VERSION} - {import.meta.env.MODE}{' '}
-                    {import.meta.env.VITE_BETA_BUILD ? 'beta' : ''}
-                </p>
-            </div>
-        </ExtensionRoot>
-    );
-}

src/pages/options/Settings.tsx

@@ -0,0 +1,22 @@
+import DialogProvider from '@views/components/common/DialogProvider/DialogProvider';
+import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
+import Settings from '@views/components/settings/Settings';
+import useKC_DABR_WASM from 'kc-dabr-wasm';
+import React from 'react';
+
+/**
+ * Renders the settings page for the UTRP (UT Registration Plus) extension.
+ * Allows customization options and displays credits for the development team.
+ *
+ * @returns The JSX element representing the settings page.
+ */
+export default function SettingsPage() {
+    useKC_DABR_WASM();
+    return (
+        <ExtensionRoot>
+            <DialogProvider>
+                <Settings />
+            </DialogProvider>
+        </ExtensionRoot>
+    );
+}

src/pages/options/index.tsx

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