chuni: show rating when resizing

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">

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;
+};