feat: storage calendar height

src/components/Calendar.tsx

@@ -7,11 +7,8 @@ import { create } from 'zustand';
 import { WEEK_DAYS } from '../constants/week-days';
 import { YEAR } from '../constants/year';
 import { useCourseColor, useEnrolledCourse } from '../data/enrolled-courses';
-import {
-	useCalendar,
-	useCalendarHourHeight,
-	useOtherWeekCourseTimes,
-} from '../helpers/calendar';
+import { useCalendar, useOtherWeekCourseTimes } from '../helpers/calendar';
+import { useCalendarHourHeight } from '../helpers/calendar-hour-height';
 import { calcHoursDuration } from '../helpers/hours-duration';
 import type dayjs from '../lib/dayjs';
 import type { DateTimeRange, WeekCourse, WeekCourses } from '../types/course';

src/components/ZoomButtons.tsx

@@ -5,7 +5,7 @@ import {
 	MAX_HOUR_HEIGHT,
 	MIN_HOUR_HEIGHT,
 	useCalendarHourHeight,
-} from '../helpers/calendar';
+} from '../helpers/calendar-hour-height';
 
 export const ZoomButtons = () => {
 	const { t } = useTranslation();

src/constants/local-storage-keys.ts

@@ -2,4 +2,5 @@ export const enum LocalStorageKey {
 	Term = 'MTT.term',
 	EnrolledCourses = 'MTT.enrolled-courses',
 	FirstTime = 'MTT.first-time',
+	CalendarHeight = 'MTT.calendar-height',
 }

src/helpers/calendar-hour-height.ts

@@ -0,0 +1,28 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+import { LocalStorageKey } from '../constants/local-storage-keys';
+
+export const MIN_HOUR_HEIGHT = 3;
+export const MAX_HOUR_HEIGHT = 10;
+export const useCalendarHourHeight = create<{
+	height: number;
+	setHeight: (getNewHeight: (height: number) => number) => void;
+}>()(
+	persist(
+		(set) => ({
+			height: 4.5,
+			setHeight: (getNewHeight) =>
+				set((state) => {
+					const height = getNewHeight(state.height);
+					return {
+						height: Math.min(
+							Math.max(height, MIN_HOUR_HEIGHT),
+							MAX_HOUR_HEIGHT,
+						),
+					};
+				}),
+		}),
+		{ name: LocalStorageKey.CalendarHeight },
+	),
+);

src/helpers/calendar.ts

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import { create } from 'zustand';
 
 import { WEEK_DAYS } from '../constants/week-days';
 import { useGetCourseClasses } from '../data/course-info';
@@ -220,19 +219,3 @@ export const useOtherWeekCourseTimes = ({
 
 	return times;
 };
-
-export const MIN_HOUR_HEIGHT = 3;
-export const MAX_HOUR_HEIGHT = 10;
-export const useCalendarHourHeight = create<{
-	height: number;
-	setHeight: (getNewHeight: (height: number) => number) => void;
-}>()((set) => ({
-	height: 4.5,
-	setHeight: (getNewHeight) =>
-		set((state) => {
-			const height = getNewHeight(state.height);
-			return {
-				height: Math.min(Math.max(height, MIN_HOUR_HEIGHT), MAX_HOUR_HEIGHT),
-			};
-		}),
-}));

src/helpers/zoom.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react';
 
-import { useCalendarHourHeight } from './calendar';
+import { useCalendarHourHeight } from './calendar-hour-height';
 
 type UseZoomProps = {
 	element: HTMLElement;