feat: Edit Playlist modal — name, description, public toggle, cover upload

- 'Bearbeiten' button in playlist-detail header opens modal
- Subsonic updatePlaylist API: name, comment, public synced
- Cover upload via POST /api/playlist/{id}/image (Navidrome REST, Basic Auth)
- Cover delete via DELETE /api/playlist/{id}/image
- Graceful toast if Navidrome version doesn't support cover upload
- Mobile-responsive layout (stacks cover + fields on small screens)
- Bump SW cache to ns-v31

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-04-26 01:24:11 +02:00
1 parent dad2b0b730
commit 23d7c62045
4 files changed
+150 -2

No files matched your search

+41
View File
@@ -234,6 +234,7 @@
<div class="album-actions">
<button class="btn-play-all" id="btn-play-playlist"><svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>Abspielen</button>
<button class="btn-outline" id="btn-shuffle-playlist"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/></svg>Shuffle</button>
<button class="btn-outline" id="btn-edit-playlist"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>Bearbeiten</button>
</div>
</div>
</div>
@@ -491,6 +492,46 @@
</div>
</div>
<!-- EDIT PLAYLIST MODAL -->
<div class="edit-pl-overlay" id="edit-pl-overlay" onclick="if(event.target===this)closeEditPlModal()">
<div class="edit-pl-box">
<div class="edit-pl-header">
<span>Playlist bearbeiten</span>
<button class="edit-pl-close" onclick="closeEditPlModal()">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="edit-pl-body">
<div class="edit-pl-cover-wrap">
<div class="edit-pl-cover" id="edit-pl-cover"><div class="no-art">🎶</div></div>
<div class="edit-pl-cover-actions">
<button class="edit-pl-cover-btn" onclick="document.getElementById('edit-pl-file').click()" title="Bild hochladen">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
</button>
<button class="edit-pl-cover-btn" onclick="editPlRemoveCover()" title="Bild entfernen">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>
</button>
</div>
<input type="file" id="edit-pl-file" accept="image/*" style="display:none" onchange="editPlCoverSelected(this)">
</div>
<div class="edit-pl-fields">
<label class="edit-pl-label">Name <span style="color:var(--accent)">*</span></label>
<input class="edit-pl-input" id="edit-pl-name" type="text" placeholder="Playlist-Name">
<label class="edit-pl-label">Beschreibung</label>
<textarea class="edit-pl-input edit-pl-textarea" id="edit-pl-desc" placeholder="Optionale Beschreibung…" rows="3"></textarea>
<div class="edit-pl-toggle-row">
<span>Öffentlich</span>
<div class="toggle" id="edit-pl-public-toggle" onclick="this.classList.toggle('on')"></div>
</div>
</div>
</div>
<div class="edit-pl-footer">
<button class="edit-pl-btn-cancel" onclick="closeEditPlModal()">Abbrechen</button>
<button class="edit-pl-btn-save" onclick="saveEditPlaylist()">Speichern</button>
</div>
</div>
</div>
<!-- SONG INFO MODAL -->
<div class="info-modal" id="info-modal">
<div class="inner">