feat: replace native confirm() with custom styled dialog

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

index.html

@@ -586,6 +586,18 @@
   </div>
 </div>
 
+<!-- CONFIRM DIALOG -->
+<div class="edit-pl-overlay" id="confirm-overlay" onclick="if(event.target===this)_confirmCancel()">
+  <div class="confirm-box">
+    <div class="confirm-title" id="confirm-title"></div>
+    <div class="confirm-msg" id="confirm-msg"></div>
+    <div class="confirm-footer">
+      <button class="edit-pl-btn-cancel" onclick="_confirmCancel()">Abbrechen</button>
+      <button class="edit-pl-btn-delete" id="confirm-ok-btn" onclick="_confirmOk()">Bestätigen</button>
+    </div>
+  </div>
+</div>
+
 <!-- SONG INFO MODAL -->
 <div class="info-modal" id="info-modal">
   <div class="inner">

src/main.js

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

src/ui.js

@@ -572,10 +572,23 @@ export async function editPlRemoveCover() {
   } catch(e) { S._ndToken = null; toast('Fehler: '+e.message); }
 }
 
+let _confirmResolve = null;
+export function _confirmOk()     { document.getElementById('confirm-overlay').classList.remove('open'); _confirmResolve?.(true);  _confirmResolve = null; }
+export function _confirmCancel() { document.getElementById('confirm-overlay').classList.remove('open'); _confirmResolve?.(false); _confirmResolve = null; }
+
+function showConfirm(title, msg, okLabel = 'Bestätigen') {
+  document.getElementById('confirm-title').textContent = title;
+  document.getElementById('confirm-msg').textContent   = msg;
+  document.getElementById('confirm-ok-btn').textContent = okLabel;
+  document.getElementById('confirm-overlay').classList.add('open');
+  return new Promise(resolve => { _confirmResolve = resolve; });
+}
+
 export async function deletePlaylist() {
   const pl = S._currentPlaylist;
   if (!pl) return;
-  if (!confirm(`Playlist "${pl.name}" wirklich löschen?`)) return;
+  const ok = await showConfirm('Playlist löschen', `"${pl.name}" wird unwiderruflich gelöscht.`, 'Löschen');
+  if (!ok) return;
   try {
     await api('deletePlaylist', `&id=${pl.id}`);
     closeEditPlModal();

styles.css

@@ -408,6 +408,10 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
 .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}
 .edit-pl-btn-save:hover{opacity:.85}
+.confirm-box{width:min(380px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--border2);border-radius:18px;box-shadow:0 40px 80px rgba(0,0,0,.8);padding:28px 28px 20px}
+.confirm-title{font-size:17px;font-weight:700;margin-bottom:10px}
+.confirm-msg{font-size:14px;color:var(--text2);line-height:1.5;margin-bottom:24px}
+.confirm-footer{display:flex;justify-content:flex-end;gap:10px}
 @media(max-width:480px){.edit-pl-body{flex-direction:column;align-items:center}.edit-pl-cover-wrap{width:140px;height:140px}}
 
 /* ── SONG INFO MODAL ── */