68 lines
2.2 KiB
Markdown
68 lines
2.2 KiB
Markdown
# Task: Frontend feedback submission flow
|
|
|
|
## Goal
|
|
|
|
Add the global authenticated Feedback button, submission dialog, viewport capture, and annotation flow.
|
|
|
|
## Feature Spec
|
|
|
|
- `docs/FEATURES/product-feedback.md`
|
|
|
|
## Scope
|
|
|
|
- Add feature-owned frontend code under `frontend/src/features/feedback/`.
|
|
- Add a small floating Feedback button to the authenticated app shell on every `/app/*` page.
|
|
- Keep the button visible on feedback-related pages too.
|
|
- Add a feedback submission dialog with:
|
|
- required type: `Bug`, `Suggestion`, `Request`
|
|
- required plain-text description
|
|
- optional capture flow
|
|
- dirty-close warning that discards unsent feedback if confirmed
|
|
- Capture only the current app viewport when the user explicitly clicks `Capture screen`.
|
|
- Add screenshot annotation support:
|
|
- crop
|
|
- arrows
|
|
- circles or ellipses
|
|
- lines
|
|
- freehand marks
|
|
- text labels
|
|
- undo
|
|
- clear/reset
|
|
- Export annotated screenshots as compressed PNG or JPEG.
|
|
- Submit feedback metadata, route context, browser metadata, viewport size, and optional screenshot to the backend.
|
|
- If capture fails, show a friendly error and allow text-only submission.
|
|
- Use established libraries for capture/annotation rather than custom screenshot infrastructure.
|
|
- Add English and French locale strings for the submission flow.
|
|
|
|
## Likely Files
|
|
|
|
- `frontend/package.json`
|
|
- `frontend/src/layouts/**`
|
|
- `frontend/src/features/feedback/**`
|
|
- `frontend/src/plugins/api.js`
|
|
- `frontend/src/locales/en.json`
|
|
- `frontend/src/locales/fr.json`
|
|
|
|
## Notes
|
|
|
|
- Runtime configuration must continue to flow through `frontend/src/config.js` if new configuration is needed.
|
|
- Keep the flow non-intrusive and app-shell scoped.
|
|
- Avoid landing-page or marketing-style UI.
|
|
|
|
## Validation
|
|
|
|
```bash
|
|
cd frontend
|
|
npm run build
|
|
```
|
|
|
|
## Done When
|
|
|
|
- [ ] Authenticated users see a floating Feedback button on every app page.
|
|
- [ ] Users can submit required type and description.
|
|
- [ ] Users can optionally capture and annotate the app viewport.
|
|
- [ ] Capture failures do not block text-only feedback.
|
|
- [ ] Dirty dialog close warns before discarding unsent feedback.
|
|
- [ ] UI strings exist in English and French.
|
|
- [ ] Frontend build passes.
|