AI generate button and suggestion picker UI

[anurag629]

Phase 3 — First AI Feature (2/2)

Build the UI components for triggering AI generation and picking from suggestions, then integrate into the editor's text fields.

Components

`AIGenerateButton.tsx`

A small button placed next to text input fields in the editor.

```
Title
┌──────────────────────────────────┐ ┌──────────┐
│ How to Build a REST API │ │ ✨ AI │
└──────────────────────────────────┘ └──────────┘
```

States:

• Idle: `✨ AI` or just sparkle icon (compact)
• Loading: Spinner replacing the icon
• Error: Red tint, tooltip with error message

`AISuggestionPicker.tsx`

Dropdown/popover showing generated suggestions.

```
┌──────────────────────────────────────────┐
│ ✨ Pick a suggestion │
│──────────────────────────────────────────│
│ ○ "Build REST APIs Like a Pro" │
│ ○ "The Complete REST API Playbook" │
│ ○ "REST APIs: From Zero to Deploy" │
│──────────────────────────────────────────│
│ [↻ Regenerate] [Cancel] │
└──────────────────────────────────────────┘
```

Behavior:

• Appears below/above the input field (auto-positioned)
• Click a suggestion → fills the input, closes picker
• "Regenerate" → calls AI again with same context, shows new spinner
• "Cancel" → closes without changes
• Click outside → closes
• Keyboard: arrow keys to navigate, Enter to select, Escape to close

Editor Integration

Add the AI generate button to these fields in the editor:

• Title (text field) — primary use case
• Subtitle / Author / Description (text fields) — secondary
• Only show next to fields of type `text` or `textarea` from the template definition
• Pass current template category + field context to the generation function

UX Flow

1. User clicks ✨ next to Title field
2. If no AI key → Settings modal opens (see Integrate AI settings into editor navbar and conditional feature visibility #24)
3. If key configured → loading state, API call fires
4. Suggestions appear in picker
5. User clicks one → field populated
6. User can regenerate or cancel

Context Gathering

The prompt should be smart about context:

• Include the template category (blog, product, saas, etc.)
• Include any already-filled fields as context (e.g., if author is filled, use it)
• Include the field name being generated for

Styling

• Button: small, subtle, doesn't dominate the input field
• Picker: elevated card with shadow, matches OGCOPS design language
• Use CSS custom properties — no Tailwind
• Responsive: on mobile, picker can be a bottom sheet

Acceptance Criteria

• Generate button appears next to text/textarea fields in editor
• Clicking generates 3 suggestions via AI
• Suggestion picker allows selection, regeneration, and cancellation
• Selected suggestion fills the input field and updates the OG preview
• Loading and error states are clear
• Keyboard accessible (arrow keys, Enter, Escape)
• Works on mobile (touch-friendly sizing)
• Graceful fallback if AI call fails (error message, not broken UI)