GKaszewski/movies-diary
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign person page with Cards, SwipeTabs, collapsible bio

Browse Source
This commit is contained in:
Gabriel Kaszewski
2026-06-11 14:07:27 +02:00
parent e39fcf6802
commit 7dc372a7b6
2 changed files with 173 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
spa/src/locales/en.json
View File

@@ -23,7 +23,9 @@
"run": "Run",
"reviews": "{{count}} reviews",
"films": "{{count}} films",
"filmsAvg": "{{count}} films, avg {{avg}}"
"filmsAvg": "{{count}} films, avg {{avg}}",
"more": "Show more",
"less": "Show less"
},
"nav": {
"home": "Home",

177
spa/src/routes/_app/people.$id.tsx
View File

@@ -1,10 +1,15 @@
import { createFileRoute } from "@tanstack/react-router"
import { useState } from "react"
import { useTranslation } from "react-i18next"
import { Calendar, ExternalLink, Film, Globe, MapPin, User } from "lucide-react"
import { Calendar, ChevronDown, ExternalLink, Film, Globe, MapPin, User } from "lucide-react"
import { BackButton } from "@/components/back-button"
import { MovieCard } from "@/components/movie-card"
import { EmptyState } from "@/components/empty-state"
import { SwipeTabs } from "@/components/swipe-tabs"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Skeleton } from "@/components/ui/skeleton"
import { tmdbProfileUrl } from "@/lib/api/client"
import { usePersonCredits } from "@/hooks/use-search"
@@ -27,74 +32,101 @@ function PersonDetailPage() {
const { person, cast, crew } = data
const age = person.birthday
? differenceInYears(
person.deathday ? parseISO(person.deathday) : new Date(),
parseISO(person.birthday),
)
: null
const creditTabs = [
...(cast.length > 0 ? [{ value: "cast", label: t("movie.cast") + ` (${cast.length})` }] : []),
...(crew.length > 0 ? [{ value: "crew", label: t("movie.crew") + ` (${crew.length})` }] : []),
] as const
return (
<div className="space-y-4 p-4">
<BackButton />
{/* Header */}
<div className="flex gap-4">
<div className="size-20 flex-shrink-0 overflow-hidden rounded-xl bg-muted">
<div className="size-24 flex-shrink-0 overflow-hidden rounded-xl bg-muted">
{person.profile_path ? (
<img src={tmdbProfileUrl(person.profile_path)} alt="" className="size-full object-cover" />
) : (
<div className="flex size-full items-center justify-center">
<User className="size-8 text-muted-foreground/40" />
<User className="size-10 text-muted-foreground/40" />
</div>
)}
</div>
<div className="min-w-0 flex-1">
<div className="min-w-0 flex-1 space-y-1">
<h1 className="text-xl font-bold">{person.name}</h1>
{person.known_for_department && (
<p className="text-sm text-muted-foreground">{person.known_for_department}</p>
<Badge variant="secondary">{person.known_for_department}</Badge>
)}
{person.birthday && (
<p className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground">
<Calendar className="size-3" />
{shortDate(person.birthday)}
{person.deathday && ` — ${shortDate(person.deathday)}`}
{` (${differenceInYears(person.deathday ? parseISO(person.deathday) : new Date(), parseISO(person.birthday))})`}
</p>
)}
{person.place_of_birth && (
<p className="flex items-center gap-1.5 text-xs text-muted-foreground">
<MapPin className="size-3" />
{person.place_of_birth}
</p>
)}
</div>
</div>
{/* Links */}
{(person.homepage || person.imdb_url) && (
<div className="flex gap-2">
<div className="flex gap-1.5 pt-1">
{person.imdb_url && (
<a href={person.imdb_url} target="_blank" rel="noopener noreferrer">
<Badge variant="secondary" className="gap-1">
<ExternalLink className="size-3" />
{t("person.imdb")}
<Badge variant="outline" className="gap-1 text-[10px]">
<ExternalLink className="size-2.5" />
IMDb
</Badge>
</a>
)}
{person.homepage && (
<a href={person.homepage} target="_blank" rel="noopener noreferrer">
<Badge variant="secondary" className="gap-1">
<Globe className="size-3" />
<Badge variant="outline" className="gap-1 text-[10px]">
<Globe className="size-2.5" />
{t("person.homepage")}
</Badge>
</a>
)}
</div>
)}
</div>
</div>
{/* Details card */}
{(person.birthday || person.place_of_birth) && (
<Card size="sm">
<CardContent className="space-y-2">
{person.birthday && (
<div className="flex items-center gap-2 text-sm">
<Calendar className="size-3.5 text-muted-foreground" />
<span>{shortDate(person.birthday)}</span>
{age != null && (
<span className="text-muted-foreground">({age})</span>
)}
</div>
)}
{person.deathday && (
<div className="flex items-center gap-2 text-sm">
<Calendar className="size-3.5 text-muted-foreground" />
<span>{shortDate(person.deathday)}</span>
<span className="text-muted-foreground">({t("person.deathday").toLowerCase()})</span>
</div>
)}
{person.place_of_birth && (
<div className="flex items-center gap-2 text-sm">
<MapPin className="size-3.5 text-muted-foreground" />
<span>{person.place_of_birth}</span>
</div>
)}
</CardContent>
</Card>
)}
{/* Biography */}
{person.biography && (
<p className="text-sm leading-relaxed text-muted-foreground">{person.biography}</p>
)}
{person.biography && <BiographySection text={person.biography} />}
{/* Also known as */}
{person.also_known_as?.length > 0 && (
<div>
<p className="mb-1 text-xs font-medium text-muted-foreground">{t("person.alsoKnownAs")}</p>
<Card size="sm">
<CardHeader>
<CardTitle className="text-xs">{t("person.alsoKnownAs")}</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-1">
{person.also_known_as.map((name) => (
<Badge key={name} variant="outline" className="text-xs font-normal">
@@ -102,15 +134,18 @@ function PersonDetailPage() {
</Badge>
))}
</div>
</div>
</CardContent>
</Card>
)}
{/* Cast credits */}
{cast.length > 0 && (
<section>
<h2 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
{t("movie.castCredits", { count: cast.length })}
</h2>
<Separator />
{/* Credits */}
{creditTabs.length > 0 ? (
<SwipeTabs tabs={creditTabs} defaultValue={creditTabs[0].value} tabsListClassName="w-full">
{(tab) => (
<>
{tab === "cast" && (
<div className="space-y-1">
{cast.map((c) => (
<MovieCard
@@ -127,15 +162,8 @@ function PersonDetailPage() {
/>
))}
</div>
</section>
)}
{/* Crew credits */}
{crew.length > 0 && (
<section>
<h2 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
{t("movie.crewCredits", { count: crew.length })}
</h2>
{tab === "crew" && (
<div className="space-y-1">
{crew.map((c) => (
<MovieCard
@@ -152,27 +180,64 @@ function PersonDetailPage() {
/>
))}
</div>
</section>
)}
{cast.length === 0 && crew.length === 0 && (
</>
)}
</SwipeTabs>
) : (
<EmptyState icon={Film} title={t("movie.noCredits")} />
)}
</div>
)
}
const BIO_COLLAPSE_THRESHOLD = 300
function BiographySection({ text }: { text: string }) {
const { t } = useTranslation()
const isLong = text.length > BIO_COLLAPSE_THRESHOLD
const [expanded, setExpanded] = useState(!isLong)
return (
<Card size="sm">
<CardHeader>
<CardTitle className="text-xs">{t("person.biography")}</CardTitle>
</CardHeader>
<CardContent>
<p className={`text-sm leading-relaxed text-muted-foreground ${!expanded ? "line-clamp-4" : ""}`}>
{text}
</p>
{isLong && (
<Button
variant="ghost"
size="sm"
className="mt-1 h-auto p-0 text-xs text-primary"
onClick={() => setExpanded((v) => !v)}
>
<ChevronDown className={`mr-1 size-3 transition-transform ${expanded ? "rotate-180" : ""}`} />
{expanded ? t("common.less") : t("common.more")}
</Button>
)}
</CardContent>
</Card>
)
}
function PersonSkeleton() {
return (
<div className="space-y-4 p-4">
<Skeleton className="h-5 w-16" />
<div className="flex items-center gap-4">
<Skeleton className="size-16 rounded-full" />
<div className="space-y-2">
<div className="flex gap-4">
<Skeleton className="size-24 rounded-xl" />
<div className="flex-1 space-y-2">
<Skeleton className="h-6 w-32" />
<Skeleton className="h-4 w-20" />
<Skeleton className="h-5 w-20 rounded-full" />
<Skeleton className="h-4 w-24" />
</div>
</div>
<Skeleton className="h-20 rounded-xl" />
<Skeleton className="h-32 rounded-xl" />
<Skeleton className="h-1 w-full" />
<div className="space-y-2">
{[1, 2, 3, 4].map((i) => (
<Skeleton key={i} className="h-10 rounded-lg" />