Add standalone error page template for graceful error display when the main app fails. Includes inline CSS since error pages must work when CSS fails to load. Add error toast component for displaying errors.
35 lines
1.1 KiB
Templ
35 lines
1.1 KiB
Templ
package templates
|
|
|
|
templ ErrorToast(message string) {
|
|
if message != "" {
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Show error toast with 8 second auto-dismiss
|
|
window.showToast.error('{ message }', 8000);
|
|
|
|
// Add retry button to the toast
|
|
setTimeout(function() {
|
|
const toastContainer = document.getElementById('toast-container');
|
|
if (toastContainer && toastContainer.lastElementChild) {
|
|
const toast = toastContainer.lastElementChild;
|
|
const retryBtn = document.createElement('button');
|
|
retryBtn.className = 'ml-4 px-3 py-1 bg-white/20 hover:bg-white/30 rounded text-sm font-medium transition-colors';
|
|
retryBtn.textContent = 'Retry';
|
|
retryBtn.onclick = function() {
|
|
window.location.reload();
|
|
};
|
|
|
|
// Insert before the close button
|
|
const closeBtn = toast.querySelector('.toast-close');
|
|
if (closeBtn) {
|
|
closeBtn.parentElement.insertBefore(retryBtn, closeBtn);
|
|
} else {
|
|
toast.appendChild(retryBtn);
|
|
}
|
|
}
|
|
}, 100);
|
|
});
|
|
</script>
|
|
}
|
|
}
|