From 505725f38d79c97503420734839d634f0e35b0eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20Kr=C3=BChlmann?= <andreas@kruhlmann.dev>
Date: Fri, 1 May 2026 11:05:52 +0200
Subject: [PATCH] fix: remove duplicate playlist title row when expanded

Move rename/delete buttons into the list item row (only shown when expanded)
and remove the redundant title/header section from the detail panel, so the
playlist name only appears once regardless of expansion state
---
 src/main/resources/static/js/playlist.js | 38 ++++++++++++++++--------
 src/main/resources/templates/admin.html  | 21 +++----------
 2 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/src/main/resources/static/js/playlist.js b/src/main/resources/static/js/playlist.js
index 612eee2..d8c4961 100644
--- a/src/main/resources/static/js/playlist.js
+++ b/src/main/resources/static/js/playlist.js
@@ -34,9 +34,6 @@
         createBtn:        () => document.getElementById("create-playlist-btn"),
         list:             () => document.getElementById("playlist-list"),
         detail:           () => document.getElementById("playlist-detail"),
-        detailName:       () => document.getElementById("playlist-detail-name"),
-        renameBtn:        () => document.getElementById("playlist-rename-btn"),
-        deleteBtn:        () => document.getElementById("playlist-delete-btn"),
         renameForm:       () => document.getElementById("playlist-rename-form"),
         renameInput:      () => document.getElementById("playlist-rename-input"),
         renameSave:       () => document.getElementById("playlist-rename-save"),
@@ -206,6 +203,30 @@
             selectBtn.addEventListener("click", (e) => { e.stopPropagation(); toggleActivePlaylist(p.id); });
 
             actions.appendChild(selectBtn);
+
+            if (p.id === expandedPlaylistId) {
+                const renameBtn = document.createElement("button");
+                renameBtn.type = "button";
+                renameBtn.className = "ghost small icon-button";
+                renameBtn.title = "Rename playlist";
+                renameBtn.innerHTML = '<i class="fa-solid fa-pencil" aria-hidden="true"></i>';
+                renameBtn.addEventListener("click", (e) => {
+                    e.stopPropagation();
+                    el.renameInput().value = p.name;
+                    el.renameForm()?.classList.remove("hidden");
+                    el.renameInput()?.focus();
+                });
+
+                const deleteBtn = document.createElement("button");
+                deleteBtn.type = "button";
+                deleteBtn.className = "ghost small icon-button danger-icon";
+                deleteBtn.title = "Delete playlist";
+                deleteBtn.innerHTML = '<i class="fa-solid fa-trash" aria-hidden="true"></i>';
+                deleteBtn.addEventListener("click", (e) => { e.stopPropagation(); deletePlaylist(); });
+
+                actions.appendChild(renameBtn);
+                actions.appendChild(deleteBtn);
+            }
             li.appendChild(nameSpan);
             li.appendChild(actions);
             list.appendChild(li);
@@ -239,26 +260,17 @@
     // ── Detail panel ──────────────────────────────────────────────────────
 
     function bindDetailButtons() {
-        el.renameBtn()?.addEventListener("click", () => {
-            const p = getExpanded();
-            if (!p) return;
-            el.renameInput().value = p.name;
-            el.renameForm()?.classList.remove("hidden");
-        });
         el.renameSave()?.addEventListener("click", saveRename);
         el.renameInput()?.addEventListener("keydown", e => { if (e.key === "Enter") saveRename(); });
         el.renameCancel()?.addEventListener("click", () => el.renameForm()?.classList.add("hidden"));
-        el.deleteBtn()?.addEventListener("click", deletePlaylist);
     }
 
     function renderDetail() {
         const detail = el.detail();
         if (!detail) return;
         const p = getExpanded();
-        if (!p) { detail.classList.add("hidden"); return; }
+        if (!p) { detail.classList.add("hidden"); el.renameForm()?.classList.add("hidden"); return; }
         detail.classList.remove("hidden");
-        el.detailName().textContent = p.name;
-        el.renameForm()?.classList.add("hidden");
         renderControls(p);
         renderTrackList(p);
     }
diff --git a/src/main/resources/templates/admin.html b/src/main/resources/templates/admin.html
index 758e967..b5ee51a 100644
--- a/src/main/resources/templates/admin.html
+++ b/src/main/resources/templates/admin.html
@@ -97,23 +97,10 @@
                                 <ul id="playlist-list" class="playlist-list"></ul>
                                 <!-- Playlist detail (shown when one is expanded) -->
                                 <div id="playlist-detail" class="playlist-detail hidden">
-                                    <div class="playlist-detail-header">
-                                        <div class="playlist-detail-title-row">
-                                            <span id="playlist-detail-name" class="playlist-detail-name"></span>
-                                            <div class="playlist-detail-actions">
-                                                <button type="button" id="playlist-rename-btn" class="ghost small icon-button" title="Rename playlist">
-                                                    <i class="fa-solid fa-pencil" aria-hidden="true"></i>
-                                                </button>
-                                                <button type="button" id="playlist-delete-btn" class="ghost small icon-button danger-icon" title="Delete playlist">
-                                                    <i class="fa-solid fa-trash" aria-hidden="true"></i>
-                                                </button>
-                                            </div>
-                                        </div>
-                                        <div id="playlist-rename-form" class="playlist-rename-form hidden">
-                                            <input id="playlist-rename-input" type="text" maxlength="100" autocomplete="off" />
-                                            <button type="button" id="playlist-rename-save" class="ghost small">Save</button>
-                                            <button type="button" id="playlist-rename-cancel" class="ghost small">Cancel</button>
-                                        </div>
+                                    <div id="playlist-rename-form" class="playlist-rename-form hidden">
+                                        <input id="playlist-rename-input" type="text" maxlength="100" autocomplete="off" />
+                                        <button type="button" id="playlist-rename-save" class="ghost small">Save</button>
+                                        <button type="button" id="playlist-rename-cancel" class="ghost small">Cancel</button>
                                     </div>
                                     <!-- Playback controls (only when this playlist is active) -->
                                     <div id="playlist-controls" class="playlist-controls hidden">