From 2155c4a9d519d9c0c8657c7f5162cec059c55cbc Mon Sep 17 00:00:00 2001
From: Josh Patra <joshpatra12@gmail.com>
Date: Fri, 6 Feb 2026 11:42:01 -0500
Subject: [PATCH] Fix delete button for manual track mappings

- Use data attributes instead of inline onclick to avoid quote escaping issues
- Add event listeners after rendering the table
- Fixes issue where Remove button didn't work due to escaped quotes in onclick attribute
---
 allstarr/wwwroot/index.html | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/allstarr/wwwroot/index.html b/allstarr/wwwroot/index.html
index 1cb57ba..87046c6 100644
--- a/allstarr/wwwroot/index.html
+++ b/allstarr/wwwroot/index.html
@@ -1400,7 +1400,7 @@
                     return;
                 }
                 
-                tbody.innerHTML = data.mappings.map(m => {
+                tbody.innerHTML = data.mappings.map((m, index) => {
                     const typeColor = m.type === 'jellyfin' ? 'var(--accent)' : 'var(--success)';
                     const typeBadge = `<span style="display:inline-block;padding:2px 8px;border-radius:4px;font-size:0.8rem;background:${typeColor}20;color:${typeColor};font-weight:500;">${m.type}</span>`;
                     
@@ -1421,11 +1421,20 @@
                             <td>${targetDisplay}</td>
                             <td style="color:var(--text-secondary);font-size:0.85rem;">${createdDate}</td>
                             <td>
-                                <button class="danger" style="padding:4px 12px;font-size:0.8rem;" onclick="deleteTrackMapping('${escapeHtml(m.playlist)}', '${m.spotifyId}')">Remove</button>
+                                <button class="danger delete-mapping-btn" style="padding:4px 12px;font-size:0.8rem;" data-playlist="${escapeHtml(m.playlist)}" data-spotify-id="${m.spotifyId}">Remove</button>
                             </td>
                         </tr>
                     `;
                 }).join('');
+                
+                // Add event listeners to all delete buttons
+                document.querySelectorAll('.delete-mapping-btn').forEach(btn => {
+                    btn.addEventListener('click', function() {
+                        const playlist = this.getAttribute('data-playlist');
+                        const spotifyId = this.getAttribute('data-spotify-id');
+                        deleteTrackMapping(playlist, spotifyId);
+                    });
+                });
             } catch (error) {
                 console.error('Failed to fetch track mappings:', error);
                 showToast('Failed to fetch track mappings', 'error');