feat(templates): add error page and toast components

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.
2026-02-20 13:25:35 -05:00
parent 572f71218b
commit 79fcfa38f0
4 changed files with 234 additions and 0 deletions
@@ -0,0 +1,34 @@
+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>
+	}
+}