feat: experimental toggle for icons, left off for now (#237)

* feat: temporary removal of waitlist etc

* feat: experimental toggle for icons for now

* feat: popupmain toggle

* feat: cal header toggle

* feat: adjusted course cell for toggle

* feat: fine it'll be a constant

* chore: lint

* feat: other experimental options

src/shared/util/experimental.ts

@@ -0,0 +1,3 @@
+export const enableCourseStatusChips: boolean = false;
+export const constenableSettingsPage: boolean = false;
+export const enableCourseRefreshing: boolean = false;

src/views/components/PopupMain.tsx

@@ -1,5 +1,6 @@
 import { background } from '@shared/messages';
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
+import { enableCourseStatusChips } from '@shared/util/experimental';
 import Divider from '@views/components/common/Divider';
 import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
 import List from '@views/components/common/List';
@@ -107,9 +108,13 @@ export default function PopupMain(): JSX.Element {
 
                 <div className='w-full flex flex-col items-center gap-1.25 p-5 pt-3.75'>
                     <div className='flex gap-2.5'>
+                        {enableCourseStatusChips && (
+                            <>
                                 <CourseStatus status='WAITLISTED' size='mini' />
                                 <CourseStatus status='CLOSED' size='mini' />
                                 <CourseStatus status='CANCELLED' size='mini' />
+                            </>
+                        )}
                     </div>
                     <div className='inline-flex items-center self-center gap-1'>
                         <Text variant='mini' className='text-ut-gray !font-normal'>

src/views/components/calendar/CalendarCourseCell.tsx

@@ -2,6 +2,7 @@ import type { StatusType } from '@shared/types/Course';
 import { Status } from '@shared/types/Course';
 import type { CourseColors } from '@shared/types/ThemeColors';
 import { pickFontColor } from '@shared/util/colors';
+import { enableCourseStatusChips } from '@shared/util/experimental';
 import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
 import React from 'react';
@@ -43,13 +44,15 @@ export default function CalendarCourseCell({
     onClick,
 }: CalendarCourseCellProps): JSX.Element {
     let rightIcon: React.ReactNode | null = null;
-    // if (status === Status.WAITLISTED) {
+    if (enableCourseStatusChips) {
-    //     rightIcon = <WaitlistIcon className='h-5 w-5' />;
+        if (status === Status.WAITLISTED) {
-    // } else if (status === Status.CLOSED) {
+            rightIcon = <WaitlistIcon className='h-5 w-5' />;
-    //     rightIcon = <ClosedIcon className='h-5 w-5' />;
+        } else if (status === Status.CLOSED) {
-    // } else if (status === Status.CANCELLED) {
+            rightIcon = <ClosedIcon className='h-5 w-5' />;
-    //     rightIcon = <CancelledIcon className='h-5 w-5' />;
+        } else if (status === Status.CANCELLED) {
-    // }
+            rightIcon = <CancelledIcon className='h-5 w-5' />;
+        }
+    }
 
     // text-white or text-black based on secondaryColor
     const fontColor = pickFontColor(colors.primaryColor);

src/views/components/calendar/CalenderHeader.tsx

@@ -1,4 +1,5 @@
 import { Status } from '@shared/types/Course';
+import { enableCourseStatusChips } from '@shared/util/experimental';
 import { Button } from '@views/components/common/Button';
 import CourseStatus from '@views/components/common/CourseStatus';
 import Divider from '@views/components/common/Divider';
@@ -60,9 +61,13 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps)
                 </div>
             </div>
             <div className='hidden flex-row items-center justify-end gap-6 screenshot:hidden lg:flex'>
-                <CourseStatus size='small' status={Status.WAITLISTED} />
+                {enableCourseStatusChips && (
-                <CourseStatus size='small' status={Status.CLOSED} />
+                    <>
-                <CourseStatus size='small' status={Status.CANCELLED} />
+                        <CourseStatus status='WAITLISTED' size='mini' />
+                        <CourseStatus status='CLOSED' size='mini' />
+                        <CourseStatus status='CANCELLED' size='mini' />
+                    </>
+                )}
 
                 {/* <Button variant='single' icon={UndoIcon} color='ut-black' />
                     <Button variant='single' icon={RedoIcon} color='ut-black' /> */}