[Feature] UI/UX Design - Core App Layout, Navigation, and Design System

[vzeman]

Summary

Define and implement the core application UI structure, design system, and navigation patterns. A consistent, well-thought-out UI is foundational to the entire user experience — all other features build on top of this scaffold.

Requirements

App Layout

• Left sidebar: project navigator, scene list
• Main area: scene editor with timeline at bottom
• Right panel: properties, parameters, asset library (tabbed)
• Top toolbar: project name, undo/redo, generate, export, settings
• Status bar: generation status, cost, API connection indicators

Design System

• Design tokens: colors, typography, spacing, border radius
• Dark/light theme with consistent token usage
• Component library: buttons, inputs, dropdowns, sliders, modals, cards
• Loading states, empty states, error states for all screens
• Consistent icon set (Material Icons or Lucide)

Navigation

• Keyboard shortcuts reference overlay (press ?)
• Command palette (Ctrl+K) for quick actions
• Context menus (right-click) throughout
• Breadcrumb navigation
• Panel resizing (drag dividers)
• Panel collapse/expand

Onboarding

• Welcome screen for first launch
• Interactive tutorial for new users
• Tooltip hints for all major features
• Sample project included

Acceptance Criteria

• App layout matches the described three-panel structure
• Design tokens are defined and applied consistently across all screens
• Dark and light themes work correctly with no hardcoded colors
• Command palette (Ctrl+K) searches and executes all app actions
• Onboarding tutorial walks through a complete first project creation
• Keyboard shortcut overlay shows all available shortcuts

Related

Part of the ai-video-editor Flutter application. Foundation for all other features. Should be implemented early in Phase 1.