feat(frontend): add tooltip to metadata reason

Author: IgnisDa

apps/frontend/app/components/media.tsx

@@ -69,11 +69,11 @@ import { confirmWrapper } from "~/components/confirmation";
 import {
 	clientGqlService,
 	dayjsLib,
+	getPartialMetadataDetailsQuery,
 	queryFactory,
 	redirectToQueryParam,
 } from "~/lib/generals";
 import {
-	getPartialMetadataDetailsQuery,
 	useConfirmSubmit,
 	useFallbackImageUrl,
 	useGetMantineColor,
@@ -559,10 +559,15 @@ export const MetadataDisplayItem = (props: {
 	);
 	const averageRating = userMetadataDetails?.averageRating;
 	const history = userMetadataDetails?.history || [];
-	const themeIconSurround = (idx: number, icon?: ReactNode) => (
-		<ThemeIcon variant="transparent" size="sm" color="cyan" key={idx}>
-			{icon}
-		</ThemeIcon>
+	const surroundReason = (
+		idx: number,
+		data: readonly [UserToMediaReason, ReactNode],
+	) => (
+		<Tooltip label={changeCase(data[0])}>
+			<ThemeIcon variant="transparent" size="sm" color="cyan" key={idx}>
+				{data[1]}
+			</ThemeIcon>
+		</Tooltip>
 	);
 	const reasons = userMetadataDetails?.mediaReason?.filter((r) =>
 		[
@@ -642,14 +647,21 @@ export const MetadataDisplayItem = (props: {
 							{reasons
 								.map((r) =>
 									match(r)
-										.with(UserToMediaReason.Finished, () => (
-											<IconRosetteDiscountCheck />
-										))
-										.with(UserToMediaReason.Watchlist, () => <IconBookmarks />)
-										.with(UserToMediaReason.Owned, () => <IconBackpack />)
+										.with(
+											UserToMediaReason.Finished,
+											() => [r, <IconRosetteDiscountCheck key={r} />] as const,
+										)
+										.with(
+											UserToMediaReason.Watchlist,
+											() => [r, <IconBookmarks key={r} />] as const,
+										)
+										.with(
+											UserToMediaReason.Owned,
+											() => [r, <IconBackpack key={r} />] as const,
+										)
 										.run(),
 								)
-								.map((icon, idx) => themeIconSurround(idx, icon))}
+								.map((data, idx) => surroundReason(idx, data))}
 						</Group>
 					) : null,
 				bottomRight: isMetadataToUpdateLoading ? (

apps/frontend/app/lib/generals.ts

@@ -6,7 +6,10 @@ import {
 	EntityLot,
 	MediaLot,
 	MediaSource,
+	MetadataDetailsDocument,
+	MetadataPartialDetailsDocument,
 	SetLot,
+	UserMetadataDetailsDocument,
 } from "@ryot/generated/graphql/backend/graphql";
 import {
 	IconBook,
@@ -19,7 +22,7 @@ import {
 	IconHeadphones,
 	IconMicrophone,
 } from "@tabler/icons-react";
-import { QueryClient } from "@tanstack/react-query";
+import { QueryClient, queryOptions, skipToken } from "@tanstack/react-query";
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
 import localizedFormat from "dayjs/plugin/localizedFormat";
@@ -300,3 +303,35 @@ export const convertEntityToIndividualId = (
 	const exerciseId = entityLot === EntityLot.Exercise ? entityId : undefined;
 	return { metadataId, metadataGroupId, personId, exerciseId };
 };
+
+export const getPartialMetadataDetailsQuery = (metadataId: string) =>
+	queryOptions({
+		queryKey: queryFactory.media.metadataPartialDetails(metadataId).queryKey,
+		queryFn: () =>
+			clientGqlService
+				.request(MetadataPartialDetailsDocument, { metadataId })
+				.then((data) => data.metadataPartialDetails),
+	});
+
+export const getMetadataDetailsQuery = (metadataId?: string | null) =>
+	queryOptions({
+		queryKey: queryFactory.media.metadataDetails(metadataId || "").queryKey,
+		queryFn: metadataId
+			? () =>
+					clientGqlService
+						.request(MetadataDetailsDocument, { metadataId })
+						.then((data) => data.metadataDetails)
+			: skipToken,
+		staleTime: dayjs.duration(1, "day").asMilliseconds(),
+	});
+
+export const getUserMetadataDetailsQuery = (metadataId?: string | null) =>
+	queryOptions({
+		queryKey: queryFactory.media.userMetadataDetails(metadataId || "").queryKey,
+		queryFn: metadataId
+			? () =>
+					clientGqlService
+						.request(UserMetadataDetailsDocument, { metadataId })
+						.then((data) => data.userMetadataDetails)
+			: skipToken,
+	});

apps/frontend/app/lib/hooks.ts

@@ -7,21 +7,15 @@ import {
 	useSearchParams,
 	useSubmit,
 } from "@remix-run/react";
-import {
-	MetadataDetailsDocument,
-	MetadataPartialDetailsDocument,
-	UserMetadataDetailsDocument,
-} from "@ryot/generated/graphql/backend/graphql";
 import type { EntityLot } from "@ryot/generated/graphql/backend/graphql";
-import { queryOptions, skipToken, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import Cookies from "js-cookie";
 import type { FormEvent } from "react";
 import {
 	CurrentWorkoutKey,
-	clientGqlService,
-	dayjsLib,
+	getMetadataDetailsQuery,
 	getStringAsciiValue,
-	queryFactory,
+	getUserMetadataDetailsQuery,
 } from "~/lib/generals";
 import { type InProgressWorkout, useCurrentWorkout } from "~/lib/state/fitness";
 import type { loader } from "~/routes/_dashboard";
@@ -130,42 +124,10 @@ export const useGetWorkoutStarter = () => {
 	return fn;
 };
 
-export const getPartialMetadataDetailsQuery = (metadataId: string) =>
-	queryOptions({
-		queryKey: queryFactory.media.metadataPartialDetails(metadataId).queryKey,
-		queryFn: () =>
-			clientGqlService
-				.request(MetadataPartialDetailsDocument, { metadataId })
-				.then((data) => data.metadataPartialDetails),
-	});
-
-export const getMetadataDetailsQuery = (metadataId?: string | null) =>
-	queryOptions({
-		queryKey: queryFactory.media.metadataDetails(metadataId || "").queryKey,
-		queryFn: metadataId
-			? () =>
-					clientGqlService
-						.request(MetadataDetailsDocument, { metadataId })
-						.then((data) => data.metadataDetails)
-			: skipToken,
-		staleTime: dayjsLib.duration(1, "day").asMilliseconds(),
-	});
-
 export const useMetadataDetails = (metadataId?: string | null) => {
 	return useQuery(getMetadataDetailsQuery(metadataId));
 };
 
-export const getUserMetadataDetailsQuery = (metadataId?: string | null) =>
-	queryOptions({
-		queryKey: queryFactory.media.userMetadataDetails(metadataId || "").queryKey,
-		queryFn: metadataId
-			? () =>
-					clientGqlService
-						.request(UserMetadataDetailsDocument, { metadataId })
-						.then((data) => data.userMetadataDetails)
-			: skipToken,
-	});
-
 export const useUserMetadataDetails = (metadataId?: string | null) => {
 	return useQuery(getUserMetadataDetailsQuery(metadataId));
 };

apps/frontend/app/lib/state/media.ts

@@ -7,11 +7,11 @@ import { atom, useAtom } from "jotai";
 import { useState } from "react";
 import type { DeepPartial } from "ts-essentials";
 import { match } from "ts-pattern";
-import { queryClient } from "~/lib/generals";
 import {
 	getMetadataDetailsQuery,
 	getUserMetadataDetailsQuery,
-} from "~/lib/hooks";
+	queryClient,
+} from "~/lib/generals";
 
 export type UpdateProgressData = {
 	metadataId: string;