+
+
{sidebar}
diff --git a/src/components/pages/feed/activity-item.tsx b/src/components/pages/feed/activity-item.tsx
index 257d9b6..b93dd0e 100644
--- a/src/components/pages/feed/activity-item.tsx
+++ b/src/components/pages/feed/activity-item.tsx
@@ -114,13 +114,18 @@ export function ActivityItem({ profile, item, onReact, isReacting = false }: fee
onClick={() => onReact?.(emoji, currentReaction)}
disabled={isReacting || !currentUserId}
aria-pressed={active}
- className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-sm transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed ${
+ className={`inline-flex items-center gap-1 rounded-full border px-2 py-1 text-sm transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed ${
active
? "border-primary bg-primary/10 text-primary"
: "border-border/50 hover:border-primary/50 hover:bg-muted"
}`}
>
- {emoji}
+
+ {emoji}
+
{count > 0 && {count}}
);
diff --git a/src/components/ui/image-zoom.tsx b/src/components/ui/image-zoom.tsx
index 3bf8e9d..b228682 100644
--- a/src/components/ui/image-zoom.tsx
+++ b/src/components/ui/image-zoom.tsx
@@ -30,11 +30,11 @@ export const ImageZoom = ({ className, backdropClassName, ...props }: ImageZoomP
classDialog={cn(
"[&::backdrop]:hidden",
"[&[open]]:fixed [&[open]]:m-0 [&[open]]:h-dvh [&[open]]:max-h-none [&[open]]:w-dvw [&[open]]:max-w-none [&[open]]:overflow-hidden [&[open]]:border-0 [&[open]]:bg-transparent [&[open]]:p-0",
- "[&_[data-rmiz-modal-overlay]]:absolute [&_[data-rmiz-modal-overlay]]:inset-0 [&_[data-rmiz-modal-overlay]]:transition-all",
+ "[&_[data-rmiz-modal-overlay]]:absolute [&_[data-rmiz-modal-overlay]]:inset-0 [&_[data-rmiz-modal-overlay]]:transition-all [&_[data-rmiz-modal-overlay]]:duration-300 [&_[data-rmiz-modal-overlay]]:ease-out",
'[&_[data-rmiz-modal-overlay="hidden"]]:bg-transparent',
'**:data-[rmiz-modal-overlay="visible"]:bg-transparent! [&_[data-rmiz-modal-overlay="visible"]]:backdrop-blur-md',
"[&_[data-rmiz-modal-content]]:relative [&_[data-rmiz-modal-content]]:size-full",
- "[&_[data-rmiz-modal-img]]:absolute [&_[data-rmiz-modal-img]]:origin-top-left [&_[data-rmiz-modal-img]]:cursor-zoom-out [&_[data-rmiz-modal-img]]:transition-transform",
+ "[&_[data-rmiz-modal-img]]:absolute [&_[data-rmiz-modal-img]]:origin-top-left [&_[data-rmiz-modal-img]]:cursor-zoom-out [&_[data-rmiz-modal-img]]:transition-transform [&_[data-rmiz-modal-img]]:duration-300 [&_[data-rmiz-modal-img]]:ease-out",
"motion-reduce:[&_[data-rmiz-modal-img]]:transition-none motion-reduce:[&_[data-rmiz-modal-overlay]]:transition-none",
backdropClassName,
)}
diff --git a/src/routes/anime/$slug.tsx b/src/routes/anime/$slug.tsx
index 5353b1c..4023950 100644
--- a/src/routes/anime/$slug.tsx
+++ b/src/routes/anime/$slug.tsx
@@ -22,6 +22,11 @@ import { ErrorComponent } from "@/components/shared/error.tsx";
import { LoadingDetails } from "@/components/shared/loadings/details.tsx";
import { EpisodicContentModal } from "@/components/shared/modals/episodic-content";
import { RefreshData } from "@/components/shared/modals/refresh-data";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { type ApiTypes, api, apiEndpoints } from "@/lib/api.ts";
import { useSession } from "@/lib/auth.ts";
@@ -54,6 +59,7 @@ function AnimeDetailsRoute() {
const { slug } = Route.useParams();
const { anime: loaderAnime } = Route.useLoaderData();
const { t } = useTranslation();
+ const [moreOpen, setMoreOpen] = useState(false);
const [mySeason, _setMySeason] = useState({
totalEpisodes: 12,
watchedEpisodes: [1, 2, 3, 4, 5],
@@ -109,6 +115,82 @@ function AnimeDetailsRoute() {
const session = useSession();
const isAuthenticated = !!session?.data?.session;
+ const userId = session?.data?.user?.id;
+ const [newListName, setNewListName] = useState("");
+
+ const listsQuery = useQuery>({
+ queryKey: ["animeContainingLists", anime?.id],
+ queryFn: () =>
+ api
+ .get(apiEndpoints.getListsContainingItem, {
+ params: { type: "Anime", animeId: anime?.id, itemsPerPage: 50 },
+ })
+ .then(({ data }) => data.lists),
+ enabled: !!anime?.id,
+ });
+
+ const userListsQuery = useQuery({
+ queryKey: ["animeLists", userId],
+ queryFn: () =>
+ api
+ .get(apiEndpoints.getListsByUserId(userId as string), {
+ params: { type: "Anime", itemsPerPage: 50 },
+ })
+ .then(({ data }) => data.lists.items),
+ enabled: isAuthenticated && !!userId,
+ });
+
+ const listStatusQuery = useQuery({
+ queryKey: ["animeListStatus", anime?.id, userId],
+ queryFn: () =>
+ api
+ .get(apiEndpoints.getListStatus, {
+ params: { type: "Anime", animeId: anime?.id },
+ })
+ .then(({ data }) => data.listIds),
+ enabled: isAuthenticated && !!userId && !!anime?.id,
+ });
+
+ const toggleListMutation = useMutation({
+ mutationFn: ({ listId, isMember }: { listId: string; isMember: boolean }) => {
+ const body = { type: "Anime", listId, userId, animeId: anime?.id };
+ return isMember
+ ? api.delete(apiEndpoints.listItem(listId), { data: body })
+ : api.post(apiEndpoints.listItem(listId), body);
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ["animeListStatus", anime?.id, userId] });
+ queryClient.invalidateQueries({ queryKey: ["animeContainingLists", anime?.id] });
+ },
+ onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+ });
+
+ const createAndAddListMutation = useMutation({
+ mutationFn: async (name: string) => {
+ await api.post(apiEndpoints.list, { name, userId, type: "Anime" });
+ const freshLists = await api
+ .get(apiEndpoints.getListsByUserId(userId as string), {
+ params: { type: "Anime", itemsPerPage: 50 },
+ })
+ .then(({ data }) => data.lists.items);
+ const newList = [...freshLists].reverse().find((l) => l.name === name);
+ if (!newList) throw new Error("List not found after creation");
+ await api.post(apiEndpoints.listItem(newList.id), {
+ type: "Anime",
+ listId: newList.id,
+ userId,
+ animeId: anime?.id,
+ });
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ["animeLists", userId] });
+ queryClient.invalidateQueries({ queryKey: ["animeListStatus", anime?.id, userId] });
+ queryClient.invalidateQueries({ queryKey: ["animeContainingLists", anime?.id] });
+ setNewListName("");
+ },
+ onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+ });
+
if (isLoading) return
-
- {anime.title} -
- -
- {!reviewsQuery.isLoading && !reviewsQuery.isError && reviews?.total >= 1 && (
-
-
-
-
-
+
+ )}
+ + {anime.title} +
+ +
+ {!reviewsQuery.isLoading && !reviewsQuery.isError && reviews?.total >= 1 && (
+
- )}
-
+
- {rating}
-
- ({reviews.total} {t("library:reviews")})
-
-
+
+ {rating}
+
+ ({reviews?.total ?? 0} {t("library:reviews")})
+
-
- {t("library:info")}
- {t("library:relations")}
- {!episodesQuery.isLoading && !episodesQuery.isError && episodes?.length > 0 && (
- {t("library:episode_other")}
- )}
- {t("library:cast")}
- {t("library:characters")}
- {!reviewsQuery.isLoading && !reviewsQuery.isError && reviews?.total >= 1 && (
-
- {t("library:reviews")} ({reviews.total})
+
+
-
+
+ {!episodesQuery.isLoading && !episodesQuery.isError && episodes?.length > 0 && (
+
+
+ {episodes
+ .sort((a: { malId: number }, b: { malId: number }) => a.malId - b.malId)
+ .map((episode: { malId: number; title: string; imageUrl: string }) => (
+
+
)}
-
- {!episodesQuery.isLoading && !episodesQuery.isError && episodes?.length > 0 && (
-
-
- {episodes
- .sort((a: { malId: number }, b: { malId: number }) => a.malId - b.malId)
- .map((episode: { malId: number; title: string; imageUrl: string }) => (
-
+ {isAuthenticated && (
+
+
+
+
+
+
+
+ )}
+ {!listsQuery.data || listsQuery.data.items.length === 0 ? (
+
+
+
+
+ {t("library:noLists")}
+ {t("library:noListsDescription")}
+
+
+ ) : (
+
+
+
+ {anime.cast?.map((cast: { role: string; name: string; imageUrl: string; positions: string[] }) => (
+ positions).join(", ") as string}
+ imageUrl={cast.imageUrl.replace(
+ "https://cdn.myanimelist.net/images/questionmark_23.gif?s=f7dcbc4a4603d18356d3dfef8abd655c",
+ "",
+ )}
+ />
+ ))}
- )}
-
-
- {!reviewsQuery.isLoading && !reviewsQuery.isError && reviews?.total >= 1 && (
-
-
+
+ {anime.characters?.map((character: { name: string; imageUrl: string }) => (
+
+
+
+
+ >({
+ queryKey: ["bookContainingLists", book?.id],
+ queryFn: () =>
+ api
+ .get(apiEndpoints.getListsContainingItem, {
+ params: { type: "Book", bookId: book?.id, itemsPerPage: 50 },
+ })
+ .then(({ data }) => data.lists),
+ enabled: !!book?.id,
+ });
+
+ const userListsQuery = useQuery({
+ queryKey: ["bookLists", userId],
+ queryFn: () =>
+ api
+ .get(apiEndpoints.getListsByUserId(userId as string), {
+ params: { type: "Book", itemsPerPage: 50 },
+ })
+ .then(({ data }) => data.lists.items),
+ enabled: isAuthenticated && !!userId,
+ });
+
+ const listStatusQuery = useQuery({
+ queryKey: ["bookListStatus", book?.id, userId],
+ queryFn: () =>
+ api
+ .get(apiEndpoints.getListStatus, {
+ params: { type: "Book", bookId: book?.id },
+ })
+ .then(({ data }) => data.listIds),
+ enabled: isAuthenticated && !!userId && !!book?.id,
+ });
+
+ const toggleListMutation = useMutation({
+ mutationFn: ({ listId, isMember }: { listId: string; isMember: boolean }) => {
+ const body = { type: "Book", listId, userId, bookId: book?.id };
+ return isMember
+ ? api.delete(apiEndpoints.listItem(listId), { data: body })
+ : api.post(apiEndpoints.listItem(listId), body);
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ["bookListStatus", book?.id, userId] });
+ queryClient.invalidateQueries({ queryKey: ["bookContainingLists", book?.id] });
+ },
+ onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+ });
+
+ const createAndAddListMutation = useMutation({
+ mutationFn: async (name: string) => {
+ await api.post(apiEndpoints.list, { name, userId, type: "Book" });
+ const freshLists = await api
+ .get(apiEndpoints.getListsByUserId(userId as string), {
+ params: { type: "Book", itemsPerPage: 50 },
+ })
+ .then(({ data }) => data.lists.items);
+ const newList = [...freshLists].reverse().find((l) => l.name === name);
+ if (!newList) throw new Error("List not found after creation");
+ await api.post(apiEndpoints.listItem(newList.id), { type: "Book", listId: newList.id, userId, bookId: book?.id });
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ["bookLists", userId] });
+ queryClient.invalidateQueries({ queryKey: ["bookListStatus", book?.id, userId] });
+ queryClient.invalidateQueries({ queryKey: ["bookContainingLists", book?.id] });
+ setNewListName("");
+ },
+ onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+ });
+
if (isLoading || reviewsData.isLoading) return
-
+
+ {t("library:info")}
+ {!episodesQuery.isLoading && !episodesQuery.isError && episodes?.length > 0 && (
+ {t("library:episode_other")}
+ )}
+ {t("library:cast")}
+ {t("library:characters")}
+
+ {t("library:lists")} ({listsQuery.data?.total ?? 0})
- )}
- {t("library:lists")} (30)
-
-
-
- getGenreLabel(t, g)} />
+
+ {t("library:genres")}
-
+ getGenreLabel(t, g)} />
+
- {anime.synopsis}
+{t("library:genres")}
+
-
+ {t("library:synopsis")}
-{anime.synopsis}
-
+
+ {anime.type && (
+
+
- {t("library:animeCharacteristics")}
+
-
- {anime.type && (
-
-
+ {anime.relations?.nodes?.length > 0 || anime.relations?.edges?.length > 0 ? (
+ {t("library:animeCharacteristics")}
-
+
+ ) : null}
- {isAuthenticated && {t("library:relations")}
+
-
+ {isAuthenticated && {t("library:communityStatistics")}
-
+
- {anime.trailer.embedUrl && (
-
+ {anime.trailer.embedUrl && (
+
+ )}
+ {t("library:communityStatistics")}
+
+ setNewListName(e.target.value)}
+ placeholder={t("feed:newList")}
+ className="h-7 text-sm"
+ onKeyDown={(e) => {
+ if (e.key === "Enter" && newListName.trim()) {
+ createAndAddListMutation.mutate(newListName.trim());
+ }
+ }}
+ />
+
+
+
+ {userListsQuery.data?.map((list) => {
+ const isMember = listStatusQuery.data?.includes(list.id) ?? false;
+ return (
+
+ );
+ })}
+ {(!userListsQuery.data || userListsQuery.data.length === 0) && (
+
+ {t("library:noLists")}
)} - /> +
+ {listsQuery.data.items.map((list) => (
+
+ )}
+
+
+
+
+
+ {t("library:noReviews")}
+ {t("library:noReviewsDescription")}
+
+
)}
-
-
-
-
- {anime.cast?.map((cast: { role: string; name: string; imageUrl: string; positions: string[] }) => (
- positions).join(", ") as string}
- imageUrl={cast.imageUrl.replace(
- "https://cdn.myanimelist.net/images/questionmark_23.gif?s=f7dcbc4a4603d18356d3dfef8abd655c",
- "",
- )}
- />
- ))}
-
-
-
-
- {anime.characters?.map((character: { name: string; imageUrl: string }) => (
-
-
-
-
+
+
);
}
diff --git a/src/routes/book/$slug.tsx b/src/routes/book/$slug.tsx
index c8dd42b..6924d02 100644
--- a/src/routes/book/$slug.tsx
+++ b/src/routes/book/$slug.tsx
@@ -1,6 +1,7 @@
import { Icon } from "@iconify/react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { createFileRoute, Link } from "@tanstack/react-router";
+import { useState } from "react";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";
import { Grid } from "@/components/layouts/grid.tsx";
@@ -16,6 +17,11 @@ import { ErrorComponent } from "@/components/shared/error.tsx";
import { LoadingDetails } from "@/components/shared/loadings/details.tsx";
import { BookModal } from "@/components/shared/modals/book";
import { RefreshData } from "@/components/shared/modals/refresh-data";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { type ApiTypes, api, apiEndpoints } from "@/lib/api.ts";
import { useSession } from "@/lib/auth.ts";
@@ -81,6 +87,78 @@ function BookDetailsRoute() {
const session = useSession();
const isAuthenticated = !!session?.data?.session;
+ const userId = session?.data?.user?.id;
+ const [moreOpen, setMoreOpen] = useState(false);
+ const [newListName, setNewListName] = useState("");
+
+ const listsQuery = useQuery
+
+ {!reviewsQuery.isLoading && !reviewsQuery.isError && (reviews?.total ?? 0) >= 1 ? (
+ + {t("library:reviews")} ({reviews?.total ?? 0}) +
+ {isAuthenticated && ( + + )} +
-
- - {book.title} -
-
-
-
-
-
-
- {!reviewsData.isLoading && !reviewsData.isError && reviews.total >= 1 && (
-
-
-
-
- )}
-
- {book.numberOfPages && (
-
-
- {rating}
-
- ({reviews.total} {t("library:reviews")})
-
-
-
+
-
- + {book.title} +
+
+
- )}
-
-
- {t("library:info")}
- {reviews.total >= 1 && (
-
- {t("library:reviews")} ({reviews.total})
-
- )}
- {t("library:lists")} (30)
-
+ ))}
-
-
{t("library:genres")}
-
-
- Fantasia
-
-
- Aventura
-
-
- Épico
-
-
- Magia
+
-
+
+
+
+ {!reviewsData.isLoading && !reviewsData.isError && reviews.total >= 1 && (
+
+ )}
+
+
+ )}
+
+ {book.numberOfPages && (
+
+
+ {rating}
+
+ ({reviews?.total ?? 0} {t("library:reviews")})
-
- Drama
+
+
-
-
+
+
{t("library:synopsis")}
-{book.description}
+
+
+ {t("library:info")}
+
+ {t("library:lists")} ({listsQuery.data?.total ?? 0})
+
+
+
+
- {book.description}
+{t("library:genres")}
+
+
+ Fantasia
+
+
+ Aventura
+
+
+ Épico
+
+
+ Magia
+
+
+ Drama
+
+
+
-
-
-
+ {t("library:bookCharacteristics")}
-
+
+
+
- {t("library:bookCharacteristics")}
+
-
+ {t("library:communityStatistics")}
-
+
- {t("library:communityStatistics")}
+
-
-
+
+ {isAuthenticated && (
+
+
+
+
+
+
+
+ )}
+ {!listsQuery.data || listsQuery.data.items.length === 0 ? (
+
+
+
+
+ {t("library:noLists")}
+ {t("library:noListsDescription")}
+
+
+ ) : (
+
+
+
+
+ >({
+ queryKey: ["gameContainingLists", game?.id],
+ queryFn: () =>
+ api
+ .get(apiEndpoints.getListsContainingItem, {
+ params: { type: "Game", gameId: game?.id, itemsPerPage: 50 },
+ })
+ .then(({ data }) => data.lists),
+ enabled: !!game?.id,
+ });
+
+ const userListsQuery = useQuery({
+ queryKey: ["gameLists", userId],
+ queryFn: () =>
+ api
+ .get(apiEndpoints.getListsByUserId(userId as string), {
+ params: { type: "Game", itemsPerPage: 50 },
+ })
+ .then(({ data }) => data.lists.items),
+ enabled: isAuthenticated && !!userId,
+ });
+
+ const listStatusQuery = useQuery({
+ queryKey: ["gameListStatus", game?.id, userId],
+ queryFn: () =>
+ api
+ .get(apiEndpoints.getListStatus, {
+ params: { type: "Game", gameId: game?.id },
+ })
+ .then(({ data }) => data.listIds),
+ enabled: isAuthenticated && !!userId && !!game?.id,
+ });
+
+ const toggleListMutation = useMutation({
+ mutationFn: ({ listId, isMember }: { listId: string; isMember: boolean }) => {
+ const body = { type: "Game", listId, userId, gameId: game?.id };
+ return isMember
+ ? api.delete(apiEndpoints.listItem(listId), { data: body })
+ : api.post(apiEndpoints.listItem(listId), body);
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ["gameListStatus", game?.id, userId] });
+ queryClient.invalidateQueries({ queryKey: ["gameContainingLists", game?.id] });
+ },
+ onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+ });
+
+ const createAndAddListMutation = useMutation({
+ mutationFn: async (name: string) => {
+ await api.post(apiEndpoints.list, { name, userId, type: "Game" });
+ const freshLists = await api
+ .get(apiEndpoints.getListsByUserId(userId as string), {
+ params: { type: "Game", itemsPerPage: 50 },
+ })
+ .then(({ data }) => data.lists.items);
+ const newList = [...freshLists].reverse().find((l) => l.name === name);
+ if (!newList) throw new Error("List not found after creation");
+ await api.post(apiEndpoints.listItem(newList.id), { type: "Game", listId: newList.id, userId, gameId: game?.id });
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ["gameLists", userId] });
+ queryClient.invalidateQueries({ queryKey: ["gameListStatus", game?.id, userId] });
+ queryClient.invalidateQueries({ queryKey: ["gameContainingLists", game?.id] });
+ setNewListName("");
+ },
+ onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+ });
+
if (isLoading || reviewsQuery.isLoading) return
-
{t("library:contentWarnings")}
-
-
- Violência
-
-
- Morte
-
-
- Linguagem Forte
-
-
- Vergonha Corporal
-
-
- Disablismo
-
+
-
- {!reviewsData.isLoading && !reviewsData.isError && reviews.total >= 1 && (
-
+
- {t("library:contentWarnings")}
+
+
+ Violência
+
+
+ Morte
+
+
+ Linguagem Forte
+
+
+ Vergonha Corporal
+
+
+ Disablismo
+
+
+ setNewListName(e.target.value)}
+ placeholder={t("feed:newList")}
+ className="h-7 text-sm"
+ onKeyDown={(e) => {
+ if (e.key === "Enter" && newListName.trim()) {
+ createAndAddListMutation.mutate(newListName.trim());
+ }
+ }}
+ />
+
+
+
+ {userListsQuery.data?.map((list) => {
+ const isMember = listStatusQuery.data?.includes(list.id) ?? false;
+ return (
+
+ );
+ })}
+ {(!userListsQuery.data || userListsQuery.data.length === 0) && (
+
+ {t("library:noLists")}
+ )} +
+ {listsQuery.data.items.map((list) => (
+
+ )}
+
+
+
+
+
+ {t("library:noReviews")}
+ {t("library:noReviewsDescription")}
+
+
)}
-
-
-
-
+
+
);
}
diff --git a/src/routes/game/$slug.tsx b/src/routes/game/$slug.tsx
index 1f7dddd..3f3d786 100644
--- a/src/routes/game/$slug.tsx
+++ b/src/routes/game/$slug.tsx
@@ -1,7 +1,9 @@
import { Icon } from "@iconify/react";
import { useMutation, useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
import { createFileRoute, Link } from "@tanstack/react-router";
+import { Image } from "@unpic/react";
import { t } from "i18next";
+import { useState } from "react";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";
import { Grid } from "@/components/layouts/grid.tsx";
@@ -19,8 +21,13 @@ import { ErrorComponent } from "@/components/shared/error.tsx";
import { LoadingDetails } from "@/components/shared/loadings/details.tsx";
import { GameModal } from "@/components/shared/modals/game";
import { RefreshData } from "@/components/shared/modals/refresh-data";
+import { Button } from "@/components/ui/button";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
import { ImageZoom } from "@/components/ui/image-zoom";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { type ApiTypes, api, apiEndpoints } from "@/lib/api.ts";
import { useSession } from "@/lib/auth.ts";
@@ -173,6 +180,7 @@ function GameDetailsRoute() {
const rating = 4.2;
const { t } = useTranslation();
+ const [moreOpen, setMoreOpen] = useState(false);
const { data, isLoading, isError } = useQuery({
queryKey: ["game", slug],
@@ -216,6 +224,77 @@ function GameDetailsRoute() {
const session = useSession();
const isAuthenticated = !!session?.data?.session;
+ const userId = session?.data?.user?.id;
+ const [newListName, setNewListName] = useState("");
+
+ const listsQuery = useQuery
+
+ {!reviewsData.isLoading && !reviewsData.isError && reviews.total >= 1 ? (
+ + {t("library:reviews")} ({reviews.total}) +
+ {isAuthenticated && ( + + )} +
-
- - {game.name} -
- {game?.franchises[0]?.name && ( -
-
- )}
-
-
- {reviews?.total >= 1 && (
-
-
-
-
+
-
-
- {rating}
-
- ({reviews?.total} {t("library:reviews")})
-
+ <>
+ + {game.name} +
+ {game?.franchises[0]?.name && ( +
+
)}
-
-
- {t("library:info")}
- {(game.parentGame?.id ||
- (game.prequels?.length ?? 0) > 0 ||
- (game.expandedGames?.length ?? 0) > 0 ||
- (game.sequels?.length ?? 0) > 0 ||
- (game.dlcs?.length ?? 0) > 0 ||
- (game.expansions?.length ?? 0) > 0 ||
- (game.ports?.length ?? 0) > 0 ||
- (game.remakes?.length ?? 0) > 0 ||
- (game.remasters?.length ?? 0) > 0 ||
- (game.bundles?.length ?? 0) > 0) && {t("library:relations")} }
- {reviews?.total >= 1 && (
-
- {t("library:reviews")} ({reviews?.total})
-
- )}
- {t("library:lists")} (30)
- {!screenshotsQuery.isLoading && !screenshotsQuery.isError && (
-
- {t("library:screenshots")} ({screenshots?.length ?? 0})
-
- )}
-
-
-
- g.name)}
- getLabel={(g) => getGenreLabel(t, g)}
- />
-
- {t("library:genres")}
-
-
{t("library:synopsis")}
-
-
+
{game.summary}
+
+ {reviews?.total >= 1 && (
+
+
+
+ )}
+
+
+ {rating}
+
+ ({reviews?.total} {t("library:reviews")})
+
+
+ {t("library:info")}
+
+ {t("library:lists")} ({listsQuery.data?.total ?? 0})
+
+ {!screenshotsQuery.isLoading && !screenshotsQuery.isError && (
+
+ {t("library:screenshots")} ({screenshots?.length ?? 0})
+
+ )}
+
-
-
-
-
- {game.videos.map((video: { checksum: string; videoId: string; name: string }) => (
-
-
-
- ))}
- {game.screenshots.map((screenshot: { checksum: string; imageId: string }) => (
-
- 
-
- ))}
-
-
-
-
+ {(() => {
+ const { nodes, edges } = buildRelationsData(game);
+ if (edges.length === 0) return null;
+ return (
+
+
+ {game.videos.map((video: { checksum: string; videoId: string; name: string }) => (
+
+
+ ))}
+ {game.screenshots.map((screenshot: { checksum: string; imageId: string }) => (
+
+
+ ))}
+
+
+
+
+ {isAuthenticated && (
+
+
+
+
+
+
+
+ )}
+ {!listsQuery.data || listsQuery.data.items.length === 0 ? (
+
+
+
+
+ {t("library:noLists")}
+ {t("library:noListsDescription")}
+
+
+ ) : (
+
+ {!screenshotsQuery.isLoading && !screenshotsQuery.isError && (
+
+
+ )}
+
+
+
+ >({
+ queryKey: ["mangaContainingLists", manga?.id],
+ queryFn: () =>
+ api
+ .get(apiEndpoints.getListsContainingItem, {
+ params: { type: "Manga", mangaId: manga?.id, itemsPerPage: 50 },
+ })
+ .then(({ data }) => data.lists),
+ enabled: !!manga?.id,
+ });
+
+ const userListsQuery = useQuery({
+ queryKey: ["mangaLists", userId],
+ queryFn: () =>
+ api
+ .get(apiEndpoints.getListsByUserId(userId as string), {
+ params: { type: "Manga", itemsPerPage: 50 },
+ })
+ .then(({ data }) => data.lists.items),
+ enabled: isAuthenticated && !!userId,
+ });
+
+ const listStatusQuery = useQuery({
+ queryKey: ["mangaListStatus", manga?.id, userId],
+ queryFn: () =>
+ api
+ .get(apiEndpoints.getListStatus, {
+ params: { type: "Manga", mangaId: manga?.id },
+ })
+ .then(({ data }) => data.listIds),
+ enabled: isAuthenticated && !!userId && !!manga?.id,
+ });
+
+ const toggleListMutation = useMutation({
+ mutationFn: ({ listId, isMember }: { listId: string; isMember: boolean }) => {
+ const body = { type: "Manga", listId, userId, mangaId: manga?.id };
+ return isMember
+ ? api.delete(apiEndpoints.listItem(listId), { data: body })
+ : api.post(apiEndpoints.listItem(listId), body);
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ["mangaListStatus", manga?.id, userId] });
+ queryClient.invalidateQueries({ queryKey: ["mangaContainingLists", manga?.id] });
+ },
+ onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+ });
+
+ const createAndAddListMutation = useMutation({
+ mutationFn: async (name: string) => {
+ await api.post(apiEndpoints.list, { name, userId, type: "Manga" });
+ const freshLists = await api
+ .get(apiEndpoints.getListsByUserId(userId as string), {
+ params: { type: "Manga", itemsPerPage: 50 },
+ })
+ .then(({ data }) => data.lists.items);
+ const newList = [...freshLists].reverse().find((l) => l.name === name);
+ if (!newList) throw new Error("List not found after creation");
+ await api.post(apiEndpoints.listItem(newList.id), {
+ type: "Manga",
+ listId: newList.id,
+ userId,
+ mangaId: manga?.id,
+ });
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ["mangaLists", userId] });
+ queryClient.invalidateQueries({ queryKey: ["mangaListStatus", manga?.id, userId] });
+ queryClient.invalidateQueries({ queryKey: ["mangaContainingLists", manga?.id] });
+ setNewListName("");
+ },
+ onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+ });
+
if (isLoading || reviewsData.isLoading) return
-
+
{t("library:gameCharacteristics")}
-
-
+
-
+ g.name)}
+ getLabel={(g) => getGenreLabel(t, g)}
/>
-
+
+ {game.summary}
+{t("library:genres")}
+
+
- {t("library:gameCharacteristics")}
+
-
- {t("library:communityStatistics")}
-
+
+ );
+ })()}
+
+ {t("library:relations")}
+
+
+ {t("library:communityStatistics")}
+
+
+
+
+
+
+
+
+
+ setNewListName(e.target.value)}
+ placeholder={t("feed:newList")}
+ className="h-7 text-sm"
+ onKeyDown={(e) => {
+ if (e.key === "Enter" && newListName.trim()) {
+ createAndAddListMutation.mutate(newListName.trim());
+ }
+ }}
+ />
+
+
+
+ {userListsQuery.data?.map((list) => {
+ const isMember = listStatusQuery.data?.includes(list.id) ?? false;
+ return (
+
+ );
+ })}
+ {(!userListsQuery.data || userListsQuery.data.length === 0) && (
+
+ {t("library:noLists")}
+ )} +
+ {listsQuery.data.items.map((list) => (
+
+ )}
+
+ {screenshots?.map((screenshot: { checksum: string; imageId: string }) => (
+
+
+
+ ))}
+
+
+
-
-
- {(() => {
- const { nodes, edges } = buildRelationsData(game);
- return
- {!screenshotsQuery.isLoading && !screenshotsQuery.isError && (
-
-
+ ) : (
+
+
+
+
+ {t("library:noReviews")}
+ {t("library:noReviewsDescription")}
+
+
)}
-
-
+
+
);
}
diff --git a/src/routes/manga/$slug.tsx b/src/routes/manga/$slug.tsx
index 58fab2f..1cad054 100644
--- a/src/routes/manga/$slug.tsx
+++ b/src/routes/manga/$slug.tsx
@@ -1,7 +1,7 @@
import { Icon } from "@iconify/react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { createFileRoute, Link } from "@tanstack/react-router";
-import type { ReactNode } from "react";
+import { type ReactNode, useState } from "react";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";
import { Grid } from "@/components/layouts/grid.tsx";
@@ -20,6 +20,11 @@ import { ErrorComponent } from "@/components/shared/error.tsx";
import { LoadingDetails } from "@/components/shared/loadings/details.tsx";
import { MangaModal } from "@/components/shared/modals/manga";
import { RefreshData } from "@/components/shared/modals/refresh-data";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { type ApiTypes, api, apiEndpoints } from "@/lib/api.ts";
import { useSession } from "@/lib/auth.ts";
@@ -86,6 +91,83 @@ function MangaDetailsRoute() {
const session = useSession();
const isAuthenticated = !!session?.data?.session;
+ const userId = session?.data?.user?.id;
+ const [moreOpen, setMoreOpen] = useState(false);
+ const [newListName, setNewListName] = useState("");
+
+ const listsQuery = useQuery
+
+ {(reviews?.total ?? 0) >= 1 ? (
+ {t("library:reviews")} ({reviews?.total ?? 0}) +
+ {isAuthenticated && ( + + )} +
-
-
- {screenshots?.map((screenshot: { checksum: string; imageId: string }) => (
-
-
-
- ))}
-
- - {manga.title} -
+ <> ++ {manga.title} +
-
- {reviews.total >= 1 && (
-
-
-
-
-
-
-
+ {reviews.total >= 1 && (
+
- )}
-
+
- {rating}
-
- ({reviews.total} {t("library:reviews")})
-
-
+
+ {rating}
+
+ ({reviews?.total ?? 0} {t("library:reviews")})
+
-
- {t("library:info")}
- {t("library:relations")}
- {t("library:characters")}
- {reviews.total >= 1 && (
-
- {t("library:reviews")} ({reviews.total})
-
- )}
- {t("library:lists")} (30)
-
+ )}
-
- getGenreLabel(t, g)} />
-
- {t("library:genres")}
-
-
+
+
+
+
-
-
-
+ ({
+ queryKey: ["movieLists", userId],
+ queryFn: () =>
+ api
+ .get(apiEndpoints.getListsByUserId(userId as string), {
+ params: { type: "Movie", itemsPerPage: 50 },
+ })
+ .then(({ data }) => data.lists.items),
+ enabled: isAuthenticated && !!userId,
+ });
+
+ const listStatusQuery = useQuery({
+ queryKey: ["movieListStatus", movie?.id, userId],
+ queryFn: () =>
+ api
+ .get(apiEndpoints.getListStatus, {
+ params: { type: "Movie", movieId: movie?.id },
+ })
+ .then(({ data }) => data.listIds),
+ enabled: isAuthenticated && !!userId && !!movie?.id,
+ });
+
+ const toggleListMutation = useMutation({
+ mutationFn: ({ listId, isMember }: { listId: string; isMember: boolean }) => {
+ const body = { type: "Movie", listId, userId, movieId: movie?.id };
+ return isMember
+ ? api.delete(apiEndpoints.listItem(listId), { data: body })
+ : api.post(apiEndpoints.listItem(listId), body);
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ["movieListStatus", movie?.id, userId] });
+ queryClient.invalidateQueries({ queryKey: ["movieContainingLists", movie?.id] });
+ queryClient.invalidateQueries({ queryKey: ["movie"] });
+ },
+ onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+ });
+
+ const createAndAddListMutation = useMutation({
+ mutationFn: async (name: string) => {
+ await api.post(apiEndpoints.list, { name, userId, type: "Movie" });
+ const freshLists = await api
+ .get(apiEndpoints.getListsByUserId(userId as string), {
+ params: { type: "Movie", itemsPerPage: 50 },
+ })
+ .then(({ data }) => data.lists.items);
+ const newList = [...freshLists].reverse().find((l) => l.name === name);
+ if (!newList) throw new Error("List not found after creation");
+ await api.post(apiEndpoints.listItem(newList.id), {
+ type: "Movie",
+ listId: newList.id,
+ userId,
+ movieId: movie?.id,
+ });
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ["movieLists", userId] });
+ queryClient.invalidateQueries({ queryKey: ["movieListStatus", movie?.id, userId] });
+ queryClient.invalidateQueries({ queryKey: ["movieContainingLists", movie?.id] });
+ setNewListName("");
+ },
+ onError: () => toast.error(t("api:INTERNAL_SERVER_ERROR")),
+ });
+
const progressQuery = useQuery({
queryKey: ["movieProgress", movie?.id, userId],
queryFn: () =>
@@ -328,12 +397,13 @@ function MovieDetailsRoute() {
);
return (
-
-
+
{t("library:synopsis")}
-{manga.synopsis}
+
+
+ {t("library:info")}
+ {t("library:characters")}
+
+ {t("library:lists")} ({listsQuery.data?.total ?? 0})
+
+
+
+ getGenreLabel(t, g)} />
+
- {manga.synopsis}
+{t("library:genres")}
+
-
- {manga.type && (
-
+ {isAuthenticated && (
+
+
+
+
+
+
+
+ )}
+ {!listsQuery.data || listsQuery.data.items.length === 0 ? (
+
+
+
+
+ {t("library:noLists")}
+ {t("library:noListsDescription")}
+
+
+ ) : (
+
+
+
+ {manga.characters?.map((character: { name: string; imageUrl: string }) => (
+
-
+ {t("library:mangaCharacteristics")}
-
+
+ {manga.type && (
+
+
+
+ {manga.relations?.nodes?.length > 0 || manga.relations?.edges?.length > 0 ? (
+ {t("library:mangaCharacteristics")}
+
+
+ ) : null}
+
+ {t("library:relations")}
+
+
+
+ {t("library:communityStatistics")}
+
+ setNewListName(e.target.value)}
+ placeholder={t("feed:newList")}
+ className="h-7 text-sm"
+ onKeyDown={(e) => {
+ if (e.key === "Enter" && newListName.trim()) {
+ createAndAddListMutation.mutate(newListName.trim());
+ }
+ }}
+ />
+
+
+
+ {userListsQuery.data?.map((list) => {
+ const isMember = listStatusQuery.data?.includes(list.id) ?? false;
+ return (
+
+ );
+ })}
+ {(!userListsQuery.data || userListsQuery.data.length === 0) && (
+
+ {t("library:noLists")}
+ )} +
+ {listsQuery.data.items.map((list) => (
+
+ )}
+
-
-
- {t("library:communityStatistics")}
-
+
-
-
-
- {manga.characters?.map((character: { name: string; imageUrl: string }) => (
-
-
-
-
+ ) : (
+
+
+
+
+ {t("library:noReviews")}
+ {t("library:noReviewsDescription")}
+
+
+ )}
+
+
);
}
diff --git a/src/routes/movie/$slug.tsx b/src/routes/movie/$slug.tsx
index 881c7f2..b32ca3f 100644
--- a/src/routes/movie/$slug.tsx
+++ b/src/routes/movie/$slug.tsx
@@ -22,8 +22,13 @@ import { LoadingDetails } from "@/components/shared/loadings/details.tsx";
import { MovieModal } from "@/components/shared/modals/movie";
import { RefreshData } from "@/components/shared/modals/refresh-data";
import { StarRating } from "@/components/shared/star-rating";
+import { Button } from "@/components/ui/button";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import { Checkbox } from "@/components/ui/checkbox";
import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
import { ImageZoom } from "@/components/ui/image-zoom";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { useToggleReviewReaction } from "@/hooks/review";
@@ -103,6 +108,7 @@ function MovieDetailsRoute() {
const userId = session?.data?.user?.id;
const [moreOpen, setMoreOpen] = useState(false);
+ const [newListName, setNewListName] = useState("");
const toggleReaction = useToggleReviewReaction("movie", userId ?? "");
@@ -148,6 +154,69 @@ function MovieDetailsRoute() {
},
});
+ const userListsQuery = useQuery
+
+ {reviews.total >= 1 ? (
+ {t("library:reviews")} ({reviews.total}) +
+ {isAuthenticated && ( + + )} +
-
- - {movie.title} -
+ <> ++ {movie.title} +
- {/* {movie?.belongsToCollection?.name && ( + {/* {movie?.belongsToCollection?.name && ( )} */} -
-
-
-
-
-
+
-
+
-
- {t("library:info")}
- {t("library:cast")}
- {movie.backdrops.length >= 1 && {t("library:medias")} }
-
- {t("library:reviews")} ({reviews?.total ?? 0})
-
-
- {t("library:lists")} ({listsQuery.data?.total ?? 0})
-
- {t("comments:title")}
-
-
-
- getGenreLabel(t, g)} />
+
+
{t("library:genres")}
-
+
+ {t("library:info")}
+ {t("library:cast")}
+
+ {t("library:lists")} ({listsQuery.data?.total ?? 0})
+
+ {t("comments:title")}
+
-
-
-
{t("library:synopsis")}
-
-
+
- {movie.overview}
+
+ getGenreLabel(t, g)} />
- {movie.overview}
+{t("library:genres")}
+
-
-
+
+
+ +{movie.productionCompanies.length - 1}
+
+
+
+
+
+ )}
+
+ }
+ />
+ )}
+ {movie.runtime > 0 && (
+
+
- {t("library:movieCharacteristics")}
-
+
-
-
- +{movie.productionCompanies.length - 1}
-
-
-
-
-
- )}
-
+
+ Tom Gormican
+
}
/>
- )}
- {movie.runtime > 0 && (
-
-
+ {movie.budget > 0 && (
+ {t("library:movieCharacteristics")}
+-
- {movie.productionCompanies.slice(1).map((pc: { name: string }) => (
-
- {pc.name} - ))} -
-
+ {movie.productionCompanies.slice(1).map((pc: { name: string }) => (
+
- {pc.name} + ))} +
-
+ {t("library:communityStatistics")}
-
+
- {movie.trailerId && (
-