feat: add isDeveloper

src/pages/map/Map.tsx

@@ -1,12 +1,14 @@
 import DialogProvider from '@views/components/common/DialogProvider/DialogProvider';
 import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
 import Map from '@views/components/map/Map';
+import useKC_DABR_WASM from 'kc-dabr-wasm';
 import React from 'react';
 
 /**
  * Renders the map page for the UTRP (UT Registration Plus) extension.
  */
 export default function MapPage() {
+    useKC_DABR_WASM();
     return (
         <ExtensionRoot>
             <DialogProvider>

src/shared/storage/DevStore.ts

@@ -4,6 +4,8 @@ import { createLocalStore, debugStore } from 'chrome-extension-toolkit';
  * A store that is used to store data that is only relevant during development
  */
 interface IDevStore {
+    /** whether the user is a developer */
+    isDeveloper: boolean;
     /** the tabId for the debug tab */
     debugTabId?: number;
     /** whether the debug tab is visible */
@@ -17,6 +19,7 @@ interface IDevStore {
 }
 
 export const DevStore = createLocalStore<IDevStore>({
+    isDeveloper: false,
     debugTabId: undefined,
     isTabReloading: true,
     wasDebugTabVisible: false,

src/views/components/settings/Settings.tsx

@@ -5,6 +5,7 @@ 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';
@@ -38,14 +39,14 @@ import { useMigrationDialog } from '../common/MigrationDialog';
 import DevMode from './DevMode';
 import Preview from './Preview';
 
-const DISPLAY_PREVIEWS = false;
-const PREVIEW_SECTION_DIV_CLASSNAME = DISPLAY_PREVIEWS ? 'w-1/2 space-y-4' : 'flex-grow space-y-4';
-
 const manifest = chrome.runtime.getManifest();
 
 const gitHubStatsService = new GitHubStatsService();
 const includeMergedPRs = false;
 
+const DISPLAY_PREVIEWS = false;
+const PREVIEW_SECTION_DIV_CLASSNAME = DISPLAY_PREVIEWS ? 'w-1/2 space-y-4' : 'flex-grow space-y-4';
+
 /**
  * Custom hook for enabling developer mode.
  *
@@ -105,6 +106,8 @@ export default function Settings(): JSX.Element {
     const [activeSchedule] = useSchedules();
     // const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
 
+    const [isDeveloper, setIsDeveloper] = useState<boolean>(false);
+
     const showDialog = usePrompt();
     const handleChangelogOnClick = useChangelog();
 
@@ -134,6 +137,16 @@ export default function Settings(): JSX.Element {
             setCalendarNewTab(alwaysOpenCalendarInNewTab);
         };
 
+        const initDS = async () => {
+            const isDev = await DevStore.get('isDeveloper');
+            setIsDeveloper(isDev);
+        };
+
+        const ds_l1 = DevStore.listen('isDeveloper', async ({ newValue }) => {
+            setIsDeveloper(newValue);
+        });
+
+        initDS();
         fetchGitHubStats();
         initAndSetSettings();
 
@@ -184,6 +197,8 @@ export default function Settings(): JSX.Element {
             OptionsStore.removeListener(l4);
             OptionsStore.removeListener(l5);
 
+            DevStore.removeListener(ds_l1);
+
             window.removeEventListener('keydown', handleKeyPress);
         };
     }, []);
@@ -257,6 +272,7 @@ export default function Settings(): JSX.Element {
     const [devMode, toggleDevMode] = useDevMode(10);
 
     if (devMode) {
+        DevStore.set('isDeveloper', true);
         return <DevMode />;
     }
 
@@ -534,31 +550,35 @@ export default function Settings(): JSX.Element {
                             </Button>
                         </div>
 
-                        <Divider size='auto' orientation='horizontal' />
+                        {isDeveloper && (
+                            <>
+                                <Divider size='auto' orientation='horizontal' />
 
-                        <div className='flex items-center justify-between'>
+                                <div className='flex items-center justify-between'>
-                            <div className='max-w-xs'>
+                                    <div className='max-w-xs'>
-                                <Text variant='h4' className='text-ut-burntorange font-semibold'>
+                                        <Text variant='h4' className='text-ut-burntorange font-semibold'>
-                                    Debug Page
+                                            Debug Page
-                                </Text>
+                                        </Text>
-                                <span className='mx-2 border border-ut-gray rounded px-2 py-0.5 text-xs text-ut-gray font-medium'>
+                                        <span className='mx-2 border border-ut-gray rounded px-2 py-0.5 text-xs text-ut-gray font-medium'>
-                                    DEV
+                                            DEV
-                                </span>
+                                        </span>
-                                <p className='text-sm text-gray-600'>
+                                        <p className='text-sm text-gray-600'>
-                                    Open the developer debug page to view extension storage and debug logs
+                                            Open the developer debug page to view extension storage and debug logs
-                                </p>
+                                        </p>
-                            </div>
+                                    </div>
-                            <Button
+                                    <Button
-                                variant='outline'
+                                        variant='outline'
-                                color='ut-burntorange'
+                                        color='ut-burntorange'
-                                onClick={() => {
+                                        onClick={() => {
-                                    const debugPageUrl = chrome.runtime.getURL(CRX_PAGES.DEBUG);
+                                            const debugPageUrl = chrome.runtime.getURL(CRX_PAGES.DEBUG);
-                                    background.openNewTab({ url: debugPageUrl });
+                                            background.openNewTab({ url: debugPageUrl });
-                                }}
+                                        }}
-                            >
+                                    >
-                                Open Debug Page
+                                        Open Debug Page
-                            </Button>
+                                    </Button>
-                        </div>
+                                </div>
+                            </>
+                        )}
 
                         <Divider size='auto' orientation='horizontal' />