feat(settings): add option to always open calendar in new tab (#488)

* feat(settings): add option to always open calendar in new tab

* fix: await setting

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

src/pages/background/handler/calendarBackgroundHandler.ts

@@ -2,6 +2,8 @@ import type { TabWithId } from '@background/util/openNewTab';
 import openNewTab from '@background/util/openNewTab';
 import { tabs } from '@shared/messages';
 import type { CalendarBackgroundMessages } from '@shared/messages/CalendarMessages';
+import { OptionsStore } from '@shared/storage/OptionsStore';
+import { CRX_PAGES } from '@shared/types/CRXPages';
 import type { MessageHandler } from 'chrome-extension-toolkit';
 
 const getAllTabInfos = async () => {
@@ -21,13 +23,13 @@ const getAllTabInfos = async () => {
 const calendarBackgroundHandler: MessageHandler<CalendarBackgroundMessages> = {
     async switchToCalendarTab({ data, sendResponse }) {
         const { uniqueId } = data;
-        const calendarUrl = chrome.runtime.getURL(`calendar.html`);
+        const calendarUrl = chrome.runtime.getURL(CRX_PAGES.CALENDAR);
 
         const allTabs = await getAllTabInfos();
 
         const openCalendarTabInfo = allTabs.find(tab => tab.url?.startsWith(calendarUrl));
 
-        if (openCalendarTabInfo !== undefined) {
+        if (openCalendarTabInfo !== undefined && !(await OptionsStore.get('alwaysOpenCalendarInNewTab'))) {
             const tabid = openCalendarTabInfo.tab.id;
 
             await chrome.tabs.update(tabid, { active: true });

src/shared/storage/OptionsStore.ts

@@ -18,6 +18,9 @@ export interface IOptionsStore {
 
     /** 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;
+
+    /** whether we should open the calendar in a new tab; default is to focus an existing calendar tab */
+    alwaysOpenCalendarInNewTab: boolean;
 }
 
 export const OptionsStore = createSyncStore<IOptionsStore>({
@@ -26,6 +29,7 @@ export const OptionsStore = createSyncStore<IOptionsStore>({
     enableHighlightConflicts: true,
     enableScrollToLoad: true,
     enableDataRefreshing: true,
+    alwaysOpenCalendarInNewTab: false,
 });
 
 /**
@@ -40,6 +44,7 @@ export const initSettings = async () =>
         enableHighlightConflicts: await OptionsStore.get('enableHighlightConflicts'),
         enableScrollToLoad: await OptionsStore.get('enableScrollToLoad'),
         enableDataRefreshing: await OptionsStore.get('enableDataRefreshing'),
+        alwaysOpenCalendarInNewTab: await OptionsStore.get('alwaysOpenCalendarInNewTab'),
     }) satisfies IOptionsStore;
 
 // Clothing retailer right

src/views/components/settings/Settings.tsx

@@ -90,6 +90,7 @@ export default function Settings(): JSX.Element {
     const [highlightConflicts, setHighlightConflicts] = useState<boolean>(false);
     const [loadAllCourses, setLoadAllCourses] = useState<boolean>(false);
     const [_enableDataRefreshing, setEnableDataRefreshing] = useState<boolean>(false);
+    const [calendarNewTab, setCalendarNewTab] = useState<boolean>(false);
 
     const showMigrationDialog = useMigrationDialog();
 
@@ -122,12 +123,14 @@ export default function Settings(): JSX.Element {
                 enableHighlightConflicts,
                 enableScrollToLoad,
                 enableDataRefreshing,
+                alwaysOpenCalendarInNewTab,
             } = await initSettings();
             setEnableCourseStatusChips(enableCourseStatusChips);
             setShowTimeLocation(enableTimeAndLocationInPopup);
             setHighlightConflicts(enableHighlightConflicts);
             setLoadAllCourses(enableScrollToLoad);
             setEnableDataRefreshing(enableDataRefreshing);
+            setCalendarNewTab(alwaysOpenCalendarInNewTab);
         };
 
         fetchGitHubStats();
@@ -167,6 +170,11 @@ export default function Settings(): JSX.Element {
             // console.log('enableDataRefreshing', newValue);
         });
 
+        const l6 = OptionsStore.listen('alwaysOpenCalendarInNewTab', async ({ newValue }) => {
+            setCalendarNewTab(newValue);
+            // console.log('alwaysOpenCalendarInNewTab', newValue);
+        });
+
         // Remove listeners when the component is unmounted
         return () => {
             OptionsStore.removeListener(l1);
@@ -174,6 +182,7 @@ export default function Settings(): JSX.Element {
             OptionsStore.removeListener(l3);
             OptionsStore.removeListener(l4);
             OptionsStore.removeListener(l5);
+            OptionsStore.removeListener(l6);
 
             window.removeEventListener('keydown', handleKeyPress);
         };
@@ -431,6 +440,27 @@ export default function Settings(): JSX.Element {
 
                                 <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'>
+                                            Always Open Calendar in New Tab
+                                        </Text>
+                                        <p className='text-sm text-gray-600'>
+                                            Always opens the calendar view in a new tab when navigating to the calendar
+                                            page. May prevent issues where the calendar refuses to open.
+                                        </p>
+                                    </div>
+                                    <SwitchButton
+                                        isChecked={calendarNewTab}
+                                        onChange={() => {
+                                            setCalendarNewTab(!calendarNewTab);
+                                            OptionsStore.set('alwaysOpenCalendarInNewTab', !calendarNewTab);
+                                        }}
+                                    />
+                                </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'>