Implement filters for genres, staff and studios

front/src/primitives/combobox.web.tsx

@@ -10,7 +10,7 @@ import { cn } from "~/utils";
 import type { ComboBoxProps } from "./combobox";
 import { Icon } from "./icons";
 import { PressableFeedback } from "./links";
-import { InternalTriger } from "./menu.web";
+import { InternalTrigger } from "./menu.web";
 import { Skeleton } from "./skeleton";
 import { P } from "./text";
 
@@ -59,9 +59,9 @@ export const ComboBox = <Data,>({
 		>
 			<Popover.Trigger aria-label={label} asChild>
 				{Trigger ? (
-					<InternalTriger Component={Trigger} />
+					<InternalTrigger Component={Trigger} />
 				) : (
-					<InternalTriger
+					<InternalTrigger
 						Component={Platform.OS === "web" ? "div" : PressableFeedback}
 						className={cn(
 							"group flex-row items-center justify-center overflow-hidden rounded-4xl",
@@ -83,7 +83,7 @@ export const ComboBox = <Data,>({
 								className="group-focus-within:fill-slate-200 group-hover:fill-slate-200"
 							/>
 						</View>
-					</InternalTriger>
+					</InternalTrigger>
 				)}
 			</Popover.Trigger>
 			<Popover.Portal>

front/src/primitives/menu.tsx

@@ -107,12 +107,14 @@ const MenuItem = ({
 	href,
 	icon,
 	disabled,
+	closeOnSelect = true,
 	...props
 }: {
 	label: string;
 	selected?: boolean;
 	left?: ReactElement;
 	disabled?: boolean;
+	closeOnSelect?: boolean;
 	icon?: ComponentType<SvgProps>;
 } & (
 	| { onSelect: () => void; href?: undefined }
@@ -131,7 +133,7 @@ const MenuItem = ({
 	return (
 		<PressableFeedback
 			onPress={() => {
-				setOpen?.call(null, false);
+				if (closeOnSelect) setOpen?.call(null, false);
 				onSelect?.call(null);
 				if (href) router.push(href);
 			}}

front/src/primitives/menu.web.tsx

@@ -13,7 +13,7 @@ import { Icon } from "./icons";
 import { useLinkTo } from "./links";
 import { P } from "./text";
 
-export const InternalTriger = forwardRef<unknown, any>(function _Triger(
+export const InternalTrigger = forwardRef<unknown, any>(function _Triger(
 	{ Component, ComponentProps, ...props },
 	ref,
 ) {
@@ -23,6 +23,7 @@ export const InternalTriger = forwardRef<unknown, any>(function _Triger(
 			{...ComponentProps}
 			{...props}
 			onClickCapture={props.onPointerDown}
+			onPress={props.onPress ?? props.onClick}
 		/>
 	);
 });
@@ -54,12 +55,12 @@ const Menu = <AsProps extends { onPress: PressableProps["onPress"] }>({
 			}}
 		>
 			<DropdownMenu.Trigger asChild>
-				<InternalTriger Component={Trigger} {...props} />
+				<InternalTrigger Component={Trigger} {...props} />
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Portal>
 				<DropdownMenu.Content
 					onFocusOutside={(e) => e.stopImmediatePropagation()}
-					className="z-10 min-w-2xs overflow-hidden rounded bg-popover shadow-xl"
+					className="z-10 min-w-2xs overflow-y-auto rounded bg-popover shadow-xl"
 					style={{
 						maxHeight:
 							"calc(var(--radix-dropdown-menu-content-available-height) * 0.8)",
@@ -81,6 +82,7 @@ const MenuItem = forwardRef<
 		left?: ReactElement;
 		disabled?: boolean;
 		selected?: boolean;
+		closeOnSelect?: boolean;
 		className?: string;
 	} & (
 		| { onSelect: () => void; href?: undefined }
@@ -95,6 +97,7 @@ const MenuItem = forwardRef<
 		onSelect,
 		href,
 		disabled,
+		closeOnSelect = true,
 		className,
 		...props
 	},
@@ -117,7 +120,8 @@ const MenuItem = forwardRef<
 		<DropdownMenu.Item
 			ref={ref}
 			{...linkProps}
-			onSelect={() => {
+			onSelect={(e) => {
+				if (!closeOnSelect) e.preventDefault();
 				onSelect?.();
 				onPress?.(undefined!);
 			}}

front/src/primitives/select.web.tsx

@@ -7,7 +7,7 @@ import { Platform, View } from "react-native";
 import { cn } from "~/utils";
 import { Icon } from "./icons";
 import { PressableFeedback } from "./links";
-import { InternalTriger } from "./menu.web";
+import { InternalTrigger } from "./menu.web";
 import { P } from "./text";
 
 export const Select = ({
@@ -26,7 +26,7 @@ export const Select = ({
 	return (
 		<RSelect.Root value={value} onValueChange={onValueChange}>
 			<RSelect.Trigger aria-label={label} asChild>
-				<InternalTriger
+				<InternalTrigger
 					Component={Platform.OS === "web" ? "div" : PressableFeedback}
 					className={cn(
 						"group flex-row items-center justify-center overflow-hidden rounded-4xl",
@@ -44,7 +44,7 @@ export const Select = ({
 							/>
 						</RSelect.Icon>
 					</View>
-				</InternalTriger>
+				</InternalTrigger>
 			</RSelect.Trigger>
 			<RSelect.Portal>
 				<RSelect.Content
@@ -86,7 +86,7 @@ const Item = forwardRef<HTMLDivElement, { label: string; value: string }>(
 			>
 				<RSelect.ItemText className={cn()}>{label}</RSelect.ItemText>
 				<RSelect.ItemIndicator asChild>
-					<InternalTriger
+					<InternalTrigger
 						Component={Icon}
 						icon={Check}
 						className={cn(