feat(plex): make the actor filter-chip open the person page

The person cards above the Plex grid (the active actor filters) now open that person's
filmography page on click, reusing S4's onOpenPerson; the ✕ still removes the filter. The
name/photo become a button with the viewPerson tooltip; the remove control stays separate.
This commit is contained in:
2026-08-16 21:37:43 +02:00
parent 8b8c077a29
commit 87ef075ea7
+27 -18
View File
@@ -398,26 +398,35 @@ export default function PlexBrowse() {
{personCards.map((p) => (
<div
key={p.name}
className="glass-card flex items-center gap-2.5 rounded-xl py-1.5 pl-1.5 pr-2.5"
className="glass-card flex items-center gap-1 rounded-xl py-1.5 pl-1.5 pr-2.5"
>
{p.photo ? (
<img
src={p.photo}
alt=""
loading="lazy"
className="w-10 h-10 rounded-full object-cover shrink-0"
/>
) : (
<div className="w-10 h-10 rounded-full grid place-items-center bg-surface text-muted shrink-0">
<User className="w-5 h-5" />
{/* The photo + name open the actor's filmography page; the ✕ removes the filter. */}
<button
onClick={() => onOpenPerson(p.name)}
title={t("plex.info.viewPerson", { name: p.name })}
className="group/person flex min-w-0 items-center gap-2.5 rounded-lg text-left"
>
{p.photo ? (
<img
src={p.photo}
alt=""
loading="lazy"
className="w-10 h-10 rounded-full object-cover shrink-0"
/>
) : (
<div className="w-10 h-10 rounded-full grid place-items-center bg-surface text-muted shrink-0">
<User className="w-5 h-5" />
</div>
)}
<div className="min-w-0">
<div className="text-sm font-medium truncate max-w-[150px] group-hover/person:text-accent">
{p.name}
</div>
<div className="text-2xs text-muted">
{t("plex.people.count", { count: p.count })}
</div>
</div>
)}
<div className="min-w-0">
<div className="text-sm font-medium truncate max-w-[150px]">{p.name}</div>
<div className="text-2xs text-muted">
{t("plex.people.count", { count: p.count })}
</div>
</div>
</button>
<button
onClick={() => removeActor(p.name)}
title={t("plex.people.remove")}