Add login button instead of watchlist when user is not login

front/packages/ui/src/home/watchlist.tsx

@@ -24,6 +24,7 @@ import {
 	WatchlistKind,
 	WatchlistP,
 	getDisplayDate,
+	useAccount,
 } from "@kyoo/models";
 import { useYoshiki } from "yoshiki/native";
 import { ItemGrid } from "../browse/grid";
@@ -31,14 +32,18 @@ import { InfiniteFetch } from "../fetch-infinite";
 import { useTranslation } from "react-i18next";
 import { Header } from "./genre";
 import { EpisodeBox, episodeDisplayNumber } from "../details/episode";
+import { View } from "react-native";
+import { Button, P, ts } from "@kyoo/primitives";
 
 export const WatchlistList = () => {
 	const { t } = useTranslation();
 	const { css } = useYoshiki();
+	const account = useAccount();
 
 	return (
 		<>
 			<Header title={t("home.watchlist")} />
+			{account ? (
 				<InfiniteFetch
 					query={WatchlistList.query()}
 					layout={{ ...ItemGrid.layout, layout: "horizontal" }}
@@ -81,6 +86,12 @@ export const WatchlistList = () => {
 						);
 					}}
 				</InfiniteFetch>
+			) : (
+				<View {...css({ justifyContent: "center", alignItems: "center" })}>
+					<P>{t("home.watchlistLogin")}</P>
+					<Button text={t("login.login")} href={"/login"} {...css({ minWidth: ts(24), margin: ts(2) })}/>
+				</View>
+			)}
 		</>
 	);
 };

front/translations/en.json

@@ -4,7 +4,8 @@
 		"news": "News",
 		"watchlist": "Continue watching",
 		"info": "See more",
-		"none": "No episodes"
+		"none": "No episodes",
+		"watchlistLogin": "To keep track of what you watched or plan to watch, you need to login."
 	},
 	"show": {
 		"play": "Play",

front/translations/fr.json

@@ -4,7 +4,8 @@
 		"news": "Nouveautés",
 		"watchlist": "Continuer de regarder",
 		"info": "Voir plus",
-		"none": "Aucun episode"
+		"none": "Aucun episode",
+		"watchlistLogin": "Pour suivre ce que vous avez regardé ou prévoyez de regarder, vous devez vous connecter."
 	},
 	"show": {
 		"play": "Lecture",