# Fluffytrix UI Patterns

## Layout Structure
- MainScreen: Scaffold (no topBar) → Box → Row[SpaceList | MessageTimeline | MemberList?]
- Channel list overlays via AnimatedVisibility + zIndex(1f), slides from left
- SpaceList: 64dp wide, surfaceVariant background, icons 48dp
- ChannelList: fills width, surface background, max ~280dp visually
- MemberList: 240dp wide, surface background
- SettingsScreen: Scaffold + TopAppBar + Column + verticalScroll

## Spacing Rhythm
- Standard horizontal content padding: 16dp (settings, channel list header)
- Channel list items: horizontal 12dp, vertical 10dp
- Thread sub-items: start indent 24dp, horizontal 10dp, vertical 6dp
- Member list items: horizontal 8dp, vertical 4dp
- Settings rows: vertical 6dp (info/toggle), vertical 12dp (nav)
- Section dividers: padding(vertical = 16.dp)

## Color Token Usage
- Surface backgrounds: `colorScheme.surface` or `colorScheme.surfaceVariant`
- Selected item bg: `colorScheme.primaryContainer`; text: `colorScheme.onPrimaryContainer`
- Unread dot in ChannelList: error (mention) / primary (unread) — correct
- Unread dot in SpaceList: hardcoded `Color.Red` / `Color.Gray` — BUG, inconsistent
- Section text: `colorScheme.onSurface.copy(alpha = 0.7f)` uppercase labelMedium
- Disabled/subtle text: `colorScheme.onSurfaceVariant` or with `.copy(alpha = 0.6f)`

## Icon Conventions
- All icons: Icons.Default.* (filled style)
- Directional icons: Icons.AutoMirrored.Filled.*
- Icon size in list rows: 20dp
- All icons in touch targets: wrapped in IconButton (48dp auto-sizing) or clickable with min 48dp

## Notification (push/) — no Compose UI
- NotificationHelper: uses `R.mipmap.ic_launcher` as small icon (should be `R.drawable` monochrome)
- Channel: "messages" / IMPORTANCE_DEFAULT
- Tap → deep link via Intent extra "roomId" → DeepLinkState.set()

## State Collection
- MainScreen: collectAsStateWithLifecycle (correct, lifecycle-aware)
- SettingsScreen: collectAsState (should be collectAsStateWithLifecycle for consistency)