64 lines
2.8 KiB
Markdown
64 lines
2.8 KiB
Markdown
# 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.
|