Add modernization report for build infrastructure, project structure, and Web APIs

[Copilot]

Creates a comprehensive technical roadmap for modernizing QR Snapper's 2018-era tooling and codebase.

Build Infrastructure

Current: Gulp 4.0 + Rollup 1.9 + Babel 7.4 with complex multi-step pipeline
Recommended: Vite (primary) or esbuild (speed) or Parcel 2 (simplicity)

• Migration guide with production-ready configurations
• Dependency removal list (all Gulp plugins, outdated Rollup/Babel)
• 3-4 day migration timeline

Project Structure

Problem: main.mjs is 606 lines mixing camera management, QR detection, UI, callbacks, and navigation

Solution: Modular component architecture:

• components/camera/ - CameraManager, CameraSource, WebCamManager, CameraFallback
• components/dialogs/ - QRCodeDialog, AboutDialog, CallbackController
• utils/ - url-utils, device-utils, security
• lib/qr-detector/ - QR detection logic isolated

Target: All files <200 lines with clear separation of concerns

Modern Web APIs

Remove deprecated patterns:

// ❌ Remove
navigator.webkitGetUserMedia
MediaStreamTrack.getSources()
video: { optional: [{ sourceId: id }] }

// ✅ Replace with
navigator.mediaDevices.getUserMedia({ 
  video: { deviceId: { exact: deviceId } }
})

Add modern capabilities:

• Wake Lock API - keep screen on during scanning
• Enhanced getUserMedia constraints - torch/flash, continuous focus
• Permissions API - check before requesting camera
• Better Share API - share images, not just text
• View Transitions API - smooth dialog animations

Already implemented: Barcode Detection API with polyfill fallback (documented)

Additional Coverage

• Security: Comprehensive URL validation beyond javascript: protocol check
• Accessibility: ARIA labels, screen reader announcements
• Browser targets: 2021+ (Chrome 90+, Firefox 88+, Safari 14+) enables native ES modules
• Testing recommendations: Vitest + Playwright
• Total effort: 14-19 days across 4 phases

Report includes code examples, configurations, and progressive enhancement strategies throughout.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Create a report to modernize this project.</issue_title>
<issue_description>I would like a detailed report on how to modernize this project.

Help me to understand and create a plan for:

1. How to modernize the build infrastructure of this site: For example, this repository is using a lot of outdated technology in the build process like Gulp. I would like to investigate the vite and ESBuild. What else is there I should be considering.
2. How should we structure this project? Some of the .mjs files are incredibly unwieldy.
3. How can I make use of modern Web APIs, for example there are changes to how Cameras can be interacted with using MediaDevices. What else should we be considering.

Please don't suggest using any additional frameworks like React or Angular.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Create a report to modernize this project. #86

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.