From 4426cacb46defe43039213e2e79aab9eda1e7463 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Thu, 29 Jan 2026 14:53:01 -0500
Subject: [PATCH] fix: improve HTMX error detection and remove module exports

- Change from htmx:beforeSwap to htmx:afterSwap event for better error timing
- Simplify event listener setup (removed duplicate handlers)
- Remove 'export {}' statement that was causing syntax errors
- Add proper TypeScript interface for HTMX event details
- Errors now detected after content swap, ensuring accurate error messages
- Toast notifications work correctly for all backend HTTP errors

Resolves JavaScript syntax error on page load and improves error handling.
---
 web/src/toast.ts | 41 ++++++++++++++++++++---------------------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/web/src/toast.ts b/web/src/toast.ts
index 9329a9c..3d51f38 100644
--- a/web/src/toast.ts
+++ b/web/src/toast.ts
@@ -123,18 +123,29 @@ const parseFetchError = async (response: Response): Promise<string> => {
 
 // Setup HTMX error listeners
 const setupHTMXListeners = (): void => {
-    // Listen for HTMX beforeSwap event
-    document.body.addEventListener('htmx:beforeSwap', (evt: Event) => {
-        const customEvent = evt as CustomEvent<{ xhr: XMLHttpRequest }>;
-        if (customEvent.detail.xhr && customEvent.detail.xhr.status >= 400) {
+    // Listen for HTMX afterSwap event to detect errors in swapped content
+    document.body.addEventListener('htmx:afterSwap', (evt: Event) => {
+        interface HTMXEventDetail {
+            xhr: XMLHttpRequest;
+            succeeded: boolean;
+            target: Element;
+        }
+        
+        const customEvent = evt as CustomEvent<HTMXEventDetail>;
+        
+        // Check if request failed
+        if (customEvent.detail.succeeded === false && customEvent.detail.xhr) {
             const xhr = customEvent.detail.xhr;
-            const errorMessage = parseXHRError(xhr);
-            showToast(errorMessage, 'error');
-            evt.preventDefault();
+            
+            // Show toast for HTTP errors
+            if (xhr.status >= 400 && xhr.status < 600) {
+                const errorMessage = parseXHRError(xhr);
+                showToast(errorMessage, 'error');
+            }
         }
     });
     
-    // Listen for HTMX responseError event
+    // Also listen for response errors (network issues, invalid responses)
     document.body.addEventListener('htmx:responseError', (evt: Event) => {
         const customEvent = evt as CustomEvent<{ xhr: XMLHttpRequest }>;
         const xhr = customEvent.detail.xhr;
@@ -179,20 +190,8 @@ if (typeof document !== 'undefined') {
 }
 
 // Export toast API for manual use
-declare global {
-    interface Window {
-        showToast: {
-            error: (message: string, duration?: number) => void;
-            success: (message: string, duration?: number) => void;
-            info: (message: string, duration?: number) => void;
-        };
-    }
-}
-
-window.showToast = {
+(window as any).showToast = {
     error: (message: string, duration?: number) => showToast(message, 'error', duration),
     success: (message: string, duration?: number) => showToast(message, 'success', duration),
     info: (message: string, duration?: number) => showToast(message, 'info', duration)
 };
-
-export {};