From bb9d7d65ea244ba1c4ff33cbbb08a57cd9a7179e Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Sun, 25 Jan 2026 04:07:29 -0600
Subject: [PATCH] Add clickable performer names to AlbumCreditsModal

---
 src/lib/components/AlbumCreditsModal.svelte | 28 +++++++++++++++++++--
 src/routes/+page.svelte                     |  1 +
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/AlbumCreditsModal.svelte b/src/lib/components/AlbumCreditsModal.svelte
index a9e3a89ac..9b0c6683a 100644
--- a/src/lib/components/AlbumCreditsModal.svelte
+++ b/src/lib/components/AlbumCreditsModal.svelte
@@ -8,9 +8,10 @@
     albumId: string | null;
     onClose: () => void;
     onTrackPlay?: (track: TrackCredits) => void;
+    onPerformerSearch?: (name: string) => void;
   }
 
-  let { isOpen, albumId, onClose, onTrackPlay }: Props = $props();
+  let { isOpen, albumId, onClose, onTrackPlay, onPerformerSearch }: Props = $props();
 
   type TabType = 'credits' | 'review';
 
@@ -221,7 +222,14 @@
                       <div class="track-credits">
                         {#each track.performers as performer}
                           <div class="performer-row">
-                            <span class="performer-name">{performer.name}</span>
+                            {#if onPerformerSearch}
+                              <button
+                                class="performer-link"
+                                onclick={() => { onPerformerSearch(performer.name); onClose(); }}
+                              >{performer.name}</button>
+                            {:else}
+                              <span class="performer-name">{performer.name}</span>
+                            {/if}
                             {#if performer.roles.length > 0}
                               <span class="performer-roles">, {performer.roles.join(', ')}</span>
                             {/if}
@@ -612,6 +620,22 @@
     color: var(--text-primary);
   }
 
+  .performer-link {
+    background: none;
+    border: none;
+    padding: 0;
+    font-size: inherit;
+    font-weight: 500;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: color 150ms ease;
+  }
+
+  .performer-link:hover {
+    color: var(--accent-primary);
+    text-decoration: underline;
+  }
+
   .performer-roles {
     color: var(--text-muted);
   }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 58a6b44f9..df4ae4520 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2904,6 +2904,7 @@
           }
         }
       }}
+      onPerformerSearch={searchForPerformer}
     />
 
     <!-- Cast Picker -->