feat: wrapup wow — animated counters, scroll-reveal, fun facts, component split, budget formatting

spa/src/routes/_app/wrapup.$id.tsx

@@ -2,10 +2,24 @@ import { createFileRoute, Link } from "@tanstack/react-router"
 import { lazy, Suspense, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { Bar, BarChart, XAxis, YAxis } from "recharts"
-import { BarChart3, DollarSign, Globe, Hash, Share2, Star, Users } from "lucide-react"
+import { BarChart3, DollarSign, Globe, Hash, Share2, Star } from "lucide-react"
 import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart"
 import { BackButton } from "@/components/back-button"
+import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+import { RatingHistogram } from "@/components/rating-histogram"
+import { RevealCard } from "@/components/reveal-card"
+import { HeroCard } from "@/components/wrapup-hero"
+import { FunFacts } from "@/components/wrapup-fun-facts"
+import { RankCard } from "@/components/wrapup-rank-card"
+import { posterUrl } from "@/lib/api/client"
+import { fmtUsd } from "@/lib/format"
+import { useWrapUpReport } from "@/hooks/use-wrapup"
+import type { MovieRef } from "@/lib/api/wrapup"
+
+const WrapUpShareCard = lazy(() => import("@/components/wrapup-share-card").then((m) => ({ default: m.WrapUpShareCard })))
 
 const monthlyChartConfig = {
   count: { label: "Movies", color: "var(--primary)" },
@@ -15,16 +29,6 @@ const genreChartConfig = {
   count: { label: "Movies", color: "var(--primary)" },
 } satisfies ChartConfig
 
-const WrapUpShareCard = lazy(() => import("@/components/wrapup-share-card").then((m) => ({ default: m.WrapUpShareCard })))
-import { Badge } from "@/components/ui/badge"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Skeleton } from "@/components/ui/skeleton"
-import { RatingHistogram } from "@/components/rating-histogram"
-import { posterUrl, tmdbProfileUrl } from "@/lib/api/client"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { useWrapUpReport } from "@/hooks/use-wrapup"
-import type { MovieRef, PersonStat } from "@/lib/api/wrapup"
-
 export const Route = createFileRoute("/_app/wrapup/$id")({
   component: WrapUpReportPage,
 })
@@ -33,7 +37,6 @@ function WrapUpReportPage() {
   const { t } = useTranslation()
   const { id } = Route.useParams()
   const { data: report, isPending } = useWrapUpReport(id)
-
   const [showShare, setShowShare] = useState(false)
 
   if (isPending) return <ReportSkeleton />
@@ -56,133 +59,135 @@ function WrapUpReportPage() {
         </Suspense>
       )}
 
-      {/* Hero */}
-      <Card>
-        <CardContent className="py-8 text-center">
-          <p className="text-xs uppercase tracking-widest text-muted-foreground">{t("wrapup.heroSubtitle")}</p>
-          <p className="mt-2 text-5xl font-extrabold tracking-tight">{report.total_movies}</p>
-          <p className="text-sm text-muted-foreground">{t("wrapup.moviesWatched")}</p>
-          {watchHours > 0 && (
-            <p className="mt-1 text-xs text-muted-foreground">{t("wrapup.watchHours", { hours: watchHours })}</p>
-          )}
-        </CardContent>
-      </Card>
+      <HeroCard report={report} watchHours={watchHours} />
 
       {/* Ratings */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2 text-sm">
-            <Star className="size-4" /> {t("wrapup.ratings")}
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {report.avg_rating != null && (
-            <div className="text-center">
-              <p className="text-4xl font-bold text-amber-500">{report.avg_rating.toFixed(1)}★</p>
-              <p className="text-xs text-muted-foreground">{t("wrapup.averageRating")}</p>
+      <RevealCard>
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-sm">
+              <Star className="size-4" /> {t("wrapup.ratings")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {report.avg_rating != null && (
+              <div className="text-center">
+                <p className="text-4xl font-bold text-amber-500">{report.avg_rating.toFixed(1)}★</p>
+                <p className="text-xs text-muted-foreground">{t("wrapup.averageRating")}</p>
+              </div>
+            )}
+            <RatingHistogram histogram={report.rating_distribution} />
+            <div className="flex flex-wrap gap-2">
+              {report.busiest_month && (
+                <Badge variant="secondary">{t("wrapup.busiestMonth", { month: report.busiest_month })}</Badge>
+              )}
+              {report.busiest_day_of_week && (
+                <Badge variant="secondary">{t("wrapup.favoriteDay", { day: report.busiest_day_of_week })}</Badge>
+              )}
             </div>
-          )}
-          <RatingHistogram histogram={report.rating_distribution} />
-          <div className="flex flex-wrap gap-2">
-            {report.busiest_month && (
-              <Badge variant="secondary">{t("wrapup.busiestMonth", { month: report.busiest_month })}</Badge>
-            )}
-            {report.busiest_day_of_week && (
-              <Badge variant="secondary">{t("wrapup.favoriteDay", { day: report.busiest_day_of_week })}</Badge>
-            )}
-          </div>
-        </CardContent>
-      </Card>
+          </CardContent>
+        </Card>
+      </RevealCard>
 
       {/* Top Directors */}
       {report.top_directors.length > 0 && (
-        <RankCard
-          title={t("wrapup.topDirectors")}
-          subtitle={t("wrapup.uniqueDirectors", { count: report.director_diversity })}
-          items={report.top_directors.slice(0, 5)}
-        />
+        <RevealCard>
+          <RankCard
+            title={t("wrapup.topDirectors")}
+            subtitle={t("wrapup.uniqueDirectors", { count: report.director_diversity })}
+            items={report.top_directors.slice(0, 5)}
+          />
+        </RevealCard>
       )}
 
       {/* Top Actors */}
       {report.top_actors.length > 0 && (
-        <RankCard
-          title={t("wrapup.topActors")}
-          subtitle={t("wrapup.uniqueActors", { count: report.actor_diversity })}
-          items={report.top_actors.slice(0, 5)}
-          profilePaths={report.top_cast_profile_paths}
-        />
+        <RevealCard>
+          <RankCard
+            title={t("wrapup.topActors")}
+            subtitle={t("wrapup.uniqueActors", { count: report.actor_diversity })}
+            items={report.top_actors.slice(0, 5)}
+            profilePaths={report.top_cast_profile_paths}
+          />
+        </RevealCard>
       )}
 
       {/* Genres */}
       {report.top_genres.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-sm">{t("wrapup.genres")}</CardTitle>
-            <CardDescription>{t("wrapup.genresExplored", { count: report.genre_diversity })}</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            <ChartContainer config={genreChartConfig} className="w-full" style={{ height: Math.min(report.top_genres.length, 8) * 28 + 16 }}>
-              <BarChart data={report.top_genres.slice(0, 8)} layout="vertical" margin={{ top: 0, right: 4, bottom: 0, left: 0 }}>
-                <XAxis type="number" hide />
-                <YAxis type="category" dataKey="genre" tick={{ fontSize: 11, fill: "rgba(255,255,255,0.85)" }} tickLine={false} axisLine={false} width={80} />
-                <ChartTooltip content={<ChartTooltipContent />} />
-                <Bar dataKey="count" fill="var(--color-count)" radius={[0, 4, 4, 0]} />
-              </BarChart>
-            </ChartContainer>
-            <div className="flex flex-wrap gap-2 pt-2">
-              {report.highest_rated_genre && (
-                <Badge variant="secondary">{t("wrapup.highestRated", { genre: report.highest_rated_genre })}</Badge>
-              )}
-              {report.lowest_rated_genre && (
-                <Badge variant="secondary">{t("wrapup.lowestRated", { genre: report.lowest_rated_genre })}</Badge>
-              )}
-            </div>
-          </CardContent>
-        </Card>
+        <RevealCard>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-sm">{t("wrapup.genres")}</CardTitle>
+              <CardDescription>{t("wrapup.genresExplored", { count: report.genre_diversity })}</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              <ChartContainer config={genreChartConfig} className="w-full" style={{ height: Math.min(report.top_genres.length, 8) * 28 + 16 }}>
+                <BarChart data={report.top_genres.slice(0, 8)} layout="vertical" margin={{ top: 0, right: 4, bottom: 0, left: 0 }}>
+                  <XAxis type="number" hide />
+                  <YAxis type="category" dataKey="genre" tick={{ fontSize: 11, fill: "rgba(255,255,255,0.85)" }} tickLine={false} axisLine={false} width={80} />
+                  <ChartTooltip content={<ChartTooltipContent />} />
+                  <Bar dataKey="count" fill="var(--color-count)" radius={[0, 4, 4, 0]} />
+                </BarChart>
+              </ChartContainer>
+              <div className="flex flex-wrap gap-2 pt-2">
+                {report.highest_rated_genre && (
+                  <Badge variant="secondary">{t("wrapup.highestRated", { genre: report.highest_rated_genre })}</Badge>
+                )}
+                {report.lowest_rated_genre && (
+                  <Badge variant="secondary">{t("wrapup.lowestRated", { genre: report.lowest_rated_genre })}</Badge>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        </RevealCard>
       )}
 
       {/* Monthly Activity */}
       {report.movies_per_month.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2 text-sm">
-              <BarChart3 className="size-4" /> {t("wrapup.monthlyActivity")}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <ChartContainer config={monthlyChartConfig} className="aspect-[2/1] w-full">
-              <BarChart data={report.movies_per_month} margin={{ top: 8, right: 0, bottom: 0, left: -20 }}>
-                <XAxis dataKey="year_month" tickFormatter={(v: string) => v.slice(5)} tick={{ fontSize: 10, fill: "rgba(255,255,255,0.85)" }} tickLine={false} axisLine={false} />
-                <YAxis allowDecimals={false} tick={{ fontSize: 10, fill: "rgba(255,255,255,0.85)" }} tickLine={false} axisLine={false} width={30} />
-                <ChartTooltip content={<ChartTooltipContent labelFormatter={(v) => report.movies_per_month.find((m) => m.year_month === String(v))?.label ?? String(v)} />} />
-                <Bar dataKey="count" fill="var(--color-count)" radius={[4, 4, 0, 0]} />
-              </BarChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
+        <RevealCard>
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-sm">
+                <BarChart3 className="size-4" /> {t("wrapup.monthlyActivity")}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ChartContainer config={monthlyChartConfig} className="aspect-[2/1] w-full">
+                <BarChart data={report.movies_per_month} margin={{ top: 8, right: 0, bottom: 0, left: -20 }}>
+                  <XAxis dataKey="year_month" tickFormatter={(v: string) => v.slice(5)} tick={{ fontSize: 10, fill: "rgba(255,255,255,0.85)" }} tickLine={false} axisLine={false} />
+                  <YAxis allowDecimals={false} tick={{ fontSize: 10, fill: "rgba(255,255,255,0.85)" }} tickLine={false} axisLine={false} width={30} />
+                  <ChartTooltip content={<ChartTooltipContent labelFormatter={(v) => report.movies_per_month.find((m) => m.year_month === String(v))?.label ?? String(v)} />} />
+                  <Bar dataKey="count" fill="var(--color-count)" radius={[4, 4, 0, 0]} />
+                </BarChart>
+              </ChartContainer>
+            </CardContent>
+          </Card>
+        </RevealCard>
       )}
 
       {/* Keywords */}
       {report.top_keywords.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2 text-sm">
-              <Hash className="size-4" /> {t("wrapup.keywords")}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="flex flex-wrap gap-1.5">
-              {report.top_keywords
-                .filter((k) => !k.keyword.includes("creditsstinger"))
-                .slice(0, 15)
-                .map((k) => (
-                  <Badge key={k.keyword} variant="secondary" className="text-xs">
-                    {k.keyword} <span className="ml-1 opacity-60">{k.count}</span>
-                  </Badge>
-                ))}
-            </div>
-          </CardContent>
-        </Card>
+        <RevealCard>
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-sm">
+                <Hash className="size-4" /> {t("wrapup.keywords")}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="flex flex-wrap gap-1.5">
+                {report.top_keywords
+                  .filter((k) => !k.keyword.includes("creditsstinger"))
+                  .slice(0, 15)
+                  .map((k) => (
+                    <Badge key={k.keyword} variant="secondary" className="text-xs">
+                      {k.keyword} <span className="ml-1 opacity-60">{k.count}</span>
+                    </Badge>
+                  ))}
+              </div>
+            </CardContent>
+          </Card>
+        </RevealCard>
       )}
 
       {/* Budget & Language */}
@@ -191,144 +196,104 @@ function WrapUpReportPage() {
         const hasLang = report.language_distribution.length > 1
         const bothVisible = hasBudget && hasLang
         return (
-        <div className={bothVisible ? "grid grid-cols-2 gap-3" : ""}>
-          {hasBudget && (
-            <Card>
-              <CardContent className="py-4 text-center">
-                <DollarSign className="mx-auto mb-1 size-4 text-muted-foreground" />
-                <p className="text-lg font-bold">${Math.round(report.total_budget_watched! / 1_000_000)}M</p>
-                <p className="text-[10px] text-muted-foreground">{t("wrapup.totalBudget")}</p>
-                {report.avg_budget != null && (
+        <RevealCard>
+          <div className={bothVisible ? "grid grid-cols-2 gap-3" : ""}>
+            {hasBudget && (
+              <Card>
+                <CardContent className="py-4 text-center">
+                  <DollarSign className="mx-auto mb-1 size-4 text-muted-foreground" />
+                  <p className="text-lg font-bold">{fmtUsd(report.total_budget_watched!)}</p>
+                  <p className="text-[10px] text-muted-foreground">{t("wrapup.totalBudget")}</p>
+                  {report.avg_budget != null && (
+                    <p className="mt-1 text-[10px] text-muted-foreground">
+                      {t("wrapup.avgBudget", { amount: fmtUsd(report.avg_budget) })}
+                    </p>
+                  )}
+                </CardContent>
+              </Card>
+            )}
+            {hasLang && (
+              <Card>
+                <CardContent className="py-4 text-center">
+                  <Globe className="mx-auto mb-1 size-4 text-muted-foreground" />
+                  <p className="text-lg font-bold">{report.language_distribution.length}</p>
+                  <p className="text-[10px] text-muted-foreground">{t("wrapup.languages")}</p>
                   <p className="mt-1 text-[10px] text-muted-foreground">
-                    {t("wrapup.avgBudget", { amount: `$${Math.round(report.avg_budget / 1_000_000)}M` })}
+                    {report.language_distribution.slice(0, 3).map((l) => l.language.toUpperCase()).join(", ")}
                   </p>
-                )}
-              </CardContent>
-            </Card>
-          )}
-          {hasLang && (
-            <Card>
-              <CardContent className="py-4 text-center">
-                <Globe className="mx-auto mb-1 size-4 text-muted-foreground" />
-                <p className="text-lg font-bold">{report.language_distribution.length}</p>
-                <p className="text-[10px] text-muted-foreground">{t("wrapup.languages")}</p>
-                <p className="mt-1 text-[10px] text-muted-foreground">
-                  {report.language_distribution.slice(0, 3).map((l) => l.language.toUpperCase()).join(", ")}
-                </p>
-              </CardContent>
-            </Card>
-          )}
-        </div>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        </RevealCard>
         )})()}
 
       {/* Highlights */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-sm">{t("wrapup.highlights")}</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-2 gap-3">
-            <MovieHighlight label={t("wrapup.highlightHighest")} movie={report.highest_rated_movie} />
-            <MovieHighlight label={t("wrapup.highlightLowest")} movie={report.lowest_rated_movie} />
-            <MovieHighlight label={t("wrapup.highlightOldest")} movie={report.oldest_movie} />
-            <MovieHighlight label={t("wrapup.highlightNewest")} movie={report.newest_movie} />
-            <MovieHighlight label={t("wrapup.highlightLongest")} movie={report.longest_movie} showRuntime />
-            <MovieHighlight label={t("wrapup.highlightShortest")} movie={report.shortest_movie} showRuntime />
-            <MovieHighlight label={t("wrapup.highlightFirst")} movie={report.first_movie_of_period} />
-            <MovieHighlight label={t("wrapup.highlightLast")} movie={report.last_movie_of_period} />
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Rewatches */}
-      {report.total_rewatches > 0 && (
+      <RevealCard>
         <Card>
           <CardHeader>
-            <CardTitle className="text-sm">{t("wrapup.rewatches")}</CardTitle>
-          </CardHeader>
-          <CardContent className="text-center">
-            <p className="text-3xl font-bold">{report.total_rewatches}</p>
-            <p className="text-xs text-muted-foreground">{t("wrapup.moviesRewatched")}</p>
-            {report.most_rewatched_movie && (
-              <p className="mt-2 text-sm text-muted-foreground">
-                {t("wrapup.mostRewatched")} <strong>{report.most_rewatched_movie.title}</strong> ({report.most_rewatched_movie.year})
-              </p>
-            )}
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Poster Mosaic */}
-      {report.poster_paths.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-sm">{t("wrapup.allMovies", { count: report.poster_paths.length })}</CardTitle>
+            <CardTitle className="text-sm">{t("wrapup.highlights")}</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="grid grid-cols-5 gap-1">
-              {report.poster_paths.map((path, i) => (
-                <div key={i} className="aspect-[2/3] overflow-hidden rounded-md bg-muted">
-                  <img src={posterUrl(path)} alt="" className="size-full object-cover" loading="lazy" />
-                </div>
-              ))}
+            <div className="grid grid-cols-2 gap-3">
+              <MovieHighlight label={t("wrapup.highlightHighest")} movie={report.highest_rated_movie} />
+              <MovieHighlight label={t("wrapup.highlightLowest")} movie={report.lowest_rated_movie} />
+              <MovieHighlight label={t("wrapup.highlightOldest")} movie={report.oldest_movie} />
+              <MovieHighlight label={t("wrapup.highlightNewest")} movie={report.newest_movie} />
+              <MovieHighlight label={t("wrapup.highlightLongest")} movie={report.longest_movie} showRuntime />
+              <MovieHighlight label={t("wrapup.highlightShortest")} movie={report.shortest_movie} showRuntime />
+              <MovieHighlight label={t("wrapup.highlightFirst")} movie={report.first_movie_of_period} />
+              <MovieHighlight label={t("wrapup.highlightLast")} movie={report.last_movie_of_period} />
             </div>
           </CardContent>
         </Card>
+      </RevealCard>
+
+      <FunFacts report={report} watchHours={watchHours} />
+
+      {/* Rewatches */}
+      {report.total_rewatches > 0 && (
+        <RevealCard>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-sm">{t("wrapup.rewatches")}</CardTitle>
+            </CardHeader>
+            <CardContent className="text-center">
+              <p className="text-3xl font-bold">{report.total_rewatches}</p>
+              <p className="text-xs text-muted-foreground">{t("wrapup.moviesRewatched")}</p>
+              {report.most_rewatched_movie && (
+                <p className="mt-2 text-sm text-muted-foreground">
+                  {t("wrapup.mostRewatched")} <strong>{report.most_rewatched_movie.title}</strong> ({report.most_rewatched_movie.year})
+                </p>
+              )}
+            </CardContent>
+          </Card>
+        </RevealCard>
+      )}
+
+      {/* All Movies */}
+      {report.poster_paths.length > 0 && (
+        <RevealCard>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-sm">{t("wrapup.allMovies", { count: report.poster_paths.length })}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-5 gap-1">
+                {report.poster_paths.map((path, i) => (
+                  <div key={i} className="aspect-[2/3] overflow-hidden rounded-md bg-muted">
+                    <img src={posterUrl(path)} alt="" className="size-full object-cover" loading="lazy" />
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </RevealCard>
       )}
     </div>
   )
 }
 
-function RankCard({ title, subtitle, items, profilePaths }: { title: string; subtitle: string; items: PersonStat[]; profilePaths?: string[] }) {
-  const { t } = useTranslation()
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-sm">
-          <Users className="size-4" /> {title}
-        </CardTitle>
-        <CardDescription>{subtitle}</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ol className="space-y-2">
-          {items.map((item, i) => {
-            const profilePath = profilePaths?.[i]
-            return (
-              <li key={item.name}>
-                {item.person_id ? (
-                  <Link to="/people/$id" params={{ id: item.person_id }} className="flex items-center gap-3">
-                    <span className="flex size-6 items-center justify-center rounded-full bg-muted text-xs font-bold">{i + 1}</span>
-                    <Avatar className="size-8">
-                      {profilePath && <AvatarImage src={tmdbProfileUrl(profilePath)} />}
-                      <AvatarFallback className="text-xs">{item.name[0]}</AvatarFallback>
-                    </Avatar>
-                    <div className="flex-1">
-                      <p className="text-sm font-medium">{item.name}</p>
-                      <p className="text-xs text-muted-foreground">{t("common.filmsAvg", { count: item.count, avg: item.avg_rating.toFixed(1) })}★</p>
-                    </div>
-                  </Link>
-                ) : (
-                  <div className="flex items-center gap-3">
-                    <span className="flex size-6 items-center justify-center rounded-full bg-muted text-xs font-bold">{i + 1}</span>
-                    <Avatar className="size-8">
-                      {profilePath && <AvatarImage src={tmdbProfileUrl(profilePath)} />}
-                      <AvatarFallback className="text-xs">{item.name[0]}</AvatarFallback>
-                    </Avatar>
-                    <div className="flex-1">
-                      <p className="text-sm font-medium">{item.name}</p>
-                      <p className="text-xs text-muted-foreground">{t("common.filmsAvg", { count: item.count, avg: item.avg_rating.toFixed(1) })}★</p>
-                    </div>
-                  </div>
-                )}
-              </li>
-            )
-          })}
-        </ol>
-      </CardContent>
-    </Card>
-  )
-}
-
 function MovieHighlight({ label, movie, showRuntime }: { label: string; movie?: MovieRef; showRuntime?: boolean }) {
   if (!movie) return null
   const content = (