Display if media in watchlist/seen (#809)

* feat(backend): store whether it is in watchlist

* feat(database): migrate user_to_entity fields

* feat(backend): hoist join out of conditional query

* feat(backend): return media reason for metadata list

* refactor(frontend): extract var

* feat(frontend): pass `reason` to media component

* refactor(backend): rewrite cleanup function

* fix(backend): remove extremely verbose log

* fix(backend): delete old user_to_entity

* refactor(backend): change name of var

* refactor(frontend): change order of funcs

* fix(frontend): remove useless prop

* refactor(frontend): extract component

* feat(frontend): display icon for media reason

* build(backend): bump version

* refactor(frontend): extract common prop into style

* refactor(*): change order of imports

apps/backend/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "ryot"
-version = "5.1.0"
+version = "5.1.1"
 edition = "2021"
 repository = "https://github.com/IgnisDa/ryot"
 license = "GPL-3.0"

apps/backend/src/models.rs

@@ -261,6 +261,7 @@ pub mod media {
     pub struct MediaListItem {
         pub data: MetadataSearchItem,
         pub average_rating: Option<Decimal>,
+        pub media_reason: Vec<UserToMediaReason>,
     }
 
     #[derive(Debug, Serialize, Deserialize, SimpleObject, Clone, FromQueryResult)]
@@ -892,7 +893,17 @@ pub mod media {
     }
 
     #[derive(
-        Copy, Clone, Debug, PartialEq, Eq, DeriveActiveEnum, EnumIter, Serialize, Deserialize, Hash,
+        Copy,
+        Clone,
+        Debug,
+        Enum,
+        PartialEq,
+        Eq,
+        DeriveActiveEnum,
+        EnumIter,
+        Serialize,
+        Deserialize,
+        Hash,
     )]
     #[sea_orm(rs_type = "String", db_type = "String(None)")]
     pub enum UserToMediaReason {
@@ -908,6 +919,8 @@ pub mod media {
         Owned,
         #[sea_orm(string_value = "Monitoring")]
         Monitoring,
+        #[sea_orm(string_value = "Watchlist")]
+        Watchlist,
     }
 
     #[derive(Debug, SimpleObject)]

apps/frontend/app/components/media.tsx

@@ -15,6 +15,7 @@ import {
 	Image,
 	Input,
 	Loader,
+	type MantineStyleProp,
 	Menu,
 	Modal,
 	NumberInput,
@@ -28,6 +29,7 @@ import {
 	Text,
 	TextInput,
 	Textarea,
+	ThemeIcon,
 	Title,
 	Tooltip,
 	useComputedColorScheme,
@@ -50,6 +52,7 @@ import {
 	type ReviewItem,
 	type UserMediaReminderPartFragment,
 	UserReviewScale,
+	UserToMediaReason,
 	Visibility,
 } from "@ryot/generated/graphql/backend/graphql";
 import { changeCase, formatDateToNaiveDate, getInitials } from "@ryot/ts-utils";
@@ -58,10 +61,12 @@ import {
 	IconArrowBigUp,
 	IconArrowsRight,
 	IconBackpack,
+	IconBookmarksFilled,
 	IconCheck,
 	IconCloudDownload,
 	IconEdit,
 	IconPercentage,
+	IconRosetteDiscountCheck,
 	IconStarFilled,
 	IconTrash,
 	IconX,
@@ -444,6 +449,12 @@ export const ReviewItemDisplay = (props: {
 	);
 };
 
+const blackBgStyles = {
+	backgroundColor: "rgba(0, 0, 0, 0.75)",
+	borderRadius: 3,
+	padding: 2,
+} satisfies MantineStyleProp;
+
 export const BaseDisplayItem = (props: {
 	name: string;
 	onClick?: (e: React.MouseEvent) => Promise<void>;
@@ -457,6 +468,7 @@ export const BaseDisplayItem = (props: {
 	highlightRightText?: string;
 	children?: ReactNode;
 	nameRight?: JSX.Element;
+	mediaReason?: UserToMediaReason[];
 }) => {
 	const colorScheme = useComputedColorScheme("dark");
 
@@ -480,13 +492,18 @@ export const BaseDisplayItem = (props: {
 			</Box>
 		);
 
+	const themeIconSurrounder = (idx: number, icon?: JSX.Element) => (
+		<ThemeIcon variant="transparent" size="sm" color="lime" key={idx}>
+			{icon}
+		</ThemeIcon>
+	);
+
 	return (
 		<Flex
 			key={`${props.bottomLeft}-${props.bottomRight}-${props.name}`}
 			align="center"
 			justify="center"
 			direction="column"
-			pos="relative"
 		>
 			{props.topLeft}
 			<SurroundingElement style={{ flex: "none" }} pos="relative">
@@ -510,7 +527,32 @@ export const BaseDisplayItem = (props: {
 						getInitials(props.name),
 					)}
 				/>
-				{props.topRight}
+				<Box pos="absolute" top={5} right={5}>
+					{props.topRight}
+				</Box>
+				{props.mediaReason ? (
+					<Group
+						style={blackBgStyles}
+						pos="absolute"
+						bottom={5}
+						left={5}
+						gap="xs"
+					>
+						{props.mediaReason
+							.map((r) =>
+								match(r)
+									.with(UserToMediaReason.Seen, () => (
+										<IconRosetteDiscountCheck />
+									))
+									.with(UserToMediaReason.Watchlist, () => (
+										<IconBookmarksFilled />
+									))
+									.otherwise(() => undefined),
+							)
+							.filter(Boolean)
+							.map((icon, idx) => themeIconSurrounder(idx, icon))}
+					</Group>
+				) : null}
 			</SurroundingElement>
 			<Flex w="100%" direction="column" px={{ base: 10, md: 3 }} py={4}>
 				<Flex justify="space-between" direction="row" w="100%">
@@ -563,8 +605,10 @@ export const MediaItemWithoutUpdateModal = (props: {
 	noHref?: boolean;
 	onClick?: (e: React.MouseEvent) => Promise<void>;
 	nameRight?: JSX.Element;
+	mediaReason?: UserToMediaReason[];
 }) => {
 	const navigate = useNavigate();
+	const id = props.item.identifier;
 
 	return (
 		<BaseDisplayItem
@@ -575,25 +619,19 @@ export const MediaItemWithoutUpdateModal = (props: {
 						? props.href
 						: match(props.entityLot)
 								.with(EntityLot.Media, undefined, null, () =>
-									$path("/media/item/:id", { id: props.item.identifier }),
+									$path("/media/item/:id", { id }),
 								)
 								.with(EntityLot.MediaGroup, () =>
-									$path("/media/groups/item/:id", {
-										id: props.item.identifier,
-									}),
+									$path("/media/groups/item/:id", { id }),
 								)
 								.with(EntityLot.Person, () =>
-									$path("/media/people/item/:id", {
-										id: props.item.identifier,
-									}),
+									$path("/media/people/item/:id", { id }),
 								)
 								.with(EntityLot.Exercise, () =>
-									$path("/fitness/exercises/item/:id", {
-										id: props.item.identifier,
-									}),
+									$path("/fitness/exercises/item/:id", { id }),
 								)
 								.with(EntityLot.Collection, () =>
-									$path("/collections/:id", { id: props.item.identifier }),
+									$path("/collections/:id", { id }),
 								)
 								.exhaustive()
 					: undefined
@@ -613,18 +651,10 @@ export const MediaItemWithoutUpdateModal = (props: {
 					/>
 				) : null
 			}
+			mediaReason={props.mediaReason}
 			topRight={
 				props.averageRating ? (
-					<Box
-						p={2}
-						pos="absolute"
-						top={5}
-						right={5}
-						style={{
-							backgroundColor: "rgba(0, 0, 0, 0.75)",
-							borderRadius: 3,
-						}}
-					>
+					<Box style={blackBgStyles}>
 						<Flex align="center" gap={4}>
 							<IconStarFilled size={12} style={{ color: "#EBE600FF" }} />
 							<Text c="white" size="xs" fw="bold" pr={4}>
@@ -656,11 +686,7 @@ export const MediaItemWithoutUpdateModal = (props: {
 						onClick={(e) => {
 							e.preventDefault();
 							navigate(
-								$path(
-									"/media/item/:id",
-									{ id: props.item.identifier },
-									{ openReviewModal: true },
-								),
+								$path("/media/item/:id", { id }, { openReviewModal: true }),
 							);
 						}}
 					>

apps/frontend/app/lib/hooks.ts

@@ -20,17 +20,17 @@ export function useGetMantineColor() {
 export function useSearchParam() {
 	const [searchParams, setSearchParams] = useSearchParams();
 
-	const setP = (key: string, value?: string | null) => {
+	const delP = (key: string) => {
 		setSearchParams((prev) => {
-			if (!value) delP(key);
-			else prev.set(key, value);
+			prev.delete(key);
 			return prev;
 		});
 	};
 
-	const delP = (key: string) => {
+	const setP = (key: string, value?: string | null) => {
 		setSearchParams((prev) => {
-			prev.delete(key);
+			if (!value) delP(key);
+			else prev.set(key, value);
 			return prev;
 		});
 	};

apps/frontend/app/routes/_dashboard.media.$action.$lot.tsx

@@ -397,6 +397,7 @@ export default function Page() {
 												publishYear: lm.data.publishYear?.toString(),
 											}}
 											averageRating={lm.averageRating ?? undefined}
+											mediaReason={lm.mediaReason}
 											lot={loaderData.lot}
 											href={$path("/media/item/:id", {
 												id: lm.data.identifier,

apps/landing/astro.config.mjs

@@ -1,12 +1,10 @@
 import sitemap from "@astrojs/sitemap";
 import tailwind from "@astrojs/tailwind";
-import { defineConfig } from "astro/config";
 import robotsTxt from "astro-robots-txt";
+import { defineConfig } from "astro/config";
 
 // https://astro.build/config
 export default defineConfig({
-	site: import.meta.env.DEV
-		? "http://localhost:4200"
-		: "https://ryot.io/",
+	site: import.meta.env.DEV ? "http://localhost:4200" : "https://ryot.io/",
 	integrations: [tailwind(), sitemap(), robotsTxt()],
 });

apps/landing/src/layouts/Layout.astro

@@ -4,7 +4,7 @@ import type { Meta } from "@/config/landing.interface";
 import "@fontsource-variable/rubik";
 
 interface Props {
-  meta: Meta;
+	meta: Meta;
 }
 
 const { meta } = Astro.props;

libs/database/src/migrations/m20240503_update_user_to_entity_to_recalculate.rs

@@ -0,0 +1,19 @@
+use sea_orm_migration::prelude::*;
+
+#[derive(DeriveMigrationName)]
+pub struct Migration;
+
+#[async_trait::async_trait]
+impl MigrationTrait for Migration {
+    async fn up(&self, manager: &SchemaManager) -> Result<(), DbErr> {
+        let db = manager.get_connection();
+        db.execute_unprepared(r#"update user_to_entity set needs_to_be_updated = true;"#)
+            .await?;
+
+        Ok(())
+    }
+
+    async fn down(&self, _manager: &SchemaManager) -> Result<(), DbErr> {
+        Ok(())
+    }
+}

libs/database/src/migrations/mod.rs

@@ -20,6 +20,7 @@ mod m20231219_create_metadata_relations;
 mod m20240415_is_v5_migration;
 mod m20240416_change_json_to_generic_json;
 mod m20240425_add_created_by_user_id_column_to_execise;
+mod m20240503_update_user_to_entity_to_recalculate;
 
 pub use m20230410_create_metadata::Metadata as AliasedMetadata;
 pub use m20230413_create_person::Person as AliasedPerson;
@@ -57,6 +58,7 @@ impl MigratorTrait for Migrator {
             Box::new(m20240415_is_v5_migration::Migration),
             Box::new(m20240416_change_json_to_generic_json::Migration),
             Box::new(m20240425_add_created_by_user_id_column_to_execise::Migration),
+            Box::new(m20240503_update_user_to_entity_to_recalculate::Migration),
         ]
     }
 }

libs/generated/src/graphql/backend/gql.ts

@@ -29,7 +29,7 @@ const documents = {
     "query MetadataGroupDetails($metadataGroupId: Int!) {\n  metadataGroupDetails(metadataGroupId: $metadataGroupId) {\n    details {\n      id\n      title\n      lot\n      source\n      displayImages\n      parts\n      isPartial\n    }\n    sourceUrl\n    contents {\n      ...PartialMetadataPart\n    }\n  }\n}": types.MetadataGroupDetailsDocument,
     "query MetadataGroupSearch($input: MetadataGroupSearchInput!) {\n  metadataGroupSearch(input: $input) {\n    details {\n      total\n      nextPage\n    }\n    items {\n      identifier\n      name\n      image\n      parts\n    }\n  }\n}": types.MetadataGroupSearchDocument,
     "query MetadataGroupsList($input: SearchInput!) {\n  metadataGroupsList(input: $input) {\n    details {\n      total\n      nextPage\n    }\n    items {\n      id\n      title\n      lot\n      parts\n      image\n    }\n  }\n}": types.MetadataGroupsListDocument,
-    "query MetadataList($input: MetadataListInput!) {\n  metadataList(input: $input) {\n    details {\n      total\n      nextPage\n    }\n    items {\n      averageRating\n      data {\n        ...MetadataSearchItemPart\n      }\n    }\n  }\n}": types.MetadataListDocument,
+    "query MetadataList($input: MetadataListInput!) {\n  metadataList(input: $input) {\n    details {\n      total\n      nextPage\n    }\n    items {\n      averageRating\n      mediaReason\n      data {\n        ...MetadataSearchItemPart\n      }\n    }\n  }\n}": types.MetadataListDocument,
     "query MetadataMainDetails($metadataId: Int!) {\n  metadataDetails(metadataId: $metadataId) {\n    title\n    lot\n    source\n    isNsfw\n    isPartial\n    sourceUrl\n    identifier\n    description\n    publishYear\n    publishDate\n    providerRating\n    productionStatus\n    originalLanguage\n    genres {\n      id\n      name\n    }\n    group {\n      id\n      name\n      part\n    }\n    assets {\n      images\n      videos {\n        videoId\n        source\n      }\n    }\n  }\n}": types.MetadataMainDetailsDocument,
     "query MetadataSearch($input: MetadataSearchInput!) {\n  metadataSearch(input: $input) {\n    details {\n      total\n      nextPage\n    }\n    items {\n      databaseId\n      hasInteracted\n      item {\n        identifier\n        title\n        image\n        publishYear\n      }\n    }\n  }\n}": types.MetadataSearchDocument,
     "query PeopleSearch($input: PeopleSearchInput!) {\n  peopleSearch(input: $input) {\n    details {\n      total\n      nextPage\n    }\n    items {\n      identifier\n      name\n      image\n      birthYear\n    }\n  }\n}": types.PeopleSearchDocument,
@@ -130,7 +130,7 @@ export function graphql(source: "query MetadataGroupsList($input: SearchInput!)
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "query MetadataList($input: MetadataListInput!) {\n  metadataList(input: $input) {\n    details {\n      total\n      nextPage\n    }\n    items {\n      averageRating\n      data {\n        ...MetadataSearchItemPart\n      }\n    }\n  }\n}"): (typeof documents)["query MetadataList($input: MetadataListInput!) {\n  metadataList(input: $input) {\n    details {\n      total\n      nextPage\n    }\n    items {\n      averageRating\n      data {\n        ...MetadataSearchItemPart\n      }\n    }\n  }\n}"];
+export function graphql(source: "query MetadataList($input: MetadataListInput!) {\n  metadataList(input: $input) {\n    details {\n      total\n      nextPage\n    }\n    items {\n      averageRating\n      mediaReason\n      data {\n        ...MetadataSearchItemPart\n      }\n    }\n  }\n}"): (typeof documents)["query MetadataList($input: MetadataListInput!) {\n  metadataList(input: $input) {\n    details {\n      total\n      nextPage\n    }\n    items {\n      averageRating\n      mediaReason\n      data {\n        ...MetadataSearchItemPart\n      }\n    }\n  }\n}"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */