# StudioFlow Frontend Implementation Plan

## 1. Directory Structure (Next.js 15 App Router)

```text
frontend/
├── src/
│   ├── app/                    # Pages & Routing
│   │   ├── (dashboard)/        # Protected routes shell
│   │   │   ├── videos/         # Video List & Detail Editor
│   │   │   ├── blocks/         # Block Management
│   │   │   ├── collaborators/  # CRM
│   │   │   ├── calendar/       # Planning
│   │   │   └── bulk-jobs/      # Job Monitoring
│   │   ├── (auth)/             # Login & OAuth
│   │   └── layout.tsx          # Providers & Root styling
│   ├── components/             # Reusable Components
│   │   ├── ui/                 # Base primitives (Button, Input, Card)
│   │   ├── video-table/        # Virtualized Table & Filters
│   │   ├── config-editor/      # D&D Block Editor
│   │   └── shared/             # Sidebar, Header, QuotaIndicator
│   ├── hooks/                  # TanStack Query & Logic Hooks
│   ├── lib/                    # API Client, Utils, Constants
│   ├── store/                  # Zustand (UI State)
│   └── styles/                 # Vanilla CSS & Theme
```

## 2. Core Feature Specifications

### 2.1 Video Table (Command Center)
- **Engine:** TanStack Table v8.
- **Virtualization:** `react-window` or `@tanstack/react-virtual` for 1000+ rows.
- **Features:** 
  - Inline editing for Title/Tags.
  - Multi-select for Bulk Actions (Sync, Render, Delete).
  - Saved View sidebar for quick filtering (e.g., "Missing CTA").

### 2.2 Video Config Editor
- **Logic:** Manages `VideoConfig` state (blockOrder, overrides, variables).
- **Interaction:** Drag-and-drop sorting for blocks.
- **Live Preview:** Debounced rendering call to backend to show final description.
- **Variables:** Dynamically generated form based on the blocks used in the config.

### 2.3 Quota Dashboard
- **Visual:** Circular progress indicator for daily units.
- **Logic:** Polling every 60s while active. Warning notifications when units < 10%.

## 3. Aesthetic & UI Strategy
- **Theme:** "Dark Studio" (Background: #0f0f0f, Surface: #1e1e1e, Accents: YouTube Red #FF0000).
- **Typography:** Inter or Roboto (standard for YouTube Studio feel).
- **Animations:** Framer Motion for layout transitions and modal entries.

## 4. API Integration
- **Client:** `axios` with interceptors.
- **Error Handling:** Centralized toast notifications for API errors.
- **Auth:** NextAuth.js or custom JWT storage with Google OAuth 2.0.

## 5. Phase 1 Implementation Tasks
1. Initialize Next.js 15 with TS and Vanilla CSS.
2. Set up `api-client.ts` and `QueryProvider`.
3. Create global layout (Sidebar + Header).
4. Implement `VideoTable` with mock data.
5. Implement `ConfigEditor` basic D&D.