From ab367e34d0c602d1f787d9dab0ad2bb34ecae122 Mon Sep 17 00:00:00 2001
From: jsun969 <i@jsun.lol>
Date: Fri, 4 Oct 2024 01:16:48 +0930
Subject: [PATCH] feat: add zoom buttons

---
 src/App.tsx                    |  2 ++
 src/components/ZoomButtons.tsx | 39 ++++++++++++++++++++++++++++++++++
 src/helpers/calendar.ts        |  8 ++++---
 src/locales/en-au.json         |  4 ++++
 src/locales/zh-cn.json         |  4 ++++
 src/main.tsx                   |  2 +-
 6 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ZoomButtons.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 42cab61..2e6352d 100644
--- a/src/App.tsx
+++ b/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 />
diff --git a/src/components/ZoomButtons.tsx b/src/components/ZoomButtons.tsx
new file mode 100644
index 0000000..75fc137
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/src/helpers/calendar.ts b/src/helpers/calendar.ts
index 1eb967e..3e0cb64 100644
--- a/src/helpers/calendar.ts
+++ b/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),
+			};
 		}),
 }));
diff --git a/src/locales/en-au.json b/src/locales/en-au.json
index f3d72b8..134a0f3 100644
--- a/src/locales/en-au.json
+++ b/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! 💀"
diff --git a/src/locales/zh-cn.json b/src/locales/zh-cn.json
index a4d2aa5..0524e0d 100644
--- a/src/locales/zh-cn.json
+++ b/src/locales/zh-cn.json
@@ -62,6 +62,10 @@
 			"get-started": "开始使用"
 		}
 	},
+	"zoom": {
+		"zoom-in": "放大",
+		"zoom-out": "缩小"
+	},
 	"toast": {
 		"drop-to-change-term": "请删除所有课程以更改学期",
 		"too-many-courses": "课程过多"
diff --git a/src/main.tsx b/src/main.tsx
index 08aa169..ed89f1d 100644
--- a/src/main.tsx
+++ b/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 />