social-media/docs/TASKS/product-feedback/004-frontend-feedback-submission.md

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

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.