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

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

@@ -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,152 +32,212 @@ 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>
+          {(person.homepage || person.imdb_url) && (
+            <div className="flex gap-1.5 pt-1">
+              {person.imdb_url && (
+                <a href={person.imdb_url} target="_blank" rel="noopener noreferrer">
+                  <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="outline" className="gap-1 text-[10px]">
+                    <Globe className="size-2.5" />
+                    {t("person.homepage")}
+                  </Badge>
+                </a>
+              )}
+            </div>
           )}
         </div>
       </div>
 
-      {/* Links */}
-      {(person.homepage || person.imdb_url) && (
-        <div className="flex gap-2">
-          {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>
-            </a>
-          )}
-          {person.homepage && (
-            <a href={person.homepage} target="_blank" rel="noopener noreferrer">
-              <Badge variant="secondary" className="gap-1">
-                <Globe className="size-3" />
-                {t("person.homepage")}
-              </Badge>
-            </a>
-          )}
-        </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>
-          <div className="flex flex-wrap gap-1">
-            {person.also_known_as.map((name) => (
-              <Badge key={name} variant="outline" className="text-xs font-normal">
-                {name}
-              </Badge>
-            ))}
-          </div>
-        </div>
+        <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">
+                  {name}
+                </Badge>
+              ))}
+            </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>
-          <div className="space-y-1">
-            {cast.map((c) => (
-              <MovieCard
-                key={`${c.movie_id}-${c.character}`}
-                movie={{
-                  id: c.movie_id,
-                  title: c.title,
-                  release_year: c.release_year ?? 0,
-                  poster_path: c.poster_path,
-                  genres: [],
-                }}
-                subtitle={c.character}
-                variant="compact"
-              />
-            ))}
-          </div>
-        </section>
-      )}
+      <Separator />
 
-      {/* 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>
-          <div className="space-y-1">
-            {crew.map((c) => (
-              <MovieCard
-                key={`${c.movie_id}-${c.job}`}
-                movie={{
-                  id: c.movie_id,
-                  title: c.title,
-                  release_year: c.release_year ?? 0,
-                  poster_path: c.poster_path,
-                  genres: [],
-                }}
-                subtitle={`${c.job} (${c.department})`}
-                variant="compact"
-              />
-            ))}
-          </div>
-        </section>
-      )}
-
-      {cast.length === 0 && crew.length === 0 && (
+      {/* 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
+                      key={`${c.movie_id}-${c.character}`}
+                      movie={{
+                        id: c.movie_id,
+                        title: c.title,
+                        release_year: c.release_year ?? 0,
+                        poster_path: c.poster_path,
+                        genres: [],
+                      }}
+                      subtitle={c.character}
+                      variant="compact"
+                    />
+                  ))}
+                </div>
+              )}
+              {tab === "crew" && (
+                <div className="space-y-1">
+                  {crew.map((c) => (
+                    <MovieCard
+                      key={`${c.movie_id}-${c.job}`}
+                      movie={{
+                        id: c.movie_id,
+                        title: c.title,
+                        release_year: c.release_year ?? 0,
+                        poster_path: c.poster_path,
+                        genres: [],
+                      }}
+                      subtitle={`${c.job} (${c.department})`}
+                      variant="compact"
+                    />
+                  ))}
+                </div>
+              )}
+            </>
+          )}
+        </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" />