feat: add zoom buttons

src/App.tsx

@@ -4,6 +4,7 @@ import { Footer } from './components/Footer';
 import { Header } from './components/Header';
 import { HelpModal } from './components/HelpModal';
 import { SearchForm } from './components/SearchForm';
+import { ZoomButtons } from './components/ZoomButtons';
 import { useCoursesInfo } from './data/course-info';
 import { useFirstTimeHelp } from './helpers/help-modal';
 import { useCalendarZoom } from './helpers/zoom';
@@ -18,6 +19,7 @@ export const App = () => {
 			<Header />
 			<main className="mx-auto my-4 max-w-screen-xl space-y-4 px-2">
 				<HelpModal />
+				<ZoomButtons />
 				<SearchForm />
 				<EnrolledCourses />
 				<Calendar />

src/components/ZoomButtons.tsx

@@ -0,0 +1,39 @@
+import { Button, Tooltip } from '@nextui-org/react';
+import { useTranslation } from 'react-i18next';
+
+import {
+	MAX_HOUR_HEIGHT,
+	MIN_HOUR_HEIGHT,
+	useCalendarHourHeight,
+} from '../helpers/calendar';
+
+export const ZoomButtons = () => {
+	const { t } = useTranslation();
+
+	const { height, setHeight } = useCalendarHourHeight();
+
+	return (
+		<div className="fixed bottom-8 right-8 z-[100] flex flex-col gap-2">
+			<Tooltip content={t('zoom.zoom-in')} placement="left">
+				<Button
+					onClick={() => setHeight((h) => h + 0.5)}
+					isDisabled={height === MAX_HOUR_HEIGHT}
+					isIconOnly
+					size="sm"
+				>
+					➕
+				</Button>
+			</Tooltip>
+			<Tooltip content={t('zoom.zoom-out')} placement="left">
+				<Button
+					onClick={() => setHeight((h) => h - 0.5)}
+					isDisabled={height === MIN_HOUR_HEIGHT}
+					isIconOnly
+					size="sm"
+				>
+					➖
+				</Button>
+			</Tooltip>
+		</div>
+	);
+};

src/helpers/calendar.ts

@@ -221,8 +221,8 @@ export const useOtherWeekCourseTimes = ({
 	return times;
 };
 
-const MIN_HEIGHT = 3;
-const MAX_HEIGHT = 10;
+export const MIN_HOUR_HEIGHT = 3;
+export const MAX_HOUR_HEIGHT = 10;
 export const useCalendarHourHeight = create<{
 	height: number;
 	setHeight: (getNewHeight: (height: number) => number) => void;
@@ -231,6 +231,8 @@ export const useCalendarHourHeight = create<{
 	setHeight: (getNewHeight) =>
 		set((state) => {
 			const height = getNewHeight(state.height);
-			return { height: Math.min(Math.max(height, MIN_HEIGHT), MAX_HEIGHT) };
+			return {
+				height: Math.min(Math.max(height, MIN_HOUR_HEIGHT), MAX_HOUR_HEIGHT),
+			};
 		}),
 }));

src/locales/en-au.json

@@ -62,6 +62,10 @@
 			"get-started": "Get Started!"
 		}
 	},
+	"zoom": {
+		"zoom-in": "Zoom In",
+		"zoom-out": "Zoom Out"
+	},
 	"toast": {
 		"drop-to-change-term": "You need to drop all courses to change the term",
 		"too-many-courses": "8 courses for a term is crazy! 💀"

src/locales/zh-cn.json

@@ -62,6 +62,10 @@
 			"get-started": "开始使用"
 		}
 	},
+	"zoom": {
+		"zoom-in": "放大",
+		"zoom-out": "缩小"
+	},
 	"toast": {
 		"drop-to-change-term": "请删除所有课程以更改学期",
 		"too-many-courses": "课程过多"

src/main.tsx

@@ -36,7 +36,7 @@ if (import.meta.env.DEV) {
 ReactDOM.createRoot(document.getElementById('root')!).render(
 	<React.StrictMode>
 		<QueryClientProvider client={queryClient}>
-			<ReactQueryDevtools initialIsOpen={false} />
+			<ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
 			<NextUIProvider>
 				<Toaster richColors position="top-center" />
 				<App />