diff --git a/index.html b/index.html index 12b6df6..98d703d 100644 --- a/index.html +++ b/index.html @@ -586,6 +586,18 @@ + +
+
+
+
+ +
+
+
diff --git a/src/main.js b/src/main.js index 80313ee..0d68e82 100644 --- a/src/main.js +++ b/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 diff --git a/src/ui.js b/src/ui.js index 82139f6..4a321c6 100644 --- a/src/ui.js +++ b/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(); diff --git a/styles.css b/styles.css index 4b409e9..8451930 100644 --- a/styles.css +++ b/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 ── */