npm package: @robertdima/feedback-toolbar
Description: A Vercel-like feedback toolbar for Nuxt 4 projects with Supabase backend
Latest version: 0.1.8

# @robertdima/feedback-toolbar

A Vercel-like feedback toolbar for Nuxt 4 projects with Supabase backend. Allow clients to click anywhere on your dev deployments and leave feedback (bugs, feature requests, comments).

## Features

- 🎯 **Click-to-comment**: Click anywhere on the page to leave contextual feedback
- 📸 **Screenshot capture**: Automatically captures screenshots with html2canvas
- 📍 **Position tracking**: Records click coordinates and CSS selectors
- 📱 **Device info**: Captures browser, OS, viewport, and device pixel ratio
- 🔐 **Password protection**: Simple password gate via environment variable
- 📬 **Inbox sidebar**: Quick access to view and manage tickets
- 📊 **Full dashboard**: Dedicated `/_feedback` route for complete ticket management
- ⚡ **Real-time updates**: Supabase realtime subscriptions for live updates
- ⌨️ **Keyboard shortcuts**: Press `Cmd/Ctrl + .` to enter comment mode
- 🎨 **Beautiful UI**: Dark glass-morphism design with smooth animations

## Installation

```bash
npm install @robertdima/feedback-toolbar
```

## Setup

### 1. Configure Nuxt Module

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@robertdima/feedback-toolbar'],

  feedbackToolbar: {
    // Required: Supabase connection
    supabaseUrl: process.env.SUPABASE_URL,
    supabaseKey: process.env.SUPABASE_ANON_KEY,

    // Required: Project identifier
    projectId: 'my-project',

    // Optional: Password protection
    password: process.env.FEEDBACK_PASSWORD,

    // Optional: UI configuration
    position: 'bottom-right', // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
    enableScreenshots: true,
    enableKeyboardShortcut: true,
    dashboardPath: '/_feedback', // Set to false to disable

    // Optional: Environment control (defaults to enabled in development only)
    enabled: process.env.NODE_ENV !== 'production',
  }
})
```

### 2. Set Up Supabase Database

Run the SQL schema in your Supabase SQL Editor:

```bash
# Copy the schema from
packages/feedback-toolbar/supabase/schema.sql
```

The schema creates:
- `tickets` table with all feedback data
- `ticket_comments` table for threaded discussions
- Indexes for efficient queries
- Row-level security policies
- Realtime subscriptions
- Automatic `updated_at` timestamps

### 3. Set Up Supabase Storage (Optional)

If you want screenshot uploads, create a storage bucket:

1. Go to Supabase Dashboard > Storage
2. Create a new bucket named `feedback-screenshots`
3. Make it public for read access
4. Add the following policies:
   - **Public read**: Allow SELECT for everyone
   - **Authenticated upload**: Allow INSERT for authenticated/anon users

### 4. Add Environment Variables

```env
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your-anon-key
FEEDBACK_PASSWORD=your-secret-password
```

## Usage

### Basic Usage

The toolbar automatically appears on your site. Users can:

1. Click the floating button (or press `Cmd + .`)
2. Click anywhere on the page to place a comment
3. Fill in the feedback form
4. Submit to create a ticket

### Accessing the Dashboard

Navigate to `/_feedback` (or your configured `dashboardPath`) to access the full ticket management dashboard.

### Composables

The module provides composables for custom integrations:

```typescript
// Access toolbar state
const {
  isOpen,
  mode,
  startCommenting,
  openInbox
} = useToolbar()

// Access tickets
const {
  tickets,
  createTicket,
  updateTicket
} = useTickets()

// Access auth state
const {
  isAuthenticated,
  authenticate
} = useAuth()
```

## Configuration Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `supabaseUrl` | `string` | - | Your Supabase project URL (required) |
| `supabaseKey` | `string` | - | Your Supabase anon key (required) |
| `projectId` | `string` | `'default'` | Unique identifier for your project |
| `password` | `string` | - | Password for access (optional) |
| `position` | `string` | `'bottom-right'` | Button position |
| `enableScreenshots` | `boolean` | `true` | Enable screenshot capture |
| `enableKeyboardShortcut` | `boolean` | `true` | Enable Cmd/Ctrl + . shortcut |
| `dashboardPath` | `string \| false` | `'/_feedback'` | Dashboard route path |
| `enabled` | `boolean` | `!production` | Enable/disable the module |

## Ticket Types

- 🐛 **Bug**: Something isn't working
- ✨ **Feature**: New functionality request
- 💡 **Improvement**: Enhancement to existing features
- ❓ **Question**: Need clarification

## Development

```bash
# Install dependencies
pnpm install

# Prepare for development
pnpm dev:prepare

# Run playground
pnpm dev

# Build the module
pnpm build
```

## License

MIT