Disable watchlist button for unlogged users

front/packages/primitives/src/icons.tsx

@@ -74,7 +74,7 @@ export const IconButton = forwardRef(function IconButton<AsProps = PressableProp
 	} & AsProps,
 	ref: ForwardedRef<unknown>,
 ) {
-	const { css } = useYoshiki();
+	const { css, theme } = useYoshiki();
 
 	const Container = as ?? PressableFeedback;
 
@@ -98,7 +98,11 @@ export const IconButton = forwardRef(function IconButton<AsProps = PressableProp
 				asProps,
 			) as AsProps)}
 		>
-			<Icon icon={icon} size={size} color={color} />
+			<Icon
+				icon={icon}
+				size={size}
+				color={"disabled" in asProps && asProps.disabled ? theme.overlay1 : color}
+			/>
 		</Container>
 	);
 });

front/packages/primitives/src/links.tsx

@@ -23,7 +23,6 @@ import { Platform, Pressable, TextProps, View, PressableProps } from "react-nati
 import { TextLink, useLink } from "solito/link";
 import { useTheme, useYoshiki } from "yoshiki/native";
 import { alpha } from "./themes";
-import { NextLink } from "solito/build/link/next-link";
 
 export const A = ({
 	href,

front/packages/ui/src/components/watchlist-info.tsx

@@ -18,7 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { IconButton, tooltip } from "@kyoo/primitives";
+import { Icon, IconButton, tooltip } from "@kyoo/primitives";
 import { ComponentProps } from "react";
 import { useTranslation } from "react-i18next";
 import BookmarkAdd from "@material-symbols/svg-400/rounded/bookmark_add.svg";
@@ -26,7 +26,7 @@ import Bookmark from "@material-symbols/svg-400/rounded/bookmark-fill.svg";
 import BookmarkAdded from "@material-symbols/svg-400/rounded/bookmark_added-fill.svg";
 import BookmarkRemove from "@material-symbols/svg-400/rounded/bookmark_remove.svg";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { WatchStatusV, queryFn } from "@kyoo/models";
+import { WatchStatusV, queryFn, useAccount } from "@kyoo/models";
 
 export const WatchListInfo = ({
 	type,
@@ -39,6 +39,7 @@ export const WatchListInfo = ({
 	status: WatchStatusV | null;
 	color: ComponentProps<typeof IconButton>["color"];
 }) => {
+	const account = useAccount();
 	const { t } = useTranslation();
 
 	const queryClient = useQueryClient();
@@ -50,8 +51,17 @@ export const WatchListInfo = ({
 			}),
 		onSettled: async () => await queryClient.invalidateQueries({ queryKey: [type, slug] }),
 	});
-
 	if (mutation.isPending) status = mutation.variables;
+
+	if (account == null) {
+		return <IconButton
+			icon={BookmarkAdd}
+			disabled
+			{...tooltip(t("show.watchlistLogin"))}
+			{...props}
+		/>
+	}
+
 	switch (status) {
 		case null:
 			return (

front/translations/en.json

@@ -22,7 +22,8 @@
 		"partOf": "Part of the",
 		"watchlistAdd": "Add to your plan to watch list",
 		"watchlistEdit": "Edit watch status",
-		"watchlistRemove": "Mark as not seen"
+		"watchlistRemove": "Mark as not seen",
+		"watchlistLogin": "Login to add to your watchlist"
 	},
 	"browse": {
 		"sortby": "Sort by {{key}}",

front/translations/fr.json

@@ -22,7 +22,8 @@
 		"partOf": "Fait parti de",
 		"watchlistAdd": "Ajouter à votre liste de visionnage",
 		"watchlistEdit": "Editer le status",
-		"watchlistRemove": "Marquer comme non vu"
+		"watchlistRemove": "Marquer comme non vu",
+		"watchlistLogin": "Connectez-vous pour ajouter a votre liste de visionnage"
 	},
 	"browse": {
 		"sortby": "Trier par {{key}}",