Glow watched items in calendar with green

apps/frontend/app/components/common/entity-display.tsx

@@ -274,6 +274,7 @@ type BaseEntityDisplayItemCard = {
 	isDetailsLoading: boolean;
 	wasRecentlyConsumed?: boolean;
 	isPartialStatusActive?: boolean;
+	isCalendarEventWatched?: boolean;
 	consumeButtonIndicatorLabel?: string;
 	userToMediaReasons?: UserToMediaReason[];
 	onImageClickBehavior: [string, (() => Promise<void>)?];
@@ -328,13 +329,17 @@ const BaseEntityDisplayItemComponent = forwardRef<
 		() => ({
 			overflow: "hidden",
 			transition: "box-shadow 200ms ease",
-			boxShadow: shouldHighlightImage
+			boxShadow: props.isCalendarEventWatched
 				? mode === "dark"
-					? "0px 0px 4px 1px rgba(242, 183, 22, 1)"
-					: "0px 0px 8px 3px rgba(24, 142, 245, 1)"
-				: undefined,
+					? "0px 0px 4px 1px rgba(64, 192, 87, 1)"
+					: "0px 0px 8px 3px rgba(47, 158, 68, 1)"
+				: shouldHighlightImage
+					? mode === "dark"
+						? "0px 0px 4px 1px rgba(242, 183, 22, 1)"
+						: "0px 0px 8px 3px rgba(24, 142, 245, 1)"
+					: undefined,
 		}),
-		[mode, shouldHighlightImage],
+		[mode, shouldHighlightImage, props.isCalendarEventWatched],
 	);
 	const gradientBackgroundStyle = useMemo<MantineStyleProp>(
 		() => ({
@@ -432,7 +437,7 @@ const BaseEntityDisplayItemComponent = forwardRef<
 			style={cardStyle}
 			ref={viewportRef}
 			className={props.imageClassName}
-			withBorder={!shouldHighlightImage}
+			withBorder={!shouldHighlightImage && !props.isCalendarEventWatched}
 		>
 			{props.centerElement ? (
 				<>

apps/frontend/app/components/media/display-items.tsx

@@ -4,6 +4,8 @@ import {
 	EntityTranslationVariant,
 	MediaLot,
 	SeenState,
+	type SeenShowExtraInformationPartFragment,
+	type SeenPodcastExtraInformationPartFragment,
 	UserToMediaReason,
 } from "@ryot/generated/graphql/backend/graphql";
 import { changeCase, snakeCase } from "@ryot/ts-utils";
@@ -32,6 +34,8 @@ export const MetadataDisplayItem = (props: {
 	additionalInformation?: string;
 	shouldHighlightNameIfInteracted?: boolean;
 	onImageClickBehavior?: () => Promise<void>;
+	calendarEventShowInfo?: SeenShowExtraInformationPartFragment;
+	calendarEventPodcastInfo?: SeenPodcastExtraInformationPartFragment;
 }) => {
 	const { ref, inViewport } = useInViewport();
 
@@ -72,6 +76,31 @@ export const MetadataDisplayItem = (props: {
 		[UserToMediaReason.Finished, UserToMediaReason.Owned].includes(r),
 	);
 
+	const isCalendarEventWatched = useMemo(() => {
+		if (!userMetadataDetails) return false;
+		if (props.calendarEventShowInfo) {
+			const seasonProgress = userMetadataDetails.showProgress?.find(
+				(s) => s.seasonNumber === props.calendarEventShowInfo?.season,
+			);
+			if (!seasonProgress) return false;
+			const episodeProgress = seasonProgress.episodes.find(
+				(e) => e.episodeNumber === props.calendarEventShowInfo?.episode,
+			);
+			return (episodeProgress?.timesSeen ?? 0) > 0;
+		}
+		if (props.calendarEventPodcastInfo) {
+			const episodeProgress = userMetadataDetails.podcastProgress?.find(
+				(e) => e.episodeNumber === props.calendarEventPodcastInfo?.episode,
+			);
+			return (episodeProgress?.timesSeen ?? 0) > 0;
+		}
+		return false;
+	}, [
+		userMetadataDetails,
+		props.calendarEventShowInfo,
+		props.calendarEventPodcastInfo,
+	]);
+
 	const extraInformation = useMemo(() => {
 		if (!metadataDetails || !userMetadataDetails) return "";
 
@@ -113,6 +142,7 @@ export const MetadataDisplayItem = (props: {
 			centerElement={props.centerElement}
 			imageClassName={props.imageClassName}
 			isDetailsLoading={isMetadataDetailsLoading}
+			isCalendarEventWatched={isCalendarEventWatched}
 			wasRecentlyConsumed={isMetadataRecentlyConsumed}
 			isPartialStatusActive={isMetadataPartialStatusActive}
 			image={metadataImageTranslation || images.at(0)}

apps/frontend/app/routes/_dashboard.calendar.tsx

@@ -120,6 +120,8 @@ const CalendarEventMetadata = (props: {
 		<MetadataDisplayItem
 			metadataId={props.item.metadataId}
 			additionalInformation={additionalInformation}
+			calendarEventShowInfo={props.item.showExtraInformation ?? undefined}
+			calendarEventPodcastInfo={props.item.podcastExtraInformation ?? undefined}
 		/>
 	);
 };