fluffytrix/.claude/agent-memory/ui-ux-reviewer/patterns.md

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)