the-controller-feedback-widget

Feedback Widget

Set up a floating feedback button that lets users capture a screenshot, annotate it (freehand draw, arrows, rectangles, crop), and submit it as a GitHub issue — all without leaving the app.

Prerequisites

• Next.js App Router project (13+)
• shadcn/ui installed (Button, Sheet components)
• lucide-react installed

Setup Steps

1. Understand the target project

Before writing any code, determine:

• Auth system: How does the project authenticate users? (Supabase, NextAuth, Clerk, custom JWT, none)
• UI components path: Where are shadcn components? (usually src/components/ui/ or components/ui/)
• App metadata: What project-specific context should be captured with feedback? (current page URL is always captured; additional context like selected items, user settings, etc. is project-specific)

2. Install dependencies

npm install html2canvas-pro
# or: pnpm add html2canvas-pro / bun add html2canvas-pro

Ensure these shadcn components are installed:

npx shadcn@latest add button sheet

3. Create the AnnotationEditor component

Create annotation-editor.tsx in the project's component directory.

This component is fully portable — copy it verbatim from ## AnnotationEditor Reference below. It has no project-specific dependencies beyond shadcn Button and lucide icons.

Key features:

• Dual-canvas architecture (base image + draw overlay) for efficient rendering
• Tools: freehand draw, arrow, rectangle, crop
• Undo/clear via ImageData history stack
• Retina display support via devicePixelRatio
• Outputs a single composited PNG data URL on "Done"

4. Create the FeedbackButton component

Create feedback-button.tsx in the project's component directory. This needs project-specific adaptation:

Auth gating: Replace the auth check with the project's auth system:

// Supabase example
const supabase = createClient();
const { data: { user } } = await supabase.auth.getUser();
setIsAuthenticated(!!user);

// NextAuth example
const { data: session } = useSession();
setIsAuthenticated(!!session);

// Clerk example
const { isSignedIn } = useUser();
setIsAuthenticated(isSignedIn ?? false);

// No auth (always show)
setIsAuthenticated(true);