Add watchlist menu to set status in details page

back/src/Kyoo.Core/Controllers/Repositories/WatchStatusRepository.cs

@@ -165,6 +165,7 @@ public class WatchStatusRepository : IWatchStatusRepository
 		Guid userId)
 	{
 		await _database.ShowWatchStatus
+			.IgnoreAutoIncludes()
 			.Where(x => x.ShowId == showId && x.UserId == userId)
 			.ExecuteDeleteAsync();
 		await _database.EpisodeWatchStatus

front/packages/primitives/src/menu.tsx

@@ -147,7 +147,7 @@ const MenuItem = ({
 			icon={icon ?? Check}
 			color={disabled ? theme.overlay0 : theme.paragraph}
 			size={24}
-			{...css({ paddingLeft: icon ? ts(2) : 0 })}
+			{...css({ paddingX: ts(1) })}
 		/>
 	);
 

front/packages/primitives/src/menu.web.tsx

@@ -141,7 +141,7 @@ const MenuItem = ({
 			icon={icon ?? Dot}
 			color={disabled ? theme.overlay0 : theme.paragraph}
 			size={icon ? 24 : ts(1)}
-			{...nCss({ paddingRight: ts(1) })}
+			{...nCss({ paddingX: ts(1) })}
 		/>
 	);
 

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 { IconButton, Menu, tooltip } from "@kyoo/primitives";
 import { ComponentProps } from "react";
 import { useTranslation } from "react-i18next";
 import BookmarkAdd from "@material-symbols/svg-400/rounded/bookmark_add.svg";
@@ -54,12 +54,9 @@ export const WatchListInfo = ({
 	if (mutation.isPending) status = mutation.variables;
 
 	if (account == null) {
-		return <IconButton
+		return (
-			icon={BookmarkAdd}
+			<IconButton icon={BookmarkAdd} disabled {...tooltip(t("show.watchlistLogin"))} {...props} />
-			disabled
+		);
-			{...tooltip(t("show.watchlistLogin"))}
-			{...props}
-		/>
 	}
 
 	switch (status) {
@@ -72,24 +69,6 @@ export const WatchListInfo = ({
 					{...props}
 				/>
 			);
-		case WatchStatusV.Planned:
-			return (
-				<IconButton
-					icon={Bookmark}
-					// onPress={() => mutation.mutate(WatchStatusV.)}
-					{...tooltip(t("show.watchlistEdit"))}
-					{...props}
-				/>
-			);
-		case WatchStatusV.Watching:
-			return (
-				<IconButton
-					icon={Bookmark}
-					// onPress={() => mutation.mutate(WatchStatusV.Planned)}
-					{...tooltip(t("show.watchlistEdit"))}
-					{...props}
-				/>
-			);
 		case WatchStatusV.Completed:
 			return (
 				<IconButton
@@ -99,14 +78,21 @@ export const WatchListInfo = ({
 					{...props}
 				/>
 			);
+		case WatchStatusV.Planned:
+		case WatchStatusV.Watching:
 		case WatchStatusV.Droped:
 			return (
-				<IconButton
+				<Menu Trigger={IconButton} icon={Bookmark} {...tooltip(t("show.watchlistEdit"))} {...props}>
-					icon={BookmarkRemove}
+					{Object.values(WatchStatusV).map((x) => (
-					// onPress={() => mutation.mutate(WatchStatusV.Planned)}
+						<Menu.Item
-					{...tooltip(t("show.watchlistEdit"))}
+							key={x}
-					{...props}
+							label={t(`show.watchlistMark.${x.toLowerCase()}`)}
-				/>
+							onSelect={() => mutation.mutate(x)}
+							selected={x === status}
+						/>
+					))}
+					<Menu.Item label={t("show.watchlistMark.null")} onSelect={() => mutation.mutate(null)} />
+				</Menu>
 			);
 	}
 };

front/translations/en.json

@@ -23,7 +23,14 @@
 		"watchlistAdd": "Add to your plan to watch list",
 		"watchlistEdit": "Edit watch status",
 		"watchlistRemove": "Mark as not seen",
-		"watchlistLogin": "Login to add to your watchlist"
+		"watchlistLogin": "Login to add to your watchlist",
+		"watchlistMark": {
+			"completed": "Mark as completed",
+			"planned": "Mark as planned",
+			"watching": "Mark as watching",
+			"droped": "Mark as dropped",
+			"null": "Mark as not seen"
+		}
 	},
 	"browse": {
 		"sortby": "Sort by {{key}}",

front/translations/fr.json

@@ -23,7 +23,14 @@
 		"watchlistAdd": "Ajouter à votre liste de visionnage",
 		"watchlistEdit": "Editer le status",
 		"watchlistRemove": "Marquer comme non vu",
-		"watchlistLogin": "Connectez-vous pour ajouter a votre liste de visionnage"
+		"watchlistLogin": "Connectez-vous pour ajouter a votre liste de visionnage",
+		"watchlistMark": {
+			"completed": "Marquer comme complété",
+			"planned": "Marquer comme prévu a voir",
+			"watching": "Marquer en cours de visionnage",
+			"droped": "Marquer comme abandonné",
+			"null": "Marquer comme non vu"
+		}
 	},
 	"browse": {
 		"sortby": "Trier par {{key}}",