youtube-studio-flow/frontend/FRONTEND_PLAN.md

StudioFlow Frontend Implementation Plan

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

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.