From 55babd1dbf2a1e63545ff76e0ec68e685b203d69 Mon Sep 17 00:00:00 2001
From: sk1982 <sk1982@noreply.gitea.tendokyu.moe>
Date: Tue, 12 Mar 2024 07:12:21 -0400
Subject: [PATCH] chuni: show rating when resizing

---
 src/components/chuni/top-rating-sidebar.tsx |  5 +++++
 src/helpers/use-breakpoint.ts               | 18 ++++++++++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 src/helpers/use-breakpoint.ts

diff --git a/src/components/chuni/top-rating-sidebar.tsx b/src/components/chuni/top-rating-sidebar.tsx
index ed35db0..9ce6726 100644
--- a/src/components/chuni/top-rating-sidebar.tsx
+++ b/src/components/chuni/top-rating-sidebar.tsx
@@ -4,9 +4,14 @@ import { ChuniTopRating, ChuniTopRatingProps } from '@/components/chuni/top-rati
 import { getUserRating } from '@/actions/chuni/profile';
 import { useState } from 'react';
 import { Button, ButtonGroup } from '@nextui-org/react';
+import { useBreakpoint } from '@/helpers/use-breakpoint';
 
 export const ChuniTopRatingSidebar = ({ rating }: { rating: Awaited<ReturnType<typeof getUserRating>> }) => {
 	const [shownRating, setShownRating] = useState<'top' | 'recent' | null>('recent');
+	const breakpoint = useBreakpoint();
+
+	if (![undefined, 'sm'].includes(breakpoint) && shownRating === null)
+		setShownRating('recent');
 
 	return (<div className="w-full mt-4 md:mt-0 px-2 sm:px-0 md:fixed md:overflow-y-auto h-fixed flex md:w-[16rem] 2xl:w-[32rem]">
 		<div className="hidden 2xl:flex">
diff --git a/src/helpers/use-breakpoint.ts b/src/helpers/use-breakpoint.ts
new file mode 100644
index 0000000..3d50e9c
--- /dev/null
+++ b/src/helpers/use-breakpoint.ts
@@ -0,0 +1,18 @@
+import resolveConfig from 'tailwindcss/resolveConfig';
+import tailwindConfig from '@/../tailwind.base';
+import { useMediaQuery } from 'usehooks-ts';
+
+const config = resolveConfig(tailwindConfig);
+const breakpoints = Object.entries(config.theme.screens)
+	.sort(([, a], [, b]) => parseInt(a) - parseInt(b));
+
+export const useBreakpoint = () => {
+	let activeName: string | undefined;
+	for (const [name, width] of breakpoints) {
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		if (useMediaQuery(`(min-width: ${width})`))
+			activeName = name;
+	}
+
+	return activeName;
+};