From cd44e8e4c3263fc6207d81f04a25f1b3936cf8c2 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Wed, 14 Jun 2023 10:23:39 +0900
Subject: [PATCH] Fix account menu on android

---
 front/packages/primitives/src/avatar.tsx | 21 +++++++++++----------
 front/packages/primitives/src/menu.tsx   |  4 ++--
 front/packages/ui/src/navbar/index.tsx   |  2 ++
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/front/packages/primitives/src/avatar.tsx b/front/packages/primitives/src/avatar.tsx
index 7c645925..0d4336c0 100644
--- a/front/packages/primitives/src/avatar.tsx
+++ b/front/packages/primitives/src/avatar.tsx
@@ -18,14 +18,14 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { TextStyle, View } from "react-native";
+import { View, ViewStyle } from "react-native";
 import { Image } from "./image";
 import { useYoshiki, px, Stylable } from "yoshiki/native";
 import { Icon } from "./icons";
 import AccountCircle from "@material-symbols/svg-400/rounded/account_circle-fill.svg";
 import { YoshikiStyle } from "yoshiki/dist/type";
 import { P } from "@expo/html-elements";
-import { forwardRef } from "react";
+import { ComponentType, forwardRef, RefAttributes } from "react";
 import { ts } from "./utils";
 
 const stringToColor = (string: string) => {
@@ -54,33 +54,34 @@ export const Avatar = forwardRef<
 		color?: string;
 		isLoading?: boolean;
 		fill?: boolean;
+		as?: ComponentType<{ style?: ViewStyle } & RefAttributes<View>>;
 	} & Stylable
 >(function _Avatar(
-	{ src, alt, size = px(24), color, placeholder, isLoading = false, fill = false, ...props },
+	{ src, alt, size = px(24), color, placeholder, isLoading = false, fill = false, as, ...props },
 	ref,
 ) {
 	const { css, theme } = useYoshiki();
 	const col = color ?? theme.overlay0;
 
 	// TODO: Support dark themes when fill === true
+	const Container = as ?? View;
 	return (
-		<View
+		<Container
 			ref={ref}
 			{...css(
 				[
 					{
 						borderRadius: 999999,
-						overflow: "hidden",
 						p: ts(1),
 					},
 					fill && {
 						bg: col,
 					},
 					placeholder &&
-					!src &&
-					!isLoading && {
-						bg: stringToColor(placeholder),
-					},
+						!src &&
+						!isLoading && {
+							bg: stringToColor(placeholder),
+						},
 				],
 				props,
 			)}
@@ -102,6 +103,6 @@ export const Avatar = forwardRef<
 			) : (
 				<Icon icon={AccountCircle} size={size} color={fill ? col : theme.colors.white} />
 			)}
-		</View>
+		</Container>
 	);
 });
diff --git a/front/packages/primitives/src/menu.tsx b/front/packages/primitives/src/menu.tsx
index a1c4b4ba..ddd96c33 100644
--- a/front/packages/primitives/src/menu.tsx
+++ b/front/packages/primitives/src/menu.tsx
@@ -50,14 +50,14 @@ const Menu = <AsProps,>({
 	const [isOpen, setOpen] = useState(false);
 
 	useEffect(() => {
+		console.log("Opnned changed", isOpen);
 		if (isOpen) onMenuOpen?.call(null);
 		else onMenuClose?.call(null);
 	}, [isOpen, onMenuClose, onMenuOpen]);
 
 	return (
 		<>
-			{/* @ts-ignore */}
-			<Trigger onPress={() => setOpen(true)} {...props} />
+			<Trigger onPress={() => setOpen(true)} {...props as any} />
 			{isOpen && (
 				<Portal>
 					<ContrastArea mode="user">
diff --git a/front/packages/ui/src/navbar/index.tsx b/front/packages/ui/src/navbar/index.tsx
index db598d07..fd659729 100644
--- a/front/packages/ui/src/navbar/index.tsx
+++ b/front/packages/ui/src/navbar/index.tsx
@@ -29,6 +29,7 @@ import {
 	tooltip,
 	ts,
 	Menu,
+	PressableFeedback,
 } from "@kyoo/primitives";
 import { Platform, TextInput, View, ViewProps } from "react-native";
 import { useTranslation } from "react-i18next";
@@ -98,6 +99,7 @@ export const NavbarProfile = () => {
 			{({ isError: isGuest, username }) => (
 				<Menu
 					Trigger={Avatar}
+					as={PressableFeedback}
 					placeholder={username}
 					alt={t("navbar.login")}
 					size={24}