feat: Add native menu support for web modals in Electron app

[mattgodbolt]

Summary

• Enable Electron users to access web-based features (STH disc/tape archives, configuration, help, about) via native menus
• Use Electron's contextBridge for secure IPC between main and renderer processes
• Fix STH archive loading in Electron by detecting file:// protocol and using https:// explicitly
• Fix pre-existing window.onresize is not a function bug
• Show emulated model name in window title bar (e.g., "jsbeeb - BBC Master 128")

🤖 Generated with Claude Code

[mattgodbolt]

@claude what do you reckon?

[claude]

Claude finished @mattgodbolt's task —— View job

---

Reviewing PR: Add native menu support for web modals in Electron app

• Read repository guidelines (CLAUDE.md)
• Analyze changed files for implementation quality
• Check for potential bugs and security issues
• Review code style and best practices adherence
• Provide comprehensive review feedback

Review Summary

This is an excellent implementation that successfully bridges Electron's native menus with the web-based modal system. The changes are well-structured, secure, and follow the repository's coding standards.

✅ Strengths

Security & Architecture:

• ✅ Proper use of Electron's contextBridge for secure IPC communication (src/app/preload.js:5)
• ✅ Clean separation between main process menu definitions and renderer process modal handling
• ✅ No direct access to Node.js APIs from renderer process

Code Quality:

• ✅ Follows established patterns and conventions throughout the codebase
• ✅ Consistent error handling with try/catch blocks
• ✅ Proper async/await usage for modern JavaScript
• ✅ Good use of ES6+ features (arrow functions, destructuring, template literals)

Feature Implementation:

• ✅ Comprehensive native menu structure covering all major functionality
• ✅ Smart protocol detection for STH archive loading (src/sth.js:27)
• ✅ Elegant window title updates using MutationObserver (src/app/electron.js:42)
• ✅ Proper cleanup of non-Electron UI elements (src/app/preload.js:13-17)

🔍 Minor Observations

Potential Areas for Enhancement:

1. Error Handling: While generally good, consider adding more specific error messages for failed IPC communications
2. Menu State: The current implementation doesn't sync menu item states (enabled/disabled) based on emulator state
3. Window Title: The title update could potentially be optimized to avoid unnecessary DOM queries

Code Style Notes:

• All code follows the repository's ES2020 target and formatting guidelines
• Proper use of "use strict" declarations
• Consistent indentation and naming conventions

🚀 Technical Highlights

Smart Protocol Handling (src/sth.js:26-28):

const protocol = document.location.protocol === "file:" ? "https:" : document.location.protocol;

This elegantly solves the Electron file:// protocol issue for STH archive access.

Secure IPC Bridge (src/app/preload.js:5-11):

contextBridge.exposeInMainWorld("electronAPI", {
    onLoadDisc: (callback) => ipcRenderer.on("load", (event, message) => callback(message)),
    // ... other secure API methods
});

Perfect implementation of Electron's recommended security practices.

Dynamic Title Updates (src/app/electron.js:37-47):

const updateTitle = () => api.setTitle(`jsbeeb - ${modelElement.textContent}`);
new MutationObserver(updateTitle).observe(modelElement, {
    childList: true, characterData: true, subtree: true
});

Efficient solution for keeping window title in sync with emulated model.

🎯 Overall Assessment

This PR successfully delivers native Electron menu integration while maintaining excellent code quality and security standards. The implementation is production-ready and adds significant value to the Electron desktop experience.

Recommendation: ✅ Approve and Merge

The code demonstrates thoughtful architecture, proper security practices, and clean implementation. All changes align well with the existing codebase patterns and conventions outlined in CLAUDE.md.

---