Mobile Interface¶

The mobile interface is a completely separate experience from desktop — not a responsive adaptation, but a purpose-built touch-first UI with its own component tree, navigation model, and interaction patterns.

Architecture¶

Mobile renders when the device supports touch AND the shorter viewport dimension is below 768px. This prevents desktop browsers resized narrow from switching to mobile UI (where swipe gestures wouldn't work). The entire interface is orchestrated by MobileDashboard, which manages:

• A wizard flow for new projects
• A bottom tab bar for navigation
• SwipeReview for editing decisions
• FocusMode for precision adjustments

Component Count¶

20 mobile-specific components in frontend/features/mobile/components/, totaling ~7,300 lines. None are shared with desktop — they consume the same React Query hooks but render completely different UI.

Navigation: BottomNav¶

A fixed bottom tab bar with four tabs:

Styling: h-16 (64px) + safe area inset, border-t-4 border-black, active tab gets an orange circle behind the icon.

Wizard Flow: MobileWizard¶

New projects follow a linear five-step wizard:

Upload → Configure → Processing → Review → Export

Steps¶

The wizard shows a progress bar at the top. Steps must be completed in order — no skipping ahead.

Processing Sub-Steps¶

The processing screen shows real-time progress through:

1. "Upload complete" (pre-filled)
2. "Preparing files"
3. "Analyzing content"
4. "Processing footage"
5. "Finalizing"

SwipeReview¶

The core mobile editing experience. Four modes, each with its own panel:

Modes¶

Edits Mode (Tinder-Style)¶

The edits panel presents each edit as a card. The user watches a preview and swipes:

• Swipe right: Keep the edit (include in final video)
• Swipe left: Remove the edit (cut from final video)

Animation delay between cards: 200ms. Video height: 35vh (min 160px, max 280px).

This replaces the desktop's timeline-based approach with a binary decision model — faster for reviewing dozens of AI-suggested edits on a phone.

FocusMode¶

Precision editing for users who need more control than SwipeReview provides.

Zoom System¶

Continuous zoom from 1x to 50x with pinch gestures:

Layout¶

┌────────────────────────────┐
│  Video Preview (30vh)      │
├────────────────────────────┤
│  Minimap (full timeline)   │
├────────────────────────────┤
│  Zoomed Timeline           │
│  - Edit lanes (32px each)  │
│  - Pinch to zoom           │
│  - Pan to scroll           │
├────────────────────────────┤
│  Timestamp Adjuster        │
│  (precise ms controls)     │
└────────────────────────────┘

Edit lane height: 32px. Minimum edit width for label: 12% of viewport (vs 40px on desktop).

The minimap shows the full timeline with a viewport indicator — the user can see where they are in the overall video while zoomed into a specific region.

Touch Targets¶

All interactive elements follow WCAG 2.5.5: minimum 44px touch target size. This applies to:

• Tab bar icons
• Wizard navigation buttons
• Swipe card action areas
• FocusMode zoom controls
• Timestamp adjustment buttons

Mobile-Specific Components¶

Mobile Layout Constants¶

← Desktop Interface