docs: add product feedback feature plan
This commit is contained in:
@@ -0,0 +1,67 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user