Skip to content

feat(sidepanel): inline feedback widget in side panel footer [GET-14]#47

Merged
DevanshuNEU merged 4 commits into
OpenCodeIntel:mainfrom
DevanshuNEU:feat/get-14-feedback-widget
Apr 21, 2026
Merged

feat(sidepanel): inline feedback widget in side panel footer [GET-14]#47
DevanshuNEU merged 4 commits into
OpenCodeIntel:mainfrom
DevanshuNEU:feat/get-14-feedback-widget

Conversation

@DevanshuNEU

@DevanshuNEU DevanshuNEU commented Apr 21, 2026

Copy link
Copy Markdown
Contributor

Summary

Adds a zero-friction inline feedback widget to the side panel footer. Users type their issue and hit Send — no new tab, no redirect, no signup. Formspree delivers each submission to devanshurajesh@gmail.com instantly, with the extension version pre-attached so issues are traceable. This ships before the Chrome Web Store launch because users are the top priority.

Type of change

  • Bug fix
  • New feature
  • Documentation / config update
  • Refactor

What was changed

File Why
entrypoints/sidepanel/components/FeedbackWidget.tsx New component. Three states: idle (muted trigger link), open (textarea + cancel/send), sent (green confirmation, auto-resets to idle after 4s). Error state retries. Version read from chrome.runtime.getManifest().version so it tracks bumps automatically. POSTs JSON to Formspree.
entrypoints/sidepanel/App.tsx Import and render <FeedbackWidget /> below the History section.
entrypoints/sidepanel/dashboard.css lco-dash-feedback-* styles matching the existing card/button design system. Full dark mode + reduced-motion coverage.

How to test

  1. Load .output/chrome-mv3 in Chrome dev mode
  2. Open the Saar side panel
  3. Scroll to the bottom — "Having an issue? Send feedback" link should be visible
  4. Click it — textarea and Cancel/Send buttons appear inline
  5. Type a message, hit Send — button shows "Sending...", then "Sent. We'll fix it fast." in green, then resets to the idle link after 4 seconds
  6. Check devanshurajesh@gmail.com — email arrives with the message and subject "Saar Feedback v0.1.0"
  7. Cancel button closes the form without sending
  8. Send button is disabled when textarea is empty

No new permissions required

The side panel is an extension page. Extension pages can make cross-origin fetch requests freely in MV3 — no host_permissions needed for Formspree.

Related issues

Closes GET-14

Summary by CodeRabbit

  • New Features

    • Added a feedback widget in the side panel, enabling users to submit optional feedback directly from the extension.
  • Documentation

    • Updated privacy policy to disclose the optional feedback submission pathway and data shared with Formspree.
  • Tests

    • Added unit tests for the feedback widget component.

@coderabbitai

coderabbitai Bot commented Apr 21, 2026

Copy link
Copy Markdown

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This PR introduces a feedback widget feature to the extension's side panel, allowing users to optionally submit feedback including the extension version to Formspree. Supporting changes include privacy policy updates (static HTML and Next.js pages), CSS styling for the widget UI states, comprehensive unit tests, and test configuration updates to include .tsx files.

Changes

Cohort / File(s) Summary
Feedback Widget Component
entrypoints/sidepanel/App.tsx, entrypoints/sidepanel/components/FeedbackWidget.tsx, entrypoints/sidepanel/dashboard.css
New multi-step feedback widget with idle, open, sending, sent, and error states. Component submits trimmed user message (max 2000 chars) and extension version to Formspree endpoint via POST; resets to idle after 4 seconds on success or displays error state on failure. Includes styling for all UI states and reduced-motion accessibility support.
Testing & Configuration
tests/unit/feedback-widget.test.tsx, vitest.config.ts, package.json
Comprehensive unit test suite covering state transitions, input validation, fetch success/failure paths, timer cleanup, and error handling; mocks chrome.runtime.getManifest() for version injection. Vitest config updated to include .tsx test files. Added @testing-library/react dev dependency.
Privacy Documentation
site/privacy.html, web/app/privacy/page.tsx
Added privacy disclosures: static HTML file updated with feedback submission details (message, version sent; opt-in via click; links to Formspree policy); new Next.js privacy policy page with structured sections covering data handling, permissions, third-party services, and contact information.

Sequence Diagram(s)

sequenceDiagram
    participant User as User
    participant Widget as FeedbackWidget
    participant Chrome as Chrome Runtime
    participant Formspree as Formspree API
    
    User->>Widget: Click feedback trigger
    Widget->>Widget: Transition to "open" state
    Widget->>User: Show textarea + Cancel/Send buttons
    
    User->>Widget: Type message + Click Send
    Widget->>Chrome: Read extension version (manifest)
    Chrome-->>Widget: Return version string
    Widget->>Widget: Transition to "sending" state
    Widget->>Formspree: POST {message, version, subject}
    
    alt Success
        Formspree-->>Widget: 200 OK response
        Widget->>Widget: Transition to "sent" state
        Widget->>User: Show success confirmation
        Widget->>Widget: After 4s, reset to "idle"
    else Error
        Formspree-->>Widget: Non-OK response or network error
        Widget->>Widget: Transition to "error" state
        Widget->>User: Show error message
    end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Poem

🐰 A widget hops in, feedback flows free,
Users can chirp their thoughts merrily,
To Formspree it leaps with version in tow,
Tests ensure all the states properly flow,
Privacy-blessed, the bunny's work done! 🌟

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and specifically summarizes the main change: adding an inline feedback widget to the side panel footer, with issue reference.
Description check ✅ Passed The description comprehensively covers all required sections: a clear summary, type of change marked, detailed file changes, step-by-step testing instructions, related issues, and notes about permissions.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@vercel

vercel Bot commented Apr 21, 2026

Copy link
Copy Markdown

@DevanshuNEU is attempting to deploy a commit to the Dev's projects Team on Vercel.

A member of the Team first needs to authorize it.

…-14]

- FeedbackWidget.tsx: three-state component (idle/open/sent); POSTs to Formspree with message + extension version; auto-resets to idle 4s after send
- App.tsx: render FeedbackWidget below History section
- dashboard.css: lco-dash-feedback-* styles; reduced-motion coverage
- FeedbackWidget: hoist VERSION to module constant; useEffect+clearTimeout for timer leak; derive trimmed once per render; add MAX_MESSAGE_LENGTH=2000 guard on textarea and submit
- privacy/page.tsx: add Formspree disclosure to Third-party services section (CWS policy compliance)
- privacy.html: same Formspree disclosure for CWS-linked privacy page
@DevanshuNEU DevanshuNEU force-pushed the feat/get-14-feedback-widget branch from 37dc848 to dc59d47 Compare April 21, 2026 18:41
- 12 tests covering all critical paths: idle/open/sent/error states, whitespace guard, 2000-char limit, timer cleanup on unmount, fetch-throws, non-ok status, cancel, POST payload shape
- vitest.config.ts: extend include glob to tests/**/*.test.{ts,tsx}
- bun add -D @testing-library/react@16
@vercel

vercel Bot commented Apr 21, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
getsaar Ready Ready Preview, Comment Apr 21, 2026 6:50pm

@DevanshuNEU DevanshuNEU merged commit da0c299 into OpenCodeIntel:main Apr 21, 2026
5 of 7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant