From 6974ef0163aa166384042066923d87f6175406f6 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Sun, 3 Dec 2023 23:59:47 +0100
Subject: [PATCH] Add watchlist menu to set status in details page

---
 .../Repositories/WatchStatusRepository.cs     |  1 +
 front/packages/primitives/src/menu.tsx        |  2 +-
 front/packages/primitives/src/menu.web.tsx    |  2 +-
 .../ui/src/components/watchlist-info.tsx      | 48 +++++++------------
 front/translations/en.json                    |  9 +++-
 front/translations/fr.json                    |  9 +++-
 6 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/back/src/Kyoo.Core/Controllers/Repositories/WatchStatusRepository.cs b/back/src/Kyoo.Core/Controllers/Repositories/WatchStatusRepository.cs
index cc2b9478..13d84c4a 100644
--- a/back/src/Kyoo.Core/Controllers/Repositories/WatchStatusRepository.cs
+++ b/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
diff --git a/front/packages/primitives/src/menu.tsx b/front/packages/primitives/src/menu.tsx
index 909ccee5..c332068f 100644
--- a/front/packages/primitives/src/menu.tsx
+++ b/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) })}
 		/>
 	);
 
diff --git a/front/packages/primitives/src/menu.web.tsx b/front/packages/primitives/src/menu.web.tsx
index a58fd620..808114b8 100644
--- a/front/packages/primitives/src/menu.web.tsx
+++ b/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) })}
 		/>
 	);
 
diff --git a/front/packages/ui/src/components/watchlist-info.tsx b/front/packages/ui/src/components/watchlist-info.tsx
index 5128a1a7..c029506c 100644
--- a/front/packages/ui/src/components/watchlist-info.tsx
+++ b/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
-			icon={BookmarkAdd}
-			disabled
-			{...tooltip(t("show.watchlistLogin"))}
-			{...props}
-		/>
+		return (
+			<IconButton icon={BookmarkAdd} 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
-					icon={BookmarkRemove}
-					// onPress={() => mutation.mutate(WatchStatusV.Planned)}
-					{...tooltip(t("show.watchlistEdit"))}
-					{...props}
-				/>
+				<Menu Trigger={IconButton} icon={Bookmark} {...tooltip(t("show.watchlistEdit"))} {...props}>
+					{Object.values(WatchStatusV).map((x) => (
+						<Menu.Item
+							key={x}
+							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>
 			);
 	}
 };
diff --git a/front/translations/en.json b/front/translations/en.json
index 655c90e2..6ca32ae6 100644
--- a/front/translations/en.json
+++ b/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}}",
diff --git a/front/translations/fr.json b/front/translations/fr.json
index 71725641..a90d9ef1 100644
--- a/front/translations/fr.json
+++ b/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}}",