[Epic] User Feedback Screenshots

[ryan953]

The goal of the project is to close a large feature request, sentry users want to allow their customers to create an mark-up screen shots to better illustrate their feedback problems.

Basically, we want to solve for the cases in getsentry/sentry-javascript#9460

KTTR Tracking

Design Files

• Screenshot only wireframe figjam
• v3 Figma with expanding screen shot area

### Prep
- [x] Compare and choose framework for UI components, minimizing confusion with react, and minimizing bundle-size overhead: https://www.notion.so/sentry/User-Feedback-Screenshot-Frameworks-996f2ff9513249068a176437dd82d8a9?pvs=4

### Core - SDK (MVP)
- [x] Integrate sendFeedback() with captureUserFeedback(): https://github.com/getsentry/sentry-javascript/issues/10953
- [x] Create SDK-Loader style loader for async loading the image-capture transpiled ts/js `onClick={() => { hideFeedbackWidget(); const image = await askUserForAnnotatedScreenshot(); Sentry.getCurrentScope().addAttachment(image); showFeedbackWidget(image); }}`
- [ ] https://github.com/getsentry/sentry-javascript/issues/11435
- [x] Create `enableScreenshotReporting: boolean` option on existing Feedback integration class/hook
- [x] Disable "Add screenshot" button for mobile users because iOS & android do not have support for the API
- [x] Build the two-step design: screen shot is rendered -> user selects an area to include (or clicks cancel) -> preview screen is rendered -> user chooses "accept/go back" -> screen shot replaces button inside widget, is attached to feedback
- [x] Don't forget to re-use the theme/classnames/css variables from the widget, use it in the screen shot'r
- [x] Update screenshots and cropping styles and allow for customization
- [ ] Add tests!!!

### Core - App (MVP)
- [x] Show an icon in the feedback list when attachments are present
- [x] Render attachments inside Feedback Details
- [ ] https://github.com/getsentry/sentry/issues/67707
- [ ] Upsell when an attachment was dropped due to quota

### Screenshots (GA)
- [x] Update Feedback Product docs (what is this thing, include images, attachment quota management)
- [ ] Update feedback perf docs (what is the overhead)
- [x] Update Feedback config docs (how to enable)
- [x] Update in-app onboarding experience

### Bugs
- [x] Integrate sendFeedback() with captureUserFeedback():  https://github.com/getsentry/sentry-javascript/issues/10953
- [ ] https://github.com/getsentry/sentry-javascript/issues/11842
- [ ] https://github.com/getsentry/sentry-javascript/issues/11843
- [ ] https://github.com/getsentry/sentry-javascript/issues/11844
- [x] Safari adds black bars to the right & bottom of the screen shot, figure out what's happening here.
- [x] The canvas element doesn't resize properly after cropping (vertically) or on window resize.
- [x] The confirm/cancel buttons are inaccessible when the cropped image is too tall
- [x] Update the cropping rectangle after a resize
- [ ] https://github.com/getsentry/sentry/issues/67056

---

A followup to allow people to annotate/draw/mark-up their screenshots is here: #69786