feat: SPA polish — wrapup sections, shareable card, webhook instructions, blocked merge

spa/src/components/wrapup-share-card.tsx

@@ -0,0 +1,147 @@
+import { useRef, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Download, Share2, X } from "lucide-react"
+import html2canvas from "html2canvas-pro"
+import { Button } from "@/components/ui/button"
+import { posterUrl } from "@/lib/api/client"
+import type { WrapUpReport } from "@/lib/api/wrapup"
+const logoSrc = `${import.meta.env.BASE_URL}logo.webp`
+const bgSrc = `${import.meta.env.BASE_URL}shareable_bg.jpg`
+
+type Props = {
+  report: WrapUpReport
+  onClose: () => void
+}
+
+export function WrapUpShareCard({ report, onClose }: Props) {
+  const { t } = useTranslation()
+  const cardRef = useRef<HTMLDivElement>(null)
+  const [exporting, setExporting] = useState(false)
+
+  const watchHours = Math.round(report.total_watch_time_minutes / 60)
+  const topGenre = report.top_genres[0]?.genre
+  const topDirector = report.top_directors[0]?.name
+  const topActor = report.top_actors[0]?.name
+  const cols = 5
+  const rows = 3
+  const posters = report.poster_paths.slice(0, cols * rows)
+
+  async function exportImage() {
+    if (!cardRef.current) return
+    setExporting(true)
+    try {
+      const canvas = await html2canvas(cardRef.current, {
+        scale: 2,
+        useCORS: true,
+        backgroundColor: null,
+      })
+      const blob = await new Promise<Blob | null>((r) => canvas.toBlob(r, "image/png"))
+      if (!blob) return
+
+      const file = new File([blob], "wrapup.png", { type: "image/png" })
+      if (navigator.share && navigator.canShare?.({ files: [file] })) {
+        await navigator.share({ files: [file] })
+      } else {
+        const url = URL.createObjectURL(blob)
+        const a = document.createElement("a")
+        a.href = url
+        a.download = "year-in-review.png"
+        a.click()
+        URL.revokeObjectURL(url)
+      }
+    } finally {
+      setExporting(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-black/80 p-4">
+      <div className="mb-4 flex w-full max-w-sm items-center justify-between">
+        <Button variant="ghost" size="icon" onClick={onClose} className="text-white">
+          <X className="size-5" />
+        </Button>
+        <Button onClick={exportImage} disabled={exporting} size="sm" className="gap-2">
+          {"share" in navigator ? <Share2 className="size-4" /> : <Download className="size-4" />}
+          {exporting ? t("common.saving") : t("wrapup.shareExport")}
+        </Button>
+      </div>
+
+      <div className="max-h-[75vh] overflow-y-auto rounded-2xl">
+        <div
+          ref={cardRef}
+          className="relative w-[360px] overflow-hidden rounded-2xl"
+          style={{ aspectRatio: "9/16" }}
+        >
+          {/* Layer 1: background image */}
+          <img src={bgSrc} alt="" className="absolute inset-0 size-full object-cover" />
+
+          {/* Layer 2: poster collage */}
+          <div className="absolute inset-0 grid gap-0.5 opacity-30" style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}>
+            {posters.map((p, i) => (
+              <div key={i} className="overflow-hidden">
+                <img src={posterUrl(p)} alt="" className="size-full object-cover" />
+              </div>
+            ))}
+          </div>
+
+          {/* Layer 3: dark blur to make text readable */}
+          <div className="absolute inset-0 bg-black/50 backdrop-blur-[2px]" />
+
+          {/* Layer 4: content */}
+          <div className="relative flex h-full flex-col p-6">
+            {/* Header */}
+            <div>
+              <p className="text-sm font-semibold uppercase tracking-[0.15em] text-white drop-shadow">
+                {t("wrapup.heroSubtitle")}
+              </p>
+              <p className="text-4xl font-black drop-shadow-lg" style={{ color: "oklch(0.852 0.199 91.936)" }}>
+                {report.date_range.start.slice(0, 4)}
+              </p>
+            </div>
+
+            {/* Center hero — grows to fill middle */}
+            <div className="flex flex-1 flex-col items-center justify-center space-y-6">
+              <div className="text-center">
+                <p className="text-8xl font-black tracking-tight text-white drop-shadow-lg">{report.total_movies}</p>
+                <p className="text-base font-medium text-white/80">{t("wrapup.moviesWatched")}</p>
+              </div>
+
+              <div className="flex gap-10">
+                <div className="text-center">
+                  <p className="text-3xl font-bold drop-shadow" style={{ color: "oklch(0.852 0.199 91.936)" }}>{report.avg_rating?.toFixed(1) ?? "-"}★</p>
+                  <p className="text-xs text-white/60">{t("wrapup.averageRating")}</p>
+                </div>
+                <div className="text-center">
+                  <p className="text-3xl font-bold text-white drop-shadow">{watchHours}h</p>
+                  <p className="text-xs text-white/60">{t("wrapup.watchTime")}</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Bottom stats */}
+            <div className="space-y-2">
+              {topGenre && <StatLine label={t("wrapup.topGenre")} value={topGenre} />}
+              {topDirector && <StatLine label={t("wrapup.topDirectorLabel")} value={topDirector} />}
+              {topActor && <StatLine label={t("wrapup.topActorLabel")} value={topActor} />}
+              {report.busiest_month && <StatLine label={t("wrapup.busiestMonthLabel")} value={report.busiest_month} />}
+
+              <div className="flex items-center justify-center gap-2 pt-3">
+                <img src={logoSrc} alt="" className="size-5 rounded" />
+                <p className="text-xs font-medium text-white/40">Movies Diary</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function StatLine({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-baseline justify-between">
+      <span className="text-[11px] text-white/40">{label}</span>
+      <span className="max-w-[60%] truncate text-right text-sm font-semibold text-white">{value}</span>
+    </div>
+  )
+}

spa/src/lib/api/wrapup.ts

@@ -67,9 +67,27 @@ export type GenreStat = {
   avg_rating: number
 }
 
+export type MonthCount = {
+  year_month: string
+  label: string
+  count: number
+}
+
+export type KeywordStat = {
+  keyword: string
+  count: number
+}
+
+export type LangStat = {
+  language: string
+  count: number
+}
+
 export type WrapUpReport = {
+  date_range: { start: string; end: string }
   total_movies: number
   total_watch_time_minutes: number
+  movies_per_month: MonthCount[]
   busiest_month?: string
   busiest_day_of_week?: string
   avg_rating?: number
@@ -84,6 +102,10 @@ export type WrapUpReport = {
   genre_diversity: number
   highest_rated_genre?: string
   lowest_rated_genre?: string
+  top_keywords: KeywordStat[]
+  total_budget_watched?: number
+  avg_budget?: number
+  language_distribution: LangStat[]
   oldest_movie?: MovieRef
   newest_movie?: MovieRef
   total_rewatches: number

spa/src/locales/en.json

@@ -148,10 +148,9 @@
     "webhookTokens": "Webhook Tokens",
     "webhookTokensDesc": "Jellyfin, Plex",
     "blockedUsers": "Blocked Users",
+    "blockedUsersAndDomains": "Blocked Users & Domains",
     "blockedUsersDesc": "Manage blocked users",
     "blockedUsersDescAdmin": "Users & domains",
-    "blockedDomains": "Blocked Domains",
-    "blockedDomainsDesc": "Federation blocks",
     "logOut": "Log Out",
     "account": "Account",
     "data": "Data",
@@ -199,7 +198,19 @@
     "plex": "Plex",
     "labelOptional": "Label (optional)",
     "labelPlaceholder": "e.g. Living room",
-    "copied": "Webhook URL copied to clipboard"
+    "copied": "Webhook URL copied to clipboard",
+    "setup": "Setup",
+    "webhookUrl": "Webhook URL",
+    "setupSteps": "Setup steps",
+    "jellyfinStep1": "Install the Webhook plugin (Dashboard → Plugins → Catalog)",
+    "jellyfinStep2": "Add a Generic Destination with the URL above",
+    "jellyfinStep3": "Add header: Authorization = Bearer YOUR_TOKEN",
+    "jellyfinStep4": "Check \"Send All Properties\"",
+    "jellyfinStep5": "Notification Type: Playback Stop only",
+    "jellyfinStep6": "Item Type: Movies only",
+    "plexStep1": "Go to Settings → Webhooks in your Plex server",
+    "plexStep2": "Add the URL above, replacing YOUR_TOKEN with your generated token",
+    "plexStep3": "Plex sends scrobble events when a movie is watched to 90%+ (requires Plex Pass)"
   },
   "wrapup": {
     "title": "Year Wrap-Up",
@@ -237,7 +248,18 @@
     "rewatches": "Rewatches",
     "moviesRewatched": "movies rewatched",
     "mostRewatched": "Most rewatched:",
-    "posterMosaic": "Your Year in Posters"
+    "monthlyActivity": "Monthly Activity",
+    "keywords": "Keywords",
+    "totalBudget": "total budget watched",
+    "avgBudget": "avg {{amount}} per film",
+    "languages": "languages",
+    "shareExport": "Share",
+    "watchTime": "watch time",
+    "topGenre": "Top Genre",
+    "topDirectorLabel": "Top Director",
+    "topActorLabel": "Top Actor",
+    "busiestMonthLabel": "Busiest Month",
+    "allMovies": "All Movies ({{count}})"
   },
   "logReview": {
     "title": "Log Review",

spa/src/routes/_app/profile.tsx

@@ -1,6 +1,7 @@
 import { createFileRoute, Link } from "@tanstack/react-router"
+import { useState } from "react"
 import { useTranslation } from "react-i18next"
-import { ChevronRight, Settings, Sparkles } from "lucide-react"
+import { ChevronDown, ChevronRight, Settings, Sparkles } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { ProfileView, ProfileSkeleton } from "@/components/profile-view"
 import { useAuth } from "@/components/auth-provider"
@@ -41,7 +42,7 @@ function ProfilePage() {
                 <ChevronRight className="size-4 text-muted-foreground" />
               </Button>
             </Link>
-            <WrapUpLink />
+            <WrapUpLinks />
           </>
         }
       />
@@ -49,22 +50,50 @@ function ProfilePage() {
   )
 }
 
-function WrapUpLink() {
+function wrapupYear(startDate: string): string {
+  return startDate.slice(0, 4)
+}
+
+function WrapUpLinks() {
   const { t } = useTranslation()
   const { data } = useWrapUps()
-  const latest = data?.items?.find((w) => w.status === "Ready")
+  const ready = (data?.items?.filter((w) => w.status === "Ready") ?? [])
+    .sort((a, b) => b.start_date.localeCompare(a.start_date))
+  const [expanded, setExpanded] = useState(false)
 
-  if (!latest) return null
+  if (!ready.length) return null
+
+  if (ready.length === 1) {
+    return (
+      <Link to="/wrapup/$id" params={{ id: ready[0].id }}>
+        <Button variant="outline" className="w-full justify-between">
+          <span className="flex items-center gap-2">
+            <Sparkles className="size-4" />
+            {t("profile.yearInReview")}
+          </span>
+          <ChevronRight className="size-4 text-muted-foreground" />
+        </Button>
+      </Link>
+    )
+  }
 
   return (
-    <Link to="/wrapup/$id" params={{ id: latest.id }}>
-      <Button variant="outline" className="w-full justify-between">
+    <div className="space-y-1.5">
+      <Button variant="outline" className="w-full justify-between" onClick={() => setExpanded(!expanded)}>
         <span className="flex items-center gap-2">
           <Sparkles className="size-4" />
           {t("profile.yearInReview")}
         </span>
-        <ChevronRight className="size-4 text-muted-foreground" />
+        <ChevronDown className={`size-4 text-muted-foreground transition-transform ${expanded ? "rotate-180" : ""}`} />
       </Button>
-    </Link>
+      {expanded && ready.map((w) => (
+        <Link key={w.id} to="/wrapup/$id" params={{ id: w.id }}>
+          <Button variant="ghost" size="sm" className="w-full justify-between">
+            <span>{wrapupYear(w.start_date)}</span>
+            <ChevronRight className="size-4 text-muted-foreground" />
+          </Button>
+        </Link>
+      ))}
+    </div>
   )
 }

spa/src/routes/_app/settings/index.tsx

@@ -5,7 +5,6 @@ import {
   ArrowLeft,
   ChevronRight,
   Download,
-  Globe,
   Key,
   LogOut,
   RefreshCw,
@@ -69,22 +68,13 @@ function SettingsPage() {
 
   const social: SettingsItem[] = [
     {
-      label: t("settings.blockedUsers"),
+      label: isAdmin ? t("settings.blockedUsersAndDomains") : t("settings.blockedUsers"),
       description: isAdmin ? t("settings.blockedUsersDescAdmin") : t("settings.blockedUsersDesc"),
       to: "/settings/blocked",
       icon: <ShieldBan className="size-4" />,
     },
   ]
 
-  if (isAdmin) {
-    social.push({
-      label: t("settings.blockedDomains"),
-      description: t("settings.blockedDomainsDesc"),
-      to: "/settings/blocked",
-      icon: <Globe className="size-4" />,
-    })
-  }
-
   const handleLogout = () => {
     logout()
     navigate({ to: "/login" })

spa/src/routes/_app/settings/webhooks.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next"
 import { ArrowLeft, Key, Plus, Trash2 } from "lucide-react"
 import { toast } from "sonner"
 import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import {
@@ -26,6 +27,7 @@ import {
   useGenerateToken,
   useDeleteToken,
 } from "@/hooks/use-webhooks"
+import { API_URL } from "@/lib/api/client"
 
 export const Route = createFileRoute("/_app/settings/webhooks")({
   component: WebhooksPage,
@@ -104,6 +106,8 @@ function WebhooksPage() {
         </div>
       )}
 
+      <SetupInstructions />
+
       <Drawer open={open} onOpenChange={setOpen}>
         <DrawerContent>
           <DrawerHeader>
@@ -143,3 +147,53 @@ function WebhooksPage() {
     </div>
   )
 }
+
+function SetupInstructions() {
+  const { t } = useTranslation()
+  const baseUrl = API_URL || window.location.origin
+
+  return (
+    <div className="space-y-2">
+      <p className="px-1 text-xs font-medium text-muted-foreground">{t("webhooks.setup")}</p>
+
+      <Card size="sm">
+        <CardContent className="space-y-2">
+          <p className="text-sm font-medium">{t("webhooks.jellyfin")}</p>
+          <div className="rounded-lg bg-muted p-2">
+            <p className="text-[10px] text-muted-foreground">{t("webhooks.webhookUrl")}</p>
+            <code className="break-all text-xs">{baseUrl}/api/v1/webhooks/jellyfin</code>
+          </div>
+          <details className="text-xs text-muted-foreground">
+            <summary className="cursor-pointer font-medium text-foreground">{t("webhooks.setupSteps")}</summary>
+            <ol className="mt-2 list-inside list-decimal space-y-1 pl-1">
+              <li>{t("webhooks.jellyfinStep1")}</li>
+              <li>{t("webhooks.jellyfinStep2")}</li>
+              <li>{t("webhooks.jellyfinStep3")}</li>
+              <li>{t("webhooks.jellyfinStep4")}</li>
+              <li>{t("webhooks.jellyfinStep5")}</li>
+              <li>{t("webhooks.jellyfinStep6")}</li>
+            </ol>
+          </details>
+        </CardContent>
+      </Card>
+
+      <Card size="sm">
+        <CardContent className="space-y-2">
+          <p className="text-sm font-medium">{t("webhooks.plex")}</p>
+          <div className="rounded-lg bg-muted p-2">
+            <p className="text-[10px] text-muted-foreground">{t("webhooks.webhookUrl")}</p>
+            <code className="break-all text-xs">{baseUrl}/api/v1/webhooks/plex?token=YOUR_TOKEN</code>
+          </div>
+          <details className="text-xs text-muted-foreground">
+            <summary className="cursor-pointer font-medium text-foreground">{t("webhooks.setupSteps")}</summary>
+            <ol className="mt-2 list-inside list-decimal space-y-1 pl-1">
+              <li>{t("webhooks.plexStep1")}</li>
+              <li>{t("webhooks.plexStep2")}</li>
+              <li>{t("webhooks.plexStep3")}</li>
+            </ol>
+          </details>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

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

@@ -1,7 +1,11 @@
 import { createFileRoute, Link } from "@tanstack/react-router"
+import { lazy, Suspense, useState } from "react"
 import { useTranslation } from "react-i18next"
-import { Star, Users } from "lucide-react"
+import { BarChart3, DollarSign, Globe, Hash, Share2, Star, Users } from "lucide-react"
 import { BackButton } from "@/components/back-button"
+import { Button } from "@/components/ui/button"
+
+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"
@@ -20,6 +24,8 @@ function WrapUpReportPage() {
   const { id } = Route.useParams()
   const { data: report, isPending } = useWrapUpReport(id)
 
+  const [showShare, setShowShare] = useState(false)
+
   if (isPending) return <ReportSkeleton />
   if (!report) return null
 
@@ -27,7 +33,18 @@ function WrapUpReportPage() {
 
   return (
     <div className="space-y-4 p-4">
-      <BackButton />
+      <div className="flex items-center justify-between">
+        <BackButton />
+        <Button variant="ghost" size="icon" onClick={() => setShowShare(true)}>
+          <Share2 className="size-5" />
+        </Button>
+      </div>
+
+      {showShare && (
+        <Suspense>
+          <WrapUpShareCard report={report} onClose={() => setShowShare(false)} />
+        </Suspense>
+      )}
 
       {/* Hero */}
       <Card>
@@ -118,6 +135,96 @@ function WrapUpReportPage() {
         </Card>
       )}
 
+      {/* 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>
+            {(() => {
+              const max = Math.max(...report.movies_per_month.map((x) => x.count))
+              const barHeight = 96
+              return (
+                <div className="flex items-end gap-1">
+                  {report.movies_per_month.map((m) => {
+                    const h = max > 0 ? Math.max((m.count / max) * barHeight, 4) : 4
+                    return (
+                      <div key={m.year_month} className="flex flex-1 flex-col items-center gap-1">
+                        <span className="text-[10px] text-muted-foreground">{m.count}</span>
+                        <div className="w-full rounded-t bg-primary" style={{ height: h }} />
+                        <span className="text-[9px] text-muted-foreground">{m.year_month.slice(5)}</span>
+                      </div>
+                    )
+                  })}
+                </div>
+              )
+            })()}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 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>
+      )}
+
+      {/* Budget & Language */}
+      {(report.total_budget_watched != null || report.language_distribution.length > 1) && (() => {
+        const hasBudget = report.total_budget_watched != null
+        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 && (
+                  <p className="mt-1 text-[10px] text-muted-foreground">
+                    {t("wrapup.avgBudget", { amount: `$${Math.round(report.avg_budget / 1_000_000)}M` })}
+                  </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>
+        )})()}
+
       {/* Highlights */}
       <Card>
         <CardHeader>
@@ -159,7 +266,7 @@ function WrapUpReportPage() {
       {report.poster_paths.length > 0 && (
         <Card>
           <CardHeader>
-            <CardTitle className="text-sm">{t("wrapup.posterMosaic")}</CardTitle>
+            <CardTitle className="text-sm">{t("wrapup.allMovies", { count: report.poster_paths.length })}</CardTitle>
           </CardHeader>
           <CardContent>
             <div className="grid grid-cols-5 gap-1">