Make diaplay items to actual hyperlinks (#1408)

* fix: Restore shouldHighlightNameIfInteracted prop in MediaSearchItem component

- Reintroduced the `shouldHighlightNameIfInteracted` prop in the `MediaSearchItem` component to ensure proper highlighting behavior when the item is interacted with.
- This change enhances the user experience by maintaining visual feedback during interactions.

* refactor: Update onImageClickBehavior prop to accept an array for enhanced flexibility

- Modified the `onImageClickBehavior` prop in multiple components to accept an array, allowing for a string URL and an optional click handler.
- This change improves the handling of image click behaviors, providing more versatility in component interactions.
- Updated relevant components including `BaseMediaDisplayItem`, `ExerciseDisplayItem`, `WorkoutDisplayItem`, and others to reflect this new structure.

* refactor: Simplify SurroundingElement implementation in BaseMediaDisplayItem

- Removed the SurroundingElement component and replaced it with a direct Anchor element in the BaseMediaDisplayItem component.
- This change enhances code clarity and reduces unnecessary abstraction, improving maintainability while preserving existing functionality.

Author: IgnisDa

apps/frontend/app/components/common.tsx

@@ -60,7 +60,6 @@ import {
 	getInitials,
 	humanizeDuration,
 	isNumber,
-	isString,
 	snakeCase,
 } from "@ryot/ts-utils";
 import {
@@ -361,7 +360,7 @@ export const BaseMediaDisplayItem = (props: {
 	highlightImage?: boolean;
 	innerRef?: Ref<HTMLDivElement>;
 	labels?: { right?: ReactNode; left?: ReactNode };
-	onImageClickBehavior: string | (() => Promise<void>);
+	onImageClickBehavior: [string, (() => Promise<void>)?];
 	imageOverlay?: {
 		topRight?: ReactNode;
 		topLeft?: ReactNode;
@@ -372,14 +371,6 @@ export const BaseMediaDisplayItem = (props: {
 	const coreDetails = useCoreDetails();
 	const userPreferences = useUserPreferences();
 	const gridPacking = userPreferences.general.gridPacking;
-	const SurroundingElement = (iProps: { children: ReactNode }) =>
-		isString(props.onImageClickBehavior) ? (
-			<Anchor component={Link} to={props.onImageClickBehavior}>
-				{iProps.children}
-			</Anchor>
-		) : (
-			<Box onClick={props.onImageClickBehavior}>{iProps.children}</Box>
-		);
 	const defaultOverlayProps = {
 		pos: "absolute",
 		style: { zIndex: 10, ...blackBgStyles },
@@ -388,7 +379,11 @@ export const BaseMediaDisplayItem = (props: {
 	return (
 		<Flex direction="column" ref={props.innerRef} justify="space-between">
 			<Box pos="relative" w="100%">
-				<SurroundingElement>
+				<Anchor
+					component={Link}
+					to={props.onImageClickBehavior[0]}
+					onClick={props.onImageClickBehavior[1]}
+				>
 					<Tooltip
 						position="top"
 						label={props.name}
@@ -440,7 +435,7 @@ export const BaseMediaDisplayItem = (props: {
 							) : null}
 						</Paper>
 					</Tooltip>
-				</SurroundingElement>
+				</Anchor>
 				{props.imageOverlay?.topLeft ? (
 					<Center top={5} left={5} {...defaultOverlayProps}>
 						{props.imageOverlay.topLeft}

apps/frontend/app/components/fitness.tsx

@@ -447,7 +447,7 @@ export const ExerciseDisplayItem = (props: {
 			imageUrl={images.at(0)}
 			name={exerciseDetails?.name}
 			isLoading={isExerciseDetailsLoading}
-			onImageClickBehavior={getExerciseDetailsPath(props.exerciseId)}
+			onImageClickBehavior={[getExerciseDetailsPath(props.exerciseId)]}
 			labels={{
 				left: isNumber(times)
 					? `${times} time${times > 1 ? "s" : ""}`
@@ -475,10 +475,12 @@ export const WorkoutDisplayItem = (props: {
 			name={workoutDetails?.details.name}
 			isLoading={isWorkoutDetailsLoading}
 			imageOverlay={{ topRight: props.topRight }}
-			onImageClickBehavior={$path("/fitness/:entity/:id", {
-				id: props.workoutId,
-				entity: "workouts",
-			})}
+			onImageClickBehavior={[
+				$path("/fitness/:entity/:id", {
+					entity: "workouts",
+					id: props.workoutId,
+				}),
+			]}
 			labels={{
 				left: dayjsLib(workoutDetails?.details.startTime).format("l"),
 				right: props.rightLabel,
@@ -501,10 +503,12 @@ export const WorkoutTemplateDisplayItem = (props: {
 			name={workoutTemplateDetails?.details.name}
 			isLoading={isWorkoutTemplateDetailsLoading}
 			imageOverlay={{ topRight: props.topRight }}
-			onImageClickBehavior={$path("/fitness/:entity/:id", {
-				id: props.workoutTemplateId,
-				entity: FitnessEntity.Templates,
-			})}
+			onImageClickBehavior={[
+				$path("/fitness/:entity/:id", {
+					id: props.workoutTemplateId,
+					entity: FitnessEntity.Templates,
+				}),
+			]}
 			labels={{
 				left: dayjsLib(workoutTemplateDetails?.details.createdOn).format("l"),
 				right: "Template",

apps/frontend/app/components/media.tsx

@@ -28,7 +28,7 @@ import {
 	IconStarFilled,
 } from "@tabler/icons-react";
 import { type ReactNode, useMemo } from "react";
-import { Form, Link, useNavigate } from "react-router";
+import { Form, Link } from "react-router";
 import { $path } from "safe-routes";
 import { match } from "ts-pattern";
 import { withQuery } from "ufo";
@@ -186,13 +186,12 @@ export const MetadataDisplayItem = (props: {
 	rightLabelLot?: boolean;
 	imageClassName?: string;
 	rightLabelHistory?: boolean;
-	onImageClickBehavior?: () => void;
 	shouldHighlightNameIfInteracted?: boolean;
+	onImageClickBehavior?: () => Promise<void>;
 }) => {
 	const [_m, setMetadataToUpdate, isMetadataToUpdateLoading] =
 		useMetadataProgressUpdate();
 	const { ref, inViewport } = useInViewport();
-	const navigate = useNavigate();
 
 	const { data: metadataDetails, isLoading: isMetadataDetailsLoading } =
 		useMetadataDetails(props.metadataId, inViewport);
@@ -265,10 +264,10 @@ export const MetadataDisplayItem = (props: {
 				props.shouldHighlightNameIfInteracted &&
 				userMetadataDetails?.hasInteracted
 			}
-			onImageClickBehavior={async () => {
-				props.onImageClickBehavior?.();
-				navigate($path("/media/item/:id", { id: props.metadataId }));
-			}}
+			onImageClickBehavior={[
+				$path("/media/item/:id", { id: props.metadataId }),
+				props.onImageClickBehavior,
+			]}
 			labels={
 				metadataDetails
 					? {
@@ -362,9 +361,9 @@ export const MetadataGroupDisplayItem = (props: {
 			name={metadataDetails?.details.title}
 			imageUrl={metadataDetails?.details.assets.remoteImages.at(0)}
 			highlightImage={userMetadataGroupDetails?.isRecentlyConsumed}
-			onImageClickBehavior={$path("/media/groups/item/:id", {
-				id: props.metadataGroupId,
-			})}
+			onImageClickBehavior={[
+				$path("/media/groups/item/:id", { id: props.metadataGroupId }),
+			]}
 			highlightName={
 				props.shouldHighlightNameIfInteracted &&
 				userMetadataGroupDetails?.hasInteracted
@@ -419,9 +418,9 @@ export const PersonDisplayItem = (props: {
 			isLoading={isPersonDetailsLoading}
 			highlightImage={userPersonDetails?.isRecentlyConsumed}
 			imageUrl={personDetails?.details.assets.remoteImages.at(0)}
-			onImageClickBehavior={$path("/media/people/item/:id", {
-				id: props.personId,
-			})}
+			onImageClickBehavior={[
+				$path("/media/people/item/:id", { id: props.personId }),
+			]}
 			highlightName={
 				props.shouldHighlightNameIfInteracted &&
 				userPersonDetails?.hasInteracted

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

@@ -549,13 +549,11 @@ const MediaSearchItem = (props: {
 	return (
 		<Box>
 			<MetadataDisplayItem
-				shouldHighlightNameIfInteracted
 				metadataId={props.item}
+				shouldHighlightNameIfInteracted
 				imageClassName={OnboardingTourStepTargets.GoToMoviesSectionAgain}
-				onImageClickBehavior={() => {
-					if (tourControlThree) {
-						advanceOnboardingTourStep();
-					}
+				onImageClickBehavior={async () => {
+					if (tourControlThree) advanceOnboardingTourStep();
 				}}
 				nameRight={
 					<Menu shadow="md">