Skip to content

feat(scan): support 1D barcode scanning in Scan mode - #305

Draft
lyqht wants to merge 1 commit into
mainfrom
claude/qr-barcode-scanning-ux-hodf47
Draft

feat(scan): support 1D barcode scanning in Scan mode#305
lyqht wants to merge 1 commit into
mainfrom
claude/qr-barcode-scanning-ux-hodf47

Conversation

@lyqht

@lyqht lyqht commented Jun 19, 2026

Copy link
Copy Markdown
Owner

Summary

mini-qr's Scan mode already used html5-qrcode (which can decode 1D barcodes), but the UX was QR-only. This PR turns on real barcode support and tailors the result UX to it.

  • Capture the symbology (format) from both camera and file/image scans, and use it to distinguish QR-family 2D codes from 1D barcodes.
  • Wider camera viewfinder — function-form qrbox, no forced square aspect ratio — so wide/short 1D barcodes scan reliably.
  • Fix mislabeling — skip the URL/email/phone heuristics for barcodes so a numeric UPC/EAN is no longer shown as a "Phone Number"; show the symbology instead (e.g. Barcode · EAN-13).
  • Product lookup — a "Search this barcode online" link for retail symbologies (UPC/EAN), alongside the existing Copy and "Create QR from value" actions.
  • Inclusive copy + i18n — relabeled scan headings/result panel and added 6 new source strings to locales/en.json (Crowdin picks up translations).
  • New src/utils/scanFormats.ts helper (format → category / label / lookup URL) built test-first, with unit tests.

Files

  • src/components/QRCodeCameraScanner.vue — emit detected format, adaptive viewfinder
  • src/components/QRCodeScan.vue — track format, branch type-detection, result-panel actions
  • src/utils/scanFormats.ts (+ .test.ts) — pure helpers
  • locales/en.json — new strings

Verification

  • vitest node project: 188/188 pass (incl. 9 new scanFormats tests, written test-first)
  • vite build succeeds
  • eslint clean (0 errors); type-check adds no new errors (the one in QRCodeScan.vue is pre-existing on main)
  • ⚠️ Not run in CI env: live camera scanning and the Playwright browser test project (no browser available here). Worth a manual check — scan a physical UPC/EAN barcode via the camera and confirm the wide viewfinder + result panel — before merging.

Out of scope (intentional)

No manual QR/barcode toggle (auto-detect matches the dominant UX of comparable tools), no continuous/multi-scan history, no barcode generation, no new dependency.

🤖 Generated with Claude Code


Generated by Claude Code

mini-qr's Scan mode already used html5-qrcode (which decodes 1D barcodes),
but the UX was QR-only. This wires up real barcode support:

- Capture the decoded symbology (format) from camera and file/image scans
  and use it to distinguish QR-family 2D codes from 1D barcodes.
- Widen the camera viewfinder (function-form qrbox, no forced square aspect
  ratio) so wide/short 1D barcodes scan reliably.
- Skip URL/email/phone heuristics for barcodes so a numeric UPC/EAN is no
  longer mislabeled as a phone number; show the symbology instead
  (e.g. "Barcode · EAN-13").
- Add a "Search this barcode online" lookup link for retail product
  symbologies (UPC/EAN); keep Copy and "Create QR from value" actions.
- Relabel scan headings/result panel to include barcodes; add i18n keys.

Add scanFormats util (format -> category/label/lookup) with unit tests.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FvjrRLwHUqPdkVVTN6EiRq
@vercel

vercel Bot commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
mini-qr Ready Ready Preview Jun 19, 2026 8:37am

@github-actions

Copy link
Copy Markdown
Contributor

📚 Storybook preview for this PR: https://mini-qr-storybook-6iwlxzgdb-lyqhts-projects.vercel.app

Updated on every push to this branch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants