From d4bb9d636ae1ed63faefa9c0598e7a2f526b6a43 Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Sun, 16 Aug 2026 04:15:29 +0200
Subject: [PATCH] likes, season improvements

---
 src/lib/components/AppMenu.svelte             |   2 +-
 src/lib/components/ItemPage.svelte            |  10 +-
 src/lib/components/MenuItem.svelte            |   4 +-
 src/lib/components/Review.svelte              |  95 +++++++++--
 src/lib/reviews.server.ts                     |  47 +++++-
 src/lib/tmdb.server.ts                        |  14 +-
 src/lib/types.ts                              |   1 +
 src/routes/[kind]/[id]/+page.server.ts        |   4 +-
 .../[kind]/[id]/season/[season]/+page.svelte  |  82 +++++-----
 src/routes/profile/[actor]/+layout.server.ts  |  15 +-
 src/routes/profile/[actor]/+page.server.ts    |  28 ++--
 src/routes/profile/[actor]/+page.svelte       | 150 ++++++++++++------
 .../[actor]/review/[rkey]/+page.svelte        |  29 ++--
 13 files changed, 330 insertions(+), 151 deletions(-)

diff --git a/src/lib/components/AppMenu.svelte b/src/lib/components/AppMenu.svelte
index cd3cc6e..b3c7329 100644
--- a/src/lib/components/AppMenu.svelte
+++ b/src/lib/components/AppMenu.svelte
@@ -39,7 +39,7 @@
 </aside>
 
 <nav
-	class="fixed bottom-[calc(0.75rem+env(safe-area-inset-bottom))] left-1/2 z-50 grid min-h-14 w-[calc(100%-1.5rem)] max-w-sm -translate-x-1/2 grid-cols-3 rounded-2xl border border-white/10 bg-base-950/90 p-1.5 shadow-2xl shadow-black/40 backdrop-blur-xl md:hidden"
+	class="fixed bottom-[calc(0.75rem+env(safe-area-inset-bottom))] left-1/2 z-50 grid w-[calc(100%-1.5rem)] max-w-sm -translate-x-1/2 grid-cols-3 gap-1 rounded-2xl border border-white/10 bg-base-950/90 p-1 shadow-2xl shadow-black/40 backdrop-blur-xl md:hidden"
 	aria-label="Main navigation"
 >
 	<MenuItem href="/" label="Home" active={page.url.pathname === '/'} variant="bottom">
diff --git a/src/lib/components/ItemPage.svelte b/src/lib/components/ItemPage.svelte
index d8867c0..bca9959 100644
--- a/src/lib/components/ItemPage.svelte
+++ b/src/lib/components/ItemPage.svelte
@@ -57,18 +57,12 @@
 			? `${data.item.numberOfSeasons} ${data.item.numberOfSeasons === 1 ? 'season' : 'seasons'}`
 			: null
 	);
-	let episodeLabel = $derived(
-		data.item.numberOfEpisodes
-			? `${data.item.numberOfEpisodes} ${data.item.numberOfEpisodes === 1 ? 'episode' : 'episodes'}`
-			: null
-	);
 	let mediaFacts = $derived(
 		[
 			releaseYear,
 			data.item.creativeWorkType === 'tv_show' ? formatSeriesStatus(data.item.status) : null,
 			data.item.creativeWorkType === 'tv_show' ? seasonLabel : null,
-			data.item.creativeWorkType === 'tv_show' ? episodeLabel : null,
-			formatRuntime(data.item.runtime)
+			data.item.creativeWorkType === 'movie' ? formatRuntime(data.item.runtime) : null
 		].filter((fact): fact is string => fact !== null)
 	);
 	let hasSecondaryVisual = $derived(Boolean(data.trailer_url || data.item.backdrop));
@@ -265,7 +259,7 @@
 					<h2 class="text-lg font-semibold tracking-tight">Reviews</h2>
 					<div class="mt-4 flex max-w-2xl flex-col gap-4">
 						{#each displayedReviews as review (review.uri)}
-							<Review {review} showItem={false} />
+							<Review {review} viewerDid={data.did} showItem={false} />
 						{/each}
 					</div>
 
diff --git a/src/lib/components/MenuItem.svelte b/src/lib/components/MenuItem.svelte
index e7ac9c6..03932ce 100644
--- a/src/lib/components/MenuItem.svelte
+++ b/src/lib/components/MenuItem.svelte
@@ -28,7 +28,7 @@
 		cn(
 			'group relative flex transition-colors',
 			variant === 'bottom'
-				? 'h-12 min-w-0 flex-col items-center justify-center gap-1 rounded-xl px-2 py-1 text-[0.65rem] font-medium'
+				? 'h-10 w-full items-center justify-center rounded-xl'
 				: 'h-10 w-full items-center gap-3 rounded-lg p-2.5 text-sm font-semibold md:size-10',
 			active
 				? 'bg-accent-500/10 text-accent-300'
@@ -40,7 +40,7 @@
 
 {#snippet content()}
 	{@render children()}
-	<span class={variant === 'bottom' ? 'max-w-full truncate' : 'md:sr-only'}>{label}</span>
+	<span class={variant === 'bottom' ? 'sr-only' : 'md:sr-only'}>{label}</span>
 	{#if variant === 'sidebar'}
 		<span
 			class="pointer-events-none absolute left-14 hidden rounded-lg bg-accent-950/20 px-3 py-2 text-xs whitespace-nowrap text-white opacity-0 backdrop-blur-md transition-opacity group-hover:opacity-100 md:block"
diff --git a/src/lib/components/Review.svelte b/src/lib/components/Review.svelte
index a2ad4d3..2db3aae 100644
--- a/src/lib/components/Review.svelte
+++ b/src/lib/components/Review.svelte
@@ -3,6 +3,8 @@
 	import { isCanonicalResourceUri, parseCanonicalResourceUri } from '@atcute/lexicons';
 	import { EyeOff, Heart, Image as ImageIcon, MessageCircle } from '@lucide/svelte';
 	import { posterUrl } from '$lib/images';
+	import { loginDialog } from '$lib/login.svelte';
+	import { likeReview, unlikeReview } from '$lib/review-interactions.remote';
 	import type { ReviewCardModel } from '$lib/types';
 	import { cn, slugify, toMediaRouteKind } from '$lib/utils';
 	import Avatar from './Avatar.svelte';
@@ -10,10 +12,12 @@
 
 	let {
 		review,
+		viewerDid = null,
 		showItem = true,
 		class: className
 	}: {
 		review: ReviewCardModel;
+		viewerDid?: string | null;
 		showItem?: boolean;
 		class?: string;
 	} = $props();
@@ -39,6 +43,50 @@
 	let hasSpoilerText = $derived(review.containsSpoilers && Boolean(text));
 	let spoilerRevealed = $state(false);
 	let spoilerHidden = $derived(hasSpoilerText && !spoilerRevealed);
+	let liking = $state(false);
+	let interactionError = $state('');
+	// These are local snapshots so likes can update optimistically.
+	// svelte-ignore state_referenced_locally
+	let viewerLikeUri = $state(review.viewerLikeUri ?? null);
+	// svelte-ignore state_referenced_locally
+	let liked = $state(Boolean(review.viewerLikeUri));
+	// svelte-ignore state_referenced_locally
+	let likeCount = $state(review.likeCount);
+
+	async function toggleLike() {
+		interactionError = '';
+		if (!viewerDid) {
+			loginDialog.show();
+			return;
+		}
+		if (liking) return;
+
+		const previousLikeUri = viewerLikeUri;
+		const wasLiked = liked;
+		const previousLikeCount = likeCount;
+		liked = !wasLiked;
+		likeCount = wasLiked ? Math.max(0, likeCount - 1) : likeCount + 1;
+		liking = true;
+
+		try {
+			if (wasLiked) {
+				if (!previousLikeUri) throw new Error('Could not find your like.');
+				await unlikeReview({ reviewUri: review.uri, likeUri: previousLikeUri });
+				viewerLikeUri = null;
+			} else {
+				const result = await likeReview({ reviewUri: review.uri });
+				viewerLikeUri = result.uri;
+				if (!result.created) likeCount = previousLikeCount;
+			}
+		} catch (cause) {
+			viewerLikeUri = previousLikeUri;
+			liked = wasLiked;
+			likeCount = previousLikeCount;
+			interactionError = cause instanceof Error ? cause.message : 'Could not update like.';
+		} finally {
+			liking = false;
+		}
+	}
 </script>
 
 <article class={cn('flex gap-3 sm:gap-4', showItem ? 'p-3 sm:p-4' : 'py-3 sm:py-4', className)}>
@@ -136,27 +184,40 @@
 				{/if}
 			</div>
 
-			<a
-				href={reviewUrl}
-				aria-label={`Open review of ${review.media.title}`}
-				class="mt-3 flex w-fit items-center gap-3 text-xs text-base-500 transition-colors hover:text-base-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-400"
-			>
-				<span
-					class="inline-flex items-center gap-1"
-					aria-label={`${review.likeCount} ${review.likeCount === 1 ? 'like' : 'likes'}`}
+			<div class="mt-3 flex w-fit items-center gap-3 text-xs text-base-500">
+				<button
+					type="button"
+					onclick={toggleLike}
+					disabled={liking}
+					aria-pressed={liked}
+					aria-label={`${liked ? 'Unlike' : 'Like'} this review${likeCount > 0 ? `, ${likeCount} ${likeCount === 1 ? 'like' : 'likes'}` : ''}`}
+					class={cn(
+						'-m-1.5 inline-flex min-h-7 min-w-7 items-center justify-center gap-1 rounded-md p-1.5 transition-colors focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-accent-400 disabled:cursor-wait',
+						liked ? 'text-accent-400 hover:text-accent-300' : 'hover:text-base-300'
+					)}
 				>
-					<Heart class="size-4" strokeWidth={1.5} aria-hidden="true" />
-					{#if review.likeCount > 0}<span>{review.likeCount}</span>{/if}
-				</span>
+					<Heart
+						class="size-3.5"
+						fill={liked ? 'currentColor' : 'none'}
+						strokeWidth={1.5}
+						aria-hidden="true"
+					/>
+					{#if likeCount > 0}<span>{likeCount}</span>{/if}
+				</button>
 
-				<span
-					class="inline-flex items-center gap-1"
-					aria-label={`${review.commentCount} ${review.commentCount === 1 ? 'comment' : 'comments'}`}
+				<a
+					href={reviewUrl}
+					aria-label={`${review.commentCount} ${review.commentCount === 1 ? 'comment' : 'comments'} on this review`}
+					class="-m-1.5 inline-flex min-h-7 min-w-7 items-center justify-center gap-1 rounded-md p-1.5 transition-colors hover:text-base-300 focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-accent-400"
 				>
-					<MessageCircle class="size-4" strokeWidth={1.5} aria-hidden="true" />
+					<MessageCircle class="size-3.5" strokeWidth={1.5} aria-hidden="true" />
 					{#if review.commentCount > 0}<span>{review.commentCount}</span>{/if}
-				</span>
-			</a>
+				</a>
+			</div>
+
+			{#if interactionError}
+				<p class="mt-2 text-xs text-red-300" role="status">{interactionError}</p>
+			{/if}
 		{:else}
 			<div class="mt-4">
 				<Rating rating={review.rating} size="size-6" />
diff --git a/src/lib/reviews.server.ts b/src/lib/reviews.server.ts
index 5442455..2483ea0 100644
--- a/src/lib/reviews.server.ts
+++ b/src/lib/reviews.server.ts
@@ -1,3 +1,4 @@
+import { isCanonicalResourceUri, parseCanonicalResourceUri, type Did } from '@atcute/lexicons';
 import { getAtprotoCdnImageUrl } from '$lib/atproto/images';
 import { contrail } from '$lib/contrail';
 import type * as CommentListRecords from '$lib/contrail/types/types/watch/atmo/comment/listRecords';
@@ -175,6 +176,33 @@ export async function getReviewInteractions(reviewUri: string, viewerDid: string
 	};
 }
 
+export async function getViewerReviewLikes(viewerDid: Did | null | undefined) {
+	const viewerLikes = new Map<string, string>();
+	if (!viewerDid) return viewerLikes;
+
+	let cursor: string | undefined;
+	do {
+		const response = await contrail.get('watch.atmo.like.listRecords', {
+			params: { actor: viewerDid, cursor, limit: 200 }
+		});
+		if (!response.ok) {
+			throw new Error(`Could not load viewer likes from Contrail (${response.status})`);
+		}
+
+		for (const like of response.data.records) {
+			const subjectUri = like.value.subjectUri;
+			if (!isCanonicalResourceUri(subjectUri)) continue;
+			if (parseCanonicalResourceUri(subjectUri).collection !== 'social.popfeed.feed.review') {
+				continue;
+			}
+			viewerLikes.set(subjectUri, like.uri);
+		}
+		cursor = response.data.cursor;
+	} while (cursor);
+
+	return viewerLikes;
+}
+
 export async function getRecentlyReviewedMedia(): Promise<MediaSummary[]> {
 	const response = await contrail.get('watch.atmo.review.listRecords', {
 		params: { limit: 200, order: 'desc' }
@@ -204,7 +232,8 @@ export async function getRecentlyReviewedMedia(): Promise<MediaSummary[]> {
 
 export async function getMediaReviews(
 	tmdbId: number,
-	creativeWorkType: SupportedCreativeWorkType
+	creativeWorkType: SupportedCreativeWorkType,
+	viewerDid?: Did | null
 ): Promise<ReviewCardModel[]> {
 	const params = {
 		creativeWorkType,
@@ -212,7 +241,13 @@ export async function getMediaReviews(
 		limit: 200,
 		profiles: true
 	};
-	const response = await contrail.get('watch.atmo.review.listRecords', { params });
+	const [response, viewerLikes] = await Promise.all([
+		contrail.get('watch.atmo.review.listRecords', { params }),
+		getViewerReviewLikes(viewerDid).catch((cause) => {
+			console.error('Could not load viewer review likes from Contrail', cause);
+			return new Map<string, string>();
+		})
+	]);
 
 	if (!response.ok) {
 		throw new Error(`Could not load reviews from Contrail (${response.status})`);
@@ -223,7 +258,13 @@ export async function getMediaReviews(
 		const author = getReviewAuthor(record.did, profiles);
 		const review = toReview(record, author.handle);
 		return review?.media.tmdbId === tmdbId && review.media.creativeWorkType === creativeWorkType
-			? [{ ...review, author }]
+			? [
+					{
+						...review,
+						author,
+						viewerLikeUri: viewerLikes.get(review.uri) ?? null
+					}
+				]
 			: [];
 	});
 
diff --git a/src/lib/tmdb.server.ts b/src/lib/tmdb.server.ts
index 7e025d8..41faf0b 100644
--- a/src/lib/tmdb.server.ts
+++ b/src/lib/tmdb.server.ts
@@ -43,6 +43,7 @@ const MEDIA_APPENDS: [
 	'images'
 ] = ['credits', 'recommendations', 'external_ids', 'videos', 'watch/providers', 'images'];
 const PERSON_APPENDS: ['combined_credits'] = ['combined_credits'];
+const TV_SEASON_APPENDS: ['videos'] = ['videos'];
 
 const HOUR = 60 * 60;
 const WEEK = 7 * 24 * HOUR;
@@ -261,7 +262,10 @@ function getTrailerUrl(videos: VideoItem[]) {
 	const trailer =
 		videos.find(
 			(video) => video.site === 'YouTube' && video.type === 'Trailer' && video.official
-		) ?? videos.find((video) => video.site === 'YouTube' && video.type === 'Trailer');
+		) ??
+		videos.find((video) => video.site === 'YouTube' && video.type === 'Trailer') ??
+		videos.find((video) => video.site === 'YouTube' && video.type === 'Teaser' && video.official) ??
+		videos.find((video) => video.site === 'YouTube' && video.type === 'Teaser');
 
 	return trailer ? `https://www.youtube.com/watch?v=${encodeURIComponent(trailer.key)}` : null;
 }
@@ -454,10 +458,11 @@ export async function getTvSeasonPage(tmdbId: number, seasonNumber: number) {
 	const cache = getPublicDataCache(TV_SCHEDULE_TTL);
 	const [show, seasonSource] = await Promise.all([
 		getTvScheduleSource(tmdbId, cache),
-		cachePublicData(cache, `tmdb:tv-season:v1:${tmdbId}:${seasonNumber}`, () =>
+		cachePublicData(cache, `tmdb:tv-season:v2:${tmdbId}:${seasonNumber}`, () =>
 			getClient().tv_seasons.details({
 				series_id: tmdbId,
-				season_number: seasonNumber
+				season_number: seasonNumber,
+				append_to_response: TV_SEASON_APPENDS
 			})
 		)
 	]);
@@ -490,7 +495,8 @@ export async function getTvSeasonPage(tmdbId: number, seasonNumber: number) {
 			navigationIndex >= 0 && navigationIndex < navigableSeasons.length - 1
 				? navigableSeasons[navigationIndex + 1]
 				: null,
-		network: show.networks?.[0]?.name ?? null
+		network: show.networks?.[0]?.name ?? null,
+		trailer_url: getTrailerUrl(seasonSource.videos.results)
 	};
 }
 
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 2744ba0..188108d 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -65,6 +65,7 @@ export type ReviewCardModel = {
 	containsSpoilers: boolean;
 	likeCount: number;
 	commentCount: number;
+	viewerLikeUri?: string | null;
 };
 
 export type ReviewCommentModel = {
diff --git a/src/routes/[kind]/[id]/+page.server.ts b/src/routes/[kind]/[id]/+page.server.ts
index adf3997..8f267a1 100644
--- a/src/routes/[kind]/[id]/+page.server.ts
+++ b/src/routes/[kind]/[id]/+page.server.ts
@@ -32,7 +32,7 @@ function getStreamingRegion(url: URL, request: Request) {
 	return null;
 }
 
-export const load: PageServerLoad = async ({ params, request, url }) => {
+export const load: PageServerLoad = async ({ locals, params, request, url }) => {
 	const tmdbId = parseTmdbId(params.id);
 	const creativeWorkType = parseMediaRouteKind(params.kind);
 
@@ -43,7 +43,7 @@ export const load: PageServerLoad = async ({ params, request, url }) => {
 	try {
 		const [mediaPage, reviews] = await Promise.all([
 			getMediaPage(tmdbId, creativeWorkType, getStreamingRegion(url, request)),
-			getMediaReviews(tmdbId, creativeWorkType).catch((cause) => {
+			getMediaReviews(tmdbId, creativeWorkType, locals.did).catch((cause) => {
 				console.error('Could not load reviews from Contrail', cause);
 				return [];
 			})
diff --git a/src/routes/[kind]/[id]/season/[season]/+page.svelte b/src/routes/[kind]/[id]/season/[season]/+page.svelte
index 1f84638..06a866b 100644
--- a/src/routes/[kind]/[id]/season/[season]/+page.svelte
+++ b/src/routes/[kind]/[id]/season/[season]/+page.svelte
@@ -2,6 +2,7 @@
 	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import Container from '$lib/components/Container.svelte';
+	import TrailerDialog from '$lib/components/TrailerDialog.svelte';
 	import { calendarDayDifference, formatCalendarDate, relativeCalendarDate } from '$lib/dates';
 	import { backdropUrl, posterUrl, stillUrl } from '$lib/images';
 	import { slugify } from '$lib/utils';
@@ -102,43 +103,52 @@
 			<span class="truncate text-base-200">{data.season.name}</span>
 		</nav>
 
-		<header
-			class="mt-6 grid grid-cols-[7rem_minmax(0,1fr)] gap-4 sm:grid-cols-[11rem_minmax(0,1fr)] sm:gap-7"
-		>
+		{#if seasonPoster || data.trailer_url}
 			<div
-				class="aspect-2/3 overflow-hidden rounded-xl border border-white/10 bg-base-900 shadow-2xl shadow-black/30"
+				class={`mt-6 gap-2 sm:gap-4 ${seasonPoster && data.trailer_url ? 'grid grid-cols-[minmax(0,1fr)_minmax(0,3fr)]' : ''}`}
 			>
 				{#if seasonPoster}
 					<img
 						src={posterUrl(seasonPoster, 'w500')}
 						alt="Poster for {data.season.name} of {data.show.title}"
-						class="size-full object-cover"
+						class={`aspect-2/3 rounded-xl border border-white/10 object-cover shadow-2xl shadow-black/30 ${data.trailer_url ? 'w-full' : 'w-36 sm:w-56'}`}
 					/>
 				{/if}
+
+				{#if data.trailer_url}
+					<div class={seasonPoster ? 'relative min-h-0 overflow-hidden' : 'aspect-video'}>
+						<TrailerDialog
+							url={data.trailer_url}
+							title={`${data.show.title} ${data.season.name}`}
+							variant="feature"
+							fill={Boolean(seasonPoster)}
+						/>
+					</div>
+				{/if}
 			</div>
+		{/if}
 
-			<div class="min-w-0 self-center">
-				<div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-base-300 sm:text-sm">
-					{#if seasonStatus}<span>{seasonStatus}</span>{/if}
-					{#if seasonStatus && seasonDateRange}
-						<span class="text-base-600" aria-hidden="true">•</span>
-					{/if}
-					{#if seasonDateRange}<span>{seasonDateRange}</span>{/if}
-					{#if seasonDateRange}<span class="text-base-600" aria-hidden="true">•</span>{/if}
-					<span
-						>{data.season.episodeCount}
-						{data.season.episodeCount === 1 ? 'episode' : 'episodes'}</span
-					>
-					{#if data.network}
-						<span class="text-base-600" aria-hidden="true">•</span>
-						<span>{data.network}</span>
-					{/if}
-				</div>
-				<h1 class="mt-1 text-2xl leading-tight font-semibold tracking-tight sm:text-4xl">
-					{data.season.name}
-				</h1>
-				<p class="mt-1 text-sm font-medium text-base-300 sm:text-base">{data.show.title}</p>
+		<header class="mt-6 sm:mt-8">
+			<div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-base-300 sm:text-sm">
+				{#if seasonStatus}<span>{seasonStatus}</span>{/if}
+				{#if seasonStatus && seasonDateRange}
+					<span class="text-base-600" aria-hidden="true">•</span>
+				{/if}
+				{#if seasonDateRange}<span>{seasonDateRange}</span>{/if}
+				{#if seasonDateRange}<span class="text-base-600" aria-hidden="true">•</span>{/if}
+				<span
+					>{data.season.episodeCount}
+					{data.season.episodeCount === 1 ? 'episode' : 'episodes'}</span
+				>
+				{#if data.network}
+					<span class="text-base-600" aria-hidden="true">•</span>
+					<span>{data.network}</span>
+				{/if}
 			</div>
+			<h1 class="mt-1 text-3xl leading-tight font-semibold tracking-tight sm:text-5xl">
+				{data.season.name}
+			</h1>
+			<p class="mt-1 text-sm font-medium text-base-300 sm:text-base">{data.show.title}</p>
 		</header>
 
 		{#if data.season.overview}
@@ -154,17 +164,15 @@
 			<h2 class="text-lg font-semibold tracking-tight">Episodes</h2>
 
 			{#if data.episodes.length > 0}
-				<div class="mt-4 flex flex-col gap-4">
+				<div class="mt-4 flex flex-col gap-7">
 					{#each data.episodes as episode (episode.id)}
 						{@const dayDifference = calendarDayDifference(episode.airDate, data.today)}
 						{@const isUpcoming = dayDifference !== null && dayDifference >= 0}
 						<article
 							id={`episode-${episode.episodeNumber}`}
-							class={`scroll-mt-6 overflow-hidden rounded-xl border bg-white/[0.05] sm:grid sm:grid-cols-[12rem_minmax(0,1fr)] ${
-								isUpcoming ? 'border-accent-500/30' : 'border-white/10'
-							}`}
+							class="scroll-mt-6 sm:grid sm:grid-cols-[12rem_minmax(0,1fr)] sm:gap-4"
 						>
-							<div class="aspect-video bg-base-900">
+							<div class="aspect-video overflow-hidden rounded-lg bg-base-900">
 								{#if episode.still}
 									<img
 										src={stillUrl(episode.still, 'w300')}
@@ -184,7 +192,7 @@
 								{/if}
 							</div>
 
-							<div class="min-w-0 p-4 sm:p-5">
+							<div class="min-w-0 pt-3 sm:self-center sm:pt-0">
 								<div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-base-400">
 									<span class="font-semibold text-base-200">
 										{episodeCode(episode.seasonNumber, episode.episodeNumber)}
@@ -220,11 +228,7 @@
 					{/each}
 				</div>
 			{:else}
-				<div
-					class="mt-4 rounded-xl border border-white/10 bg-white/[0.05] p-5 text-sm text-base-300"
-				>
-					Episode information has not been announced yet.
-				</div>
+				<p class="mt-4 text-sm text-base-300">Episode information has not been announced yet.</p>
 			{/if}
 		</section>
 
@@ -238,7 +242,7 @@
 								id: showId,
 								season: String(data.previousSeason.seasonNumber)
 							})}
-							class="block rounded-xl border border-white/10 bg-white/[0.05] p-3 transition-colors hover:bg-white/[0.1] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/70"
+							class="block py-2 transition-opacity hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/70"
 						>
 							<span class="text-xs text-base-500">Previous</span>
 							<span class="mt-1 block text-sm font-semibold text-white"
@@ -255,7 +259,7 @@
 								id: showId,
 								season: String(data.nextSeason.seasonNumber)
 							})}
-							class="block rounded-xl border border-white/10 bg-white/[0.05] p-3 text-right transition-colors hover:bg-white/[0.1] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/70"
+							class="block py-2 text-right transition-opacity hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/70"
 						>
 							<span class="text-xs text-base-500">Next</span>
 							<span class="mt-1 block text-sm font-semibold text-white"
diff --git a/src/routes/profile/[actor]/+layout.server.ts b/src/routes/profile/[actor]/+layout.server.ts
index 19b725c..3e1c539 100644
--- a/src/routes/profile/[actor]/+layout.server.ts
+++ b/src/routes/profile/[actor]/+layout.server.ts
@@ -40,18 +40,23 @@ export const load: LayoutServerLoad = async ({ params }) => {
 	const avatar =
 		bskyProfile?.value && 'avatar' in bskyProfile.value ? bskyProfile.value.avatar : undefined;
 	const popfeedBanner = popfeedProfile?.value?.banner;
+	const legacyPopfeedBannerUrl =
+		popfeedProfile?.value && 'bannerUrl' in popfeedProfile.value
+			? popfeedProfile.value.bannerUrl
+			: undefined;
 	const bskyBanner = bskyProfile?.value?.banner;
-	const banner = popfeedBanner ?? bskyBanner;
-	const bannerUrl = banner
-		? getAtprotoCdnImageUrl({ did, blob: banner, preset: 'banner' })
-		: undefined;
+	const bannerUrl =
+		(popfeedBanner
+			? getAtprotoCdnImageUrl({ did, blob: popfeedBanner, preset: 'banner' })
+			: undefined) ??
+		legacyPopfeedBannerUrl ??
+		(bskyBanner ? getAtprotoCdnImageUrl({ did, blob: bskyBanner, preset: 'banner' }) : undefined);
 
 	return {
 		profile: {
 			did,
 			handle: profileEntry.handle ?? did,
 			displayName: popfeedProfile?.value?.displayName ?? bskyProfile?.value?.displayName,
-			description: popfeedProfile?.value?.description ?? bskyProfile?.value?.description,
 			avatarUrl: avatar
 				? getAtprotoCdnImageUrl({ did, blob: avatar, preset: 'avatar' })
 				: undefined,
diff --git a/src/routes/profile/[actor]/+page.server.ts b/src/routes/profile/[actor]/+page.server.ts
index 62443e9..60509b8 100644
--- a/src/routes/profile/[actor]/+page.server.ts
+++ b/src/routes/profile/[actor]/+page.server.ts
@@ -1,14 +1,24 @@
 import { error } from '@sveltejs/kit';
 import { contrail } from '$lib/contrail';
 import { getProfileMediaLists } from '$lib/lists.server';
-import { toReview } from '$lib/reviews.server';
+import { getViewerReviewLikes, toReview } from '$lib/reviews.server';
 import type { PageServerLoad } from './$types';
 
-export const load: PageServerLoad = async ({ parent }) => {
+export const load: PageServerLoad = async ({ locals, parent }) => {
 	const { profile } = await parent();
-	const response = await contrail.get('watch.atmo.review.listRecords', {
-		params: { actor: profile.did }
-	});
+	const [response, viewerLikes, lists] = await Promise.all([
+		contrail.get('watch.atmo.review.listRecords', {
+			params: { actor: profile.did, limit: 200, order: 'desc' }
+		}),
+		getViewerReviewLikes(locals.did).catch((cause) => {
+			console.error('Could not load viewer review likes from Contrail', cause);
+			return new Map<string, string>();
+		}),
+		getProfileMediaLists(profile).catch((cause) => {
+			console.error('Could not load profile lists from Contrail', cause);
+			return [];
+		})
+	]);
 
 	if (!response.ok) error(502, 'Could not load reviews');
 
@@ -22,16 +32,12 @@ export const load: PageServerLoad = async ({ parent }) => {
 							...review.author,
 							displayName: profile.displayName,
 							avatarUrl: profile.avatarUrl
-						}
+						},
+						viewerLikeUri: viewerLikes.get(review.uri) ?? null
 					}
 				]
 			: [];
 	});
 
-	const lists = await getProfileMediaLists(profile).catch((cause) => {
-		console.error('Could not load profile lists from Contrail', cause);
-		return [];
-	});
-
 	return { reviews, lists };
 };
diff --git a/src/routes/profile/[actor]/+page.svelte b/src/routes/profile/[actor]/+page.svelte
index d993fd6..d917139 100644
--- a/src/routes/profile/[actor]/+page.svelte
+++ b/src/routes/profile/[actor]/+page.svelte
@@ -1,36 +1,24 @@
 <script lang="ts">
-	import { untrack } from 'svelte';
 	import { UserProfile } from '@foxui/social';
 	import Container from '$lib/components/Container.svelte';
 	import ItemCard from '$lib/components/ItemCard.svelte';
 	import ListCard from '$lib/components/ListCard.svelte';
 	import Review from '$lib/components/Review.svelte';
-	import TabSelect from '$lib/components/TabSelect.svelte';
 	import type { PageData } from './$types';
 
-	type ProfileSection = 'reviews' | 'ratings' | 'lists';
-
-	function getDefaultSection(data: PageData): ProfileSection {
-		if (data.reviews.some((review) => review.text.trim())) return 'reviews';
-		if (data.reviews.length > 0) return 'ratings';
-		return 'lists';
-	}
-
 	let { data }: { data: PageData } = $props();
+	let showAllReviews = $state(false);
+	let showAllRatings = $state(false);
 	let ratings = $derived(data.reviews.filter((review) => !review.text.trim()));
 	let writtenReviews = $derived(data.reviews.filter((review) => review.text.trim()));
-	let selectedSection = $state<ProfileSection>(untrack(() => getDefaultSection(data)));
-	let profileTabs = $derived(
-		[
-			writtenReviews.length > 0 ? { value: 'reviews' as const, label: 'reviews' } : null,
-			ratings.length > 0 ? { value: 'ratings' as const, label: 'ratings' } : null,
-			data.lists.length > 0 ? { value: 'lists' as const, label: 'lists' } : null
-		].filter((option): option is { value: ProfileSection; label: string } => option !== null)
-	);
+	let displayedReviews = $derived(showAllReviews ? writtenReviews : writtenReviews.slice(0, 3));
+	let mobileRatings = $derived(showAllRatings ? ratings : ratings.slice(0, 6));
+	let desktopRatings = $derived(showAllRatings ? ratings : ratings.slice(0, 10));
 
 	$effect(() => {
-		if (profileTabs.length > 0 && !profileTabs.some((tab) => tab.value === selectedSection)) {
-			selectedSection = profileTabs[0].value;
+		if (data.profile.did) {
+			showAllReviews = false;
+			showAllRatings = false;
 		}
 	});
 </script>
@@ -41,47 +29,109 @@
 </svelte:head>
 
 <main class="min-h-dvh bg-base-950 pb-12 text-base-50">
-	<Container class="px-4 pt-12">
+	<Container class="px-4 sm:pt-8">
 		<UserProfile
-			class="not-prose"
+			class="not-prose -mx-4 w-[calc(100%+2rem)] max-w-none sm:mx-auto sm:w-auto sm:max-w-2xl sm:pb-0 [&>div:last-child]:hidden"
 			profile={{
 				handle: `@${data.profile.handle}`,
 				displayName: data.profile.displayName,
-				description: data.profile.description,
 				avatar: data.profile.avatarUrl,
 				banner: data.profile.bannerUrl
 			}}
 		/>
 
-		{#if profileTabs.length > 0}
-			<section class="mx-auto max-w-2xl pt-8" aria-labelledby="activity-heading">
-				<h2 id="activity-heading" class="sr-only">@{data.profile.handle}'s activity</h2>
-				<TabSelect
-					bind:value={selectedSection}
-					options={profileTabs}
-					label="Choose profile section"
-				/>
+		{#if writtenReviews.length > 0 || ratings.length > 0 || data.lists.length > 0}
+			<div class="mx-auto max-w-2xl">
+				{#if writtenReviews.length > 0}
+					<section class="mt-6 text-sm text-white">
+						<h2 class="text-lg font-semibold tracking-tight">Reviews</h2>
+						<div class="mt-4 flex flex-col gap-4">
+							{#each displayedReviews as review (review.uri)}
+								<Review {review} viewerDid={data.did} class="px-0 sm:px-0" />
+							{/each}
+						</div>
+
+						{#if !showAllReviews && writtenReviews.length > 3}
+							<button
+								type="button"
+								onclick={() => (showAllReviews = true)}
+								class="mt-5 inline-flex h-8 items-center gap-1.5 rounded-full border border-white/15 bg-white/[0.07] px-3 text-xs font-semibold text-white transition-colors hover:bg-white/[0.12] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/70"
+							>
+								show more
+								<svg
+									class="size-3.5"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									aria-hidden="true"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="1.8"
+										d="m6 9 6 6 6-6"
+									/>
+								</svg>
+							</button>
+						{/if}
+					</section>
+				{/if}
+
+				{#if ratings.length > 0}
+					<section
+						class={`text-sm text-white ${writtenReviews.length > 0 ? 'mt-10 border-t border-white/10 pt-6' : 'mt-6'}`}
+					>
+						<h2 class="text-lg font-semibold tracking-tight">Ratings</h2>
+						<div class="mt-4 grid grid-cols-3 gap-4 lg:hidden">
+							{#each mobileRatings as review (review.uri)}
+								<ItemCard item={review.media} showTitle={false} rating={review.rating} />
+							{/each}
+						</div>
+						<div class="mt-4 hidden grid-cols-5 gap-4 lg:grid">
+							{#each desktopRatings as review (review.uri)}
+								<ItemCard item={review.media} showTitle={false} rating={review.rating} />
+							{/each}
+						</div>
+
+						{#if !showAllRatings && ratings.length > 6}
+							<button
+								type="button"
+								onclick={() => (showAllRatings = true)}
+								class={`mt-5 inline-flex h-8 items-center gap-1.5 rounded-full border border-white/15 bg-white/[0.07] px-3 text-xs font-semibold text-white transition-colors hover:bg-white/[0.12] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/70 ${ratings.length <= 10 ? 'lg:hidden' : ''}`}
+							>
+								show more
+								<svg
+									class="size-3.5"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									aria-hidden="true"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="1.8"
+										d="m6 9 6 6 6-6"
+									/>
+								</svg>
+							</button>
+						{/if}
+					</section>
+				{/if}
 
-				{#if selectedSection === 'reviews' && writtenReviews.length > 0}
-					<div class="mt-4 flex max-w-2xl flex-col gap-4">
-						{#each writtenReviews as review (review.uri)}
-							<Review {review} />
-						{/each}
-					</div>
-				{:else if selectedSection === 'ratings' && ratings.length > 0}
-					<div class="mt-6 grid grid-cols-3 gap-4 sm:grid-cols-3 lg:grid-cols-5">
-						{#each ratings as review (review.uri)}
-							<ItemCard item={review.media} showTitle={false} rating={review.rating} />
-						{/each}
-					</div>
-				{:else if selectedSection === 'lists' && data.lists.length > 0}
-					<div class="mt-6 grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3">
-						{#each data.lists as list (list.uri)}
-							<ListCard {list} />
-						{/each}
-					</div>
+				{#if data.lists.length > 0}
+					<section
+						class={`text-sm text-white ${writtenReviews.length > 0 || ratings.length > 0 ? 'mt-10 border-t border-white/10 pt-6' : 'mt-6'}`}
+					>
+						<h2 class="text-lg font-semibold tracking-tight">Lists</h2>
+						<div class="mt-4 grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3">
+							{#each data.lists as list (list.uri)}
+								<ListCard {list} />
+							{/each}
+						</div>
+					</section>
 				{/if}
-			</section>
+			</div>
 		{:else}
 			<p class="mx-auto max-w-2xl pt-8 text-sm text-base-400">No reviews, ratings, or lists yet.</p>
 		{/if}
diff --git a/src/routes/profile/[actor]/review/[rkey]/+page.svelte b/src/routes/profile/[actor]/review/[rkey]/+page.svelte
index a370285..fff517f 100644
--- a/src/routes/profile/[actor]/review/[rkey]/+page.svelte
+++ b/src/routes/profile/[actor]/review/[rkey]/+page.svelte
@@ -21,6 +21,8 @@
 	// svelte-ignore state_referenced_locally
 	let viewerLikeUri = $state(data.viewerLikeUri);
 	// svelte-ignore state_referenced_locally
+	let liked = $state(Boolean(data.viewerLikeUri));
+	// svelte-ignore state_referenced_locally
 	let likeCount = $state(data.likeCount);
 	let spoilerRevealed = $state(false);
 
@@ -63,18 +65,27 @@
 		}
 		if (liking) return;
 
+		const previousLikeUri = viewerLikeUri;
+		const wasLiked = liked;
+		const previousLikeCount = likeCount;
+		liked = !wasLiked;
+		likeCount = wasLiked ? Math.max(0, likeCount - 1) : likeCount + 1;
 		liking = true;
+
 		try {
-			if (viewerLikeUri) {
-				await unlikeReview({ reviewUri: data.review.uri, likeUri: viewerLikeUri });
+			if (wasLiked) {
+				if (!previousLikeUri) throw new Error('Could not find your like.');
+				await unlikeReview({ reviewUri: data.review.uri, likeUri: previousLikeUri });
 				viewerLikeUri = null;
-				likeCount = Math.max(0, likeCount - 1);
 			} else {
 				const result = await likeReview({ reviewUri: data.review.uri });
 				viewerLikeUri = result.uri;
-				if (result.created) likeCount += 1;
+				if (!result.created) likeCount = previousLikeCount;
 			}
 		} catch (cause) {
+			viewerLikeUri = previousLikeUri;
+			liked = wasLiked;
+			likeCount = previousLikeCount;
 			interactionError = cause instanceof Error ? cause.message : 'Could not update like.';
 		} finally {
 			liking = false;
@@ -181,15 +192,15 @@
 						type="button"
 						onclick={toggleLike}
 						disabled={liking}
-						aria-pressed={Boolean(viewerLikeUri)}
-						aria-label={`${viewerLikeUri ? 'Unlike' : 'Like'} this review${likeCount > 0 ? `, ${likeCount} ${likeCount === 1 ? 'like' : 'likes'}` : ''}`}
-						class={`inline-flex items-center gap-1.5 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent-400 disabled:cursor-wait disabled:opacity-60 ${
-							viewerLikeUri ? 'text-accent-400 hover:text-accent-300' : 'hover:text-white'
+						aria-pressed={liked}
+						aria-label={`${liked ? 'Unlike' : 'Like'} this review${likeCount > 0 ? `, ${likeCount} ${likeCount === 1 ? 'like' : 'likes'}` : ''}`}
+						class={`inline-flex items-center gap-1.5 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent-400 disabled:cursor-wait ${
+							liked ? 'text-accent-400 hover:text-accent-300' : 'hover:text-white'
 						}`}
 					>
 						<Heart
 							class="size-5"
-							fill={viewerLikeUri ? 'currentColor' : 'none'}
+							fill={liked ? 'currentColor' : 'none'}
 							strokeWidth={1.5}
 							aria-hidden="true"
 						/>
-- 
2.51.2