fix: Replace hyperscript scroll handler with JavaScript implementation

The hyperscript-based scroll behavior was not working reliably across all browsers.
Replaced with a pure JavaScript implementation that:

Desktop (>900px):
- Hides action bar on scroll down (past 100px threshold)
- Shows action bar on scroll up
- Shows action bar at top of page

Mobile (≤900px):
- Always keeps action bar visible
- Actively removes header-hidden class on mobile
- Handles viewport resize for responsive testing

Changes:
- Added initScrollBehaviorJS() function to main.js
- Removed hyperscript scroll handlers from body tag in index.html
- Kept keyboard shortcut handlers in hyperscript (still working)
- Uses passive scroll listener for better performance

This fixes the bug where:
- Desktop: bar would hide but not show again on scroll up
- Mobile: bar was incorrectly hiding despite CSS override

tests/mjs/69-scroll-header-behavior-test.mjs

@@ -0,0 +1,78 @@
+#!/usr/bin/env node
+
+import { chromium } from 'playwright';
+
+async function test() {
+    const browser = await chromium.launch({ headless: true });
+
+    console.log('Testing scroll behavior with JavaScript implementation...\n');
+
+    // Desktop test
+    const ctx = await browser.newContext({ viewport: { width: 1278, height: 800 } });
+    const page = await ctx.newPage();
+    await page.goto('http://localhost:1999/?lang=en');
+    await page.waitForLoadState('networkidle');
+    await page.waitForTimeout(500);
+
+    // Check console for init message
+    page.on('console', msg => {
+        if (msg.text().includes('Scroll behavior')) console.log('Console:', msg.text());
+    });
+
+    console.log('1. Initial state:');
+    let state = await page.evaluate(() => ({
+        hidden: document.querySelector('.action-bar')?.classList.contains('header-hidden'),
+        scrollY: window.scrollY
+    }));
+    console.log(`   ScrollY: ${state.scrollY}, Hidden: ${state.hidden}`);
+
+    console.log('\n2. Scroll DOWN 500px:');
+    await page.evaluate(() => window.scrollTo(0, 500));
+    await page.waitForTimeout(300);
+    state = await page.evaluate(() => ({
+        hidden: document.querySelector('.action-bar')?.classList.contains('header-hidden'),
+        scrollY: window.scrollY
+    }));
+    console.log(`   ScrollY: ${state.scrollY}, Hidden: ${state.hidden}`);
+    console.log(state.hidden ? '   ✅ Bar hidden' : '   ❌ Bar should be hidden!');
+
+    console.log('\n3. Scroll UP to 300px:');
+    await page.evaluate(() => window.scrollTo(0, 300));
+    await page.waitForTimeout(300);
+    state = await page.evaluate(() => ({
+        hidden: document.querySelector('.action-bar')?.classList.contains('header-hidden'),
+        scrollY: window.scrollY
+    }));
+    console.log(`   ScrollY: ${state.scrollY}, Hidden: ${state.hidden}`);
+    console.log(!state.hidden ? '   ✅ Bar visible' : '   ❌ Bar should be visible!');
+
+    await ctx.close();
+
+    // Mobile test
+    console.log('\n4. Mobile (375px) - scroll down:');
+    const mobileCtx = await browser.newContext({
+        viewport: { width: 375, height: 667 },
+        userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X)',
+        hasTouch: true
+    });
+    const mobilePage = await mobileCtx.newPage();
+    await mobilePage.goto('http://localhost:1999/?lang=en');
+    await mobilePage.waitForLoadState('networkidle');
+    await mobilePage.waitForTimeout(500);
+
+    await mobilePage.evaluate(() => window.scrollTo(0, 500));
+    await mobilePage.waitForTimeout(300);
+    state = await mobilePage.evaluate(() => ({
+        hidden: document.querySelector('.action-bar')?.classList.contains('header-hidden'),
+        transform: getComputedStyle(document.querySelector('.action-bar')).transform
+    }));
+    console.log(`   Hidden class: ${state.hidden}, Transform: ${state.transform}`);
+    const isVisible = !state.hidden || state.transform === 'none' || state.transform.includes('0, 0)');
+    console.log(isVisible ? '   ✅ Bar visible on mobile' : '   ❌ Bar should stay visible!');
+
+    await mobileCtx.close();
+    await browser.close();
+    console.log('\nDone.');
+}
+
+test().catch(console.error);