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:
@@ -398,26 +398,35 @@ export default function PlexBrowse() {
|
|||||||
{personCards.map((p) => (
|
{personCards.map((p) => (
|
||||||
<div
|
<div
|
||||||
key={p.name}
|
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 ? (
|
{/* The photo + name open the actor's filmography page; the ✕ removes the filter. */}
|
||||||
<img
|
<button
|
||||||
src={p.photo}
|
onClick={() => onOpenPerson(p.name)}
|
||||||
alt=""
|
title={t("plex.info.viewPerson", { name: p.name })}
|
||||||
loading="lazy"
|
className="group/person flex min-w-0 items-center gap-2.5 rounded-lg text-left"
|
||||||
className="w-10 h-10 rounded-full object-cover shrink-0"
|
>
|
||||||
/>
|
{p.photo ? (
|
||||||
) : (
|
<img
|
||||||
<div className="w-10 h-10 rounded-full grid place-items-center bg-surface text-muted shrink-0">
|
src={p.photo}
|
||||||
<User className="w-5 h-5" />
|
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>
|
||||||
)}
|
</button>
|
||||||
<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)}
|
onClick={() => removeActor(p.name)}
|
||||||
title={t("plex.people.remove")}
|
title={t("plex.people.remove")}
|
||||||
|
|||||||
Reference in New Issue
Block a user