Integrate AI settings into editor navbar and conditional feature visibility

[anurag629]

Phase 2 — Settings UI (2/2)

Wire the AI Settings modal into the editor and control visibility of AI features based on key configuration.

Scope

Navbar Integration

• Add an AI settings icon/button to the editor navbar (sparkle ✨ icon or similar)
• Button states:
  • No key configured: Muted icon with subtle "Set up AI" tooltip
  • Key configured: Active/highlighted icon, tooltip shows provider name
• Clicking opens the AI Settings modal

Conditional Feature Visibility

• Create a React context or hook: `useAI()`
  • `isConfigured: boolean` — whether any provider has a valid key
  • `provider: AIProvider | null`
  • `model: string | null`
  • `openSettings(): void` — opens the settings modal
  • `generate(prompt, systemPrompt?): Promise` — calls /api/ai/generate
• AI action buttons (generate, suggest, analyze) should:
  • Show in the UI always (so users know AI features exist)
  • If no key configured → clicking opens Settings modal with a helpful message
  • If key configured → perform the AI action

Empty State

When user clicks an AI button with no key configured:
```
┌──────────────────────────────────────────┐
│ ✨ AI Features │
│ │
│ Set up an AI provider to unlock: │
│ • AI-generated titles & descriptions │
│ • Smart autofill from URL │
│ • Template recommendations │
│ │
│ Bring your own API key — we support │
│ OpenAI, Anthropic, Google, Groq, and │
│ OpenRouter. │
│ │
│ [Configure AI Provider →] │
└──────────────────────────────────────────┘
```

Files

• `src/components/editor/AIProvider.tsx` — React context provider
• `src/hooks/useAI.ts` — hook wrapping the context
• Update existing editor navbar component to include settings icon
• Update existing editor component to wrap with AIProvider

Acceptance Criteria

• AI icon visible in editor navbar
• Icon state reflects whether AI is configured
• `useAI()` hook provides correct state
• Clicking AI buttons without key → opens settings modal
• Clicking AI buttons with key → performs the action
• Empty state message is helpful and non-intrusive
• Settings modal accessible from any editor tab