From 380d7007baad42e3bc0c35e8859b7f15ff43985a Mon Sep 17 00:00:00 2001
From: Xe Iaso <me@xeiaso.net>
Date: Fri, 20 Mar 2026 11:36:13 +0000
Subject: [PATCH] fix(js/main): add cleanup for toggle event listener in
 useEffect

The useEffect registered a toggle listener on the <details> element but
never removed it, which could leak handlers on remounts or in tests.
Extract the handler to a named function and return a cleanup that calls
removeEventListener.

Assisted-by: Claude Opus 4.6 via Claude Code
Signed-off-by: Xe Iaso <me@xeiaso.net>
---
 web/js/main.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/web/js/main.tsx b/web/js/main.tsx
index 40ae427e..848cfc9c 100644
--- a/web/js/main.tsx
+++ b/web/js/main.tsx
@@ -109,12 +109,13 @@ function App({ anubisVersion, basePrefix }: AppProps) {
   // Main initialization
   useEffect(() => {
     const details = document.querySelector("details");
+    const onToggle = () => {
+      if (details?.open) {
+        detailsRead.current = true;
+      }
+    };
     if (details) {
-      details.addEventListener("toggle", () => {
-        if (details.open) {
-          detailsRead.current = true;
-        }
-      });
+      details.addEventListener("toggle", onToggle);
     }
 
     const showError = (title: string, message: string, imageSrc: string) => {
@@ -243,6 +244,12 @@ function App({ anubisVersion, basePrefix }: AppProps) {
           imageURL("reject", anubisVersion, basePrefix),
         );
       });
+
+    return () => {
+      if (details) {
+        details.removeEventListener("toggle", onToggle);
+      }
+    };
   }, []);
 
   const pensiveURL = imageURL("pensive", anubisVersion, basePrefix);