feat: popout icon for ccip in calendar (#221)

* feat: popout icon for ccip in calendar

* refactor: simplify context

---------

Co-authored-by: Razboy20 <razboy20@gmail.com>

src/views/components/calendar/Calendar.tsx

@@ -7,6 +7,7 @@ import CalendarHeader from '@views/components/calendar/CalenderHeader';
 import ImportantLinks from '@views/components/calendar/ImportantLinks';
 import Divider from '@views/components/common/Divider';
 import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
+import { CalendarContext } from '@views/contexts/CalendarContext';
 import { useFlattenedCourseSchedule } from '@views/hooks/useFlattenedCourseSchedule';
 import { MessageListener } from 'chrome-extension-toolkit';
 import React, { useEffect, useState } from 'react';
@@ -64,39 +65,41 @@ export default function Calendar(): JSX.Element {
     }, [course]);
 
     return (
-        <div className='h-full w-full flex flex-col'>
-            <CalendarHeader
-                onSidebarToggle={() => {
-                    setShowSidebar(!showSidebar);
-                }}
-            />
-            <div className='h-full flex overflow-auto pl-3'>
-                {showSidebar && (
-                    <div className='h-full flex flex-none flex-col justify-between pb-5 screenshot:hidden'>
-                        <div className='mb-3 h-full w-fit flex flex-col overflow-auto pb-2 pr-4 pl-4.5 pt-5'>
-                            <CalendarSchedules />
-                            <Divider orientation='horizontal' size='100%' className='my-5' />
-                            <ImportantLinks />
-                            <Divider orientation='horizontal' size='100%' className='my-5' />
-                            <TeamLinks />
+        <CalendarContext.Provider value>
+            <div className='h-full w-full flex flex-col'>
+                <CalendarHeader
+                    onSidebarToggle={() => {
+                        setShowSidebar(!showSidebar);
+                    }}
+                />
+                <div className='h-full flex overflow-auto pl-3'>
+                    {showSidebar && (
+                        <div className='h-full flex flex-none flex-col justify-between pb-5 screenshot:hidden'>
+                            <div className='mb-3 h-full w-fit flex flex-col overflow-auto pb-2 pl-4.5 pr-4 pt-5'>
+                                <CalendarSchedules />
+                                <Divider orientation='horizontal' size='100%' className='my-5' />
+                                <ImportantLinks />
+                                <Divider orientation='horizontal' size='100%' className='my-5' />
+                                <TeamLinks />
+                            </div>
+                            <CalendarFooter />
                         </div>
-                        <CalendarFooter />
+                    )}
+                    <div className='h-full min-w-5xl flex flex-grow flex-col overflow-y-auto'>
+                        <div className='min-h-2xl flex-grow overflow-auto pl-2 pr-4 pt-6 screenshot:min-h-xl'>
+                            <CalendarGrid courseCells={courseCells} setCourse={setCourse} />
+                        </div>
+                        <CalendarBottomBar courseCells={courseCells} setCourse={setCourse} />
                     </div>
-                )}
-                <div className='h-full min-w-5xl flex flex-grow flex-col overflow-y-auto'>
-                    <div className='min-h-2xl flex-grow overflow-auto pl-2 pr-4 pt-6 screenshot:min-h-xl'>
-                        <CalendarGrid courseCells={courseCells} setCourse={setCourse} />
-                    </div>
-                    <CalendarBottomBar courseCells={courseCells} setCourse={setCourse} />
                 </div>
-            </div>
 
-            <CourseCatalogInjectedPopup
-                course={course!} // always defined when showPopup is true
-                onClose={() => setShowPopup(false)}
-                open={showPopup}
-                afterLeave={() => setCourse(null)}
-            />
-        </div>
+                <CourseCatalogInjectedPopup
+                    course={course!} // always defined when showPopup is true
+                    onClose={() => setShowPopup(false)}
+                    open={showPopup}
+                    afterLeave={() => setCourse(null)}
+                />
+            </div>
+        </CalendarContext.Provider>
     );
 }

src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx

@@ -7,6 +7,7 @@ import { Chip, flagMap } from '@views/components/common/Chip';
 import Divider from '@views/components/common/Divider';
 import Link from '@views/components/common/Link';
 import Text from '@views/components/common/Text/Text';
+import { useCalendar } from '@views/contexts/CalendarContext';
 import React from 'react';
 
 import Add from '~icons/material-symbols/add';
@@ -15,6 +16,7 @@ import CloseIcon from '~icons/material-symbols/close';
 import Copy from '~icons/material-symbols/content-copy';
 import Description from '~icons/material-symbols/description';
 import Mood from '~icons/material-symbols/mood';
+import OpenNewIcon from '~icons/material-symbols/open-in-new';
 import Remove from '~icons/material-symbols/remove';
 import Reviews from '~icons/material-symbols/reviews';
 
@@ -50,6 +52,7 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
     const { courseName, department, number: courseNumber, uniqueId, instructors, flags, schedule } = course;
     const courseAdded = activeSchedule.courses.some(ourCourse => ourCourse.uniqueId === uniqueId);
     const formattedUniqueId = uniqueId.toString().padStart(5, '0');
+    const isInCalendar = useCalendar();
 
     const getInstructorFullName = (instructor: Instructor) => {
         const { firstName = '', lastName = '' } = instructor;
@@ -179,8 +182,16 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
                 <Button
                     variant='filled'
                     color='ut-burntorange'
-                    icon={CalendarMonth}
-                    onClick={() => background.switchToCalendarTab({})}
+                    icon={isInCalendar ? OpenNewIcon : CalendarMonth}
+                    onClick={() => {
+                        if (isInCalendar) {
+                            openNewTab({
+                                url: course.url,
+                            });
+                        } else {
+                            background.switchToCalendarTab({});
+                        }
+                    }}
                 />
                 <Divider size='1.75rem' orientation='vertical' />
                 <Button variant='outline' color='ut-blue' icon={Reviews} onClick={handleOpenRateMyProf}>

src/views/contexts/CalendarContext.ts

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * Context for the calendar.
+ */
+export const CalendarContext = createContext(false);
+
+/**
+ * @returns The calendar context.
+ */
+export const useCalendar = () => useContext(CalendarContext);