Files
sofa/app/(pages)/dashboard/_components/continue-watching-section.tsx
T
jakeandClaude Opus 4.6 c1867a4f23 Convert dashboard and title pages to server components with granular Suspense
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>
2026-03-02 15:42:42 -05:00

43 lines
1.4 KiB
TypeScript

import { IconPlayerPlay } from "@tabler/icons-react";
import { getContinueWatchingFeed } from "@/lib/services/discovery";
import { tmdbImageUrl } from "@/lib/tmdb/image";
import type { ContinueWatchingItemProps } from "./continue-watching-card";
import { ContinueWatchingList } from "./continue-watching-list";
import { FeedSection } from "./feed-section";
export async function ContinueWatchingSection({ userId }: { userId: string }) {
const feed = await getContinueWatchingFeed(userId);
if (feed.length === 0) return null;
const items: ContinueWatchingItemProps[] = feed.map((item) => ({
title: {
id: item.title.id,
title: item.title.title,
backdropPath: tmdbImageUrl(item.title.backdropPath, "w1280"),
},
nextEpisode: item.nextEpisode
? {
seasonNumber: item.nextEpisode.seasonNumber,
episodeNumber: item.nextEpisode.episodeNumber,
name: item.nextEpisode.name,
stillPath: tmdbImageUrl(
item.nextEpisode.stillPath,
"w1280",
"stills",
),
}
: null,
totalEpisodes: item.totalEpisodes,
watchedEpisodes: item.watchedEpisodes,
}));
return (
<FeedSection
title="Continue Watching"
icon={<IconPlayerPlay size={20} className="text-primary" />}
>
<ContinueWatchingList items={items} />
</FeedSection>
);
}