Phase 3a Frontend-Hygiene: Toast statt alert/confirm

- src/static/css/style.css: Toast-Styles (.toast-container, .toast,
  Varianten info/success/warning/error, Animations)
- src/static/dashboard.html: <div id=toastContainer> vor </body>,
  Cancel-Button im Confirm-Modal bekommt id=confirmCancelBtn
- src/static/js/app.js:
  - showToast(msg, type) neu - links oben, autoclose 3.5s (error: 6s)
  - showConfirm(title, text, callback?) jetzt Promise<boolean>-fähig
    (Backwards-compat: Legacy-Callback wird bei OK weiter aufgerufen)
  - Cancel/Close-Hooks am modalConfirm setzen Promise auf false
- alle 18 alert() in app.js / source-health.js / sources.js durch
  showToast(msg, type) ersetzt (type je nach Kontext error/success/warning/info)
- 2 confirm() in source-health.js durch await showConfirm() ersetzt
Dieser Commit ist enthalten in:
claude-dev
2026-05-09 03:02:32 +00:00
Ursprung ca4422ccd1
Commit 5a87168416
5 geänderte Dateien mit 104 neuen und 23 gelöschten Zeilen

Datei anzeigen

@@ -790,3 +790,44 @@ tr:hover td {
.audit-diff .diff-new { color: #2ecc71; word-break: break-word; }
.token-budget-bar.over-limit { background: repeating-linear-gradient(45deg, #c0392b, #c0392b 6px, #962d22 6px, #962d22 12px); }
input[type="date"].filter-select { padding: 6px 10px; }
/* === Toast-Notifications (Phase 3) === */
.toast-container {
position: fixed;
top: 24px;
right: 24px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 10px;
max-width: 380px;
pointer-events: none;
}
.toast {
background: #1e293b;
border: 1px solid #334155;
border-left-width: 4px;
border-radius: 8px;
padding: 12px 16px;
color: #e2e8f0;
font-size: 14px;
line-height: 1.4;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
pointer-events: auto;
animation: toast-in 0.18s ease-out;
}
.toast.toast-out {
animation: toast-out 0.18s ease-in forwards;
}
.toast-info { border-left-color: #3b82f6; }
.toast-success { border-left-color: #10b981; }
.toast-warning { border-left-color: #f59e0b; }
.toast-error { border-left-color: #ef4444; }
@keyframes toast-in {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(20px); }
}