Enha: attempt to do modal popup of clue; must be a better way

components/cluepopup.html

@@ -0,0 +1,53 @@
+{{define "cluepopup"}}
+<div hx-sse="swap:newClue" hx-swap="none"
+    _="on htmx:sseMessage(mimeclue_{{.ID}})
+          -- Update content
+        set match to event.detail.match(/(.*?)(\d+)$/)
+          if match
+            set clue to match[1]
+            set number to match[2]
+          else
+            set clue to 'Invalid clue'
+            set number to '0'
+          end
+          
+          -- Cancel any previous timeout
+          if window.clueTimeout then clearTimeout(window.clueTimeout)
+          
+          -- Show with animation
+          remove .hidden from #clueModal
+          remove .opacity-0.-translate-y-4 from #clueModal div
+          add .opacity-100.translate-y-0 to #clueModal div
+          
+          -- Auto-hide after 3 seconds
+          set window.clueTimeout to setTimeout(() => 
+            trigger closeModal
+          end, 3000)
+        
+        on closeModal
+          -- Hide with animation
+          add .opacity-0.-translate-y-4 to #clueModal div
+          wait 300ms
+          add .hidden to #clueModal">
+<div id="clueModal" 
+     class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full transition-opacity duration-300 ease-in-out">
+  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white 
+              transform transition-all duration-300 ease-out 
+              opacity-0 -translate-y-4">
+    <div class="mt-3 text-center">
+      <h3 class="text-lg leading-6 font-medium text-gray-900">New Clue Received! 🔍</h3>
+      <div class="mt-2 px-7 py-3">
+        <p class="text-sm text-gray-500">Clue: <span id="modalClue" class="font-medium"></span></p>
+        <p class="text-sm text-gray-500">Number: <span id="modalNumber" class="font-medium"></span></p>
+      </div>
+      <div class="items-center px-4 py-3">
+        <button _="on click trigger closeModal"
+                class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-700 transition-colors">
+          OK
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+</div>
+{{end}}