From 87ef075ea740982683ee7332ac38d3631070d02c Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sun, 16 Aug 2026 21:37:43 +0200
Subject: [PATCH] feat(plex): make the actor filter-chip open the person page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 frontend/src/components/PlexBrowse.tsx | 45 +++++++++++++++-----------
 1 file changed, 27 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/PlexBrowse.tsx b/frontend/src/components/PlexBrowse.tsx
index bf58932e..f3c4d55d 100644
--- a/frontend/src/components/PlexBrowse.tsx
+++ b/frontend/src/components/PlexBrowse.tsx
@@ -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")}