From c7b2daedb94131f47046087e2ff7decc2e6a8186 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Thu, 26 Jan 2023 18:56:37 +0900
Subject: [PATCH] Create a tv drawer

---
 front/apps/mobile/app/_layout.tsx |  8 +--
 front/apps/mobile/app/drawer.tsx  |  0
 front/packages/ui/src/drawer.tsx  | 87 +++++++++++++++++++++++++++++++
 front/packages/ui/src/index.ts    |  1 +
 4 files changed, 93 insertions(+), 3 deletions(-)
 create mode 100644 front/apps/mobile/app/drawer.tsx
 create mode 100644 front/packages/ui/src/drawer.tsx

diff --git a/front/apps/mobile/app/_layout.tsx b/front/apps/mobile/app/_layout.tsx
index a6601594..0050f583 100644
--- a/front/apps/mobile/app/_layout.tsx
+++ b/front/apps/mobile/app/_layout.tsx
@@ -20,7 +20,7 @@
 
 import { PortalProvider } from "@gorhom/portal";
 import { ThemeSelector, ts } from "@kyoo/primitives";
-import { NavbarRight, NavbarTitle } from "@kyoo/ui";
+import { NavbarRight, NavbarTitle, TvDrawer } from "@kyoo/ui";
 import { createQueryClient } from "@kyoo/models";
 import { QueryClientProvider } from "@tanstack/react-query";
 import i18next from "i18next";
@@ -34,7 +34,7 @@ import {
 	Poppins_900Black,
 } from "@expo-google-fonts/poppins";
 import { useCallback, useLayoutEffect, useState } from "react";
-import { Platform, useColorScheme } from "react-native";
+import { Platform, useColorScheme, View } from "react-native";
 import { initReactI18next } from "react-i18next";
 import { useTheme, useYoshiki } from "yoshiki/native";
 import "intl-pluralrules";
@@ -124,7 +124,9 @@ export default function Root() {
 				}}
 			>
 				<PortalProvider>
-					<ThemedStack onLayout={onLayout} />
+					<TvDrawer>
+						<ThemedStack onLayout={onLayout} />
+					</TvDrawer>
 				</PortalProvider>
 			</ThemeSelector>
 		</QueryClientProvider>
diff --git a/front/apps/mobile/app/drawer.tsx b/front/apps/mobile/app/drawer.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/front/packages/ui/src/drawer.tsx b/front/packages/ui/src/drawer.tsx
new file mode 100644
index 00000000..5cb4aaa9
--- /dev/null
+++ b/front/packages/ui/src/drawer.tsx
@@ -0,0 +1,87 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import { useTranslation } from "react-i18next";
+import { Platform, Pressable, View } from "react-native";
+import { Theme, useYoshiki } from "yoshiki/native";
+import Home from "@material-symbols/svg-400/rounded/home-fill.svg";
+import Search from "@material-symbols/svg-400/rounded/search-fill.svg";
+import { Icon, P, ts } from "@kyoo/primitives";
+import { useState } from "react";
+import { motify } from "moti";
+
+const MotiPressable = motify(Pressable)();
+
+const MenuItem = ({
+	icon,
+	text,
+	openned,
+	setOpen,
+}: {
+	icon: any;
+	text: string;
+	openned: boolean;
+	setOpen: (value: (old: number) => number) => void;
+}) => {
+	const { css, theme } = useYoshiki();
+	const [width, setWidth] = useState(0);
+
+	return (
+		<MotiPressable
+			animate={{ width }}
+			onLayout={(event) => setWidth(event.nativeEvent.layout.width)}
+			{...(css(
+				{
+					flexDirection: "row",
+					pX: ts(4),
+					focus: { self: { bg: (theme: Theme) => theme.accent } },
+				},
+				{ onFocus: () => setOpen((x) => x++), onBlur: () => setOpen((x) => x--) },
+			) as any)}
+		>
+			<Icon
+				icon={icon}
+				color={theme.colors.white}
+				size={ts(4)}
+				{...css({ alignSelf: "center", marginHorizontal: ts(1) })}
+			/>
+			{openned && <P {...css({ color: (theme) => theme.colors.white })}>{text}</P>}
+		</MotiPressable>
+	);
+};
+
+export const TvDrawer = ({ children }: { children: JSX.Element }) => {
+	if (!Platform.isTV) return children;
+	const { css } = useYoshiki();
+	const { t } = useTranslation();
+	const [openned, setOpen] = useState(0);
+
+	return (
+		<View {...css({ flexDirection: "row", flexGrow: 1, bg: (theme) => theme.contrast })}>
+			<View {...css({ alignSelf: "center" })}>
+				<MenuItem icon={Home} text={t("navbar.home")} openned={!!openned} setOpen={setOpen} />
+				<MenuItem icon={Search} text={t("navbar.search")} openned={!!openned} setOpen={setOpen} />
+			</View>
+			{children}
+		</View>
+	);
+};
diff --git a/front/packages/ui/src/index.ts b/front/packages/ui/src/index.ts
index ca995b98..8a9e4ab9 100644
--- a/front/packages/ui/src/index.ts
+++ b/front/packages/ui/src/index.ts
@@ -23,3 +23,4 @@ export { BrowsePage } from "./browse";
 export { MovieDetails, ShowDetails } from "./details";
 export { Player } from "./player";
 export { SearchPage } from "./search";
+export { TvDrawer } from "./drawer";