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,6 +65,7 @@ export default function Calendar(): JSX.Element {
     }, [course]);
 
     return (
+        <CalendarContext.Provider value>
             <div className='h-full w-full flex flex-col'>
                 <CalendarHeader
                     onSidebarToggle={() => {
@@ -73,7 +75,7 @@ export default function Calendar(): JSX.Element {
                 <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'>
+                            <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 />
@@ -98,5 +100,6 @@ export default function Calendar(): JSX.Element {
                     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}
+                    icon={isInCalendar ? OpenNewIcon : CalendarMonth}
-                    onClick={() => background.switchToCalendarTab({})}
+                    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);