Replace single toast with stacked toast queue

Multiple toasts can appear simultaneously, capped at 3. Oldest
toast auto-evicts when cap is reached. Each toast auto-dismisses
with a fade-up exit animation.

- frontend/app.js: toast() now creates DOM elements in toastContainer
- frontend/index.html: single #toast replaced with #toastContainer
- frontend/styles.css: .toast-container flexbox row, .toast-exit animation
This commit is contained in:
Jonathan Sykes
2026-06-14 14:36:07 +08:00
parent ddfa1494c6
commit a4d6b825d5
7 changed files with 51 additions and 11 deletions

View File

@@ -162,7 +162,7 @@
</div>
</div>
<div id="toast" class="toast hidden"></div>
<div id="toastContainer" class="toast-container"></div>
<!-- Keyboard shortcuts help overlay -->
<div id="shortcutHelp" class="shortcut-overlay hidden">