fix: place hours and courses under schedule name (#388)

* fix(header): bottom-aligned the schedule name + hours/courses in calendar * feat: updated font style in header and dropdown * fix: new hour/course styling per discussion i love having 80 different ideas, hopefully after this there's like maybe a tiny commit left to do before this is done.. * feat(header): added icons to cal header WORK IN PROGRESS * style: updated layout of header and main popup * fix: updated font and spacing for header and popup * fix: updated cal + popup style details - schedule title is now in normal casing w/ colon removed - last updated on is now entirely deleted from everywhere - hour and course numbers now h3 in calendar ONLY * refactor: changed size for calendar header * refactor: changed ut-black to theme-black * refactor: remove hiding on small window sizes * refactor: reduced spacing in popup * refactor: updated unocss for small-caps configuration * style: changed variant + className order * fix: readded update time text * style: auto formatter, unused imports, capitalization --------- Co-authored-by: Razboy20 <razboy20@gmail.com> Co-authored-by: Samuel Gunter <sgunter@utexas.edu> Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
2024-11-21 20:56:56 -06:00
parent 7dbffc6eef
commit 7dd93690d6
9 changed files with 76 additions and 44 deletions
--- a/src/views/components/calendar/CalendarHeader.tsx
+++ b/src/views/components/calendar/CalendarHeader.tsx
@@ -0,0 +1,93 @@
+import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
+import { Button } from '@views/components/common/Button';
+import CourseStatus from '@views/components/common/CourseStatus';
+import Divider from '@views/components/common/Divider';
+import { LargeLogo } from '@views/components/common/LogoIcon';
+import ScheduleTotalHoursAndCourses from '@views/components/common/ScheduleTotalHoursAndCourses';
+import useSchedules from '@views/hooks/useSchedules';
+import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript';
+import React, { useEffect, useState } from 'react';
+
+import MenuIcon from '~icons/material-symbols/menu';
+// import RefreshIcon from '~icons/material-symbols/refresh';
+import SettingsIcon from '~icons/material-symbols/settings';
+
+/**
+ * Opens the options page in a new tab.
+ * @returns A promise that resolves when the options page is opened.
+ */
+const handleOpenOptions = async (): Promise<void> => {
+    const url = chrome.runtime.getURL('/options.html');
+    await openTabFromContentScript(url);
+};
+
+interface CalendarHeaderProps {
+    onSidebarToggle?: () => void;
+}
+
+/**
+ * Renders the header component for the calendar.
+ * @returns The JSX element representing the calendar header.
+ */
+export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps): JSX.Element {
+    const [enableCourseStatusChips, setEnableCourseStatusChips] = useState<boolean>(false);
+    const [_enableDataRefreshing, setEnableDataRefreshing] = useState<boolean>(false);
+
+    const [activeSchedule] = useSchedules();
+
+    useEffect(() => {
+        initSettings().then(({ enableCourseStatusChips, enableDataRefreshing }) => {
+            setEnableCourseStatusChips(enableCourseStatusChips);
+            setEnableDataRefreshing(enableDataRefreshing);
+        });
+
+        const l1 = OptionsStore.listen('enableCourseStatusChips', async ({ newValue }) => {
+            setEnableCourseStatusChips(newValue);
+            // console.log('enableCourseStatusChips', newValue);
+        });
+
+        const l2 = OptionsStore.listen('enableDataRefreshing', async ({ newValue }) => {
+            setEnableDataRefreshing(newValue);
+            // console.log('enableDataRefreshing', newValue);
+        });
+
+        return () => {
+            OptionsStore.removeListener(l1);
+            OptionsStore.removeListener(l2);
+        };
+    }, []);
+
+    return (
+        <div className='flex items-center gap-5 overflow-x-auto overflow-y-hidden border-b border-ut-offwhite px-7 py-4 md:overflow-x-hidden'>
+            <Button
+                variant='single'
+                icon={MenuIcon}
+                color='ut-gray'
+                onClick={onSidebarToggle}
+                className='screenshot:hidden'
+            />
+            <LargeLogo />
+            <Divider className='mx-2 self-center md:mx-4' size='2.5rem' orientation='vertical' />
+            <div className='flex-1 screenshot:transform-origin-left screenshot:scale-120'>
+                <ScheduleTotalHoursAndCourses
+                    scheduleName={activeSchedule.name}
+                    totalHours={activeSchedule.hours}
+                    totalCourses={activeSchedule.courses.length}
+                />
+            </div>
+            <div className='hidden flex-row items-center justify-end gap-6 screenshot:hidden lg:flex'>
+                {enableCourseStatusChips && (
+                    <>
+                        <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' /> */}
+                <Button variant='single' icon={SettingsIcon} color='theme-black' onClick={handleOpenOptions} />
+            </div>
+        </div>
+    );
+}