mirror of
https://github.com/jakejarvis/sofa.git
synced 2026-08-29 05:05:38 -04:00
jakeandClaude Opus 4.6
c1867a4f23
Replace fully client-side dashboard and title detail pages with server component orchestrators that fetch data directly via service functions, eliminating extra network round-trips through API routes. Each section streams independently through its own Suspense boundary. - Extract getUserStats(), getTitleWithChildren(), getRecommendationsForTitle() into service layer; update getNewAvailableFeed() to include tmdbId/voteAverage - Split dashboard into server sections (stats, continue watching, library, recommendations) with client children for animations - Split title page into server hero + client interaction provider with shared context for optimistic mutations across actions and seasons - Add generateMetadata with OG tags, server-side TMDB ID resolution via redirect(), loading.tsx and not-found.tsx for both pages - Add per-section skeleton components, fix ContinueWatchingSkeleton dimensions - Remove 6 unused API routes (feed/*, titles/[id] GET, titles/[id]/recommendations) - Remove components/stats-summary.tsx, add lib/types/title.ts for shared types Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "motion/react";
|
|
import { TitleCard } from "@/components/title-card";
|
|
import type { RecommendedTitle } from "@/lib/types/title";
|
|
|
|
const staggerContainer = {
|
|
hidden: {},
|
|
visible: { transition: { staggerChildren: 0.05 } },
|
|
};
|
|
|
|
const staggerItem = {
|
|
hidden: { opacity: 0, y: 12, scale: 0.98 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
scale: 1,
|
|
transition: { type: "spring" as const, stiffness: 300, damping: 24 },
|
|
},
|
|
};
|
|
|
|
export function RecommendationsGrid({
|
|
recommendations,
|
|
}: {
|
|
recommendations: RecommendedTitle[];
|
|
}) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<h2 className="font-display text-2xl tracking-tight">Recommended</h2>
|
|
<motion.div
|
|
className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"
|
|
variants={staggerContainer}
|
|
initial="hidden"
|
|
animate="visible"
|
|
>
|
|
{recommendations.slice(0, 12).map((rec) => (
|
|
<motion.div key={rec.id} variants={staggerItem}>
|
|
<TitleCard
|
|
id={rec.id}
|
|
tmdbId={rec.tmdbId}
|
|
type={rec.type}
|
|
title={rec.title}
|
|
posterPath={rec.posterPath}
|
|
releaseDate={rec.releaseDate ?? rec.firstAirDate}
|
|
voteAverage={rec.voteAverage}
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|