feat: persist sidebar toggle state (#569)

src/shared/storage/OptionsStore.ts

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

src/views/components/calendar/Calendar.tsx

@@ -1,8 +1,10 @@
 import { Sidebar } from '@phosphor-icons/react';
 import type { CalendarTabMessages } from '@shared/messages/CalendarMessages';
+import { OptionsStore } from '@shared/storage/OptionsStore';
 import type { Course } from '@shared/types/Course';
 import { CRX_PAGES } from '@shared/types/CRXPages';
 import { openReportWindow } from '@shared/util/openReportWindow';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import CalendarBottomBar from '@views/components/calendar/CalendarBottomBar';
 import CalendarGrid from '@views/components/calendar/CalendarGrid';
 import CalendarHeader from '@views/components/calendar/CalendarHeader/CalendarHeader';
@@ -16,6 +18,7 @@ import { useFlattenedCourseSchedule } from '@views/hooks/useFlattenedCourseSched
 import useWhatsNewPopUp from '@views/hooks/useWhatsNew';
 import { MessageListener } from 'chrome-extension-toolkit';
 import clsx from 'clsx';
+import type { ReactNode } from 'react';
 import React, { useEffect, useState } from 'react';
 
 import OutwardArrowIcon from '~icons/material-symbols/arrow-outward';
@@ -28,15 +31,31 @@ import CalendarFooter from './CalendarFooter';
 /**
  * Calendar page component
  */
-export default function Calendar(): JSX.Element {
+export default function Calendar(): ReactNode {
     const { courseCells, activeSchedule } = useFlattenedCourseSchedule();
 
     const [course, setCourse] = useState<Course | null>(useCourseFromUrl());
 
     const [showPopup, setShowPopup] = useState<boolean>(course !== null);
-    const [showSidebar, setShowSidebar] = useState<boolean>(true);
     const showWhatsNewDialog = useWhatsNewPopUp();
 
+    const queryClient = useQueryClient();
+    const { data: showSidebar, isPending: isSidebarStatePending } = useQuery({
+        queryKey: ['settings', 'showCalendarSidebar'],
+        queryFn: () => OptionsStore.get('showCalendarSidebar'),
+        staleTime: Infinity, // Prevent loading state on refocus
+    });
+
+    const { mutate: setShowSidebar } = useMutation({
+        mutationKey: ['settings', 'showCalendarSidebar'],
+        mutationFn: async (showSidebar: boolean) => {
+            OptionsStore.set('showCalendarSidebar', showSidebar);
+        },
+        onSuccess: (_, showSidebar) => {
+            queryClient.setQueryData(['settings', 'showCalendarSidebar'], showSidebar);
+        },
+    });
+
     useEffect(() => {
         const listener = new MessageListener<CalendarTabMessages>({
             async openCoursePopup({ data, sendResponse }) {
@@ -61,6 +80,8 @@ export default function Calendar(): JSX.Element {
         if (course) setShowPopup(true);
     }, [course]);
 
+    if (isSidebarStatePending) return null;
+
     return (
         <CalendarContext.Provider value>
             <div className='h-full w-full flex flex-col'>

src/views/components/common/ExtensionRoot/ExtensionRoot.tsx

@@ -1,6 +1,7 @@
 // import '@unocss/reset/tailwind-compat.css';
 import 'uno.css';
 
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import clsx from 'clsx';
 import React, { forwardRef } from 'react';
 
@@ -8,6 +9,8 @@ import styles from './ExtensionRoot.module.scss';
 
 export const styleResetClass = styles.extensionRoot;
 
+const queryClient = new QueryClient();
+
 /**
  * A wrapper component for the extension elements that adds some basic styling to them
  */
@@ -16,7 +19,9 @@ export default function ExtensionRoot(props: React.HTMLProps<HTMLDivElement>): J
 
     return (
         <React.StrictMode>
-            <div className={clsx(styleResetClass, 'h-full', className)} {...others} />
+            <QueryClientProvider client={queryClient}>
+                <div className={clsx(styleResetClass, 'h-full', className)} {...others} />
+            </QueryClientProvider>
         </React.StrictMode>
     );
 }