imgfloat/server
1
0
Fork 0
mirror of https://github.com/imgfloat/server.git synced 2026-06-22 21:01:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: remove duplicate playlist title row when expanded

Browse Source 
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
This commit is contained in:
Andreas Krühlmann
2026-05-01 11:05:52 +02:00
parent 648dbd9ff7
commit 505725f38d
2 changed files with 29 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/js/playlist.js
+25 -13
View File
@@ -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);
}
src/main/resources/templates/admin.html
+4 -17
View File
@@ -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">