From 6970606c42bc5a3b8c5a349703d2a580836ba523 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Tue, 2 Dec 2025 16:00:00 +0000
Subject: [PATCH] refactor: simplify contact form timestamp with hyperscript +
 minimal JS

Replace 34-line IIFE/MutationObserver with:
- Hyperscript: on toggle if me.open call resetContactForm()
- 11-line resetContactForm() function

Also dispatches 'show' event from openModal() for ninja-keys integration.
All 7 contact form tests pass.
---
 static/js/ninja-keys-init.js                 |  2 ++
 templates/partials/modals/contact-modal.html | 36 +++++++++-----------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/static/js/ninja-keys-init.js b/static/js/ninja-keys-init.js
index 11920fb..37059d5 100644
--- a/static/js/ninja-keys-init.js
+++ b/static/js/ninja-keys-init.js
@@ -48,6 +48,8 @@
       const modal = document.getElementById(modalId);
       if (modal && modal.showModal) {
         modal.showModal();
+        // Dispatch 'show' event for hyperscript handlers
+        modal.dispatchEvent(new CustomEvent('show'));
       }
       ninjaKeys.close();
     }
diff --git a/templates/partials/modals/contact-modal.html b/templates/partials/modals/contact-modal.html
index 3c86521..0750467 100644
--- a/templates/partials/modals/contact-modal.html
+++ b/templates/partials/modals/contact-modal.html
@@ -2,23 +2,7 @@
 <!-- Contact Form Modal - Native Dialog -->
 <dialog id="contact-modal" class="info-modal no-print"
         _="on click call closeOnBackdrop(me, event)
-           on show
-             -- Reset form state when modal opens
-             set form to getElementById('contact-form')
-             if form
-               call form.reset()
-               set formFields to querySelectorAll('.form-group') in form
-               repeat for field in formFields
-                 remove .hidden from field
-               end
-               remove .hidden from querySelector('.form-actions') in form
-               remove .hidden from querySelector('.form-note') in form
-               set responseDiv to getElementById('contact-response')
-               if responseDiv set responseDiv.innerHTML to ''
-             end
-             -- Set timestamp for bot protection
-             set tsField to getElementById('contact-form-loaded-at')
-             if tsField set tsField.value to Date.now()">
+           on toggle if me.open call resetContactForm()">
     <div class="info-modal-content">
         <button class="info-modal-close" commandfor="contact-modal" command="close" aria-label="{{.UI.ContactModal.Close}}">
             <iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
@@ -68,8 +52,9 @@
                            autocomplete="off">
                 </div>
 
-                <!-- Timing field - set via JavaScript on page load -->
-                <input type="hidden" name="form_loaded_at" id="contact-form-loaded-at">
+                <!-- Timing field - set on page load, reset on modal open -->
+                <input type="hidden" name="form_loaded_at" id="contact-form-loaded-at"
+                       _="on load set my.value to Date.now()">
 
                 <!-- Email (required) -->
                 <div class="form-group">
@@ -161,4 +146,17 @@
     </div>
 </dialog>
 
+<script>
+function resetContactForm() {
+    const form = document.getElementById('contact-form');
+    if (form) {
+        form.reset();
+        form.querySelectorAll('.form-group, .form-actions, .form-note').forEach(el => el.classList.remove('hidden'));
+        const resp = document.getElementById('contact-response');
+        if (resp) resp.innerHTML = '';
+    }
+    const ts = document.getElementById('contact-form-loaded-at');
+    if (ts) ts.value = Date.now();
+}
+</script>
 {{end}}