diff --git a/app/(pages)/titles/[id]/_components/actions.ts b/app/(pages)/titles/[id]/_components/actions.ts index fc7a8e0..71826b3 100644 --- a/app/(pages)/titles/[id]/_components/actions.ts +++ b/app/(pages)/titles/[id]/_components/actions.ts @@ -24,7 +24,7 @@ async function getSessionUserId() { export async function updateTitleStatus( titleId: string, - status: "watchlist" | null, + status: "in_progress" | null, ) { const userId = await getSessionUserId(); if (status === null) { diff --git a/app/(pages)/titles/[id]/_components/title-interaction-provider.tsx b/app/(pages)/titles/[id]/_components/title-interaction-provider.tsx index d61c747..caff36b 100644 --- a/app/(pages)/titles/[id]/_components/title-interaction-provider.tsx +++ b/app/(pages)/titles/[id]/_components/title-interaction-provider.tsx @@ -84,17 +84,10 @@ export function TitleInteractionProvider({ const handleStatusChange = useCallback( async (status: string | null) => { const prev = userStatus; - setUserStatus(status); + setUserStatus(status === "watchlist" ? "in_progress" : status); try { - await updateTitleStatus( - titleId, - status === "watchlist" ? "watchlist" : null, - ); - toast.success( - status === "watchlist" - ? "Added to watchlist" - : "Removed from library", - ); + await updateTitleStatus(titleId, status ? "in_progress" : null); + toast.success(status ? "Added to watchlist" : "Removed from library"); } catch { setUserStatus(prev); toast.error("Failed to update status"); diff --git a/components/status-button.tsx b/components/status-button.tsx index 6bc85d9..a1814be 100644 --- a/components/status-button.tsx +++ b/components/status-button.tsx @@ -1,7 +1,6 @@ "use client"; import { - IconBookmarkFilled, IconCheck, IconPlayerPlayFilled, IconPlus, @@ -9,21 +8,17 @@ import { } from "@tabler/icons-react"; import { AnimatePresence, motion } from "motion/react"; +const watchingStyle = { + label: "Watching", + icon: IconPlayerPlayFilled, + class: "text-status-watching", + bgClass: "bg-status-watching/10 hover:bg-status-watching/15", + borderClass: "ring-status-watching/20", +}; + const statusConfig = { - watchlist: { - label: "Watchlist", - icon: IconBookmarkFilled, - class: "text-status-watchlist", - bgClass: "bg-status-watchlist/10 hover:bg-status-watchlist/15", - borderClass: "ring-status-watchlist/20", - }, - in_progress: { - label: "Watching", - icon: IconPlayerPlayFilled, - class: "text-status-watching", - bgClass: "bg-status-watching/10 hover:bg-status-watching/15", - borderClass: "ring-status-watching/20", - }, + watchlist: watchingStyle, + in_progress: watchingStyle, completed: { label: "Completed", icon: IconCheck,