Refactor Scan Page

[XanderLuciano]

Refactors Scan Page into more discrete components. The components on the page are still fairly tightly coupled, but separating into separate component files makes the separation of functions clearer and improves maintainability of each individual aspect.

Along with the refactor, I also included a few improvements of existing functions. I have changed some synchronous functions into Async/Await promises that are no longer blocking. I've also added some new UX features to communicate to the user what the current state is for the camera (stopped vs. loading vs. scanning).

This also improves the UX of the scanning with camera feature by preventing the dom element from resizing when the camera starts/stops.

Barcodes are now automatically searched upon successful scan.

I have more planned for this page, but felt the current state of this PR is at a good state to push upstream while I work on new features.

Example Functionality:

[netlify]

✅ Deploy Preview for inventree-web-pui-preview ready!

Name	Link
🔨 Latest commit	a9c62ee
🔍 Latest deploy log	https://app.netlify.com/sites/inventree-web-pui-preview/deploys/6612379df68ec400082aacfd
😎 Deploy Preview	https://deploy-preview-6884--inventree-web-pui-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (no change from production) Accessibility: 86 (no change from production) Best Practices: 100 (no change from production) SEO: 70 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[XanderLuciano]

tracks towards: #5748

[matmair]

I see multiple problems in a quick test:

1. Constant errors that no QR code was found making notifications unusable
2. Unknown codes are just disregarded - and do not show up in history; this is a blocking bug

[XanderLuciano]

Constant errors that no QR code was found

Hmm, I encountered this at one point and thought the string comparison would suffice, but probably need to revert to just dump the errors to console instead of the pop-up notification. I was hoping to pass meaningful errors up to the user, but if it results in an error notification on every frame, that's bad.

Unknown codes are just disregarded - and do not show up in history

What is the intended behavior for scanning invalid QR codes? Just showing the raw QR code string value in the history?

Does showing invalid data in the history provide meaningful information to the user? Or would a popup notification with an error message and the QR code string also provide sufficient feedback to the user?

[github-actions]

This PR seems stale. Please react to show this is still important.