From 64a88020c9a6a6f21519f79063f4eda5d284249b Mon Sep 17 00:00:00 2001
From: sudacode <suda@sudacode.com>
Date: Thu, 19 Mar 2026 21:43:30 -0700
Subject: [PATCH] feat(stats): add 'View Anime' navigation button in
 MediaDetailView
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added onNavigateToAnime prop to MediaDetailView
- Show 'View Anime →' button in the top-right when viewing media from
  non-anime origins (overview/sessions)
- Extract animeId from available sessions to enable navigation
- Button is hidden when already viewing from anime origin

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .../components/library/MediaDetailView.tsx    | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/stats/src/components/library/MediaDetailView.tsx b/stats/src/components/library/MediaDetailView.tsx
index 52e7911..f34df29 100644
--- a/stats/src/components/library/MediaDetailView.tsx
+++ b/stats/src/components/library/MediaDetailView.tsx
@@ -13,6 +13,7 @@ interface MediaDetailViewProps {
   onConsumeInitialExpandedSession?: () => void;
   onBack: () => void;
   backLabel?: string;
+  onNavigateToAnime?: (animeId: number) => void;
 }
 
 export function MediaDetailView({
@@ -21,6 +22,7 @@ export function MediaDetailView({
   onConsumeInitialExpandedSession,
   onBack,
   backLabel = 'Back to Library',
+  onNavigateToAnime,
 }: MediaDetailViewProps) {
   const { data, loading, error } = useMediaDetail(videoId);
   const [localSessions, setLocalSessions] = useState<SessionSummary[] | null>(null);
@@ -36,6 +38,7 @@ export function MediaDetailView({
   if (!data?.detail) return <div className="text-ctp-overlay2 p-4">Media not found</div>;
 
   const sessions = localSessions ?? data.sessions;
+  const animeId = sessions.find((s) => s.animeId != null)?.animeId ?? null;
   const detail = {
     ...data.detail,
     totalSessions: sessions.length,
@@ -70,13 +73,24 @@ export function MediaDetailView({
 
   return (
     <div className="space-y-4">
-      <button
-        type="button"
-        onClick={onBack}
-        className="text-sm text-ctp-blue hover:text-ctp-sapphire transition-colors"
-      >
-        &larr; {backLabel}
-      </button>
+      <div className="flex items-center justify-between">
+        <button
+          type="button"
+          onClick={onBack}
+          className="text-sm text-ctp-blue hover:text-ctp-sapphire transition-colors"
+        >
+          &larr; {backLabel}
+        </button>
+        {onNavigateToAnime != null && animeId != null ? (
+          <button
+            type="button"
+            onClick={() => onNavigateToAnime(animeId)}
+            className="text-sm text-ctp-blue hover:text-ctp-sapphire transition-colors"
+          >
+            View Anime &rarr;
+          </button>
+        ) : null}
+      </div>
       <MediaHeader detail={detail} />
       {deleteError ? <div className="text-sm text-ctp-red">{deleteError}</div> : null}
       <MediaSessionList