# mobile-layout Specification

## Purpose
Provide responsive layout capabilities that detect user devices and adapt the UI for optimal mobile experience. This extends the existing "Responsive Layout and Navigation" requirement in frontend-core to include mobile devices (<768px).

## MODIFIED Requirements

### Requirement: Responsive Layout and Navigation
The frontend SHALL provide a responsive layout that works on desktop, tablet, and **mobile** devices with intuitive navigation. The system SHALL detect the device type and switch layouts accordingly.

#### Scenario: Mobile layout (<768px)
- **WHEN** viewed on mobile devices (<768px width)
- **THEN** the system SHALL:
  - Display a simplified header with hamburger menu
  - Show sidebars as full-screen slide-in panels (not inline)
  - Display a bottom toolbar with frequently used actions
  - Use single-column layout for content
  - Ensure all touch targets are at least 44x44 pixels

#### Scenario: Tablet layout (768px-1024px)
- **WHEN** viewed on tablet (768px-1024px)
- **THEN** the system SHALL:
  - Collapse sidebars to icons or overlay panels
  - Use full width for content areas
  - Stack panels vertically when needed

#### Scenario: Desktop layout (>1024px)
- **WHEN** viewed on desktop (>1024px)
- **THEN** the system SHALL:
  - Display full navigation and sidebars inline
  - Show room list and detail side-by-side when applicable
  - Display member/file panels as sidebars

## ADDED Requirements

### Requirement: Device Detection
The frontend SHALL provide hooks for detecting device type based on viewport width.

#### Scenario: Detect mobile device
- **WHEN** the viewport width is less than 768px
- **THEN** `useIsMobile()` hook SHALL return `true`
- **AND** the UI SHALL render mobile-optimized components

#### Scenario: Detect tablet device
- **WHEN** the viewport width is between 768px and 1023px
- **THEN** `useIsTablet()` hook SHALL return `true`

#### Scenario: Detect desktop device
- **WHEN** the viewport width is 1024px or greater
- **THEN** `useIsDesktop()` hook SHALL return `true`

#### Scenario: Handle viewport resize
- **WHEN** the user resizes the browser window across breakpoints
- **THEN** the hooks SHALL update their return values
- **AND** the UI SHALL transition smoothly to the appropriate layout

### Requirement: Mobile Navigation
The frontend SHALL provide mobile-optimized navigation patterns for small screens.

#### Scenario: Display mobile header
- **WHEN** on mobile layout in room detail view
- **THEN** the system SHALL:
  - Show room title (truncated if necessary)
  - Show connection status indicator
  - Show hamburger menu button
  - Hide secondary action buttons (move to menu)

#### Scenario: Open mobile action menu
- **WHEN** user taps the hamburger menu on mobile
- **THEN** the system SHALL:
  - Display an action drawer/sheet from bottom or side
  - Show all room actions: Generate Report, Change Status, etc.
  - Allow closing by tapping outside or swipe gesture

#### Scenario: Display bottom toolbar
- **WHEN** on mobile layout in room detail view
- **THEN** the system SHALL:
  - Show a fixed bottom toolbar above the message input
  - Include buttons for: Files, Members
  - Use icons with labels for clarity
  - Ensure toolbar doesn't overlap with device safe areas

### Requirement: Mobile Sidebars
The frontend SHALL display sidebars as slide-in panels on mobile devices.

#### Scenario: Open members panel on mobile
- **WHEN** user taps the Members button on mobile
- **THEN** the system SHALL:
  - Slide in a full-screen panel from the right
  - Display dark overlay behind the panel
  - Show member list with larger touch targets
  - Include a close button at the top of the panel

#### Scenario: Close sidebar panel
- **WHEN** user taps the close button or backdrop overlay
- **THEN** the system SHALL:
  - Slide the panel out to the right
  - Remove the dark overlay
  - Return focus to the main content

#### Scenario: Open files panel on mobile
- **WHEN** user taps the Files button on mobile
- **THEN** the system SHALL:
  - Slide in a full-screen panel from the right
  - Display file list with larger thumbnails
  - Show upload area with larger drop zone
  - Include a close button at the top

### Requirement: Touch-Friendly Interactions
The frontend SHALL ensure all interactive elements are usable on touch devices.

#### Scenario: Minimum touch target size
- **WHEN** displaying buttons, links, or interactive elements on mobile
- **THEN** the system SHALL:
  - Ensure minimum touch target of 44x44 pixels
  - Provide adequate spacing between touch targets
  - Use padding to expand touch areas without changing visual size

#### Scenario: Mobile message input
- **WHEN** user focuses the message input on mobile
- **THEN** the system SHALL:
  - Expand input area for easier typing
  - Keep send button easily accessible
  - Handle soft keyboard appearance gracefully
  - Not obscure the input behind the keyboard

#### Scenario: Mobile form inputs
- **WHEN** displaying form inputs on mobile (login, add member, etc.)
- **THEN** the system SHALL:
  - Use larger input fields (minimum height 44px)
  - Show appropriate mobile keyboard type (email, text, etc.)
  - Support autocomplete where appropriate