Mobile Optimisation and Device Preview

**AI Analysis** (by Claude)

# Analysis: Mobile Optimization and Device Preview

## 1. Root Cause Analysis

The current mobile preview system is fundamentally broken and needs a complete rebuild. The issues likely stem from:

- **Incomplete Device Preview Implementation**: The mobile preview mode doesn't properly simulate mobile viewports or restrict editing capabilities

- **Missing Mobile-Specific Layout System**: No infrastructure exists to store and manage alternative mobile layouts per section

- **Lack of Mobile-Optimized Sidebar**: No dedicated mobile editing interface with the required section/navigation/style tabs

- **Content Editing Restrictions Missing**: Users can likely still edit content in mobile preview mode when they shouldn't

- **Responsive Design Gaps**: The current responsive system doesn't account for mobile-specific layout alternatives

## 2. Affected Files

### Core Store/State Management

- `src/stores/deviceStore.ts` (likely needs creation/overhaul)

- `src/stores/sectionStore.ts` (needs mobile layout support)

- `src/stores/editorStore.ts` (needs mobile preview mode restrictions)

### UI Components

- `src/components/editor/Sidebar/` (complete mobile sidebar rebuild)

- `src/components/editor/DevicePreview/` (likely broken/incomplete)

- `src/components/editor/Canvas/` (needs mobile preview rendering)

- `src/components/sections/` (all section components need mobile layout variants)

### Layout System

- `src/components/editor/SectionRenderer.tsx`

- `src/types/section.ts` (needs mobile layout type definitions)

- `src/hooks/useResponsive.ts` (may need mobile preview integration)

### Styling

- `src/styles/` (mobile-specific styles)

- Component CSS modules for mobile layouts

## 3. Resolution Approach

### Phase 1: Core Infrastructure (Week 1-2)

1. **Device Store Setup**

```typescript

// Create/overhaul deviceStore.ts

interface DeviceState {

currentDevice: 'desktop' | 'mobile' | 'tablet'

isPreviewMode: boolean

mobileEditingRestrictions: boolean

}

```

2. **Mobile Layout Type System**

```typescript

// Extend section types

interface Section {

id: string

desktopLayout: LayoutConfig

mobileLayout?: MobileLayoutConfig // New

// ...existing props

}

```

3. **Database Schema Updates**

- Add mobile layout columns to sections table in Supabase

- Migration scripts for existing sections

### Phase 2: Mobile Sidebar Interface (Week 2-3)

1. **Create Mobile Sidebar Component**

```

src/components/editor/Sidebar/MobileSidebar/

├── MobileSidebar.tsx

├── SectionTab.tsx

├── NavigationTab.tsx

└── StyleTab.tsx

```

2. **Section Tab Features**

- List all sections with mobile layout options

- Alternative layout type selector per section

- Mobile-specific spacing/padding controls

3. **Navigation Tab Features**

- Mobile menu style options

- Hamburger menu configurations

- Mobile navigation layout alternatives

4. **Style Tab Features**

- Mobile typography settings

- Button sizes for mobile

- Mobile-specific color adjustments

### Phase 3: Device Preview System (Week 3-4)

1. **Device Preview Component Rebuild**

```typescript

// DevicePreview.tsx

const DEVICE_CONFIGS = {

mobile: { width: 375, height: 812 },

tablet: { width: 768, height: 1024 },

desktop: { width: 1440, height: 900 }

}

```

2. **Canvas Modifications**

- Responsive iframe/container for device simulation

- Proper scaling and viewport simulation

- Content editing restrictions in mobile preview

3. **Section Rendering Logic**

```typescript

// In SectionRenderer

const layoutConfig = isDesktop ? section.desktopLayout : section.mobileLayout

```

### Phase 4: Content Editing Restrictions (Week 4)

1. **Editor State Management**

- Disable text editing in mobile preview

- Disable drag-and-drop in mobile preview

- Show "Switch to desktop to edit content" messages

2. **UI Feedback**

- Clear indicators when in mobile preview mode

- Tooltips explaining restricted actions

- Easy toggle back to desktop editing

### Phase 5: Mobile Layout Options (Week 5-6)

1. **Section-Specific Mobile Layouts**

- Hero sections: Stack vs side-by-side options

- Gallery: Grid size alternatives (2x2 vs 1x4)

- Text blocks: Mobile typography scales

- Contact forms: Single column mobile layouts

2. **Navigation Mobile Options**

- Hamburger menu styles

- Mobile menu slide-in directions

- Sticky navigation options

## 4. Complexity Estimate

**Complex** - This is a major feature rebuild that involves:

- Complete mobile preview system overhaul

- New database schema and data migration

- Extensive UI component development

- Complex state management across multiple stores

- Device simulation and responsive rendering

- Content editing restriction system

Estimated timeline: **5-6 weeks** with 1-2 senior developers

## 5. Dependencies

### Immediate Blockers

- **Database Migration Planning**: Need to plan mobile layout data structure without breaking existing sites

- **Design System Decisions**: Mobile layout options need to be defined and designed

- **Content Strategy**: Decision on which mobile settings to expose vs auto-optimize

### Technical Prerequisites

- Supabase schema updates and migration scripts

- Mobile layout option designs and specifications

- Device preview mockups and UX flow

- Content editing restriction user experience design

### Nice-to-Have Dependencies

- Performance optimization for mobile preview rendering

- A/B testing framework for mobile layouts

- Analytics integration for mobile optimization insights

### Risk Considerations

- **Data Migration**: Existing sites need seamless transition

- **Performance**: Device preview shouldn't slow down editor

- **User Experience**: Mobile editing flow needs to be intuitive

- **Browser Compatibility**: Mobile preview needs to work across devices

This is a critical feature that will significantly improve the platform's mobile capabilities and user experience.