feat: map page (#390)

* feat: add boilerplate

* feat: add working paths

* feat: improve building selection controls and add week schedule

Signed-off-by: doprz <52579214+doprz@users.noreply.github.com>

* fix: sort week schedule

Signed-off-by: doprz <52579214+doprz@users.noreply.github.com>

* feat(testing): improve pathfinding

* Revert "feat(testing): improve pathfinding"

This reverts commit 87998cedbf.

* feat: add pathfinding with building selection controls

Signed-off-by: doprz <52579214+doprz@users.noreply.github.com>

* feat: improve path finding algorithm thresholds

* feat: add DaySelector, PathStats, and WeekSchedule components

* feat: add working stats and daily schedule

* chore: refactor everything

* feat: add linear walkway node generation

* feat: add bezier curve walkway node generation

* feat: add circular walkway node generation

* docs: add docs

* feat: add individual path selection and bump version

* fix: tsdoc and updated components/utils

* chore(deps): update deps

* feat: add UTRP Map and Debug Page to Settings > Developer Mode

* chore: fix pr review comments

* chore: add showDebugNodes

* chore: add all buildings around the UT tower

* chore: add stadium POIs

* chore: add east mall buildings

* chore: update DaySelector to use proper button styling

* chore: add university ave walkway

* feat: add zoom, pan, and dev controls functionality

- Fix SVG Overlay Alignment
- Use SVG for map
- Add Dev Controls
- Fix day selector position
- Update the SVG's `preserveAspectRatio` attribute to `xMidYMid` meet to
ensure proper scaling
- Use `useCallback` for event handlers to prevent unnecessary re-renders
- Remove old PNG map

* feat: add dynamic rendering"

* feat: add dynamicRendering dev toggle and fullscreen support

* chore: update deps

* chore: disable viewport svg overlay culling if dynamic rendering is off

* chore: update pnpm-lock.yaml

* chore: add north mall buildings

* chore: add buildings next to JES

* refactor: map components into individual files

* fix: missing import

---------

Signed-off-by: doprz <52579214+doprz@users.noreply.github.com>

src/views/components/settings/Settings.tsx

@@ -7,6 +7,7 @@ import { CalendarDots, Trash } from '@phosphor-icons/react';
 import { background } from '@shared/messages';
 import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
+import { CRX_PAGES } from '@shared/types/CRXPages';
 import MIMEType from '@shared/types/MIMEType';
 import { downloadBlob } from '@shared/util/downloadBlob';
 // import { addCourseByUrl } from '@shared/util/courseUtils';
@@ -507,6 +508,60 @@ export default function Settings(): JSX.Element {
                         <h2 className='mb-4 text-xl text-ut-black font-semibold' onClick={toggleDevMode}>
                             Developer Mode
                         </h2>
+
+                        <div className='flex items-center justify-between'>
+                            <div className='max-w-xs'>
+                                <Text variant='h4' className='text-ut-burntorange font-semibold'>
+                                    UTRP Map
+                                </Text>
+                                <span className='mx-2 border border-ut-burntorange rounded px-2 py-0.5 text-xs text-ut-burntorange font-medium'>
+                                    BETA
+                                </span>
+                                <p className='text-sm text-gray-600'>
+                                    Navigate campus efficiently with our interactive map tool that integrates with your
+                                    schedule
+                                </p>
+                            </div>
+                            <Button
+                                variant='outline'
+                                color='ut-burntorange'
+                                onClick={() => {
+                                    const mapPageUrl = chrome.runtime.getURL(CRX_PAGES.MAP);
+                                    background.openNewTab({ url: mapPageUrl });
+                                }}
+                            >
+                                Try UTRP Map
+                            </Button>
+                        </div>
+
+                        <Divider size='auto' orientation='horizontal' />
+
+                        <div className='flex items-center justify-between'>
+                            <div className='max-w-xs'>
+                                <Text variant='h4' className='text-ut-burntorange font-semibold'>
+                                    Debug Page
+                                </Text>
+                                <span className='mx-2 border border-ut-gray rounded px-2 py-0.5 text-xs text-ut-gray font-medium'>
+                                    DEV
+                                </span>
+                                <p className='text-sm text-gray-600'>
+                                    Open the developer debug page to view extension storage and debug logs
+                                </p>
+                            </div>
+                            <Button
+                                variant='outline'
+                                color='ut-burntorange'
+                                onClick={() => {
+                                    const debugPageUrl = chrome.runtime.getURL(CRX_PAGES.DEBUG);
+                                    background.openNewTab({ url: debugPageUrl });
+                                }}
+                            >
+                                Open Debug Page
+                            </Button>
+                        </div>
+
+                        <Divider size='auto' orientation='horizontal' />
+
                         <Button variant='filled' color='ut-black' onClick={() => addCourseByURL(activeSchedule)}>
                             Add course by link
                         </Button>