refactor: Migrate zoom control and expand/collapse to hyperscript

- Move initZoomControlButtons() from main.js to hyperscript handlers
  - zoom-toggle-button: on click call toggleZoomControl()
  - zoom-close: on click call hideZoomControl()
  - show-zoom-menu-btn: on click call showZoomControl()
- Move expandAllSections/collapseAllSections from JS to utils._hs
- Add zoom visibility functions to zoom._hs:
  - showZoomControl(), hideZoomControl(), toggleZoomControl()
- Update hamburger menu links to use hyperscript calls

Eliminates ~75 more lines of JavaScript in favor of declarative
hyperscript, continuing the pattern of moving behavior to ._hs files.

static/hyperscript/utils._hs

@@ -134,6 +134,27 @@ def handleScroll()
   set :lastScroll to currentScroll
 end
 
+-- ==============================================================================
+-- EXPAND/COLLAPSE ALL SECTIONS
+-- ==============================================================================
+-- Expand all <details> elements in the CV
+def expandAllSections(evt)
+  if evt then call evt.preventDefault() end
+  set details to document.querySelectorAll('details')
+  for d in details
+    set d's @open to ''
+  end
+end
+
+-- Collapse all <details> elements in the CV
+def collapseAllSections(evt)
+  if evt then call evt.preventDefault() end
+  set details to document.querySelectorAll('details')
+  for d in details
+    call d.removeAttribute('open')
+  end
+end
+
 -- ==============================================================================
 -- FOOTER HOVER INTERACTION
 -- ==============================================================================

static/hyperscript/zoom._hs

@@ -100,14 +100,42 @@ def initZoomControl(control)
 end
 
 -- ==============================================================================
--- ZOOM CLOSE HANDLER
+-- ZOOM VISIBILITY HANDLERS
 -- ==============================================================================
--- Called when clicking the close button on zoom control
+-- Show zoom control
-def handleZoomClose(control)
+def showZoomControl()
+  set control to document.getElementById('zoom-control')
+  set menuBtn to document.getElementById('show-zoom-menu-btn')
+  if control is not null
+    remove .zoom-hidden from control
+    set localStorage['cv-zoom-visible'] to 'true'
+  end
+  if menuBtn is not null
+    add .zoom-hidden to menuBtn
+  end
+end
+
+-- Hide zoom control
+def hideZoomControl()
+  set control to document.getElementById('zoom-control')
+  set menuBtn to document.getElementById('show-zoom-menu-btn')
+  if control is not null
     add .zoom-hidden to control
     set localStorage['cv-zoom-visible'] to 'false'
-  set menuBtn to document.getElementById('show-zoom-menu-btn')
+  end
   if menuBtn is not null
     remove .zoom-hidden from menuBtn
   end
 end
+
+-- Toggle zoom control visibility
+def toggleZoomControl()
+  set control to document.getElementById('zoom-control')
+  if control is not null
+    if control.classList.contains('zoom-hidden')
+      call showZoomControl()
+    else
+      call hideZoomControl()
+    end
+  end
+end

static/js/main.js

@@ -55,24 +55,6 @@
         }
     }
 
-    /**
-     * Expand all <details> sections in the CV
-     * @param {Event} event - Click event
-     */
-    window.expandAllSections = function(event) {
-        event.preventDefault();
-        document.querySelectorAll('details').forEach(d => d.setAttribute('open', ''));
-    };
-
-    /**
-     * Collapse all <details> sections in the CV
-     * @param {Event} event - Click event
-     */
-    window.collapseAllSections = function(event) {
-        event.preventDefault();
-        document.querySelectorAll('details').forEach(d => d.removeAttribute('open'));
-    };
-
     /**
      * Auto-open sidebar accordions in landscape mobile mode AND desktop
      * Ensures sidebar content is always visible except in portrait mobile
@@ -504,68 +486,6 @@
     // INITIALIZATION
     // =============================================================================
 
-    /**
-     * Initialize zoom control button handlers
-     * Handles close button, show button, and toggle button
-     */
-    function initZoomControlButtons() {
-        const closeBtn = document.getElementById('zoom-close');
-        const showBtn = document.getElementById('show-zoom-menu-btn');
-        const toggleBtn = document.getElementById('zoom-toggle-button');
-        const zoomControl = document.getElementById('zoom-control');
-
-        // Helper function to toggle zoom visibility
-        function toggleZoom(show) {
-            if (show) {
-                zoomControl.classList.remove('zoom-hidden');
-                if (showBtn) showBtn.classList.add('zoom-hidden');
-                // Don't add zoom-active class - button stays same color
-                localStorage.setItem('cv-zoom-visible', 'true');
-            } else {
-                zoomControl.classList.add('zoom-hidden');
-                if (showBtn) showBtn.classList.remove('zoom-hidden');
-                // Don't remove zoom-active class - wasn't added
-                localStorage.setItem('cv-zoom-visible', 'false');
-            }
-        }
-
-        // Close button handler
-        if (closeBtn && zoomControl) {
-            closeBtn.addEventListener('click', function(e) {
-                e.preventDefault();
-                e.stopPropagation();
-                console.log('Zoom close clicked');
-                toggleZoom(false);
-            });
-        }
-
-        // Show button handler (hamburger menu)
-        if (showBtn && zoomControl) {
-            showBtn.addEventListener('click', function(e) {
-                e.preventDefault();
-                e.stopPropagation();
-                console.log('Zoom show clicked');
-                toggleZoom(true);
-            });
-        }
-
-        // Toggle button handler (fixed button)
-        if (toggleBtn && zoomControl) {
-            toggleBtn.addEventListener('click', function(e) {
-                e.preventDefault();
-                e.stopPropagation();
-                const isVisible = !zoomControl.classList.contains('zoom-hidden');
-                console.log('Zoom toggle clicked, currently visible:', isVisible);
-                toggleZoom(!isVisible);
-            });
-        }
-
-        // No need to set initial state since we don't use zoom-active class anymore
-        const isVisible = localStorage.getItem('cv-zoom-visible');
-
-        console.log('Zoom control initialized. localStorage cv-zoom-visible:', isVisible);
-    }
-
     /**
      * Initialize all CV interactive features when DOM is ready
      */
@@ -576,8 +496,8 @@
         initErrorToastClose();
         initHTMXHandlers();
         handleLandscapeAccordions(); // Auto-open sidebar accordions in landscape mode
-        initZoomControlButtons();
         // Note: Scroll behavior now handled by hyperscript in index.html body tag
+        // Note: Zoom control buttons now handled by hyperscript (zoom._hs)
         // initScrollBehaviorJS() removed - hyperscript handleScroll() is preferred
     });
 

templates/partials/navigation/hamburger-menu.html

@@ -65,15 +65,16 @@
                 <span>{{if eq .Lang "es"}}Acciones Rápidas{{else}}Quick Actions{{end}}</span>
             </div>
 
-            <a href="#" class="menu-item menu-item-action" onclick="collapseAllSections(event)">
+            <a href="#" class="menu-item menu-item-action" _="on click call collapseAllSections(event)">
                 <iconify-icon icon="mdi:arrow-collapse-all" width="20" height="20"></iconify-icon>
                 <span>{{if eq .Lang "es"}}Colapsar Todo{{else}}Collapse All{{end}}</span>
             </a>
-            <a href="#" class="menu-item menu-item-action" onclick="expandAllSections(event)">
+            <a href="#" class="menu-item menu-item-action" _="on click call expandAllSections(event)">
                 <iconify-icon icon="mdi:arrow-expand-all" width="20" height="20"></iconify-icon>
                 <span>{{if eq .Lang "es"}}Expandir Todo{{else}}Expand All{{end}}</span>
             </a>
-            <a href="#" id="show-zoom-menu-btn" class="menu-item menu-item-action zoom-hidden">
+            <a href="#" id="show-zoom-menu-btn" class="menu-item menu-item-action zoom-hidden"
+               _="on click call showZoomControl()">
                 <iconify-icon icon="mdi:magnify" width="20" height="20"></iconify-icon>
                 <span>{{if eq .Lang "es"}}Zoom{{else}}Zoom{{end}}</span>
             </a>

templates/partials/widgets/zoom-control.html

@@ -40,7 +40,8 @@
         id="zoom-close"
         class="zoom-close-btn"
         aria-label="{{if eq .Lang "es"}}Cerrar control de zoom{{else}}Close zoom control{{end}}"
-        title="{{if eq .Lang "es"}}Cerrar{{else}}Close{{end}}">
+        title="{{if eq .Lang "es"}}Cerrar{{else}}Close{{end}}"
+        _="on click call hideZoomControl()">
         <iconify-icon icon="mdi:close" width="16" height="16" style="pointer-events: none;"></iconify-icon>
     </button>
 

templates/partials/widgets/zoom-toggle-button.html

@@ -5,7 +5,8 @@
     class="fixed-btn zoom-toggle-btn no-print has-tooltip"
     aria-label="{{if eq .Lang "es"}}Alternar control de zoom{{else}}Toggle zoom control{{end}}"
     data-tooltip="{{if eq .Lang "es"}}Control de zoom{{else}}Zoom control{{end}}"
-    _="on mouseenter call highlightZoomControl(true)
+    _="on click call toggleZoomControl()
+       on mouseenter call highlightZoomControl(true)
        on mouseleave call highlightZoomControl(false)">
     <iconify-icon icon="mdi:magnify" width="28" height="28"></iconify-icon>
 </button>