Initial implementation

web/static/js/app.js

@@ -0,0 +1,74 @@
+// Chronological - Minimal JavaScript
+// Most interactivity is handled by HTMX
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Close modal when clicking backdrop
+    document.querySelectorAll('dialog').forEach(function(dialog) {
+        dialog.addEventListener('click', function(event) {
+            if (event.target === dialog) {
+                dialog.close();
+            }
+        });
+    });
+
+    // Event delegation for dynamic content
+    document.body.addEventListener('click', function(event) {
+        var target = event.target;
+        
+        // Handle modal opening via data attribute
+        var modalOpener = target.closest('[data-opens-modal]');
+        if (modalOpener) {
+            var modalId = modalOpener.getAttribute('data-opens-modal');
+            var modal = document.getElementById(modalId);
+            if (modal && modal.showModal) {
+                modal.showModal();
+            }
+        }
+        
+        // Handle diary edit toggle
+        if (target.matches('[data-action="toggle-diary-edit"]')) {
+            var display = target.closest('.diary-display');
+            if (display) {
+                display.style.display = 'none';
+                var editForm = display.nextElementSibling;
+                if (editForm) {
+                    editForm.style.display = 'block';
+                }
+            }
+        }
+        
+        // Handle diary edit cancel
+        if (target.matches('[data-action="cancel-diary-edit"]')) {
+            var editDiv = target.closest('.diary-edit');
+            if (editDiv) {
+                editDiv.style.display = 'none';
+                var displayDiv = editDiv.previousElementSibling;
+                if (displayDiv) {
+                    displayDiv.style.display = 'block';
+                }
+            }
+        }
+    });
+});
+
+// Handle keyboard shortcuts
+document.addEventListener('keydown', function(event) {
+    // Close modal on Escape
+    if (event.key === 'Escape') {
+        document.querySelectorAll('dialog[open]').forEach(function(dialog) {
+            dialog.close();
+        });
+    }
+});
+
+// HTMX event handlers
+document.body.addEventListener('htmx:afterSwap', function(event) {
+    // Re-initialize any dynamic elements after HTMX swaps
+    if (event.detail.target.id === 'day-modal-content') {
+        // Focus textarea when opening day modal with diary form
+        var textarea = event.detail.target.querySelector('textarea');
+        if (textarea) {
+            textarea.focus();
+        }
+    }
+});