41 lines
2.0 KiB
Markdown
41 lines
2.0 KiB
Markdown
# 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)
|