From c0c2918e72e7f2b78f154d06aa0d7b2262f1ca19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Mon, 18 Sep 2023 19:17:37 +0200
Subject: [PATCH 01/15] Started navigation

---
 front/Navigation.tsx                        |   5 +-
 front/components/V2/TabNavigation.tsx       | 139 ++++++++++++++++++++
 front/components/V2/TabNavigationButton.tsx |  72 ++++++++++
 front/components/V2/TabNavigationList.tsx   |  28 ++++
 4 files changed, 242 insertions(+), 2 deletions(-)
 create mode 100644 front/components/V2/TabNavigation.tsx
 create mode 100644 front/components/V2/TabNavigationButton.tsx
 create mode 100644 front/components/V2/TabNavigationList.tsx

diff --git a/front/Navigation.tsx b/front/Navigation.tsx
index 486ac99..70107a6 100644
--- a/front/Navigation.tsx
+++ b/front/Navigation.tsx
@@ -31,6 +31,7 @@ import ErrorView from './views/ErrorView';
 import GenreDetailsView from './views/GenreDetailsView';
 import GoogleView from './views/GoogleView';
 import VerifiedView from './views/VerifiedView';
+import TabNavigation from './components/V2/TabNavigation';
 
 // Util function to hide route props in URL
 const removeMe = () => '';
@@ -38,8 +39,8 @@ const removeMe = () => '';
 const protectedRoutes = () =>
 	({
 		Home: {
-			component: HomeView,
-			options: { title: translate('welcome'), headerLeft: null },
+			component: TabNavigation,
+			options: { title: translate('welcome'), headerShown: false },
 			link: '/',
 		},
 		Play: { component: PlayView, options: { title: translate('play') }, link: '/play/:songId' },
diff --git a/front/components/V2/TabNavigation.tsx b/front/components/V2/TabNavigation.tsx
new file mode 100644
index 0000000..10f7752
--- /dev/null
+++ b/front/components/V2/TabNavigation.tsx
@@ -0,0 +1,139 @@
+import { View, Pressable, Text, Image } from 'react-native';
+import { Divider, Text as NBText, Center } from 'native-base';
+import TabNavigationButton from './TabNavigationButton';
+import TabNavigationList from './TabNavigationList';
+import { useAssets } from 'expo-asset';
+import useColorScheme from '../../hooks/colorScheme';
+
+const TabNavigation = () => {
+	const colorScheme = useColorScheme();
+	const [icon] = useAssets(
+		colorScheme == 'light'
+			? require('../../assets/icon_light.png')
+			: require('../../assets/icon_dark.png')
+	);
+	const buttons = [
+		{
+			icon: 'icon',
+			label: 'label',
+			onPress: () => {},
+			onLongPress: () => {},
+			isActive: true,
+		},
+		{
+			icon: 'icon',
+			label: 'salut',
+			onPress: () => {},
+			onLongPress: () => {},
+			isActive: false,
+		},
+	];
+
+	const others = [
+		{
+			label: 'Recently played',
+		},
+		{
+			label: 'Short',
+		},
+		{ label: 'Twinkle Twinkle' },
+	];
+	return (
+		<View
+			style={{
+				display: 'flex',
+				flexDirection: 'row',
+				width: '100%',
+				height: '100%',
+			}}
+		>
+			<View>
+				<Center>
+					<View
+						style={{
+							display: 'flex',
+							flexDirection: 'row',
+							alignItems: 'center',
+							justifyContent: 'flex-start',
+							flexShrink: 0,
+							padding: '10px',
+						}}
+					>
+						<Image
+							source={{ uri: icon?.at(0)?.uri }}
+							style={{
+								aspectRatio: 1,
+								width: '40px',
+								height: 'auto',
+								marginRight: '10px',
+							}}
+						/>
+						<NBText fontSize={'2xl'} selectable={false}>
+							Chromacase
+						</NBText>
+					</View>
+				</Center>
+				<View
+					style={{
+						display: 'flex',
+						width: '300px',
+						height: 'auto',
+						padding: '32px',
+						flexDirection: 'column',
+						justifyContent: 'space-between',
+						alignItems: 'flex-start',
+						flexGrow: 1,
+					}}
+				>
+					<TabNavigationList
+						style={{
+							flexShrink: 0,
+							gap: '20px',
+						}}
+					>
+						{buttons.map((button, index) => (
+							<TabNavigationButton
+								key={'tab-navigation-button-' + index}
+								{...button}
+							/>
+						))}
+					</TabNavigationList>
+					<TabNavigationList>
+						<Divider />
+						<TabNavigationList>
+							{others.map((other, index) => (
+								<View
+									key={'tab-navigation-other-' + index}
+									style={{
+										paddingHorizontal: '16px',
+										paddingVertical: '10px',
+									}}
+								>
+									<Text>{other.label}</Text>
+								</View>
+							))}
+						</TabNavigationList>
+						<Divider />
+						<TabNavigationList
+							style={{
+								gap: '20px',
+							}}
+						>
+							{[{ label: 'Settings' }, { label: 'Logout' }].map((button, index) => (
+								<TabNavigationButton
+									key={'tab-navigation-setting-button-' + index}
+									{...button}
+								/>
+							))}
+						</TabNavigationList>
+					</TabNavigationList>
+				</View>
+			</View>
+			<View>
+				<Text>Main content page</Text>
+			</View>
+		</View>
+	);
+};
+
+export default TabNavigation;
diff --git a/front/components/V2/TabNavigationButton.tsx b/front/components/V2/TabNavigationButton.tsx
new file mode 100644
index 0000000..9d9b807
--- /dev/null
+++ b/front/components/V2/TabNavigationButton.tsx
@@ -0,0 +1,72 @@
+import { View, Text } from 'react-native';
+import { Pressable } from 'native-base';
+
+type TabNavigationButtonProps = {
+	icon?: string;
+	label: string;
+	onPress: () => void;
+	onLongPress: () => void;
+	isActive: boolean;
+};
+
+const TabNavigationButton = (props: TabNavigationButtonProps) => {
+	return (
+		<Pressable
+			onPress={props.onPress}
+			onLongPress={props.onLongPress}
+			style={{
+				width: '100%',
+			}}
+		>
+			{({ isPressed, isHovered }) => (
+				<View
+					style={{
+						display: 'flex',
+						flexDirection: 'row',
+						alignSelf: 'stretch',
+						alignItems: 'center',
+						justifyContent: 'flex-start',
+						padding: '10px',
+						borderRadius: '8px',
+						flexGrow: 0,
+						backgroundColor: (() => {
+							if (isPressed) {
+								return 'rgba(0, 0, 0, 0.1)';
+							} else if (isHovered) {
+								return 'rgba(0, 0, 0, 0.05)';
+							} else if (props.isActive) {
+								return 'rgba(0, 0, 0, 0.1)';
+							} else {
+								return 'transparent';
+							}
+						})(),
+					}}
+				>
+					{props.icon && (
+						<View
+							style={{
+								marginRight: '10px',
+							}}
+						>
+							<Text>{props.icon}</Text>
+						</View>
+					)}
+					<View>
+						<Text numberOfLines={1} selectable={false}>
+							{props.label}
+						</Text>
+					</View>
+				</View>
+			)}
+		</Pressable>
+	);
+};
+
+TabNavigationButton.defaultProps = {
+	icon: undefined,
+	onPress: () => {},
+	onLongPress: () => {},
+	isActive: false,
+};
+
+export default TabNavigationButton;
diff --git a/front/components/V2/TabNavigationList.tsx b/front/components/V2/TabNavigationList.tsx
new file mode 100644
index 0000000..6b99f8e
--- /dev/null
+++ b/front/components/V2/TabNavigationList.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { View, StyleProp, ViewStyle } from 'react-native';
+
+type TabNavigationListProps = {
+	children: React.ReactNode;
+	style?: StyleProp<ViewStyle>;
+};
+
+const TabNavigationList = (props: TabNavigationListProps) => {
+	return (
+		<View
+			style={[
+				{
+					display: 'flex',
+					alignItems: 'flex-start',
+					alignSelf: 'stretch',
+					flexDirection: 'column',
+					gap: '8px',
+				},
+				props.style,
+			]}
+		>
+			{props.children}
+		</View>
+	);
+};
+
+export default TabNavigationList;

From dcca1b1f1c983c0bc751498d04629acb51dc721c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Tue, 19 Sep 2023 02:15:27 +0200
Subject: [PATCH 02/15] Added phone and responsive support on the tabnavigation
 added callapsables fixed colorscheme and setting background color

---
 front/components/V2/TabNavigation.tsx        | 218 ++++++++-----------
 front/components/V2/TabNavigationButton.tsx  |  31 ++-
 front/components/V2/TabNavigationDesktop.tsx | 147 +++++++++++++
 front/components/V2/TabNavigationPhone.tsx   |  64 ++++++
 4 files changed, 327 insertions(+), 133 deletions(-)
 create mode 100644 front/components/V2/TabNavigationDesktop.tsx
 create mode 100644 front/components/V2/TabNavigationPhone.tsx

diff --git a/front/components/V2/TabNavigation.tsx b/front/components/V2/TabNavigation.tsx
index 10f7752..935e3f7 100644
--- a/front/components/V2/TabNavigation.tsx
+++ b/front/components/V2/TabNavigation.tsx
@@ -1,137 +1,107 @@
-import { View, Pressable, Text, Image } from 'react-native';
-import { Divider, Text as NBText, Center } from 'native-base';
-import TabNavigationButton from './TabNavigationButton';
-import TabNavigationList from './TabNavigationList';
-import { useAssets } from 'expo-asset';
+import { useBreakpointValue } from 'native-base';
+import { View } from 'react-native';
+import TabNavigationDesktop from './TabNavigationDesktop';
+import TabNavigationPhone from './TabNavigationPhone';
+import { Ionicons } from '@expo/vector-icons';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../state/Store';
 import useColorScheme from '../../hooks/colorScheme';
 
-const TabNavigation = () => {
-	const colorScheme = useColorScheme();
-	const [icon] = useAssets(
-		colorScheme == 'light'
-			? require('../../assets/icon_light.png')
-			: require('../../assets/icon_dark.png')
-	);
-	const buttons = [
-		{
-			icon: 'icon',
-			label: 'label',
-			onPress: () => {},
-			onLongPress: () => {},
-			isActive: true,
-		},
-		{
-			icon: 'icon',
-			label: 'salut',
-			onPress: () => {},
-			onLongPress: () => {},
-			isActive: false,
-		},
-	];
+export type NaviTab = {
+	id: string;
+	label: string;
+	icon?: React.ReactNode;
+	onPress?: () => void;
+	onLongPress?: () => void;
+	isActive?: boolean;
+	isCollapsed?: boolean;
+	iconName?: string;
+};
+
+const tabs = [
+	{
+		id: 'home',
+		label: 'Discovery',
+		icon: <Ionicons name="search" size={24} color="black" />,
+		iconName: 'search',
+	},
+	{
+		id: 'profile',
+		label: 'Profile',
+		icon: <Ionicons name="person" size={24} color="black" />,
+		iconName: 'person',
+	},
+	{
+		id: 'music',
+		label: 'Music',
+		icon: <Ionicons name="musical-notes" size={24} color="black" />,
+		iconName: 'musical-notes',
+	},
+	{
+		id: 'search',
+		label: 'Search',
+		icon: <Ionicons name="search" size={24} color="black" />,
+		iconName: 'search',
+	},
+	{
+		id: 'notifications',
+		label: 'Notifications',
+		icon: <Ionicons name="notifications" size={24} color="black" />,
+		iconName: 'notifications',
+	},
+	{
+		id: 'settings',
+		label: 'Settings',
+		icon: <Ionicons name="settings" size={24} color="white" />,
+		iconName: 'settings',
+	},
+] as NaviTab[];
+
+const TabNavigation = () => {
+	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
+	const [isDesktopCollapsed, setIsDesktopCollapsed] = useState(false);
+	const [activeTab, setActiveTab] = useState(tabs[0]?.id ?? 'home');
+	const colorScheme = useColorScheme();
+
+	const appTabs = tabs.map((t) => {
+		return {
+			...t,
+			onPress: () => setActiveTab(t.id),
+			icon: (
+				<Ionicons
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					name={t.iconName as any}
+					size={24}
+					color={colorScheme === 'dark' ? 'white' : 'black'}
+				/>
+			),
+		};
+	});
 
-	const others = [
-		{
-			label: 'Recently played',
-		},
-		{
-			label: 'Short',
-		},
-		{ label: 'Twinkle Twinkle' },
-	];
 	return (
 		<View
 			style={{
-				display: 'flex',
-				flexDirection: 'row',
 				width: '100%',
 				height: '100%',
+				backgroundColor: 'rgb(26, 36, 74)',
 			}}
 		>
-			<View>
-				<Center>
-					<View
-						style={{
-							display: 'flex',
-							flexDirection: 'row',
-							alignItems: 'center',
-							justifyContent: 'flex-start',
-							flexShrink: 0,
-							padding: '10px',
-						}}
-					>
-						<Image
-							source={{ uri: icon?.at(0)?.uri }}
-							style={{
-								aspectRatio: 1,
-								width: '40px',
-								height: 'auto',
-								marginRight: '10px',
-							}}
-						/>
-						<NBText fontSize={'2xl'} selectable={false}>
-							Chromacase
-						</NBText>
-					</View>
-				</Center>
-				<View
-					style={{
-						display: 'flex',
-						width: '300px',
-						height: 'auto',
-						padding: '32px',
-						flexDirection: 'column',
-						justifyContent: 'space-between',
-						alignItems: 'flex-start',
-						flexGrow: 1,
-					}}
-				>
-					<TabNavigationList
-						style={{
-							flexShrink: 0,
-							gap: '20px',
-						}}
-					>
-						{buttons.map((button, index) => (
-							<TabNavigationButton
-								key={'tab-navigation-button-' + index}
-								{...button}
-							/>
-						))}
-					</TabNavigationList>
-					<TabNavigationList>
-						<Divider />
-						<TabNavigationList>
-							{others.map((other, index) => (
-								<View
-									key={'tab-navigation-other-' + index}
-									style={{
-										paddingHorizontal: '16px',
-										paddingVertical: '10px',
-									}}
-								>
-									<Text>{other.label}</Text>
-								</View>
-							))}
-						</TabNavigationList>
-						<Divider />
-						<TabNavigationList
-							style={{
-								gap: '20px',
-							}}
-						>
-							{[{ label: 'Settings' }, { label: 'Logout' }].map((button, index) => (
-								<TabNavigationButton
-									key={'tab-navigation-setting-button-' + index}
-									{...button}
-								/>
-							))}
-						</TabNavigationList>
-					</TabNavigationList>
-				</View>
-			</View>
-			<View>
-				<Text>Main content page</Text>
-			</View>
+			{screenSize === 'small' ? (
+				<TabNavigationPhone
+					tabs={appTabs}
+					activeTabID={activeTab}
+					setActiveTabID={setActiveTab}
+				/>
+			) : (
+				<TabNavigationDesktop
+					tabs={appTabs}
+					activeTabID={activeTab}
+					setActiveTabID={setActiveTab}
+					isCollapsed={isDesktopCollapsed}
+					setIsCollapsed={setIsDesktopCollapsed}
+				/>
+			)}
 		</View>
 	);
 };
diff --git a/front/components/V2/TabNavigationButton.tsx b/front/components/V2/TabNavigationButton.tsx
index 9d9b807..3b37111 100644
--- a/front/components/V2/TabNavigationButton.tsx
+++ b/front/components/V2/TabNavigationButton.tsx
@@ -1,12 +1,14 @@
-import { View, Text } from 'react-native';
-import { Pressable } from 'native-base';
+import { View } from 'react-native';
+import { Pressable, Text } from 'native-base';
+import React from 'react';
 
 type TabNavigationButtonProps = {
-	icon?: string;
+	icon?: React.ReactNode;
 	label: string;
 	onPress: () => void;
 	onLongPress: () => void;
 	isActive: boolean;
+	isCollapsed: boolean;
 };
 
 const TabNavigationButton = (props: TabNavigationButtonProps) => {
@@ -29,13 +31,23 @@ const TabNavigationButton = (props: TabNavigationButtonProps) => {
 						padding: '10px',
 						borderRadius: '8px',
 						flexGrow: 0,
+						boxShadow: (() => {
+							if (isHovered) {
+								return '0px 0px 16px 0px rgba(0, 0, 0, 0.25)';
+							} else if (props.isActive) {
+								return '0px 0px 8px 0px rgba(0, 0, 0, 0.25)';
+							} else {
+								return undefined;
+							}
+						})(),
+						backdropFilter: 'blur(2px)',
 						backgroundColor: (() => {
 							if (isPressed) {
 								return 'rgba(0, 0, 0, 0.1)';
 							} else if (isHovered) {
-								return 'rgba(0, 0, 0, 0.05)';
+								return 'rgba(231, 231, 232, 0.2)';
 							} else if (props.isActive) {
-								return 'rgba(0, 0, 0, 0.1)';
+								return 'rgba(16, 16, 20, 0.5)';
 							} else {
 								return 'transparent';
 							}
@@ -45,17 +57,17 @@ const TabNavigationButton = (props: TabNavigationButtonProps) => {
 					{props.icon && (
 						<View
 							style={{
-								marginRight: '10px',
+								marginRight: props.isCollapsed ? undefined : '10px',
 							}}
 						>
-							<Text>{props.icon}</Text>
+							{props.icon}
 						</View>
 					)}
-					<View>
+					{!props.isCollapsed && (
 						<Text numberOfLines={1} selectable={false}>
 							{props.label}
 						</Text>
-					</View>
+					)}
 				</View>
 			)}
 		</Pressable>
@@ -67,6 +79,7 @@ TabNavigationButton.defaultProps = {
 	onPress: () => {},
 	onLongPress: () => {},
 	isActive: false,
+	isCollapsed: false,
 };
 
 export default TabNavigationButton;
diff --git a/front/components/V2/TabNavigationDesktop.tsx b/front/components/V2/TabNavigationDesktop.tsx
new file mode 100644
index 0000000..85f5991
--- /dev/null
+++ b/front/components/V2/TabNavigationDesktop.tsx
@@ -0,0 +1,147 @@
+import { View, Image } from 'react-native';
+import { Divider, Text, Center } from 'native-base';
+import TabNavigationButton from './TabNavigationButton';
+import TabNavigationList from './TabNavigationList';
+import { useAssets } from 'expo-asset';
+import useColorScheme from '../../hooks/colorScheme';
+import { NaviTab } from './TabNavigation';
+
+type TabNavigationDesktopProps = {
+	tabs: NaviTab[];
+	isCollapsed: boolean;
+	setIsCollapsed: (isCollapsed: boolean) => void;
+	activeTabID: string;
+	setActiveTabID: (id: string) => void;
+};
+
+const TabNavigationDesktop = (props: TabNavigationDesktopProps) => {
+	const colorScheme = useColorScheme();
+	const [icon] = useAssets(
+		colorScheme == 'light'
+			? require('../../assets/icon_light.png')
+			: require('../../assets/icon_dark.png')
+	);
+	// settings is displayed separately (with logout)
+	const buttons = props.tabs.filter((tab) => tab.id !== 'settings');
+
+	const others = [
+		{
+			label: 'Recently played',
+		},
+		{
+			label: 'Short',
+		},
+		{ label: 'Twinkle Twinkle' },
+	];
+
+	return (
+		<View
+			style={{
+				display: 'flex',
+				flexDirection: 'row',
+				width: '100%',
+				height: '100%',
+			}}
+		>
+			<View>
+				<Center>
+					<View
+						style={{
+							display: 'flex',
+							flexDirection: 'row',
+							alignItems: 'center',
+							justifyContent: 'flex-start',
+							flexShrink: 0,
+							padding: '10px',
+						}}
+					>
+						<Image
+							source={{ uri: icon?.at(0)?.uri }}
+							style={{
+								aspectRatio: 1,
+								width: '40px',
+								height: 'auto',
+								marginRight: '10px',
+							}}
+						/>
+						<Text fontSize={'2xl'} selectable={false}>
+							Chromacase
+						</Text>
+					</View>
+				</Center>
+				<View
+					style={{
+						display: 'flex',
+						width: '300px',
+						height: 'auto',
+						padding: '32px',
+						flexDirection: 'column',
+						justifyContent: 'space-between',
+						alignItems: 'flex-start',
+						flexGrow: 1,
+					}}
+				>
+					<TabNavigationList
+						style={{
+							flexShrink: 0,
+							gap: '20px',
+						}}
+					>
+						{buttons.map((button, index) => (
+							<TabNavigationButton
+								key={'tab-navigation-button-' + index}
+								icon={button.icon}
+								label={button.label}
+								isActive={button.id == props.activeTabID}
+								onPress={button.onPress}
+								onLongPress={button.onLongPress}
+								isCollapsed={props.isCollapsed}
+							/>
+						))}
+					</TabNavigationList>
+					<TabNavigationList>
+						<Divider />
+						<TabNavigationList>
+							{others.map((other, index) => (
+								<View
+									key={'tab-navigation-other-' + index}
+									style={{
+										paddingHorizontal: '16px',
+										paddingVertical: '10px',
+									}}
+								>
+									<Text>{other.label}</Text>
+								</View>
+							))}
+						</TabNavigationList>
+						<Divider />
+						<TabNavigationList
+							style={{
+								gap: '20px',
+							}}
+						>
+							{([props.tabs.find((t) => t.id === 'settings')] as NaviTab[]).map(
+								(button, index) => (
+									<TabNavigationButton
+										key={'tab-navigation-setting-button-' + index}
+										icon={button.icon}
+										label={button.label}
+										isActive={button.id == props.activeTabID}
+										onPress={button.onPress}
+										onLongPress={button.onLongPress}
+										isCollapsed={props.isCollapsed}
+									/>
+								)
+							)}
+						</TabNavigationList>
+					</TabNavigationList>
+				</View>
+			</View>
+			<View>
+				<Text>Main content page</Text>
+			</View>
+		</View>
+	);
+};
+
+export default TabNavigationDesktop;
diff --git a/front/components/V2/TabNavigationPhone.tsx b/front/components/V2/TabNavigationPhone.tsx
new file mode 100644
index 0000000..e3b3736
--- /dev/null
+++ b/front/components/V2/TabNavigationPhone.tsx
@@ -0,0 +1,64 @@
+import { View } from 'react-native';
+import { Text, Center } from 'native-base';
+import TabNavigationButton from './TabNavigationButton';
+import { NaviTab } from './TabNavigation';
+
+type TabNavigationPhoneProps = {
+	tabs: NaviTab[];
+	activeTabID: string;
+	setActiveTabID: (id: string) => void;
+};
+
+const TabNavigationPhone = (props: TabNavigationPhoneProps) => {
+	return (
+		<View
+			style={{
+				width: '100%',
+				height: '100%',
+				display: 'flex',
+				flexDirection: 'column-reverse',
+			}}
+		>
+			<View
+				style={{
+					padding: '16px',
+					height: '90px',
+					width: '100%',
+				}}
+			>
+				<Center>
+					<View
+						style={{
+							display: 'flex',
+							padding: '8px',
+							justifyContent: 'space-evenly',
+							flexDirection: 'row',
+							alignItems: 'center',
+							alignSelf: 'stretch',
+							borderRadius: '8px',
+							backgroundColor: 'rgba(16, 16, 20, 0.5)',
+						}}
+					>
+						{props.tabs.map((tab) => (
+							<View key={'navigation-button-phone-' + tab.label}>
+								<TabNavigationButton
+									icon={tab.icon}
+									label={tab.label}
+									onPress={tab.onPress}
+									onLongPress={tab.onLongPress}
+									isActive={tab.id === props.activeTabID}
+									isCollapsed={tab.id != props.activeTabID}
+								/>
+							</View>
+						))}
+					</View>
+				</Center>
+			</View>
+			<View>
+				<Text>Main content page</Text>
+			</View>
+		</View>
+	);
+};
+
+export default TabNavigationPhone;

From e817021edebc51748359b38b4c01a1d52c60457e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Tue, 19 Sep 2023 02:24:26 +0200
Subject: [PATCH 03/15] fix type errors

---
 front/components/V2/TabNavigation.tsx        | 2 --
 front/components/V2/TabNavigationButton.tsx  | 3 ++-
 front/components/V2/TabNavigationDesktop.tsx | 2 ++
 front/components/V2/TabNavigationList.tsx    | 1 +
 front/components/V2/TabNavigationPhone.tsx   | 2 +-
 5 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/front/components/V2/TabNavigation.tsx b/front/components/V2/TabNavigation.tsx
index 935e3f7..bb7c30d 100644
--- a/front/components/V2/TabNavigation.tsx
+++ b/front/components/V2/TabNavigation.tsx
@@ -4,8 +4,6 @@ import TabNavigationDesktop from './TabNavigationDesktop';
 import TabNavigationPhone from './TabNavigationPhone';
 import { Ionicons } from '@expo/vector-icons';
 import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
-import { RootState } from '../../state/Store';
 import useColorScheme from '../../hooks/colorScheme';
 
 export type NaviTab = {
diff --git a/front/components/V2/TabNavigationButton.tsx b/front/components/V2/TabNavigationButton.tsx
index 3b37111..dcb217c 100644
--- a/front/components/V2/TabNavigationButton.tsx
+++ b/front/components/V2/TabNavigationButton.tsx
@@ -29,8 +29,9 @@ const TabNavigationButton = (props: TabNavigationButtonProps) => {
 						alignItems: 'center',
 						justifyContent: 'flex-start',
 						padding: '10px',
-						borderRadius: '8px',
+						borderRadius: 8,
 						flexGrow: 0,
+						// @ts-expect-error BoxShadow is not in the types but I want it this may be a legitimate error on my part
 						boxShadow: (() => {
 							if (isHovered) {
 								return '0px 0px 16px 0px rgba(0, 0, 0, 0.25)';
diff --git a/front/components/V2/TabNavigationDesktop.tsx b/front/components/V2/TabNavigationDesktop.tsx
index 85f5991..339f580 100644
--- a/front/components/V2/TabNavigationDesktop.tsx
+++ b/front/components/V2/TabNavigationDesktop.tsx
@@ -84,6 +84,7 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => {
 					<TabNavigationList
 						style={{
 							flexShrink: 0,
+							// @ts-expect-error gap is not in the types because we have an old version of react-native
 							gap: '20px',
 						}}
 					>
@@ -117,6 +118,7 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => {
 						<Divider />
 						<TabNavigationList
 							style={{
+								// @ts-expect-error gap is not in the types because we have an old version of react-native
 								gap: '20px',
 							}}
 						>
diff --git a/front/components/V2/TabNavigationList.tsx b/front/components/V2/TabNavigationList.tsx
index 6b99f8e..28fbd87 100644
--- a/front/components/V2/TabNavigationList.tsx
+++ b/front/components/V2/TabNavigationList.tsx
@@ -15,6 +15,7 @@ const TabNavigationList = (props: TabNavigationListProps) => {
 					alignItems: 'flex-start',
 					alignSelf: 'stretch',
 					flexDirection: 'column',
+					// @ts-expect-error gap is not in the types because we have an old version of react-native
 					gap: '8px',
 				},
 				props.style,
diff --git a/front/components/V2/TabNavigationPhone.tsx b/front/components/V2/TabNavigationPhone.tsx
index e3b3736..01d1902 100644
--- a/front/components/V2/TabNavigationPhone.tsx
+++ b/front/components/V2/TabNavigationPhone.tsx
@@ -35,7 +35,7 @@ const TabNavigationPhone = (props: TabNavigationPhoneProps) => {
 							flexDirection: 'row',
 							alignItems: 'center',
 							alignSelf: 'stretch',
-							borderRadius: '8px',
+							borderRadius: 8,
 							backgroundColor: 'rgba(16, 16, 20, 0.5)',
 						}}
 					>

From 94875d4c7f7aceae0cf8ec59e15ff3cff53f3ad4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Tue, 19 Sep 2023 17:35:55 +0200
Subject: [PATCH 04/15] trying golden ratio

---
 front/components/V2/TabNavigation.tsx        |  11 +-
 front/components/V2/TabNavigationDesktop.tsx |   8 +-
 front/components/V2/TabNavigationPhone.tsx   |   8 +-
 front/views/V2/HomeView.tsx                  | 146 +++++++++++++++++++
 4 files changed, 165 insertions(+), 8 deletions(-)
 create mode 100644 front/views/V2/HomeView.tsx

diff --git a/front/components/V2/TabNavigation.tsx b/front/components/V2/TabNavigation.tsx
index bb7c30d..6a3c724 100644
--- a/front/components/V2/TabNavigation.tsx
+++ b/front/components/V2/TabNavigation.tsx
@@ -5,6 +5,7 @@ import TabNavigationPhone from './TabNavigationPhone';
 import { Ionicons } from '@expo/vector-icons';
 import React, { useState } from 'react';
 import useColorScheme from '../../hooks/colorScheme';
+import HomeView from '../../views/V2/HomeView';
 
 export type NaviTab = {
 	id: string;
@@ -62,6 +63,8 @@ const TabNavigation = () => {
 	const [activeTab, setActiveTab] = useState(tabs[0]?.id ?? 'home');
 	const colorScheme = useColorScheme();
 
+	const child = <HomeView />;
+
 	const appTabs = tabs.map((t) => {
 		return {
 			...t,
@@ -90,7 +93,9 @@ const TabNavigation = () => {
 					tabs={appTabs}
 					activeTabID={activeTab}
 					setActiveTabID={setActiveTab}
-				/>
+				>
+					{child}
+				</TabNavigationPhone>
 			) : (
 				<TabNavigationDesktop
 					tabs={appTabs}
@@ -98,7 +103,9 @@ const TabNavigation = () => {
 					setActiveTabID={setActiveTab}
 					isCollapsed={isDesktopCollapsed}
 					setIsCollapsed={setIsDesktopCollapsed}
-				/>
+				>
+					{child}
+				</TabNavigationDesktop>
 			)}
 		</View>
 	);
diff --git a/front/components/V2/TabNavigationDesktop.tsx b/front/components/V2/TabNavigationDesktop.tsx
index 339f580..2fe80c7 100644
--- a/front/components/V2/TabNavigationDesktop.tsx
+++ b/front/components/V2/TabNavigationDesktop.tsx
@@ -12,6 +12,7 @@ type TabNavigationDesktopProps = {
 	setIsCollapsed: (isCollapsed: boolean) => void;
 	activeTabID: string;
 	setActiveTabID: (id: string) => void;
+	children?: React.ReactNode;
 };
 
 const TabNavigationDesktop = (props: TabNavigationDesktopProps) => {
@@ -139,9 +140,10 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => {
 					</TabNavigationList>
 				</View>
 			</View>
-			<View>
-				<Text>Main content page</Text>
-			</View>
+			<View style={{
+				height: '100%',
+				width: 'calc(100% - 300px)',
+			}}>{props.children}</View>
 		</View>
 	);
 };
diff --git a/front/components/V2/TabNavigationPhone.tsx b/front/components/V2/TabNavigationPhone.tsx
index 01d1902..16485e1 100644
--- a/front/components/V2/TabNavigationPhone.tsx
+++ b/front/components/V2/TabNavigationPhone.tsx
@@ -7,6 +7,7 @@ type TabNavigationPhoneProps = {
 	tabs: NaviTab[];
 	activeTabID: string;
 	setActiveTabID: (id: string) => void;
+	children?: React.ReactNode;
 };
 
 const TabNavigationPhone = (props: TabNavigationPhoneProps) => {
@@ -54,9 +55,10 @@ const TabNavigationPhone = (props: TabNavigationPhoneProps) => {
 					</View>
 				</Center>
 			</View>
-			<View>
-				<Text>Main content page</Text>
-			</View>
+			<View style={{
+				width: '100%',
+				height: 'calc(100% - 90px)',
+			}}>{props.children}</View>
 		</View>
 	);
 };
diff --git a/front/views/V2/HomeView.tsx b/front/views/V2/HomeView.tsx
new file mode 100644
index 0000000..c5441f8
--- /dev/null
+++ b/front/views/V2/HomeView.tsx
@@ -0,0 +1,146 @@
+import { View, Image } from 'react-native';
+import { Text } from 'native-base';
+import React from 'react';
+
+const bigSideRatio = 100;
+const smallSideRatio = 61;
+
+const HomeView = () => {
+	return (
+		<View
+			style={{
+				width: '100%',
+				height: '100%',
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+		>
+			<View
+				style={{
+					width: '100%',
+                    aspectRatio: 16 / 9,
+				}}
+			>
+				<View
+					style={{
+						alignSelf: 'stretch',
+						alignItems: 'stretch',
+						flexDirection: 'row',
+						display: 'flex',
+						gap: '0px',
+					}}
+				>
+					<View
+						style={{
+							flexGrow: bigSideRatio,
+						}}
+					>
+						<Image
+							source={{
+								uri: 'https://media.discordapp.net/attachments/717080637038788731/1153688155292180560/image_homeview1.png',
+							}}
+							style={{
+								aspectRatio: 1,
+							}}
+						/>
+					</View>
+					<View
+						style={{
+							flexGrow: smallSideRatio,
+							height: '100%',
+							display: 'flex',
+							flexDirection: 'column',
+							alignItems: 'stretch',
+							gap: '0px',
+						}}
+					>
+						<View
+							style={{
+								flexGrow: bigSideRatio,
+							}}
+						>
+							<Image
+								source={{
+									uri: 'https://media.discordapp.net/attachments/717080637038788731/1153688154923090093/image_homeview2.png',
+								}}
+								style={{
+									aspectRatio: 1,
+								}}
+							/>
+						</View>
+						<View
+							style={{
+								flexGrow: smallSideRatio,
+								width: '100%',
+								display: 'flex',
+								flexDirection: 'row-reverse',
+								alignItems: 'stretch',
+								gap: '0px',
+							}}
+						>
+							<View
+								style={{
+									flexGrow: bigSideRatio,
+								}}
+							>
+								<Image
+									source={{
+										uri: 'https://media.discordapp.net/attachments/717080637038788731/1153688154499457096/image_homeview3.png',
+									}}
+									style={{
+										aspectRatio: 1,
+									}}
+								/>
+							</View>
+							<View
+								style={{
+									flexGrow: smallSideRatio,
+									height: '100%',
+									display: 'flex',
+									flexDirection: 'column-reverse',
+									alignItems: 'stretch',
+									gap: '0px',
+								}}
+							>
+								<View
+									style={{
+										flexGrow: bigSideRatio,
+									}}
+								>
+									<Image
+										source={{
+											uri: 'https://media.discordapp.net/attachments/717080637038788731/1153688154109394985/image_homeview4.png',
+										}}
+										style={{
+											aspectRatio: 1,
+										}}
+									/>
+								</View>
+								<View
+									style={{
+										width: '100%',
+										flexGrow: smallSideRatio,
+									}}
+								>
+									<Text>More</Text>
+								</View>
+							</View>
+						</View>
+					</View>
+				</View>
+			</View>
+			<View
+				style={{
+					flexShrink: 0,
+					flexGrow: 0,
+					flexBasis: '15%',
+					width: '100%',
+				}}
+			>
+				<Text>Footer</Text>
+			</View>
+		</View>
+	);
+};
+
+export default HomeView;

From 8e5c65e6f2e7af51da85e5764ca794514f156b35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Wed, 20 Sep 2023 00:35:10 +0200
Subject: [PATCH 05/15] Added SongCardInfo for the V2 design and type fixes

---
 front/Navigation.tsx                         |   9 +-
 front/components/V2/HomeMainSongCard.tsx     |  94 +++++++
 front/components/V2/SongCardInfo.tsx         | 259 +++++++++++++++++++
 front/components/V2/TabNavigation.tsx        |  32 ++-
 front/components/V2/TabNavigationDesktop.tsx |  14 +-
 front/components/V2/TabNavigationPhone.tsx   |  14 +-
 front/views/HomeView.tsx                     |   6 +
 front/views/V2/HomeView.tsx                  | 148 ++++++-----
 8 files changed, 503 insertions(+), 73 deletions(-)
 create mode 100644 front/components/V2/HomeMainSongCard.tsx
 create mode 100644 front/components/V2/SongCardInfo.tsx

diff --git a/front/Navigation.tsx b/front/Navigation.tsx
index 70107a6..2081c00 100644
--- a/front/Navigation.tsx
+++ b/front/Navigation.tsx
@@ -39,10 +39,15 @@ const removeMe = () => '';
 const protectedRoutes = () =>
 	({
 		Home: {
-			component: TabNavigation,
-			options: { title: translate('welcome'), headerShown: false },
+			component: HomeView,
+			options: { title: translate('welcome'), headerLeft: null },
 			link: '/',
 		},
+		HomeNew: {
+			component: TabNavigation,
+			options: { headerShown: false },
+			link: '/V2',
+		},
 		Play: { component: PlayView, options: { title: translate('play') }, link: '/play/:songId' },
 		Settings: {
 			component: SetttingsNavigator,
diff --git a/front/components/V2/HomeMainSongCard.tsx b/front/components/V2/HomeMainSongCard.tsx
new file mode 100644
index 0000000..6b2fc51
--- /dev/null
+++ b/front/components/V2/HomeMainSongCard.tsx
@@ -0,0 +1,94 @@
+import { Image, View } from 'react-native';
+import { Text, Pressable, PresenceTransition } from 'native-base';
+
+type HomeMainSongCardProps = {
+	image: string;
+	title: string;
+	artist: string;
+	onPress: () => void;
+};
+
+const HomeMainSongCard = (props: HomeMainSongCardProps) => {
+	// on hover darken the image and show the title and artist with fade in
+	return (
+		<Pressable onPress={props.onPress}>
+			{({ isHovered }) => (
+				<View
+					style={{
+						width: '100%',
+						height: '100%',
+						borderRadius: 12,
+						overflow: 'hidden',
+						position: 'relative',
+					}}
+				>
+					<Image
+						source={{
+							uri: props.image,
+						}}
+						style={{
+							aspectRatio: 1,
+							width: '100%',
+							height: '100%',
+							flexShrink: 1,
+						}}
+					/>
+					<PresenceTransition
+						style={{
+							width: '100%',
+							height: '100%',
+							position: 'absolute',
+						}}
+						visible={isHovered}
+						initial={{
+							opacity: 0,
+						}}
+						animate={{
+							opacity: 1,
+						}}
+					>
+						<View
+							style={{
+								width: '100%',
+								height: '100%',
+								backgroundColor: 'rgba(0, 0, 0, 0.75)',
+								justifyContent: 'flex-end',
+								alignItems: 'flex-start',
+								paddingHorizontal: 16,
+								paddingVertical: 36,
+							}}
+						>
+							<Text
+								style={{
+									color: 'white',
+									fontSize: 46,
+									fontWeight: 'bold',
+								}}
+								selectable={false}
+							>
+								{props.title}
+							</Text>
+							<Text
+								style={{
+									color: 'white',
+									fontSize: 16,
+									fontWeight: 'bold',
+									textAlign: 'center',
+								}}
+								selectable={false}
+							>
+								{props.artist}
+							</Text>
+						</View>
+					</PresenceTransition>
+				</View>
+			)}
+		</Pressable>
+	);
+};
+
+HomeMainSongCard.defaultProps = {
+	onPress: () => {},
+};
+
+export default HomeMainSongCard;
diff --git a/front/components/V2/SongCardInfo.tsx b/front/components/V2/SongCardInfo.tsx
new file mode 100644
index 0000000..06cc507
--- /dev/null
+++ b/front/components/V2/SongCardInfo.tsx
@@ -0,0 +1,259 @@
+import Song from '../../models/Song';
+import React from 'react';
+import { Image, View } from 'react-native';
+import { Pressable, Text, PresenceTransition, Icon, Button } from 'native-base';
+import { Ionicons } from '@expo/vector-icons';
+
+type SongCardInfoProps = {
+	song: Song;
+	onPress: () => void;
+	onPlay: () => void;
+};
+
+const CardDims = {
+	height: 200,
+	width: 200,
+};
+
+const Scores = [
+	{
+		icon: 'warning',
+		score: 3,
+	},
+	{
+		icon: 'star',
+		score: -225,
+	},
+	{
+		icon: 'trophy',
+		score: 100,
+	},
+];
+
+const SongCardInfo = (props: SongCardInfoProps) => {
+	const [isPlayHovered, setIsPlayHovered] = React.useState(false);
+	const [isHovered, setIsHovered] = React.useState(false);
+	const [isSlided, setIsSlided] = React.useState(false);
+
+	return (
+		<View
+			style={{
+				width: CardDims.width,
+				height: CardDims.height,
+				// @ts-expect-error boxShadow isn't yet supported by react native
+				boxShadow: '0px 4px 4px 0px rgba(0,0,0,0.25)',
+				backDropFilter: 'blur(2px)',
+				backgroundColor: 'rgba(16, 16, 20, 0.70)',
+				borderRadius: 12,
+				overflow: 'hidden',
+			}}
+		>
+			<Pressable
+				delayHoverIn={7}
+				isHovered={isPlayHovered ? true : undefined}
+				onPress={props.onPress}
+				style={{
+					width: '100%',
+				}}
+				onHoverIn={() => {
+					setIsHovered(true);
+				}}
+				onHoverOut={() => {
+					setIsHovered(false);
+					setIsSlided(false);
+				}}
+			>
+				<>
+					<View
+						style={{
+							width: CardDims.width,
+							height: CardDims.height,
+							backgroundColor: 'rgba(16, 16, 20, 0.7)',
+							borderRadius: 12,
+							display: 'flex',
+							justifyContent: 'flex-end',
+							alignItems: 'center',
+						}}
+					>
+						<View
+							style={{
+								width: '100%',
+								marginBottom: 8,
+								display: 'flex',
+								flexDirection: 'row',
+								justifyContent: 'space-between',
+								alignItems: 'center',
+							}}
+						>
+							{Scores.map((score, idx) => (
+								<View
+									key={score.icon + idx}
+									style={{
+										display: 'flex',
+										flexDirection: 'row',
+										alignItems: 'center',
+										// @ts-expect-error gap isn't yet supported by react native
+										gap: 5,
+										paddingHorizontal: 10,
+									}}
+								>
+									<Icon as={Ionicons} name={score.icon} size={17} color="white" />
+									<Text
+										style={{
+											color: 'white',
+											fontSize: 12,
+											fontWeight: 'bold',
+										}}
+									>
+										{score.score}
+									</Text>
+								</View>
+							))}
+						</View>
+					</View>
+					<PresenceTransition
+						style={{
+							width: '100%',
+							height: '100%',
+							position: 'absolute',
+						}}
+						visible={isHovered}
+						initial={{
+							translateY: 0,
+						}}
+						animate={{
+							translateY: -55,
+						}}
+						onTransitionComplete={() => {
+							if (isHovered) {
+								setIsSlided(true);
+							}
+						}}
+					>
+						<Image
+							source={{ uri: props.song.cover }}
+							style={{
+								position: 'relative',
+								width: CardDims.width,
+								height: CardDims.height,
+								borderRadius: 12,
+							}}
+						/>
+						<View
+							style={{
+								position: 'absolute',
+								width: '100%',
+								height: '100%',
+								backgroundColor: 'rgba(0, 0, 0, 0.75)',
+								justifyContent: 'flex-end',
+								alignItems: 'flex-start',
+								paddingHorizontal: 10,
+								paddingVertical: 7,
+								borderRadius: 12,
+							}}
+						>
+							<View
+								style={{
+									width: '100%',
+									display: 'flex',
+									flexDirection: 'row',
+									alignItems: 'flex-end',
+									justifyContent: 'space-between',
+								}}
+							>
+								<View
+									style={{
+										flexShrink: 1,
+									}}
+								>
+									<Text
+										numberOfLines={2}
+										style={{
+											color: 'white',
+											fontSize: 14,
+											fontWeight: 'bold',
+											marginBottom: 4,
+										}}
+									>
+										{props.song.name}
+									</Text>
+									<Text
+										numberOfLines={1}
+										style={{
+											color: 'white',
+											fontSize: 12,
+											fontWeight: 'normal',
+										}}
+									>
+										{props.song.artistId}
+									</Text>
+								</View>
+								<Ionicons
+									style={{
+										flexShrink: 0,
+									}}
+									name="bookmark-outline"
+									size={17}
+									color="#6075F9"
+								/>
+							</View>
+						</View>
+					</PresenceTransition>
+					{/* icon bu=outon appear in the middle of the card after the first presencetransition is done */}
+					<PresenceTransition
+						style={{
+							width: '100%',
+							height: '100%',
+							position: 'absolute',
+						}}
+						visible={isSlided}
+						initial={{
+							opacity: 0,
+						}}
+						animate={{
+							opacity: 1,
+						}}
+					>
+						<View
+							style={{
+								position: 'absolute',
+								width: '100%',
+								height: '100%',
+								display: 'flex',
+								justifyContent: 'flex-end',
+								alignItems: 'center',
+							}}
+						>
+							<Button
+								onHoverIn={() => {
+									setIsPlayHovered(true);
+								}}
+								onHoverOut={() => {
+									setIsPlayHovered(false);
+								}}
+								borderRadius={100}
+								marginBottom={35}
+								leftIcon={
+									<Ionicons
+										name="play-outline"
+										color={'white'}
+										size={20}
+										rounded="sm"
+									/>
+								}
+								onPress={props.onPlay}
+							/>
+						</View>
+					</PresenceTransition>
+				</>
+			</Pressable>
+		</View>
+	);
+};
+
+SongCardInfo.defaultProps = {
+	onPress: () => {},
+	onPlay: () => {},
+};
+
+export default SongCardInfo;
diff --git a/front/components/V2/TabNavigation.tsx b/front/components/V2/TabNavigation.tsx
index 6a3c724..3cdb6bc 100644
--- a/front/components/V2/TabNavigation.tsx
+++ b/front/components/V2/TabNavigation.tsx
@@ -66,6 +66,7 @@ const TabNavigation = () => {
 	const child = <HomeView />;
 
 	const appTabs = tabs.map((t) => {
+		// use the same instance of a component between desktop and mobile
 		return {
 			...t,
 			onPress: () => setActiveTab(t.id),
@@ -94,7 +95,20 @@ const TabNavigation = () => {
 					activeTabID={activeTab}
 					setActiveTabID={setActiveTab}
 				>
-					{child}
+					<View
+						style={{
+							width: 'calc(100% - 5)',
+							height: '100%',
+							backgroundColor: 'rgba(16, 16, 20, 0.50)',
+							borderRadius: 12,
+							margin: 5,
+							// @ts-expect-error backDropFilter isn't yet supported by react native
+							backDropFilter: 'blur(2px)',
+							padding: 15,
+						}}
+					>
+						{child}
+					</View>
 				</TabNavigationPhone>
 			) : (
 				<TabNavigationDesktop
@@ -104,7 +118,21 @@ const TabNavigation = () => {
 					isCollapsed={isDesktopCollapsed}
 					setIsCollapsed={setIsDesktopCollapsed}
 				>
-					{child}
+					<View
+						style={{
+							width: 'calc(100% - 10)',
+							height: '100%',
+							backgroundColor: 'rgba(16, 16, 20, 0.50)',
+							borderRadius: 12,
+							marginVertical: 10,
+							marginRight: 10,
+							// @ts-expect-error backDropFilter isn't yet supported by react native
+							backDropFilter: 'blur(2px)',
+							padding: 20,
+						}}
+					>
+						{child}
+					</View>
 				</TabNavigationDesktop>
 			)}
 		</View>
diff --git a/front/components/V2/TabNavigationDesktop.tsx b/front/components/V2/TabNavigationDesktop.tsx
index 2fe80c7..e903576 100644
--- a/front/components/V2/TabNavigationDesktop.tsx
+++ b/front/components/V2/TabNavigationDesktop.tsx
@@ -1,5 +1,5 @@
 import { View, Image } from 'react-native';
-import { Divider, Text, Center } from 'native-base';
+import { Divider, Text, Center, ScrollView } from 'native-base';
 import TabNavigationButton from './TabNavigationButton';
 import TabNavigationList from './TabNavigationList';
 import { useAssets } from 'expo-asset';
@@ -140,10 +140,14 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => {
 					</TabNavigationList>
 				</View>
 			</View>
-			<View style={{
-				height: '100%',
-				width: 'calc(100% - 300px)',
-			}}>{props.children}</View>
+			<ScrollView
+				style={{
+					height: '100%',
+					width: 'calc(100% - 300px)',
+				}}
+			>
+				{props.children}
+			</ScrollView>
 		</View>
 	);
 };
diff --git a/front/components/V2/TabNavigationPhone.tsx b/front/components/V2/TabNavigationPhone.tsx
index 16485e1..85f2161 100644
--- a/front/components/V2/TabNavigationPhone.tsx
+++ b/front/components/V2/TabNavigationPhone.tsx
@@ -1,5 +1,5 @@
 import { View } from 'react-native';
-import { Text, Center } from 'native-base';
+import { Center, ScrollView } from 'native-base';
 import TabNavigationButton from './TabNavigationButton';
 import { NaviTab } from './TabNavigation';
 
@@ -55,10 +55,14 @@ const TabNavigationPhone = (props: TabNavigationPhoneProps) => {
 					</View>
 				</Center>
 			</View>
-			<View style={{
-				width: '100%',
-				height: 'calc(100% - 90px)',
-			}}>{props.children}</View>
+			<ScrollView
+				style={{
+					width: '100%',
+					height: 'calc(100% - 90px)',
+				}}
+			>
+				{props.children}
+			</ScrollView>
 		</View>
 	);
 };
diff --git a/front/views/HomeView.tsx b/front/views/HomeView.tsx
index 131b74f..abfb414 100644
--- a/front/views/HomeView.tsx
+++ b/front/views/HomeView.tsx
@@ -136,6 +136,12 @@ const HomeView = () => {
 							size="sm"
 							onPress={() => navigation.navigate('Settings')}
 						/>
+						<TextButton
+							label={'V2'}
+							colorScheme="gray"
+							size="sm"
+							onPress={() => navigation.navigate('HomeNew')}
+						/>
 					</HStack>
 					<Box style={{ width: '100%' }}>
 						<Heading>
diff --git a/front/views/V2/HomeView.tsx b/front/views/V2/HomeView.tsx
index c5441f8..da00538 100644
--- a/front/views/V2/HomeView.tsx
+++ b/front/views/V2/HomeView.tsx
@@ -1,11 +1,48 @@
-import { View, Image } from 'react-native';
-import { Text } from 'native-base';
+import { View } from 'react-native';
+import { Text, useBreakpointValue } from 'native-base';
 import React from 'react';
+import { useQuery } from '../../Queries';
+import HomeMainSongCard from '../../components/V2/HomeMainSongCard';
+import SongCardInfo from '../../components/V2/SongCardInfo';
+import API from '../../API';
 
-const bigSideRatio = 100;
-const smallSideRatio = 61;
+const bigSideRatio = 1000;
+const smallSideRatio = 618;
+
+type HomeCardProps = {
+	image: string;
+	title: string;
+	artist: string;
+};
+
+const cards = [
+	{
+		image: 'https://media.discordapp.net/attachments/717080637038788731/1153688155292180560/image_homeview1.png',
+		title: 'Beethoven',
+		artist: 'Synphony No. 9',
+	},
+	{
+		image: 'https://media.discordapp.net/attachments/717080637038788731/1153688154923090093/image_homeview2.png',
+		title: 'Mozart',
+		artist: 'Lieder Kantate KV 619',
+	},
+	{
+		image: 'https://media.discordapp.net/attachments/717080637038788731/1153688154499457096/image_homeview3.png',
+		title: 'Back',
+		artist: 'Truc Truc',
+	},
+	{
+		image: 'https://media.discordapp.net/attachments/717080637038788731/1153688154109394985/image_homeview4.png',
+		title: 'Mozart',
+		artist: 'Machin Machin',
+	},
+] as [HomeCardProps, HomeCardProps, HomeCardProps, HomeCardProps];
 
 const HomeView = () => {
+	const songsQuery = useQuery(API.getSongSuggestions);
+	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
+	const isPhone = screenSize === 'small';
+
 	return (
 		<View
 			style={{
@@ -15,19 +52,13 @@ const HomeView = () => {
 				flexDirection: 'column',
 			}}
 		>
-			<View
-				style={{
-					width: '100%',
-                    aspectRatio: 16 / 9,
-				}}
-			>
+			<View>
 				<View
 					style={{
 						alignSelf: 'stretch',
+						maxWidth: '1100px',
 						alignItems: 'stretch',
-						flexDirection: 'row',
-						display: 'flex',
-						gap: '0px',
+						flexDirection: isPhone ? 'column' : 'row',
 					}}
 				>
 					<View
@@ -35,23 +66,14 @@ const HomeView = () => {
 							flexGrow: bigSideRatio,
 						}}
 					>
-						<Image
-							source={{
-								uri: 'https://media.discordapp.net/attachments/717080637038788731/1153688155292180560/image_homeview1.png',
-							}}
-							style={{
-								aspectRatio: 1,
-							}}
-						/>
+						<HomeMainSongCard {...cards[0]} />
 					</View>
 					<View
 						style={{
 							flexGrow: smallSideRatio,
-							height: '100%',
 							display: 'flex',
-							flexDirection: 'column',
+							flexDirection: isPhone ? 'row' : 'column',
 							alignItems: 'stretch',
-							gap: '0px',
 						}}
 					>
 						<View
@@ -59,23 +81,14 @@ const HomeView = () => {
 								flexGrow: bigSideRatio,
 							}}
 						>
-							<Image
-								source={{
-									uri: 'https://media.discordapp.net/attachments/717080637038788731/1153688154923090093/image_homeview2.png',
-								}}
-								style={{
-									aspectRatio: 1,
-								}}
-							/>
+							<HomeMainSongCard {...cards[1]} />
 						</View>
 						<View
 							style={{
 								flexGrow: smallSideRatio,
-								width: '100%',
 								display: 'flex',
-								flexDirection: 'row-reverse',
+								flexDirection: isPhone ? 'column-reverse' : 'row-reverse',
 								alignItems: 'stretch',
-								gap: '0px',
 							}}
 						>
 							<View
@@ -83,47 +96,32 @@ const HomeView = () => {
 									flexGrow: bigSideRatio,
 								}}
 							>
-								<Image
-									source={{
-										uri: 'https://media.discordapp.net/attachments/717080637038788731/1153688154499457096/image_homeview3.png',
-									}}
-									style={{
-										aspectRatio: 1,
-									}}
-								/>
+								<HomeMainSongCard {...cards[2]} />
 							</View>
 							<View
 								style={{
 									flexGrow: smallSideRatio,
-									height: '100%',
 									display: 'flex',
-									flexDirection: 'column-reverse',
+									flexDirection: isPhone ? 'row-reverse' : 'column-reverse',
 									alignItems: 'stretch',
-									gap: '0px',
 								}}
 							>
 								<View
 									style={{
 										flexGrow: bigSideRatio,
+										display: 'flex',
+										flexDirection: 'column',
+										alignItems: 'stretch',
+										justifyContent: 'flex-end',
 									}}
 								>
-									<Image
-										source={{
-											uri: 'https://media.discordapp.net/attachments/717080637038788731/1153688154109394985/image_homeview4.png',
-										}}
-										style={{
-											aspectRatio: 1,
-										}}
-									/>
+									<HomeMainSongCard {...cards[3]} />
 								</View>
 								<View
 									style={{
-										width: '100%',
 										flexGrow: smallSideRatio,
 									}}
-								>
-									<Text>More</Text>
-								</View>
+								></View>
 							</View>
 						</View>
 					</View>
@@ -137,7 +135,39 @@ const HomeView = () => {
 					width: '100%',
 				}}
 			>
-				<Text>Footer</Text>
+				<Text
+					style={{
+						color: 'white',
+						fontSize: 24,
+						fontWeight: 'bold',
+						marginLeft: 16,
+						marginBottom: 16,
+						marginTop: 24,
+					}}
+				>
+					{'Suggestions'}
+				</Text>
+				{songsQuery.isLoading && <Text>Loading...</Text>}
+				<View
+					style={{
+						flexDirection: 'row',
+						flexWrap: 'wrap',
+						justifyContent: 'flex-start',
+						alignItems: 'flex-start',
+						// @ts-expect-error - gap is not in the typings
+						gap: 16,
+					}}
+				>
+					{songsQuery.data?.map((song) => (
+						<SongCardInfo
+							key={song.id}
+							song={song}
+							onPress={() => {
+								console.log('SongCardInfo pressed');
+							}}
+						/>
+					))}
+				</View>
 			</View>
 		</View>
 	);

From 6e3e73982fc934398eaa3c592fb2263b977365d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Wed, 20 Sep 2023 11:26:44 +0200
Subject: [PATCH 06/15] Added callback for onPress for the SongCardInfos and
 replaced the button to have the play icon more centered but some state issue

---
 front/components/V2/SongCardInfo.tsx | 42 ++++++++++++++++++++--------
 front/views/V2/HomeView.tsx          |  7 ++++-
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/front/components/V2/SongCardInfo.tsx b/front/components/V2/SongCardInfo.tsx
index 06cc507..ba69e6c 100644
--- a/front/components/V2/SongCardInfo.tsx
+++ b/front/components/V2/SongCardInfo.tsx
@@ -199,7 +199,6 @@ const SongCardInfo = (props: SongCardInfoProps) => {
 							</View>
 						</View>
 					</PresenceTransition>
-					{/* icon bu=outon appear in the middle of the card after the first presencetransition is done */}
 					<PresenceTransition
 						style={{
 							width: '100%',
@@ -224,7 +223,7 @@ const SongCardInfo = (props: SongCardInfoProps) => {
 								alignItems: 'center',
 							}}
 						>
-							<Button
+							<Pressable
 								onHoverIn={() => {
 									setIsPlayHovered(true);
 								}}
@@ -233,16 +232,37 @@ const SongCardInfo = (props: SongCardInfoProps) => {
 								}}
 								borderRadius={100}
 								marginBottom={35}
-								leftIcon={
-									<Ionicons
-										name="play-outline"
-										color={'white'}
-										size={20}
-										rounded="sm"
-									/>
-								}
 								onPress={props.onPlay}
-							/>
+							>
+								{({ isPressed, isHovered }) => (
+									<View
+										style={{
+											width: 40,
+											height: 40,
+											borderRadius: 100,
+											display: 'flex',
+											justifyContent: 'center',
+											alignItems: 'center',
+											backgroundColor: (() => {
+												if (isPressed) {
+													return 'rgba(96, 117, 249, 1)';
+												} else if (isHovered) {
+													return 'rgba(96, 117, 249, 0.9)';
+												} else {
+													return 'rgba(96, 117, 249, 0.7)';
+												}
+											})(),
+										}}
+									>
+										<Ionicons
+											name="play-outline"
+											color={'white'}
+											size={20}
+											rounded="sm"
+										/>
+									</View>
+								)}
+							</Pressable>
 						</View>
 					</PresenceTransition>
 				</>
diff --git a/front/views/V2/HomeView.tsx b/front/views/V2/HomeView.tsx
index da00538..d9101eb 100644
--- a/front/views/V2/HomeView.tsx
+++ b/front/views/V2/HomeView.tsx
@@ -5,6 +5,7 @@ import { useQuery } from '../../Queries';
 import HomeMainSongCard from '../../components/V2/HomeMainSongCard';
 import SongCardInfo from '../../components/V2/SongCardInfo';
 import API from '../../API';
+import { useNavigation } from '../../Navigation';
 
 const bigSideRatio = 1000;
 const smallSideRatio = 618;
@@ -42,6 +43,7 @@ const HomeView = () => {
 	const songsQuery = useQuery(API.getSongSuggestions);
 	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
 	const isPhone = screenSize === 'small';
+	const navigation = useNavigation();
 
 	return (
 		<View
@@ -163,7 +165,10 @@ const HomeView = () => {
 							key={song.id}
 							song={song}
 							onPress={() => {
-								console.log('SongCardInfo pressed');
+								navigation.navigate('Song', { songId: song.id });
+							}}
+							onPlay={() => {
+								console.log('play');
 							}}
 						/>
 					))}

From 5b7cb6746dfcd41c2a6f0a626dbdc25eb926fb19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Wed, 20 Sep 2023 11:52:03 +0200
Subject: [PATCH 07/15] Added specific fontSizes for each card

---
 front/components/V2/HomeMainSongCard.tsx | 6 ++++--
 front/components/V2/SongCardInfo.tsx     | 2 +-
 front/views/V2/HomeView.tsx              | 5 +++++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/front/components/V2/HomeMainSongCard.tsx b/front/components/V2/HomeMainSongCard.tsx
index 6b2fc51..bf6334e 100644
--- a/front/components/V2/HomeMainSongCard.tsx
+++ b/front/components/V2/HomeMainSongCard.tsx
@@ -5,6 +5,7 @@ type HomeMainSongCardProps = {
 	image: string;
 	title: string;
 	artist: string;
+	fontSize: number;
 	onPress: () => void;
 };
 
@@ -61,7 +62,7 @@ const HomeMainSongCard = (props: HomeMainSongCardProps) => {
 							<Text
 								style={{
 									color: 'white',
-									fontSize: 46,
+									fontSize: props.fontSize,
 									fontWeight: 'bold',
 								}}
 								selectable={false}
@@ -71,7 +72,7 @@ const HomeMainSongCard = (props: HomeMainSongCardProps) => {
 							<Text
 								style={{
 									color: 'white',
-									fontSize: 16,
+									fontSize: props.fontSize * 0.4,
 									fontWeight: 'bold',
 									textAlign: 'center',
 								}}
@@ -89,6 +90,7 @@ const HomeMainSongCard = (props: HomeMainSongCardProps) => {
 
 HomeMainSongCard.defaultProps = {
 	onPress: () => {},
+	fontSize: 16,
 };
 
 export default HomeMainSongCard;
diff --git a/front/components/V2/SongCardInfo.tsx b/front/components/V2/SongCardInfo.tsx
index ba69e6c..8057815 100644
--- a/front/components/V2/SongCardInfo.tsx
+++ b/front/components/V2/SongCardInfo.tsx
@@ -1,7 +1,7 @@
 import Song from '../../models/Song';
 import React from 'react';
 import { Image, View } from 'react-native';
-import { Pressable, Text, PresenceTransition, Icon, Button } from 'native-base';
+import { Pressable, Text, PresenceTransition, Icon } from 'native-base';
 import { Ionicons } from '@expo/vector-icons';
 
 type SongCardInfoProps = {
diff --git a/front/views/V2/HomeView.tsx b/front/views/V2/HomeView.tsx
index d9101eb..e0bdbd1 100644
--- a/front/views/V2/HomeView.tsx
+++ b/front/views/V2/HomeView.tsx
@@ -14,6 +14,7 @@ type HomeCardProps = {
 	image: string;
 	title: string;
 	artist: string;
+	fontSize: number;
 };
 
 const cards = [
@@ -21,21 +22,25 @@ const cards = [
 		image: 'https://media.discordapp.net/attachments/717080637038788731/1153688155292180560/image_homeview1.png',
 		title: 'Beethoven',
 		artist: 'Synphony No. 9',
+		fontSize: 46,
 	},
 	{
 		image: 'https://media.discordapp.net/attachments/717080637038788731/1153688154923090093/image_homeview2.png',
 		title: 'Mozart',
 		artist: 'Lieder Kantate KV 619',
+		fontSize: 36,
 	},
 	{
 		image: 'https://media.discordapp.net/attachments/717080637038788731/1153688154499457096/image_homeview3.png',
 		title: 'Back',
 		artist: 'Truc Truc',
+		fontSize: 26,
 	},
 	{
 		image: 'https://media.discordapp.net/attachments/717080637038788731/1153688154109394985/image_homeview4.png',
 		title: 'Mozart',
 		artist: 'Machin Machin',
+		fontSize: 22,
 	},
 ] as [HomeCardProps, HomeCardProps, HomeCardProps, HomeCardProps];
 

From f3cdba34fbe72ba2716cc9d84f94df477541a738 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Wed, 20 Sep 2023 12:19:09 +0200
Subject: [PATCH 08/15] Now usign real play history for the TabNavigator
 Desktop

---
 front/components/V2/TabNavigationDesktop.tsx | 57 ++++++++++++++------
 1 file changed, 41 insertions(+), 16 deletions(-)

diff --git a/front/components/V2/TabNavigationDesktop.tsx b/front/components/V2/TabNavigationDesktop.tsx
index e903576..c211a5f 100644
--- a/front/components/V2/TabNavigationDesktop.tsx
+++ b/front/components/V2/TabNavigationDesktop.tsx
@@ -4,7 +4,10 @@ import TabNavigationButton from './TabNavigationButton';
 import TabNavigationList from './TabNavigationList';
 import { useAssets } from 'expo-asset';
 import useColorScheme from '../../hooks/colorScheme';
+import { useQuery, useQueries } from '../../Queries';
 import { NaviTab } from './TabNavigation';
+import API from '../../API';
+import Song from '../../models/Song';
 
 type TabNavigationDesktopProps = {
 	tabs: NaviTab[];
@@ -22,19 +25,13 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => {
 			? require('../../assets/icon_light.png')
 			: require('../../assets/icon_dark.png')
 	);
+	const playHistoryQuery = useQuery(API.getUserPlayHistory);
+	const songHistory = useQueries(
+		playHistoryQuery.data?.map(({ songID }) => API.getSong(songID)) ?? []
+	);
 	// settings is displayed separately (with logout)
 	const buttons = props.tabs.filter((tab) => tab.id !== 'settings');
 
-	const others = [
-		{
-			label: 'Recently played',
-		},
-		{
-			label: 'Short',
-		},
-		{ label: 'Twinkle Twinkle' },
-	];
-
 	return (
 		<View
 			style={{
@@ -104,17 +101,45 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => {
 					<TabNavigationList>
 						<Divider />
 						<TabNavigationList>
-							{others.map((other, index) => (
-								<View
-									key={'tab-navigation-other-' + index}
+							<Text
+								bold
+								style={{
+									paddingHorizontal: '16px',
+									paddingVertical: '10px',
+									fontSize: 20,
+								}}
+							>
+								Recently played
+							</Text>
+							{songHistory.length === 0 && (
+								<Text
 									style={{
 										paddingHorizontal: '16px',
 										paddingVertical: '10px',
 									}}
 								>
-									<Text>{other.label}</Text>
-								</View>
-							))}
+									No songs played yet
+								</Text>
+							)}
+							{songHistory
+								.map((h) => h.data)
+								.filter((data): data is Song => data !== undefined)
+								.filter(
+									(song, i, array) =>
+										array.map((s) => s.id).findIndex((id) => id == song.id) == i
+								)
+								.slice(0, 4)
+								.map((histoItem, index) => (
+									<View
+										key={'tab-navigation-other-' + index}
+										style={{
+											paddingHorizontal: '16px',
+											paddingVertical: '10px',
+										}}
+									>
+										<Text numberOfLines={1}>{histoItem.name}</Text>
+									</View>
+								))}
 						</TabNavigationList>
 						<Divider />
 						<TabNavigationList

From 7a1f4fb787995a08a579ef493692aea1d307eb73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Wed, 20 Sep 2023 12:39:50 +0200
Subject: [PATCH 09/15] Fix to really allow guest accounts empty strings are
 transformed to null values

---
 front/models/User.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/front/models/User.ts b/front/models/User.ts
index e4bc5a1..6a66759 100644
--- a/front/models/User.ts
+++ b/front/models/User.ts
@@ -6,9 +6,15 @@ import API from '../API';
 export const UserValidator = yup
 	.object({
 		username: yup.string().required(),
-		password: yup.string().required().nullable(),
+		password: yup
+			.string()
+			.nullable()
+			.transform((value) => (value === '' ? null : value)),
 		emailVerified: yup.boolean().required(),
-		email: yup.string().required().nullable(),
+		email: yup
+			.string()
+			.nullable()
+			.transform((value) => (value === '' ? null : value)),
 		googleID: yup.string().required().nullable(),
 		isGuest: yup.boolean().required(),
 		partyPlayed: yup.number().required(),
@@ -19,6 +25,7 @@ export const UserHandler: ResponseHandler<yup.InferType<typeof UserValidator>, U
 	validator: UserValidator,
 	transformer: (value) => ({
 		...value,
+		email: value.email ?? null,
 		name: value.username,
 		premium: false,
 		data: {

From 1905daec60571b068ad8b0b5c6d1ba21db50cbf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Wed, 20 Sep 2023 13:10:22 +0200
Subject: [PATCH 10/15] MainHomeCard is now displaying the first 4 songs

---
 front/components/V2/HomeMainSongCard.tsx |  2 ++
 front/views/V2/HomeView.tsx              | 30 ++++++++++++++++++++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/front/components/V2/HomeMainSongCard.tsx b/front/components/V2/HomeMainSongCard.tsx
index bf6334e..4c10c51 100644
--- a/front/components/V2/HomeMainSongCard.tsx
+++ b/front/components/V2/HomeMainSongCard.tsx
@@ -65,6 +65,7 @@ const HomeMainSongCard = (props: HomeMainSongCardProps) => {
 									fontSize: props.fontSize,
 									fontWeight: 'bold',
 								}}
+								numberOfLines={2}
 								selectable={false}
 							>
 								{props.title}
@@ -76,6 +77,7 @@ const HomeMainSongCard = (props: HomeMainSongCardProps) => {
 									fontWeight: 'bold',
 									textAlign: 'center',
 								}}
+								numberOfLines={1}
 								selectable={false}
 							>
 								{props.artist}
diff --git a/front/views/V2/HomeView.tsx b/front/views/V2/HomeView.tsx
index e0bdbd1..653fa32 100644
--- a/front/views/V2/HomeView.tsx
+++ b/front/views/V2/HomeView.tsx
@@ -1,11 +1,12 @@
 import { View } from 'react-native';
 import { Text, useBreakpointValue } from 'native-base';
 import React from 'react';
-import { useQuery } from '../../Queries';
+import { useQuery, useQueries } from '../../Queries';
 import HomeMainSongCard from '../../components/V2/HomeMainSongCard';
 import SongCardInfo from '../../components/V2/SongCardInfo';
 import API from '../../API';
 import { useNavigation } from '../../Navigation';
+import Song from '../../models/Song';
 
 const bigSideRatio = 1000;
 const smallSideRatio = 618;
@@ -15,9 +16,10 @@ type HomeCardProps = {
 	title: string;
 	artist: string;
 	fontSize: number;
+	onPress?: () => void;
 };
 
-const cards = [
+let cards = [
 	{
 		image: 'https://media.discordapp.net/attachments/717080637038788731/1153688155292180560/image_homeview1.png',
 		title: 'Beethoven',
@@ -49,6 +51,30 @@ const HomeView = () => {
 	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
 	const isPhone = screenSize === 'small';
 	const navigation = useNavigation();
+	const artistsQueries = useQueries(
+		(songsQuery.data ?? []).map((song) => API.getArtist(song.artistId))
+	);
+
+	React.useEffect(() => {
+		if (!songsQuery.data) return;
+		if (artistsQueries.every((query) => !query.isLoading)) return;
+
+		(songsQuery.data ?? [])
+			.filter((song) =>
+				artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId)
+			)
+			.forEach((song, index) => {
+				if (index > 3) return;
+				cards[index]!.image = song.cover;
+				cards[index]!.title = song.name;
+				cards[index]!.artist = artistsQueries.find(
+					(artistQuery) => artistQuery.data?.id === song.artistId
+				)!.data!.name;
+				cards[index]!.onPress = () => {
+					navigation.navigate('Song', { songId: song.id });
+				};
+			});
+	}, [artistsQueries]);
 
 	return (
 		<View

From 49a735631ae2f9e27ec42e7d2bd4aeaa955e1784 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Wed, 20 Sep 2023 13:12:04 +0200
Subject: [PATCH 11/15] prettied

---
 front/views/V2/HomeView.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/front/views/V2/HomeView.tsx b/front/views/V2/HomeView.tsx
index 653fa32..eb98e64 100644
--- a/front/views/V2/HomeView.tsx
+++ b/front/views/V2/HomeView.tsx
@@ -6,7 +6,6 @@ import HomeMainSongCard from '../../components/V2/HomeMainSongCard';
 import SongCardInfo from '../../components/V2/SongCardInfo';
 import API from '../../API';
 import { useNavigation } from '../../Navigation';
-import Song from '../../models/Song';
 
 const bigSideRatio = 1000;
 const smallSideRatio = 618;
@@ -19,7 +18,7 @@ type HomeCardProps = {
 	onPress?: () => void;
 };
 
-let cards = [
+const cards = [
 	{
 		image: 'https://media.discordapp.net/attachments/717080637038788731/1153688155292180560/image_homeview1.png',
 		title: 'Beethoven',

From 94658d4379fe7569456bac00fce2e5c67e8a4413 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Mon, 18 Sep 2023 15:03:44 +0200
Subject: [PATCH 12/15] Add static assets to nginx

---
 back/package.json              |   4 ++--
 docker-compose.dev.yml         |  19 ++++++++++++++++++-
 docker-compose.yml             |   6 +-----
 front/Dockerfile               |   5 +++--
 front/assets/metronome.mp3     | Bin 0 -> 19226 bytes
 front/components/Metronome.tsx |  13 +++++++++++++
 front/nginx.conf.template      |   4 ++++
 front/nginx.conf.template.dev  |  29 +++++++++++++++++++++++++++++
 front/views/PlayView.tsx       |   3 +++
 9 files changed, 73 insertions(+), 10 deletions(-)
 create mode 100644 front/assets/metronome.mp3
 create mode 100644 front/components/Metronome.tsx
 create mode 100644 front/nginx.conf.template.dev

diff --git a/back/package.json b/back/package.json
index 0ce3f9f..c94bd38 100644
--- a/back/package.json
+++ b/back/package.json
@@ -10,8 +10,8 @@
     "build": "nest build",
     "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
     "start": "nest start",
-    "start:dev": "nest start --watch",
-    "start:debug": "nest start --debug --watch",
+    "start:dev": "nest start --watch --preserveWatchOutput",
+    "start:debug": "nest start --debug --watch --preserveWatchOutput",
     "start:prod": "node dist/main",
     "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
     "test": "jest",
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index f4b8398..57c2455 100644
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -40,13 +40,14 @@ services:
       retries: 5
     ports:
       - "5432:5432"
+
   front:
     build:
       context: ./front
       dockerfile: Dockerfile.dev
     environment:
       - SCOROMETER_URL=http://scorometer:6543/
-      - NGINX_PORT=80
+      - NGINX_PORT=4567
     ports:
       - "19006:19006"
     volumes:
@@ -55,3 +56,19 @@ services:
       - "back"
     env_file:
       - .env
+
+  nginx:
+    image: nginx
+    environment:
+      - API_URL=http://back:3000
+      - SCOROMETER_URL=http://scorometer:6543
+      - FRONT_URL=http://front:19006
+      - PORT=4567
+    depends_on:
+      - back
+      - front
+    volumes:
+      - "./front/assets:/assets:ro"
+      - "./front/nginx.conf.template.dev:/etc/nginx/templates/default.conf.template:ro"
+    ports:
+      - "4567:4567"
diff --git a/docker-compose.yml b/docker-compose.yml
index af5e44b..eb054e8 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -35,11 +35,7 @@ services:
       retries: 5
 
   front:
-    build:
-      context: ./front
-      args:
-        - API_URL=${API_URL}
-        - SCORO_URL=${SCORO_URL}
+    build: ./front
     environment:
       - API_URL=http://back:3000/
       - SCOROMETER_URL=http://scorometer:6543/
diff --git a/front/Dockerfile b/front/Dockerfile
index 34b510e..c219a27 100644
--- a/front/Dockerfile
+++ b/front/Dockerfile
@@ -22,6 +22,7 @@ RUN yarn tsc && expo build:web
 # Serve the app
 FROM nginx:1.21-alpine
 COPY --from=build /app/web-build /usr/share/nginx/html
-COPY nginx.conf.template /etc/nginx/conf.d/default.conf.template
+COPY ./assets/ /usr/share/nginx/html/assets/
+COPY nginx.conf.template /etc/nginx/templates/default.conf.template
 
-CMD envsubst '$API_URL $SCOROMETER_URL $NGINX_PORT' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'
+CMD nginx -g 'daemon off;'
diff --git a/front/assets/metronome.mp3 b/front/assets/metronome.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..dfdf644b8831fdf73affcdca76c955a4e6e7ee45
GIT binary patch
literal 19226
zcmeIaXIN8N_c%%o0YV8ip%bbkLJA-vBgIezL{N-DL?D5HiVPqsyn}Qwfl!4AD2fPJ
zMl=)=%LsuG5P}pNjEo{paeN)hl;C8@-6ziPKKH}@^8aw}bD!sb<?OTfS$plZ*DkB=
zbE4$$alVX<-5#FDJ$AN9<qn(Y+j?cPWfWik@+R)Y*}q$2;eG_R0FR&8#5F5&aXHDV
ziP@>e5#Rr^L8cAzr~b36!RXQAi07YgqaGJ}6)q_0_^iXShjS3ZT=vy$FTL^hLKz=3
z0lpW52oBsA_+pRKo>QZtffFOwW%V;2A5(wyLQOd;I52h3>#;!f<&yq#u05K=YD`0K
zLusLlwpZ@v9KD=gx4TG1weOd%(+@`OM04U=j<v*<79^=gp8M~o5M0{GlNe1p{E$G|
zD*97Bz0LW7%ip(M^X@z_G_!wSy1f)->)4<9>n`<O<*(oWEoR+G-HQ{!NvK^YI*JZg
zkZ~(}*ng+X>^0_mLhJrEm-wE-?bd!vD69M4PNlEki?5w|=RH)z(rhTb_N74u&Nm)h
z6=&I)o|>B59XhHUujF^H^z}OyWBtX|sWTYPuY&pHNB^nvG5u@PwB-5o=Wh@);Gc$u
zhP#K1jI5lD465is<@qhVL|*S6eE$gIhSg9?)7|CCA=HDfT;3-qB`sYwnq_KE_Pu9^
z8XK~2+%+*q2m43m3@NL~X=QtP%I!iZAZ})mE-g&4oDLAu%4LiQwkc|OkJRDZUCMI1
z;DuX!QGth&XSWv&?~*BR=;k+j$Rx#EM)&%KYSBV?iNTl{PFoJVLGbikNK5kh`i459
zGQl=U&Wd=glV_uCF6Y%yWp;qBEa$}=Z!qis@3n1a{>^#1*JYHnwY>wK7w~=+gyPE)
zGBTC}eJeS(<DMgV!SQx*{H&jX4YA>~7K)IQkv4Tahq~R~9AC3i^_@P&iH7&vt?Sj0
z+q>sL)M~arx3QgTuJm`+!UIMm38fRySb0!6;1f(Jh6V1_B*|5c$Ti?CHT6>hEc1@t
zTCjchwZ5^_6n5)6Z~TV}iDXH`4^^WXGaf8Mjf!eOeTg-{nV;KYET^H3sQO-B7h$4_
zFYolgABd%-yf}KGK|~l%2|k7p5!EFB{=?sRQR5ROGwyPK&*h%T|AB5UJiw<KXv)YK
zzxdgF?}*Nl!6;m~U1uUdQB~9O7B9pM?wKoBvt{>vzspg}PjS^xWpgxNA=Esg$R@Hm
zlD{YUhB?3M9!LE2NJh_QO9SuS85tRKcyR*>Qzs)VikIJm`G~6X%>9V5&mI_mlv8~5
zjJ!VW3v!Pc?Z1vWEme~+`++HRInf+>T3V_g$}l`4WNYOy2%;J7V}yeD6zZYA$I*s}
zoKA&FSe*eJU9KP1Z-$6BJK8jqhsZXF*N+0V@`_XVi2QHJ5ar^lsWAKJe)u8TT7^jj
zQRalKW6raU8CczZ4?_>4*$G8Q*;-^OtPYWlt^gf<25raj5wgYC%m5oNF!sFz;}7A*
zTtcdS4&XgTMwn9p`2LI-YGI-);$;}#jtYTH)FZ$xIU=XH?G#M)2|_=Z`A}Zp>odl_
z5AzuX8h(P=7XbFb;LfZtS@K9Zi+nN}L57!0A22Ws*#l1&;mMl_#c}*$RbKXEl<HN@
zNO{HCZj@?6)MI^l*)+1gZ0^cogyJSrQ6ewjkc3f^Gdly%nZm2f%e*hn**G^h8(sVn
zDN{I{P6)7^?v<I&$=RLbS(_7GQ7t!-ZLWN7ZaH68HcFphtB*f?7AGfJJof&_uC^+>
z<sX}6e=Jb`vFJT09C{cl>v3$^>)3m*q!*6I-g}(xbUvttc2}$Q3O0Cn$H+MtTy@=d
zYJv-7i#`VH7ATib1=j=@Etii6qwc6I7k#`_bBEJbG`DDcJJ@KOT3vT=t;Zd-7ia@D
z)6<>gLF6gHXpdk60D5@G;DMUaw&O-lYITp)jPKmxY~N+8+h6#yzi?RIRz<5l`{h6?
zH<+U$*Y_}18L+i$DOd*<-0vN${A06nmFD!1<<tG%vi+1c!2J17&=9Jul%peXI*P}Z
z!#pU#dMa8x&!ylhSa6kMZuad4V!rgsz6vmM^SQy*RXZuJ8&RoP<1F#*Q&{7S+ouTQ
zscUVoCBuV|Y^*Eh&=q-fMgCnpRUcdgTRj3!A1Ak%9X=w{mOFc&Bb(BTi{j!as#(>!
zf8f+PN<q3VosBXic{v3IQd8M(e17FqJ(VDD+hN%tq>JECV65AqZ^j@c@FbqgjK6U%
zB={7(Ae)AVWXL%0w?$6{wZGd7hir{KfBRczPLJ45!_TW*!0<GzI;NL^N|s0Gp^{N;
z=a6}t1cPKl<T=f@n$=?DdDJQZqR(k2*8r3#l#q@ZQAJ-0K;Pbly!1WtkbtskB1kq8
z5RCcBX#Of%KtK!HQ2e$UK7pf7LOruU6*@RE=Sl2&0-H`^&SR-1^QcjJcgcKr>Aa|9
z-sRa`+UUHCaNdPI2db!Snv0O;GAyt_l{yfZbOIA<heN~`Fa-prz?>~0uwPlRUzxLC
zk(k`JT0xtEAQ{Cc)CiJm1O(7&t$=_M5Omo`sHn#RbLMRtAc8}9$06Cf(Cl4EHeH_s
z!}Ri_(;^qMABp>BA9M93961SAwOBU2fR{`?LRA&_t#tRT^hm_F?bo;`M`Yed8Do{)
zxau`7>Kxg3l657|K5i;keIx3EuqfY%t6mUY7}bP|&91<^$mhug$Kx$w=at6w@By+X
z<twTQZrc6In%i;mSMzQNQ9}09!l4AzQt8pssDzp&^`lXdY(ar&@|Ue8TMI<*dIh6m
zMe*d6V03HclrTXsqMX2R<_PFV6ThDuE_8UBa5QoFTr3I2aEi4aZWPlt=?suDoE?@N
zmK;GQu;S7gsBwoS)HvNcx}?V8eMxohCM}$Oi!OpW(?zvK$ByQ1rZedbj=-7W$XVLN
zY*GmwglmQ*!vI=m7gm3s(3a^OO1MVoFeGFV+WSR%){erXfV-aGCuamDTP5O+yqdts
z+Ta1P;MwrLDZr~RvT|l}DzX^nd^CX`%Wzs`IMX&A1P)7}2ZzO+tabgrR&Z8rHE%>5
zt*KT(YI0^e7>saoYCsg(Gdv(35DD0k17a@y2pGaZPUc#N0m(prUH^R+V4<<MM^912
zbr_)ivq^DyOL17F{Uh0=>aX?oa3DB<NFb0zvKZ|V?WLm_?MBg2%x=IbDoG%95@nmg
z)!9i^k?Re<wbsTQ@$9~ByViT;(7xvzQJOfJLb>b~9Yt#^HGy0KOkInCQ?<qwTSdLk
z%jFeYRz!uZwXvT$K{8|{|JwlhtNPz=g(=OKWPuDZxvSsyUM;^(dL?u8h&(=BTR^3<
z=h8}PV4F`BYa`hwk+=7vse<EZ{&BP*4#lUU*z+hh4ch8#I@s-~QX2Ic&1IA(dIkhx
zj>@K^fH;%@L6~!4(@@1q$V*`32B4|@I0FG4#gE||dDHpP0tCY-Mi4JZU}Vq)G0>Bz
zfX+uS+&lzSJrayS!-6}04o?I7J((lR9AHz~E<7d|;T^?~5+IIH^(@pu^_)7%+Kdim
zdPEw5t_PGsO`8(X0?9RmbI5Zj(6m^H%474GC^kykJbNC{1f=J&FbABx=?0aMwGlCR
zcHj)he#aN=<F@3852pr-NAx#nYXbvkHX;U!dn6L^xbN_U1ZNiCK*?#$Ikc1NJ3Nl{
z9f5<j6~+sM{~bYa4PojHAEQ2*y#?zR1q$kg>e(M@>gvtesq30asRT1Exi&L`xz)Uu
ztT|3uHp(yX134dTA)!E+z@__aZb|rlZqphFLc$GtY+<N$7lSPgws&Wj?Qmsp52~lR
zZF-l;(5_~>z47oRLGecMYKfs8@n&;dNlj19M4=;UB1(T<Q4~N&#Mex=ZDj`}MY7u~
z#Qyv)f>`G{sb=p#+u4K;{iRSsW|p@8ya6Fge_nr~3#Yo#+})$w{2<&8)dQ%mh1Zre
zw>3Yqt1Thk1pEG?h<I~dw&V&vY`5fn$wkrh?&fxYQZoTi&?Pm~pnu((X~0Z%@oMx|
zVWcpAKpZ(DC#E<oNyVEpa5NFfmUl=N$$)SzHuS!8XzVWic|$@bp}j2&^bWL0Bs&3;
zBf)?OObI)(Kr9uRCAyCzpyDvM2}E*$1|$f`%92B$1e73&lFE^8@oMo(PfZWVL_JwR
zlBEAQiknW(U9P_b;<gkVi@sSD9lb|F{QL-OFZ{Z5c&rB-F!~Y`cr#p`7>>AM=Ra~S
z1}z_BU53@^$EMuJ>O7}*nmH9w8+qY%1Gtc)s1`_utmW6t4SrVtIw9z8`B_$ShH9W$
z{owZg|DeNFqN7^bt>f7Pj;-wdE=B{S88upY{+mht659KW;a}i;;NJLFcwp=B)b0Ih
zKbdEY=eG)53-ANP6hv!z{wsT739Z0UWH{rGqmE~{K1-q44p09SxL;)o5EKHs;{|Xv
zcyRUret+P8MZA=tX8x<KaCQAxwgXNy_I?UZWRMah>^AzRFGXX<e`@$=sOvO9jNLkb
zzYP(|A8_1{Xf1FAL=gJ{#!PFmVgiM-L>bYef>EcM6T7e}?Ol#$1@m5de_(a`igk!x
zI^!<8XuY2go5|-Z;?=@`jAHG{_m3yHDELQ_TV$(VCL*`wXw@ONltb_+^qwu{#Jc@n
z7N0RY`=Hw_@2@<iDb!cfDBhp2or6>Ov-!R+P&*swpU*1zzCfJS;6{C2>vgw^5~ow$
z6{Eyil8q?S%3ed59*XK?+`YX8HdI{*@<R0}L&a=?P=7_hCU7H%`Ca%-m^BU&7-Is*
z#M)iO)3x(fXmBPbN-Vz;AIJo-@-!M8ZbpM60>8n_)1t)ez*sxftK*4Vm~?GpnOHkE
zsAC7wwV42q9Y{4>5!jfm@R3Thd`+c=;R8www>{;R7ChxqmuPg<B~NXo1=I7cij(sD
zbxiYUX>J4&jn)URZpdk1n;5`(%MHcaHR6Vx$=fC<u?DZK4-P%Gxx!K61{N7<sO`CY
zfW^*qm6^J%QD(4uqm?zPkbHaGOGCq;oIF(zo`T8a9+`oez6*nk3W!YK+1r_j%wY0V
zO{OXwLto=>(pPeAl$aR$3V+ER7nFKaserzc5SR<gMFhoT+)Y5W>0*v(txbf};6-Js
z49*VDW~wO!dvM*Y=&MWa7Aq8Y#T*gVw6bsW_}V5lax^P)G!t9`sE`#|k`+0kx^YN+
zd`*1(t7Nf2+?pxDMi#yP4HBre{#77#;+HZq4mdia$6@ifr24L8F+Y1!A$w9Mztw!L
zzlM5JW%T?>qyCe7&fDrfw>9qo_k;fO`tLJ=eWu4seYxyAvFa~^{%(79!|~u%N%+vg
z6+%`3U4P*|PIa|r3WzakLaJR*(?FUzS~COxRI7;t6DEHV2hkP98#&c`s;%(@|3D6h
zSeO8*8HOV;+m00AXZSeM#B`tGn+XZG9F{nrZzbFsZsGhHOxqkTqzB#tdesL20Sbfe
z1^kBgexUADH;VtZyJ!dO`!rCZ#T!w;vJZ%aCjfn6ykvE&P%s@jO&JcNqeI^fRI9?A
zX=2Vm!VM~5c{LL#uxn5T)M!A={cq}wkf}e{mIal2!C-2pYkm$#^`NHP8+xkSZvs74
z-P}eubUT{m^iQVr%97477MlEG)z#=sY~<tDe~7@v?Ww*yP#|gr5OHhPTAx&_Efz>d
zRH4#eGPh+k>@-kR6I-s^QR-^XVs2_XF_kq5rR6dMx1&+(yWC!+UE9*x(#M@<C!YU-
z?Hn~NbWWNs>W{;2;oeT0?0X|{JN9O&YjvsRch@(I2kr~kL*`ZG1?Z(bLCxy*Iz0_1
z!u*j!!rWjHVP3<@I{n6AQFz8%rrV3FOXp4S>-*it)A~&uK|kZ`UTyP%Y5k*!wCAIN
zX}o!VlVeWz%N$9gN+pDOr6SzcCkNcd2TT5A^y+PR+F-GX?O<_u+N*bN<G0hstkatY
zi$QIX32v~+ZG6lLK-c%1;M1Omr-42uPORM)z`DM^`9NSTwYX7NeF@CfW+iql;Iek<
zTwTp-T%E48o09jB>4K`XiEx2V+O#j5V}idXD49Qkf9o`_a{1WzsMTf@Qpb9vle<$|
z|GIC9)5zhD!}ms<h98j*H;?RSKimT#jeU!Ci}oRR_ATn^+qR~Rrd+^rA21#STv&Q=
zyow4{8!X;AD488YAy<38a$VjVc~%Tu1P%hG#ax#F+j8YGs%0l~zb35)ezWYoE<r>H
zytQtSdUUeSu7&(wyE!IkBkJg6@AJ!{m^00}Hi1WZ*Hz_%P|vRg>A~vlN?a+9%hcxu
zA=jY_X$mnX3;!aP3!8}LMFr-y-|W!3=jASq%~e5m2Srx$)<v87W1ZcNTLyOdK~<R4
zm>}=+n4k)mKo)O{cHwxsb_@AePeIX5?UwP3FdIEj06Xcq=+_>|dX*<+y*LoanzZpB
zx<s^r*Yk(!y+bDsV3LOFF-a2#@4$c7C^j3q6z?+kwAgIo!1~ZoeZ0#=XuR9Rfq0i&
z<o99Ph2&3mg@AVRJ{ts}g#ffv6@t*(`9XDn8{LplqK#iY(IzC+rR`@8_wSD9IOo-A
zI35_Pcg`ESWQTO6kl$Chke4f5if&4iYthY6)?|JVo5eq%g1NPhNoBp|!0WM?q}#0L
zm}K4kAnl5GV?Fn#;Bs$j7sLeRRJf8qqP3fXWI<s8!RoW|vJA@it5?CC9+L;nds*6b
z4ShD52+YZ!C6ZK7{11?yO{7jB#+HN7*(>=&L=JJmhv1owSzqs2d^*358|on8p2j;Y
zdkHTGcQ{m+>}cnKNt^>K2&HB1=3F7WgDC8xIvpOR7$gbm4N|#|@4XwAI*|-t^(xoG
zuv$he^;CdjZQXcmtu80#xThY2(uoXX#Ci!?9EMZFt2~!edU+tvbx9SSB92mWtvhwz
zzdRRQ%h-Pi(P4oTc3^l6?*k1b@kC+K2$3ipA=NrHv|2e`)q|R(I$bq??vh#zD&9|8
zcN%d!(Hurt1(ZUemY^R%K{#AcTg&hUDZmpgO|i8)xZyqV+glaFYWtgyZt=bvQ|wh8
zKy<oF$+ZoudjAqPG(yA;-3qJa#B`#=7~cDY#j2ofY%LnlfpXneB~~j;+Ep!w(TNQ0
zARSVRw>an5fw{@>=o9h^YV!j~DmbAwZpgO7mfT^+Vnln_$^f#XIR&+50E`K%A$Pc5
zc=dB-egH8T-+^Z_0&bwf>QBEw;+_W1V8W_UVONga|4B02XXAz<&toNjNP_XK0r5{J
zWun~&U#{au<DnTM-WvDL6^<y@N;ZO_L7&CxF{rp9ZdfhE;GywYY2`QOV{4O!E@4u+
z<LMQykPMm0uTL=VKr)o_O@_$tJ59*T(ee8asT-3H!8?crwQBKJ4PXX2|1Q)i%C`jr
z3kMc2A52-^mZO%h@(#gY<(~^}a^2T1EQ!ZRcLp@~qo53U1kbjq#fr5C<HtSg#*01c
zn-06yGLB2vqY5_y%_W%YunI7Odkw>Sak#Cp<DOe#v0x0}l3vVluU3UvFxkgFTNRFb
z9`Z~2q{j$77d%2b7dS$M@<WIw*YjY<ey67jHbgP$Lm=p13}#$-8*C-ONNlb6b_eFx
zxKF3SxDT{By@W+uVK}`QFyZfs!mC=sUI-f%RvyBj;-yQbCH&o7OW0>s`(8`<le@BB
zOfO&|7S3THaKq9IU{}8TK2Mdnsf8QKz=WO8%J;hj<gOD#{%=;FWe~XRkeD-npFP{w
zGj$h-bd3pWyb*s3xnl{EpqL;%IM565ddCCsdTC_^K&WszfH~s>>LIlSa8S?lfL^>r
zIv@aPl!7%#71TRX1($-!AU_N#BA}>Jfx<fJoqs@O=#t|BKPc7PL4=a7dG^P<kL|*o
zYFK05f;3YgP!1|hLA5|xd`tP#To>X5G?Ho~@&N|u|GHj)=ZC`vcFiZ0YJo1RhF`LS
z_-nic^i|^x@^Tbw66jN)4giz?Lkd!OkRE~(1k>#_frfklFc|6`+N$ftgVdF7<82Di
zcdq2$BmoLR)fL+py=>HUy`;SPH$k%k_=o{#VpQ*7&=F9MAIYpKJnI<@uvJ554dGc+
zWJsxHgX!7<#9|Cyu>;IJm~Iz<C`EWJf_PBys|Nz)4nuC=1nU5>c=<tj@JpKrOe%`}
z0az^Z(p#VuCBNU2l~Lksfxp;87K1cOe&N?j9#OHTG<qMiS!xU|q&7J?X@?NI>c2a9
z^c~I=c?G$OhGYnx`^CHN;objC41Dc)=_&a|w0Z>{wz_eMRehs&(%771%6?ZO8d2iM
z@x|VGb2!`DL#(Q%?Kdh}938)9W%BSlwuC8Si^ka83{X#++ezAKF)zV}xUb#QTI*wd
zY$cbL|1<O=sQg)ZRp6cS5uN;F){Wi;+Bn;aX!7ujKyKp^2yo2u-@9d_?-zgT)cnRH
z)Fz82Cv9vK<{pH62y_@YvhXB8afK3T6}v)p$mM0|UKp#sz`O7?1D&Bi$Wfi0`Yx|%
z%4K9RkNre-7A5L^XE@I*D}srxpbY0Sl8Wc$GxoC8R-c${6NqNNXRUfUFj1mhhvM1P
zAXe0{4Sd2ZR-0F~H$VOYEW}-m5^;;?@*|BfqMWia*iKu*YE~b14iRZKunxa_3H2nY
zXajz?oF?KGf9S)`^NN>{kuHRc^stGA>%O|iJ8V-kZhxHXxYil`aW!mWGtSr82<WxO
z@qK;c-m1jv{##U>kQ;WzzqxkhMp!M-90j$*&9%_}tFwdlA8-S_LxHHdQc{z5T`P$5
z)qR)>5efdd{P4_+oATFvQqw1vKw6CRrBPC|=BTbN+|(?NdMW8zDM-&sv92y{k%X{`
z0mzOx0V^ccgd4!V)OrcKs{=^DAQ7=rV*v_~o*@B+4D`%5t@lmy6%~6zmZ!QE2Dpbz
zinR4rslEX!r$K5gxWGa*3O@ra!z=bw2p}Cny1JoK)5srJAYN2lzsnCQ<DK)xG~Yay
z6g}|;;p(d8`d!ksYwxwMRe>b=>5m^p<PLl^!&6K61c`fw#Es<ueR@f1WE|dW{p$_9
zSz&2khD3<V(#|2;$Vv4RkeOK^YOYAk$*)<r)@hzBd78U+KW#fpd5-NT=JL}mv=k{8
zZFU5s1V4fWE1IRne_}H@9ARWfFwSUYZtA3dO02Ipiu0{E0m;aJc{=)ehpWrSb&%#=
zzkA-;7@;uv>-m5tZ~F($6An4euP%5tPlEL7!tRmxkPNxx-Wz2$YHY3x?vf}V9x?++
z;}>?59}Z}JTwKh5=s)=pXZ5`AR)povQ<t7-i3}okry4{kpVHM@wsQrG3UzF3lvr<U
z-1_-hnXB9Xq^lEsya{k(`K#>(kI7#HZrr*M26c{!@IIQV9neI%;InFdVSo3=p$NsJ
zr>dJLCOaRh**85@v6{qLO&(3Pdfm=C<s4$)<)Yg>NeyUfwQuZv_%+17qWQ&zATT7r
zLaJ`_%i2Q`R!2|OMQlmc)B5Q6aNkF}=8477hss)?R05jLYC1lg{G{CcO6NjIZso7}
z`#wSA4{sF_?8}=TdhR~ubu{&`ntkU(U3l}WCb=!Cug>Rb{d($=eOEBRD2h<t&adJ|
zPfX!IipU>luU-3ZU!1Q(P$|6L=r$%b<(6ku|242N%(9WO;eS3HRloPPpxL(4?e^gg
zecU5rTS~FqVph!quSN7}+9K+K_cWAJL2&V6%*n)&>lS^1VIOvg)SQ#T2Js3Mvt$4u
zbIu}%TB;b6rOTX)S+>cg+63ONC)otnTL1&$PB2nPA{ddAaPV20iy?|)!MZq8ToIa>
zXV{RKr&a^fCFhjhgvIC%j(pr&pNoNuMb06YI+trX*K$ENxN$8%%P4DbBihJ+^b+?M
z>tEC+PfR8(<}t9&w2nC3w%uVJdTKS?1VO^mGpesCwrt&3Cm9F!oslY1O!bxbMQu7J
z`)d2@BsnI5Cxv9JuLjQkVD+6yN%ftu=#-L_*C1MnJ<g$m$fkJ&`v`My*lGB156&$v
zKm!E=pu*KMgUn;AEvseF)05D&$@^?<+S~NU#|3&O+r%JH+KGIS6g!+}ABs*9TcmJf
zNAeT*=gd5+LO|gB#Dg$j&6uQoI@2h*)NJTIC=gu~=-ECl9`o!ZX<g1BYEH?>q7bBP
zqDz*D=+Z~vtGf(>X1t1in6C-4)P?8*z%SQ2fX>gfcwzx%MBXY#gWU?ug&_2a#ZJ=P
zw)sqpOwv4dCsbn!YJ{ROCO1+scSAy&hk&|QkighLGK9%p3%lK=ar$RiS!dNtNn}kF
zKz;|Ticf|wpCb0jh!apUyfum_0PwvaZU8_)Cdlyq9>8Pc_@FXwU{Pv;+_5`JnHKY;
z`Akgz>cv%4G_Z9W;z-kKvG1xla<Qy<Y)&*{ilooMcAC-W;ZMxm2SwQu!#VgSc$Clh
zzVu&%;qiURs_c_(eDJ90y(({t@?Oo4L>bO!c<Kv~8NtAaGz@~u9#ENQiXwnYQ($0<
zkQqsIK+6`G90-S3#zu+y9GGgWpf_okb9ttEhzt*4faFb05E)UR8_%**WJc8BAp8lw
zcrFL@iGa)%V6Au#A_)_{Gm(;o?R0}IR+$tJuv(V$#D<T|ID*Isrhg+Ftv?{ORT(H?
z;!0K}eGX+Hv3CM3W1LfOvON7TH8o4c*c4}M0xU_rQEGa<Noq1k>7i1M2Wh>vAFnf(
zrzhS5-&N^3<fDUF1OyGLBs;wr3S<I0k#^%h5QUsPTM)IRCPx813F%8WX%6Yk4yVH}
zPdZUwo-{b+Dc5#A@MSUxg!>P$K|qWEd68ZW7B>dmSttUq6NFVTfK`DaCHBjc2ZZ0k
zX+1Rx;X16IaNVcg)^R}^o;8&HhaOb2qwh(n@Vf7au?h9#+@Npue_X!qxK?)Uq5Igi
zuWn!6uN4~`vkpRl9nEKrCkK76_@<^u`ffz}Mx8aC_+=u}_j|d!zPi7s)2|h!{s7vz
z{5bKhaS($1e#TeV)#dKBM~kIp*pHik4S#jJIq~-3#D|GrOb$*gx_<Y!5YYc)GxX!y
zb>A~$sN5<-PYn8U$sd<s#wG~Yod{QV<$5Dv;98oeP^l*sg32JHSWx@6A)0agTk$TO
z6N7;K^ov<Az1Wp#Mg}U3(<71WlX+S=%7R&*sG|AoVSb54mBm%~STy@s`V&mBG>=>S
z^fnAXhZ3nB&}x6hmY>whoMZcL@9Re{QY=%5kPMmR+DFti-Q8Rr=y#;#{1(<NEGF7^
zqJYnFlMzz@Vpv9OEr>b}!LKq-g7_Hgb78Nk75O2-_QKxb$z`DEf%;GTYg<rh8UO0U
zX6?iW-zrzv1CU#h9Dd!~H>d=-xEWWq+o8z5&n5s44l5vM7o0jE!4U!S0M<KH8lM5%
z_~L?Rw0$M(RI&1@YORmhfQHHCfTn8uAE#&`_N}`DZrbMsG)8K%QirW3fUTki{FuHn
z`6-~GF(Rce!b)qIqXjJH>qV_!bAY7{-fdr)zwg%qtCzw1B7%z|0$^5?h=68inAHnJ
zK!f##P}GG(&m&${_9gf}l1G*A;WV5_@~kcTaDGpCdKQm7S*IR_c0P~yw$G+ToV~0a
zaObW(*s8!D{d4Tk0%M~)2-h7V{Ktj=07LXiBKi1wu`I<&yNMKHrRBP-i8x@cr{f3w
z*J2gOMLm*Q;OEomZ%J(;_OT3DKh%0_>)xmUj`Hu^MxVxGHj9vF3w&h5Ra0cNXjD|j
z9Ak-!mH3oMSR}$Eb_HZOqkps1!bV2pF>8n_H3U;+<)js25#prfeli5=`x^_|*bv|a
zYXO?kz^Sha7zGOSwy5YGbBqnh0@cUJ@C9mb{+mb7(I}R0O!Y@JQjN75qf-4@ITLnP
z@{OVXO5~5_KCD>)$+Nv=LGJxnuazHPLu7e52EanhO0*!?7u;}Ya!ysCI%@)7q6G_a
zA+p41^6an`ECe5`1qcVC$pDa3<%cG(!~z81F6YMsy7IPFX!3gl8!2r-08JJVS$&Rv
z7T+4%5?KoIS42MGei_jiZD0cnambIqjBJdQz$e`EZ0py08yWl1UwoR8ehl04Muu%o
zV<uH6@OB7ECoseUBw_=YsnmRG2$*!e?}RUQgUG>;+ZYR?2Fu3CO=<{G`50hLBEj4g
zYY1WrXIrZB^Qo2=mP9YdW{_Dnt?@F_xyc!|8TwB_R?SVmAgrigy<%E@1qoRiuue=7
zBtvBRUkP<x8ec~SDms7me0u^~yf}VFY#y*;Zm1_-*agfJkJo)7_+6%VhQh&K?~I(g
z)$953SD-olHu=G>R^*j!d=NH(@S^vfHc<L_U=e_7pU;off#MITRtJ$tCYYKPR~vHn
z$7*e`1SMK|wj8ijU}~~*CS0wNjUL0+h(-?(o}?LTH+mXaA{*0uSkgHM3jh{&FIY1R
za>K9{SWO>R7NqGhz}S@KnVJGC0xSXO6Ic=Y{HD}GtQ60~b~+Hvm_&;~q9s#;L&C_&
zoiUzT6mqTR1wD8k#;=m6b@b$qn^dxHqZ^ln!}w1q=I_18<R@AnBbdTOB9AHbaljJv
z5I%E+S|*=ifvjQs%oA$a0;=?R8?u}2>u^E05o+jpxSPwwlIzShDNILy3n8DrPN*3c
z#^#~Jn70KK8qS3+ps#iAK4c@FAWE?0EPzQRZ!{uzQkgC_c`Vi%e>cr$1gXfZ<nQM5
z^)MN2$VDcAyVT_J_g*4{%4gPQZCc5o0Sn8-vaq1$Jd?TBUD;j9_q{~+<db#z=}^l6
zr2AsB4N~)<78T$?qybJYAa5bQW7!6PII;xb)6C{*K^V(BW_Lire=chTX)4(~2wEM~
zq%tLI-B-X%6sXzZy&E)(5u_3lv|Q^hli<kUwHHLo0-Q^V+ceirD>eulrsrwN;8jg-
zrzR-pK_HQ7Zm-w?-oPsB71xN%cnwVOr12EIX9BOFsN(eb;~RH>m0lyOcSY0E_c)Xu
zgUud2{kcByMrZRV;xY9?=@CDbNo~J<a-I3Nr$|xLr07wsbAbBMi`Kl0)=#I-wuRSG
z5)A8>(CrBq>k?|YONMm`)fW{RPcOoFhrFnMK}Rl(C@VK9D^-sS9F>hW!}_^R>YRhW
z>;3Jol^y?x(V0;3^-76IU6Li=6FEDwV*FJCf7iE7<ReD(Kv=Po{O?y{#h^ZCGfUP~
zh~9v2%DI=9El9v8rx|(6ZI}2Or|%X7Io0t-CqG(j<Y$?ij>(HRy#UTEdV_bRhP2MR
z!X&N20q9DeyOD(ywt^I|#Leetx$~}MmwlKW8zQa4-!+VEDrNN~l}JQB|43F!#1>hw
z$eatmVUrDu1q>`2>_2*PEmOcCp`!$+ZP4M&nIKZKOEHX;+$|iW??5tJ1(Z3GA(KlZ
zA(@|jEC{G!A%jlXh~`V1B$Ch-=H3OKx8MaayD%00LoKX*@yv7kiYP^=;FqanNAfN*
z8G8fkjU_vVdUbkr?(5sq*vLVuYQ)A4<gW43qaKfp2)nzv5lcrRmVQ4>r8`?&(CJvZ
z#MzoeqpkHL+miKABZ$~S3mSl8X*hzRHZoj)Bbq%`Gs<Fe1qp$%8L<gId_I+qBXCf|
zQ(~@wB1lNcOb9$eg$UsY7qyYA1U*m%DmC=*3|kXilrY-JLzv{2*5@)Sj7nSeSe?rw
z<Pkh;x_wdLPt#WqDL@RsXz~N42mx{cJ~u0joE4^#O!JdHYZ`<}3>T87i5r!KBI!#+
zBz+hiMqfX9xZl}m4C@>?<*YX9tO^^fzG%HfWh7jLEg6E#it#k8{WP+jF;bIAuVXxI
zXYjcHv(aj~33_UkUA*Y_6CB=pIBa@}v%PRC!7#S{pb+Q0r+sRzKkALqJLmqG*7g&Z
zk4AGTQxfb_7RS(f8X&c8QuEN`pQx_7^+6gi(#`SPzb?k@cl8{8_T-qN?4fg`UJckg
z#-}`vDJtIxwQdOJU|YaVXXlB+v5T=ClBMYcj-g`V)9@(n6c*}}nvfn&AAVzX;(UU$
zs#<P8C@Y?*?0VW2Zn_B2;y_g)FFfjv8mQk}Hx2Ldc(XN|9)$rV*^+WP4UrHf==E-c
zIeTrb0o>(u8OjKrArpGvY%Qn9V5Z~~oXrHigf=m1DnH!CyB(1rZ)mR9OX$cmM0vNt
zyUb2-_?T&!vpZ;rr^l_(>B6a#fm0_{^^jAE(P3cHsxMmQMa>L4a+faFEOFG%JFDe6
ztL5_APixmeW~g8O*RWEd`dY_86$zd5ma;-g*tiHAtA5Z7gxEg%BJ63@6xKQ8_S9NO
z)XPcm^&f7R5A-P@_<|6c8QmMID)Pav_jp{z-qF)BIi|9FBXlP<I6c~n(trh-$Elaf
zhqAd1I9rt$CJ;#Xh8q`Tl8aznrokG$QOoTb<QTedo&d8I^JZ&q*BGce!Fd|Zr6%YZ
z?u1Gmi-lmdsR<XOJHY&JfaeoeoJXR#(>P~0E<^;n#SL#XpU6w-QkCuv(D-63Sb3at
z)`%K_szJyZT=1;cKE0mM<pwQZI<z;ifM7dp3e2m_iNYahh84oi^@OM?m^0qFpAPTB
z7stVzJxj9baqzCBVj405TESulBEhqSNdODyo@WRyd@)T1d<ed-Rw2ZxM@M53&hk<H
zG0upS@-c&WXa9ca!GF;4wlgAfat3_7@|e55h3eT(RV%|!tCbN()vn;D)XH$Mr_}Ol
zmNHA(fuoSm&%ZFDR{3ps^igO8d)lY5U{=5e>@u{1Cae`qi*8p2cY3YsX`~}GJ}|O>
z@v6K0!M?mAou9S-I5Bt1c_gM4%#2hNIDo(yC`|!+Kr*VkG9X$IR65tyT`F%(H=zks
zc>|jUI9AZEj&9EofUONyg%=*P(VCY4O(zy`Af3-@F!^~?)7Yu?=_%~A1UrpOFnKn}
zao!sj)z*HHOP%_zzEZ$D!lTEH#l`%2I^)mNs)mX`*mSi2utTvV_ovFAK;!R9av_w@
z36}*=>2bq<s{H8>{@jQE3@}tIDZ?dHf7WwWHMD|S0gBU-HNjZ*=jzYt^f+-F_lF%y
z01W-LZ60igYJURM==9+~GunXQPXX*fj=I}3r)O%^Qn#1PL`0&`yf9JSeONFnSeP%C
zPoWy-8Rk47bi2%Tu$^dzxor;!4_x}dy&IIfv4&-!05H0p-#@@@gU#Gmgk<Pz?(g^R
zjA)!ZRp@dLCHv)7TH&nd&kv*BiF+O-?&(hSe^c2t%bn3PECa2a7eT|FCq|N&X72B#
zCT6sDJ1=(QwkZ}ayx}ao7@m6Z(y=vgeShd=UmbOS#)|<*Zj0{C!j>(~QiN8}Sh4Vf
z_zma7h#D_Eg_`Kbo!N*6P^&`F#m0TL!HxS{dErSXMp8};0u3}Tep5Jmx77K4H#X4?
z6hS9%3g?I4lmR9vGu8KDGuuo~j3iO#OCA6|vl$EMZdjt+4z|Su`I#@~#{6%O+21{z
z)kuB-)j&lEX!b+>82n2HfaaeuH|`~+AZFyZ$r|_irXXi}|1xCyrYLpKD4dZs=38_F
zQeHc<8S}72K+yt_@w|8mEp0cJf5ydR{v<3h8njG8&h+iLvQoOV?vN{TR<9&gx@{+l
z94gy4)*e_8HyqA8RElu;bZ%<JMWx;73nNPD;Yz00^}ij<|Ig_>FDzr@0xtuc(T~hN
zK|E1im~wfds<;-r1_C0*wU~TAhTqYE#hCn~{#7l0F@-UO01$I-6S(mHUb~21mPDR;
z^*gIGPb1c-PgL~>tKTVQytB!8r&zpzD(A7_sPe05KZKvBP9egNN-&pgvOG6Cu!e}#
zq>1DsA(veSxa{(gstf2mZqWuPEWw@}95N6^n(MA0Bk>THDmdDg)dg*22G(Ft^oI;K
zBF&C3X2{+xSk2QPA}Pt<tzMBf`aj_iuFy1JN(Z!rJ;5h|MzRn^Km)q1Aii}VbNqcq
zo_;SOLtcLn@H4BH;ZQ?>AOIh#>jm89ALIjYcG15Kdlr9yIg|mmK0qC8MB<%RK-@75
z-Zp^IctS55+*fF#*@5+yqK!UiglU8fX&$Y+3UgqlUnS;0y-F%ahA8LW(zc2Z{LIbg
zUBv?!F`q}a27u6^Ms01cSmny{>lsiTF@I1M9>~$G5#JX{>a^j3pCK6%$)8GY?AACv
z1q<nTQ6M=o^_*uD$i1w5zA32Ud`r;fl6e!-=)8$z>%6K4Dm1M>?KK;hel=oRS0DG|
zY2VYwt0)h^ofDD*KE2?aVL)GDaKMRW8EP9FAP=%}Zb#{(sv3ry)U>|)>}@4!&n_)L
zyZrb=Q0nl9z&2NE^|K0E>N+l{_F2`k?z8HgLYizXlVM91QqeVqG(|KMUR#{Rs=2C7
z@GPV$1P;JRfe4b0Wqw}{Gf)<ciLa)dZynKBUSt1W$J&z_xKgC8N=D_6$ZOWzM&<Wi
z$q%mS9k21C=Lgrq%<-R+inPsjtj+of;KHhqG?6476vNV1NW}|}XhUT)ywHPHQxtWL
zpuTdA5UmXYAsc^$&EEXolQ8Y;lk(t{*^HR_6g)H`Z2T}m9Hh;jT+3yTr;|3jqqS1s
zORpMCP+czTd7kp~gRj?(dZ!7(wC6^BeZY~&L0%Rt;iBR>eCy~oJa|@$e$evG{Yo&j
zi3T1R(D1;4;{5CCT#Rj}NNtY^HQ@@O9kSNIsR0Hc<Bi%C?2;j5N~PWx4!A+*gKwxm
zyowFppglaMD|;xr)q?__s=ES!g9LoDNywy0B*0dEGhe_&U%@&1Lv{wZa*(kxT|7|<
zFt<W(9vAcl`Fg<a0J{gd1;Fh(0j!j?1iA&Tz?-dQ>q~%K8{~6+<7*FOF9U!xFt!m6
zIS3<B&}arByQcU*je)@fejymqMprm6r_o@Dz<GpRgN-gjz|975^T43fAp#(Ska*#A
z@kR;67w|%)KA+S;1M>@zzzhTcBMvzl006l$QZ6CmS%yu>l1Knq;ORgv%_ihH#z{uh
z%GSCDFP8ABZN@ARJ?ucTZ}TZM5}GY!SR}g?2|@IWE(Jj`y8E#&jZj@9<j;|ippryD
z6@mB`StIlT;I?W=hJMRiKgH#1oXPXSIiqt%Kc%f+G(|@jk05*o1Qb4S{tF#I!~kN0
zxt-3Keq=NgeDBHT4lD`y6akekg|)5fp&qv~xqK>!9@5)DkWe($17e3(_S95K33CcW
z41<da-i4TcG!$4sF-3xp0NfZLsGwm%MB)y0LBrD4>2w?jM<m|@j|A@o#vq?ExLAnk
za>pfav=P8n-KK{s0koMQJSiz2UNv#^Ekn);sQk3m%Wg-gf`iO9>EB)S5u(6ikp1ry
za*ltnYy>sDsynwPaL3Wt2aCt_NQ3OV$Riem%+)zJ>IkYB)g!)(r0YvA`4uDwApPey
z4tsT9PNwPdvCL$Q9_AAD$|AFXd0lJE;eC8B@VBd2`<Z2=WSylwJZD5LU^XYa&3R)7
zKupfOYp`xuKqqvcJn!-cja1??Z&(4m0>iR@i&zS#t(#N^z<H%u!}Gv>z)~y>&qJO<
zW$%n040slafr+sB5&0B)$~M?GizKRHC2tTlqsA-g1;!h40KQ#o{YlhBRkf$9B|ONa
z1D~MvffVNd=E@r6LI7m&4D9tm!NsH*!;~3G^?hK*)5B9vj2QtiWd>~LyhOvwF3=JX
zIPo+*d9iTeZYefV1#&`K9{>+T0-OOHu=-;r)cMEU8B>!P-POVwsWVf!&^D;&@;uQn
zZ(i!GNB|z?Ul!LB!_OzCt@Wo+W_0f>7Jj28B?a6V;OMA`Ci_orQf4@yJ-{@)0vrx5
zU@aLAj6c&iN$J6i?3Zn3qeCVilJkJ4Fhqhpg#0sRqf*PC^JSaN5A~pknDM;$ufGBR
z5;giv>P`Rv@E&CT+ED|%1^Jo8s2}PD2te<QCa4hko_udSR1H36#hT`M%8DE{P0xGE
zZh(^!2w<9z1b{r#oDFAd@U^fQ1s#TDL)jqsO$GS&yl4RWWd-yr4oHU9b5l<>g4aX$
z1ddLemtPLT9s0yn{oimJPpM+vGVq~nfczSL#oa0gd^Y<OoUL$_pzme_<iXdnRyi9u
zGZqz)hLATRXC>~rJ%b!~n+>t<ri#R>>}lkOVTsa)*!087!Hu=Sg|>}#ab_k$oS%gv
ztsy~XZrV#)hh>8E4fnwhuuRV@*>SUI5qvXhjE@%eO5Dri7SJ0xo9=k`u~`cMmvhf9
zTSAEC-OWt_0yy=E8XNLml^17vNZiYy1CMOz3<NYV%PIp1yer_`L}OJ1%ZxVd1xz5t
z3gAd(h_r&}@!B>E9l~V7pfecaCZb2)VTve`?*T_Kv$0}yR-VH+l<_Wr0~uK4dqWX~
z10CJOeuZ$yAt>(xfPw=Qd577N-_`#CZN%UXkiH<qQCVdJfu4K3N%jOh{=omk|76@0
zFu<)pz!c0v{`cO}`ESlL$ez+mrGC5B2_Ep1=|C`4)yA#>5xDOT9CB#0({^FYOTEgU
zd6gGyA%{}*tB1T<@H-H2S9#F_sT^EQ;Ib%Rz&ubLUU0zqWm3x@FKkEL@!GDk%gG7+
zgrK<q&ux)N>grlHqQPTf%gra0mb#i20I0rMaO`MwAa=hBc(Y6hlt`rU0FZPpaK^2G
zz;~~8K_2>u8i>t+6jk;EA3s2iC)E=F>W8t5DKqKO53q?DZ#eT}?u_&ih%^+AoEU@1
zd>93R2jtLS`KDMPkq6&opWLJ-s&yx3a9cP!lLHA9zztxv6>zg>&;9_Fqc@Ad^?mit
z7QiqS0HSZ+irY9;E7^>j{xfdkcgop~D{&KHe^SosY1}1!{CkZjEq3fI>)1JVZRZ#$
zG<HBT^hEBIc}wSyKQt&H9D_Y2Z@WK_UHiyATYbelZX)U{7W|^3k@q_w2*^@*KEC}`
zLi+d>XBwLaaMGi@rz4y5&f1waKjBn=rTkZO=thd2U(<HX&BI0H`<1l)lfT$o?G3Ov
z#qfK(drP`SY{1i_M|Z#V`<giQWZ&9>H~Ng`eV^P&ThcKHj$BlYz#R!FIZWI4srgLh
zN?ZEYBk8oY@XmJyf8X!fvS*)0z_Gn=XI`iL6Y@)Q&HX*ciF*U$PUwAS*HL<F(eL2$
zi8oG+<}lr_VLuz#{eJ(+g`fH)*zfHg48@$h_x<7DVjrYa*8CUGR8~7!mR3FHRBpK-
z3|4&Ww?`}8V0Vq&Z&ssT2P+T%Vo<I8)<5CXp8W>7+bZ{mRir&WlJduQ0WQam<<uNl
zxF5ng6}{uBYWK+*m6F&D*11@pdS<W6|7()+zb1$^nr{O$tG|YBo8+FGeExgK<P`ko
za>&<%%Q0O?Ao$wP?g8IzP2BZ_vp4jIQt$0LPuyLD*2rfLkD32f*(CXDcVzdQfisnh
zb|t@VUHqq1yJGj{ozx1-uj^HfWoJ`My|?JBVk-i0^+t8dZ~YLDtF#|q2)ngg;jEpX
z)iU*9^Z8r5kEf8&7;5l;5;kOVzEW)#e)Qh0YUOx{{-s)PG9=wO^-yPS)BgOX{nmqy
z<wgzLbz?%!wisIKVw$xaFQuQ_jpNtA+U**V6~Xn+Dixt0CvIGJ`^)z*%fPZTzTNgA
zuEgU^<y*hX-8wlto_gK2485nD=dE}uIXe8^-!^`BW_Qn&{IjQ`U$@P}&{IoWb9}CC
zyg^U$0h29bEu$&ZYwKT8afCQmNdG136g~FXpelvPjo&FNqcC16V>Et6CZShXCa_mS
zMloPn`~4}DjMkQdYz4fWj3!<o+sHi-B)?vqdyvNtNQOG)XP28!Ys~x-<k2hSi6tJ}
zkxf2$bq^;zq8E#Y_ga92#>0BivNHA&?JN378O6```6}EvOt(ynjGvsfteK)xflsHB
zR$)kvKrcCo{5I|UJ4)_;PuYdJ=l%ZiZAL|YN#R+vlr1lKhMK((3&H;_0Fw!p^=Ob)
zjlcQ&(bDGFKtngt`n#UqSCRxp^Vf$y#GR@WtG9e?`5-XWpMKO{*s~kcpRBAf(_2md
zZ^`u+O=;#APtEx3P|b-J{8_Zcw$NA*{BdVxyw>PQ(tK*L4|Uc%yw7r(dA`LusN(8k
zfJs$%Y6{xhdI`<1`{@yJicd>1j7yw)VbwTZw_P*US@Pt|;X`ohf6u<lTW@S?VsHQc
zpF^)ZmTp@8xu{+FNOErb@Bh3@UYxrAee~%o6sMUji+?s7-F4rMyV#2QF+ydFj9gnF
zR%ep?75}$JBUF5c(?V7v&1=oI&?Q4Nx+Oet*Mltp_e|v}{C2spoCUw-=bgI?Ye}-i
zcoBDj%(4k*wWShmu3HJUM4MNl4{T9Y_Kzv7D)ig^Eo1qEqlCiQn|^2b8FAp_ku!X;
zkNA7R_aFlwj!<`EuC7Aw0>6Db2xW#!;LTwA|22DRo^h%2!c*=^B|{}{`h|WaJ=F#9
z1)_>RAKU|<1T2(4A-(!NWDhVQ26Zi!TUuJS6nHx}UIYeY+8clDSlxmB4poWXhAf|j
z6Tm$jGoa1`H4ph@Z-5CY$pT&?unoX0h+Dxi5U_}D(5Vx26b0-8xJ%YbMhZ?my}$Ko
zNcWg`fn#HxZHxbwYx{Nj_hV@Xz~flBZHxQxt)qu7E`GBYSz_)ZY((91>hXKi(WfMn
z_onZ>jy;@n=R#b?ztB4uybGoeedaz~yY~*lYlbiiUUT$g3nmVI<UYhk82tA%HNwO*
z^?3Dk$ms(Sy85xldz>aeav$OBi&Z-!?1x`79!BWiDLE|#w1X}#_&frDqSvv<@8Upp
z?D58Xpo`X2@FUIF_k@JG9Y4c@(!4O5w=}hrAQ_V6osDR`v-ixUfp^ZFoca?XXKhWg
zz1B-%NHtO#`+45OoBF{uifZ_Ryq*l_&+A9*RMg?}y`H=JuI4dxG^4IvgZbe1CBLz@
zxlMog0ap{(c0H{WXIYOJt?FEAyf<lPCueJ<XG&O^KgZYUagn`dql>>P6CWl+L^Q9_
zw-n`At3+58A%S3dcwDuXiBDL9#Rybll$1H#u4oV0UQDk`zAaB-k9zQn13}vrc%G_j
z<y!>JMfLHHr>kBc{_x$xsh{VuM^uK7(2e#Zc6fP>90^dV-|ZD0&6xV4aNId3xHl#_
zsOhYIxozqsy`a&zaN;U;$|5qw`2M6!?(ER#|5#`hMt@jd{NWd0<4g9Z5dQmNd#oFr
zbQ(0n;i(ZfPH)vacbE>}N|c!oAuB1~_x)oreVW#P6(5>E#tczTY12n9X3YA2F)EzX
z+Fg5KtJB4Ut#8^AD=#;vvuXn$7G(~6=l_>|gt9W#4N-#kzIDsh?#Dmx{eRSU{jXWN
z|9!A!wu|tNmqLFH$!dL(X@BE}GVazf$7?@E=X9%rSFDqKb@}Dwp{m=n@8B{rj@dFY
z3O+J7`taj21t0q?k>y(|-xmxWT9xm|R#U7FhnT+@h|**bZdS|QLA{g@k-18GA>)N#
zJ*ivjcHxG~t{0vA?jiPiI|S)edIsCd<avi8Tf#e6s<$LFJR0RRR64iAe`O$L3mW_G
z;a)h)z?AV=IbEhg<nO&lR^>irA6A^b6IiJJz;RcVoUN6-s=0v|v5P5~&I?a9xK(<`
zd$Z%fB(1?VI5x+!G3VakKjPwN<U{+`j@^;(k@Nd-#*XDXSDB6odrDdOgQ|C9`iPC<
zN&QZ{935X1GmO?t3yoN{txZH{&d=LMo$lJd_>U$chTrJ-$I$XmYA@5x@?-KX$xePF
zGrnIG&QIM;JYB~*w%;T-swV$V<uAo+Q%C>IBWrucKmTjE?tC$B<N(s{==}-eFD=dg
PzdZc!BTWA{BmF-BtIv;H

literal 0
HcmV?d00001

diff --git a/front/components/Metronome.tsx b/front/components/Metronome.tsx
new file mode 100644
index 0000000..8e1e7ab
--- /dev/null
+++ b/front/components/Metronome.tsx
@@ -0,0 +1,13 @@
+import { useEffect, useRef } from 'react';
+
+export const Metronome = ({ paused = false, bpm }: { paused?: boolean; bpm: number }) => {
+	const ref = useRef<HTMLAudioElement | null>(null);
+	useEffect(() => {
+		const int = setInterval(() => {
+			if (!ref.current) ref.current = new Audio("/assets/metronome.mp3");
+			ref.current.play();
+		}, 60000 / bpm);
+		return () => clearInterval(int);
+	}, []);
+	return null;
+};
diff --git a/front/nginx.conf.template b/front/nginx.conf.template
index 9baf3ed..fc5af83 100644
--- a/front/nginx.conf.template
+++ b/front/nginx.conf.template
@@ -4,6 +4,10 @@ server {
 
 	index index.html;
 
+	location /assets {
+		alias ./assets;
+	}
+
 	location / {
 		try_files $uri $uri/ /index.html;
 	}
diff --git a/front/nginx.conf.template.dev b/front/nginx.conf.template.dev
new file mode 100644
index 0000000..b7caf3b
--- /dev/null
+++ b/front/nginx.conf.template.dev
@@ -0,0 +1,29 @@
+server {
+	listen ${PORT};
+	root /usr/share/nginx/html;
+
+	index index.html;
+
+	location /assets {
+		alias /assets;
+	}
+
+	location / {
+		proxy_pass ${FRONT_URL}/;
+	}
+
+	location /api/ {
+		proxy_pass ${API_URL}/;
+	}
+
+	location /ws {
+		proxy_set_header Host $host;
+		proxy_set_header X-Forwarded-Scheme $scheme;
+		proxy_set_header X-Forwarded-Proto  $scheme;
+		proxy_set_header X-Forwarded-For    $remote_addr;
+		proxy_pass ${SCOROMETER_URL};
+		proxy_set_header Upgrade $http_upgrade;
+		proxy_set_header Connection $http_connection;
+		proxy_http_version 1.1;
+	}
+}
diff --git a/front/views/PlayView.tsx b/front/views/PlayView.tsx
index 790a556..962e05b 100644
--- a/front/views/PlayView.tsx
+++ b/front/views/PlayView.tsx
@@ -33,6 +33,7 @@ import { MIDIAccess, MIDIMessageEvent, requestMIDIAccess } from '@motiz88/react-
 import * as Linking from 'expo-linking';
 import url from 'url';
 import { PianoCanvasContext, PianoCanvasMsg, NoteTiming } from '../models/PianoGame';
+import { Metronome } from '../components/Metronome';
 
 type PlayViewProps = {
 	songId: number;
@@ -357,6 +358,8 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
 				{!partitionRendered && <LoadingComponent />}
 			</View>
 
+			<Metronome paused={paused} bpm={60} />
+
 			<Box
 				shadow={4}
 				style={{

From 31b965e8f609dd18315b1a3626f58a5c9594404a Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Mon, 18 Sep 2023 17:18:01 +0200
Subject: [PATCH 13/15] Add volume/enable state and follow the music's bpm for
 the metronome

---
 front/components/Metronome.tsx      | 33 +++++++++++++++++++++++++----
 front/components/PartitionCoord.tsx |  3 +++
 front/components/PartitionView.tsx  |  4 +++-
 front/views/PlayView.tsx            |  4 +++-
 4 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/front/components/Metronome.tsx b/front/components/Metronome.tsx
index 8e1e7ab..9013cd9 100644
--- a/front/components/Metronome.tsx
+++ b/front/components/Metronome.tsx
@@ -1,13 +1,38 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { Slider, Switch, Text, View } from 'native-base';
 
 export const Metronome = ({ paused = false, bpm }: { paused?: boolean; bpm: number }) => {
 	const ref = useRef<HTMLAudioElement | null>(null);
+	const enabled = useRef<boolean>(false);
+	const volume = useRef<number>(50);
+
 	useEffect(() => {
+		if (paused) return;
 		const int = setInterval(() => {
-			if (!ref.current) ref.current = new Audio("/assets/metronome.mp3");
+			console.log(enabled.current, volume.current);
+			if (!enabled.current) return;
+			if (!ref.current) ref.current = new Audio('/assets/metronome.mp3');
+			ref.current.volume = volume.current / 100;
 			ref.current.play();
 		}, 60000 / bpm);
 		return () => clearInterval(int);
-	}, []);
-	return null;
+	}, [bpm, paused]);
+	return (
+		<View>
+			<Text>Metronome Settings</Text>
+			<Text>Enabled:</Text>
+			<Switch value={enabled.current} onToggle={() => (enabled.current = !enabled.current)} />
+			<Text>Volume:</Text>
+			<Slider
+				maxWidth={'500px'}
+				value={volume.current}
+				onChange={(x) => (volume.current = x)}
+			>
+				<Slider.Track>
+					<Slider.FilledTrack />
+				</Slider.Track>
+				<Slider.Thumb />
+			</Slider>
+		</View>
+	);
 };
diff --git a/front/components/PartitionCoord.tsx b/front/components/PartitionCoord.tsx
index 60fbace..b0a094d 100644
--- a/front/components/PartitionCoord.tsx
+++ b/front/components/PartitionCoord.tsx
@@ -6,6 +6,7 @@ import { PianoCursorPosition } from '../models/PianoGame';
 type PartitionCoordProps = {
 	// The Buffer of the MusicXML file retreived from the API
 	file: string;
+	bpmRef: React.MutableRefObject<number>;
 	onPartitionReady: () => void;
 	onEndReached: () => void;
 	onResume: () => void;
@@ -18,6 +19,7 @@ const PartitionCoord = ({
 	onEndReached,
 	onPause,
 	onResume,
+	bpmRef,
 }: PartitionCoordProps) => {
 	const [partitionData, setPartitionData] = React.useState<
 		[[number, number], string, PianoCursorPosition[]] | null
@@ -28,6 +30,7 @@ const PartitionCoord = ({
 			{!partitionData && (
 				<PartitionView
 					file={file}
+					bpmRef={bpmRef}
 					onPartitionReady={(dims, base64data, a) => {
 						setPartitionData([dims, base64data, a]);
 						onPartitionReady();
diff --git a/front/components/PartitionView.tsx b/front/components/PartitionView.tsx
index 8fb7784..009796e 100644
--- a/front/components/PartitionView.tsx
+++ b/front/components/PartitionView.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-mixed-spaces-and-tabs */
 // Inspired from OSMD example project
 // https://github.com/opensheetmusicdisplay/react-opensheetmusicdisplay/blob/master/src/lib/OpenSheetMusicDisplay.jsx
-import React, { useEffect } from 'react';
+import React, { MutableRefObject, useEffect } from 'react';
 import {
 	CursorType,
 	Fraction,
@@ -19,6 +19,7 @@ type PartitionViewProps = {
 		base64data: string,
 		cursorInfos: PianoCursorPosition[]
 	) => void;
+	bpmRef: MutableRefObject<number>;
 	onEndReached: () => void;
 	// Timestamp of the play session, in milisecond
 	timestamp: number;
@@ -62,6 +63,7 @@ const PartitionView = (props: PartitionViewProps) => {
 			_osmd.render();
 			_osmd.cursor.show();
 			const bpm = _osmd.Sheet.HasBPMInfo ? _osmd.Sheet.getExpressionsStartTempoInBPM() : 60;
+			props.bpmRef.current = bpm;
 			const wholeNoteLength = Math.round((60 / bpm) * 4000);
 			const curPos = [];
 			while (!_osmd.cursor.iterator.EndReached) {
diff --git a/front/views/PlayView.tsx b/front/views/PlayView.tsx
index 962e05b..92c9fd2 100644
--- a/front/views/PlayView.tsx
+++ b/front/views/PlayView.tsx
@@ -84,6 +84,7 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
 	const toast = useToast();
 	const [lastScoreMessage, setLastScoreMessage] = useState<ScoreMessage>();
 	const webSocket = useRef<WebSocket>();
+	const bpm = useRef<number>(60);
 	const [paused, setPause] = useState<boolean>(true);
 	const stopwatch = useStopwatch();
 	const [time, setTime] = useState(0);
@@ -349,6 +350,7 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
 				>
 					<PartitionCoord
 						file={musixml.data}
+						bpmRef={bpm}
 						onEndReached={onEnd}
 						onPause={onPause}
 						onResume={onResume}
@@ -358,7 +360,7 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
 				{!partitionRendered && <LoadingComponent />}
 			</View>
 
-			<Metronome paused={paused} bpm={60} />
+			<Metronome paused={paused} bpm={bpm.current} />
 
 			<Box
 				shadow={4}

From ee8e0e26db1e2edc2d865fb7aaac81c2a97f575a Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Tue, 19 Sep 2023 19:30:55 +0200
Subject: [PATCH 14/15] Fix eslint and bad reverify mail issue

---
 back/src/auth/auth.controller.ts | 4 +++-
 front/components/Metronome.tsx   | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/back/src/auth/auth.controller.ts b/back/src/auth/auth.controller.ts
index b63d71c..f31b9f7 100644
--- a/back/src/auth/auth.controller.ts
+++ b/back/src/auth/auth.controller.ts
@@ -97,7 +97,9 @@ export class AuthController {
 	@UseGuards(JwtAuthGuard)
 	@Put('reverify')
 	async reverify(@Request() req: any): Promise<void> {
-		await this.authService.sendVerifyMail(req.user);
+		const user = await this.usersService.user({ id: req.user.id });
+		if (!user) throw new BadRequestException("Invalid user");
+		await this.authService.sendVerifyMail(user);
 	}
 
 	@ApiBody({ type: LoginDto })
diff --git a/front/components/Metronome.tsx b/front/components/Metronome.tsx
index 9013cd9..320770a 100644
--- a/front/components/Metronome.tsx
+++ b/front/components/Metronome.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { Slider, Switch, Text, View } from 'native-base';
 
 export const Metronome = ({ paused = false, bpm }: { paused?: boolean; bpm: number }) => {

From 7aa7f50ecb272cc11782f17d869910633f214255 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Wed, 20 Sep 2023 14:46:35 +0200
Subject: [PATCH 15/15] Fix prod nginx

---
 .editorconfig                                |  2 +-
 back/src/auth/auth.service.ts                |  1 +
 front/.dockerignore                          |  5 ++++-
 front/Dockerfile                             |  2 --
 front/components/Metronome.tsx               |  1 -
 front/nginx.conf.template                    |  4 ----
 front/views/settings/SettingsProfileView.tsx | 14 +++++++++++++-
 shell.nix                                    |  3 ++-
 8 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/.editorconfig b/.editorconfig
index 1aa37fe..15b3f2a 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -8,6 +8,6 @@ insert_final_newline = true
 indent_style = tab
 indent_size = tab
 
-[{*.yaml,*.yml}]
+[{*.yaml,*.yml,*.nix}]
 indent_style = space
 indent_size = 2
diff --git a/back/src/auth/auth.service.ts b/back/src/auth/auth.service.ts
index 4c2d98f..121b87a 100644
--- a/back/src/auth/auth.service.ts
+++ b/back/src/auth/auth.service.ts
@@ -37,6 +37,7 @@ export class AuthService {
 
 	async sendVerifyMail(user: User) {
 		if (process.env.IGNORE_MAILS === "true") return;
+		console.log("Sending verification mail to", user.email);
 		const token = await this.jwtService.signAsync(
 			{
 				userId: user.id,
diff --git a/front/.dockerignore b/front/.dockerignore
index d1265c1..dfcd4d7 100644
--- a/front/.dockerignore
+++ b/front/.dockerignore
@@ -1,4 +1,7 @@
 node_modules/
 .expo/
 .idea/
-.vscode/
\ No newline at end of file
+.vscode/
+.dockerignore
+Dockerfile
+Dockerfile.dev
diff --git a/front/Dockerfile b/front/Dockerfile
index c219a27..6195c23 100644
--- a/front/Dockerfile
+++ b/front/Dockerfile
@@ -24,5 +24,3 @@ FROM nginx:1.21-alpine
 COPY --from=build /app/web-build /usr/share/nginx/html
 COPY ./assets/ /usr/share/nginx/html/assets/
 COPY nginx.conf.template /etc/nginx/templates/default.conf.template
-
-CMD nginx -g 'daemon off;'
diff --git a/front/components/Metronome.tsx b/front/components/Metronome.tsx
index 320770a..7751f0e 100644
--- a/front/components/Metronome.tsx
+++ b/front/components/Metronome.tsx
@@ -9,7 +9,6 @@ export const Metronome = ({ paused = false, bpm }: { paused?: boolean; bpm: numb
 	useEffect(() => {
 		if (paused) return;
 		const int = setInterval(() => {
-			console.log(enabled.current, volume.current);
 			if (!enabled.current) return;
 			if (!ref.current) ref.current = new Audio('/assets/metronome.mp3');
 			ref.current.volume = volume.current / 100;
diff --git a/front/nginx.conf.template b/front/nginx.conf.template
index fc5af83..9baf3ed 100644
--- a/front/nginx.conf.template
+++ b/front/nginx.conf.template
@@ -4,10 +4,6 @@ server {
 
 	index index.html;
 
-	location /assets {
-		alias ./assets;
-	}
-
 	location / {
 		try_files $uri $uri/ /index.html;
 	}
diff --git a/front/views/settings/SettingsProfileView.tsx b/front/views/settings/SettingsProfileView.tsx
index fdf16d5..25d4462 100644
--- a/front/views/settings/SettingsProfileView.tsx
+++ b/front/views/settings/SettingsProfileView.tsx
@@ -62,7 +62,19 @@ const ProfileSettings = ({ navigation }: { navigation: any }) => {
 								text: user.emailVerified ? 'verified' : 'not verified',
 								onPress: user.emailVerified
 									? undefined
-									: () => API.fetch({ route: '/auth/reverify', method: 'PUT' }),
+									: () =>
+											API.fetch({ route: '/auth/reverify', method: 'PUT' })
+												.then(() =>
+													Toast.show({
+														description: 'Verification mail sent',
+													})
+												)
+												.catch((e) => {
+													console.error(e);
+													Toast.show({
+														description: 'Verification mail send error',
+													});
+												}),
 							},
 						},
 						{
diff --git a/shell.nix b/shell.nix
index edc76e1..6aa53b8 100644
--- a/shell.nix
+++ b/shell.nix
@@ -5,9 +5,10 @@ pkgs.mkShell {
     nodePackages.prisma
     nodePackages."@nestjs/cli"
     nodePackages.npm
+    eslint_d
     nodejs_16
     yarn
-    python3
+    (python3.withPackages (ps: with ps; [requests]))
     pkg-config
   ];
   shellHook = with pkgs; ''