feat: add delete playlist button to edit modal

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

index.html

@@ -577,11 +577,14 @@
       </div>
     </div>
     <div class="edit-pl-footer">
+      <button class="edit-pl-btn-delete" onclick="deletePlaylist()">Löschen</button>
+      <div style="display:flex;gap:10px">
         <button class="edit-pl-btn-cancel" onclick="closeEditPlModal()">Abbrechen</button>
         <button class="edit-pl-btn-save" onclick="saveEditPlaylist()">Speichern</button>
       </div>
     </div>
   </div>
+</div>
 
 <!-- SONG INFO MODAL -->
 <div class="info-modal" id="info-modal">

src/main.js

@@ -28,6 +28,7 @@ import {
   createPlaylistPrompt, showSongInfo, closeInfoModal, openDlModal, closeDlModal,
   selectDlType, executeDownload, executeSpotifyDownload, openEditPlModal, closeEditPlModal,
   saveEditPlaylist, editPlUploadCover, editPlCoverSelected, editPlRemoveCover,
+  deletePlaylist,
   toggleMobileSearch, closeMobileSearch, switchSetupTab,
   toggleNotifPanel, deleteNotif, clearNotifs, initNotifBell,
 } from './ui.js';
@@ -235,7 +236,7 @@ Object.assign(window, {
   showSongInfo, closeInfoModal,
   openDlModal, closeDlModal, selectDlType, executeDownload,
   openEditPlModal, closeEditPlModal, saveEditPlaylist,
-  editPlUploadCover, editPlCoverSelected, editPlRemoveCover,
+  editPlUploadCover, editPlCoverSelected, editPlRemoveCover, deletePlaylist,
   toggleMobileSearch, closeMobileSearch, switchSetupTab,
   toggleNotifPanel, deleteNotif, clearNotifs,
   // App

src/ui.js

@@ -572,3 +572,15 @@ export async function editPlRemoveCover() {
   } catch(e) { S._ndToken = null; toast('Fehler: '+e.message); }
 }
 
+export async function deletePlaylist() {
+  const pl = S._currentPlaylist;
+  if (!pl) return;
+  if (!confirm(`Playlist "${pl.name}" wirklich löschen?`)) return;
+  try {
+    await api('deletePlaylist', `&id=${pl.id}`);
+    closeEditPlModal();
+    toast(`🗑 "${pl.name}" gelöscht`);
+    navigate('playlists');
+  } catch(e) { toast('Fehler beim Löschen: ' + e.message); }
+}
+

styles.css

@@ -401,7 +401,9 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
 .edit-pl-textarea{resize:vertical;min-height:72px;line-height:1.5}
 .edit-pl-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0}
 .edit-pl-toggle-row span{font-size:14px;font-weight:500}
-.edit-pl-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--border)}
+.edit-pl-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 24px;border-top:1px solid var(--border)}
+.edit-pl-btn-delete{padding:10px 18px;border-radius:9px;border:1px solid var(--danger);background:none;color:var(--danger);font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
+.edit-pl-btn-delete:hover{background:rgba(224,85,85,.12)}
 .edit-pl-btn-cancel{padding:10px 20px;border-radius:9px;border:none;background:none;color:var(--text2);font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;transition:color .15s}
 .edit-pl-btn-cancel:hover{color:var(--text)}
 .edit-pl-btn-save{padding:10px 22px;border-radius:9px;border:none;background:var(--accent);color:#000;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s}