designmd-forge 1.2.0

package/dist/data/designs/ios-zalo-android.md

@@ -0,0 +1,510 @@
+# Zalo (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Zalo's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, the asymmetric chat bubble (custom `Shape`), the chat thread, the mini-app launcher grid, and the blue header with motion and haptics.
+
+> Why a Compose guide for an iOS-referenced app? The DESIGN.md tokens are platform-neutral. This file keeps the *visual* identity (Zalo's single blue anchor, asymmetric clipped-tail bubbles, calm chat backdrop, super-app launcher grid, Be Vietnam Pro typography) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, a custom `Shape` for the bubble tail, `LazyVerticalGrid` for the launcher, `sp`/`dp` instead of `pt`. Zalo is huge on Android in Vietnam, so this is a first-class target.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and [Coil](https://coil-kt.github.io/coil/) `2.6+` for avatars/media. Light-first; a full dark scheme is provided. No Material You dynamic color — the single Zalo Blue must hold regardless of wallpaper.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/ZaloColors.kt
+import androidx.compose.ui.graphics.Color
+
+object ZaloColors {
+    // Brand (single anchor)
+    val Blue        = Color(0xFF0068FF)
+    val BluePressed = Color(0xFF0052CC)
+    val BlueDeep    = Color(0xFF0047B3)
+    val BubbleOut   = Color(0xFFDBEBFF)
+    val BubbleOutInk = Color(0xFF14223A)
+
+    // Canvas & Surfaces (Light)
+    val Canvas    = Color(0xFFFFFFFF)
+    val ChatBg    = Color(0xFFE8ECF1)
+    val Surface1  = Color(0xFFF4F5F7)
+    val Surface2  = Color(0xFFEBEDF0)
+    val Divider   = Color(0xFFE4E6EB)
+
+    // Canvas & Surfaces (Dark)
+    val DarkCanvas    = Color(0xFF15171A)
+    val DarkChatBg    = Color(0xFF101418)
+    val DarkBubbleIn  = Color(0xFF1F2329)
+    val DarkBubbleOut = Color(0xFF0A3A7A)
+    val DarkDivider   = Color(0xFF262A30)
+
+    // Text
+    val Ink           = Color(0xFF1A1A1A)
+    val TextSecondary = Color(0xFF6B7280)
+    val TextTertiary  = Color(0xFF9AA0AA)
+    val TextPrimaryDk = Color(0xFFECEDEF)
+
+    // Semantic
+    val Notify  = Color(0xFFF5325B)
+    val Success = Color(0xFF18A957)
+    val Warning = Color(0xFFFF9500)
+
+    // Mini-app tile colors (contained to the launcher)
+    val TileGreen  = Color(0xFF18A957)
+    val TileOrange = Color(0xFFFF9500)
+    val TileRed    = Color(0xFFF5325B)
+    val TileViolet = Color(0xFF7B5CFF)
+    val TileCyan   = Color(0xFF00B8D4)
+}
+```
+
+Wire it into both schemes. Zalo is light-first; the dark scheme keeps the blue brand.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.material3.MaterialTheme
+
+private val ZaloLight = lightColorScheme(
+    primary        = ZaloColors.Blue,
+    onPrimary      = Color.White,
+    background     = ZaloColors.Canvas,
+    onBackground   = ZaloColors.Ink,
+    surface        = ZaloColors.Canvas,
+    onSurface      = ZaloColors.Ink,
+    surfaceVariant = ZaloColors.Surface1,
+    outline        = ZaloColors.Divider,
+    error          = ZaloColors.Notify,
+)
+
+private val ZaloDark = darkColorScheme(
+    primary        = ZaloColors.Blue,
+    onPrimary      = Color.White,
+    background     = ZaloColors.DarkCanvas,
+    onBackground   = ZaloColors.TextPrimaryDk,
+    surface        = ZaloColors.DarkCanvas,
+    onSurface      = ZaloColors.TextPrimaryDk,
+    surfaceVariant = ZaloColors.DarkChatBg,
+    outline        = ZaloColors.DarkDivider,
+    error          = ZaloColors.Notify,
+)
+
+@Composable
+fun ZaloTheme(
+    dark: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (dark) ZaloDark else ZaloLight,
+    typography = ZaloTypography,
+    content = content,
+)
+```
+
+## 2. Typography
+
+Zalo uses **Be Vietnam Pro** — a sans designed for Vietnamese diacritics (SIL OFL). Drop the TTFs in `res/font/`. Give stacked tone marks (ậ ệ ọ ữ) generous line height; never clip the line box.
+
+```kotlin
+// ui/theme/ZaloType.kt
+import androidx.compose.material3.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+val BeVietnamPro = FontFamily(
+    Font(R.font.bevietnampro_regular,   FontWeight.Normal),
+    Font(R.font.bevietnampro_medium,    FontWeight.Medium),
+    Font(R.font.bevietnampro_semibold,  FontWeight.SemiBold),
+    Font(R.font.bevietnampro_bold,      FontWeight.Bold),
+    Font(R.font.bevietnampro_extrabold, FontWeight.ExtraBold),
+)
+
+// Named ramp — mirrors DESIGN.md §3 exactly (pt -> sp 1:1), generous line heights for diacritics
+object ZaloText {
+    val Display     = TextStyle(BeVietnamPro, fontWeight = FontWeight.ExtraBold, fontSize = 32.sp, lineHeight = 40.sp, letterSpacing = (-0.5).sp)
+    val ScreenTitle = TextStyle(BeVietnamPro, fontWeight = FontWeight.Bold,      fontSize = 24.sp, lineHeight = 31.sp, letterSpacing = (-0.3).sp)
+    val Section     = TextStyle(BeVietnamPro, fontWeight = FontWeight.Bold,      fontSize = 20.sp, lineHeight = 26.sp, letterSpacing = (-0.2).sp)
+    val ListTitle   = TextStyle(BeVietnamPro, fontWeight = FontWeight.SemiBold,  fontSize = 17.sp, lineHeight = 23.sp)
+    val Body        = TextStyle(BeVietnamPro, fontWeight = FontWeight.Normal,    fontSize = 15.sp, lineHeight = 22.sp) // body + bubble
+    val CellTitle   = TextStyle(BeVietnamPro, fontWeight = FontWeight.SemiBold,  fontSize = 14.sp, lineHeight = 19.sp)
+    val Preview     = TextStyle(BeVietnamPro, fontWeight = FontWeight.Normal,    fontSize = 13.sp, lineHeight = 18.sp)
+    val Button      = TextStyle(BeVietnamPro, fontWeight = FontWeight.Bold,      fontSize = 15.sp, lineHeight = 15.sp)
+    val Timestamp   = TextStyle(BeVietnamPro, fontWeight = FontWeight.SemiBold,  fontSize = 11.sp, lineHeight = 14.sp)
+    val Tab         = TextStyle(BeVietnamPro, fontWeight = FontWeight.Medium,    fontSize = 10.sp, lineHeight = 10.sp)
+    val Badge       = TextStyle(BeVietnamPro, fontWeight = FontWeight.Bold,      fontSize = 9.sp,  lineHeight = 9.sp)
+    val MiniLabel   = TextStyle(BeVietnamPro, fontWeight = FontWeight.Medium,    fontSize = 11.sp, lineHeight = 14.sp)
+}
+
+val ZaloTypography = Typography(
+    headlineLarge = ZaloText.Display,
+    headlineMedium = ZaloText.ScreenTitle,
+    titleLarge    = ZaloText.Section,
+    titleMedium   = ZaloText.ListTitle,
+    bodyMedium    = ZaloText.Body,
+    labelSmall    = ZaloText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### Asymmetric Bubble Shape
+
+`RoundedCornerShape` takes per-corner radii directly — the tail is just one small bottom corner.
+
+```kotlin
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.unit.dp
+
+fun bubbleShape(outgoing: Boolean) = RoundedCornerShape(
+    topStart = 16.dp,
+    topEnd = 16.dp,
+    bottomStart = if (outgoing) 16.dp else 5.dp, // tail clipped for incoming
+    bottomEnd = if (outgoing) 5.dp else 16.dp,   // tail clipped for outgoing
+)
+```
+
+### Chat Bubble
+
+```kotlin
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Text
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Brush
+
+data class Msg(val text: String, val outgoing: Boolean, val time: String, val showAvatar: Boolean)
+
+@Composable
+fun ChatBubble(msg: Msg) {
+    Row(
+        Modifier.fillMaxWidth().padding(horizontal = 12.dp),
+        horizontalArrangement = if (msg.outgoing) Arrangement.End else Arrangement.Start,
+        verticalAlignment = Alignment.Bottom,
+    ) {
+        if (!msg.outgoing) {
+            if (msg.showAvatar) {
+                Box(
+                    Modifier.size(28.dp).clip(CircleShape)
+                        .background(Brush.linearGradient(listOf(Color(0xFF4D9FFF), ZaloColors.BlueDeep)))
+                )
+            } else {
+                Spacer(Modifier.width(28.dp))
+            }
+            Spacer(Modifier.width(8.dp))
+        }
+        Column(horizontalAlignment = if (msg.outgoing) Alignment.End else Alignment.Start) {
+            val shape = bubbleShape(msg.outgoing)
+            Box(
+                Modifier
+                    .widthIn(max = 260.dp)
+                    .then(if (msg.outgoing) Modifier else Modifier.shadow(2.dp, shape, spotColor = Color.Black.copy(alpha = 0.06f)))
+                    .clip(shape)
+                    .background(if (msg.outgoing) ZaloColors.BubbleOut else ZaloColors.Canvas)
+                    .padding(horizontal = 13.dp, vertical = 9.dp)
+            ) {
+                Text(msg.text, style = ZaloText.Body, color = if (msg.outgoing) ZaloColors.BubbleOutInk else ZaloColors.Ink)
+            }
+            Text(msg.time, style = ZaloText.Timestamp.copy(fontSize = 10.sp), color = ZaloColors.TextTertiary,
+                modifier = Modifier.padding(top = 3.dp))
+        }
+    }
+}
+```
+
+### Chat Thread
+
+```kotlin
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+
+@Composable
+fun ChatThread(messages: List<Msg>) {
+    LazyColumn(
+        Modifier.fillMaxSize().background(ZaloColors.ChatBg),
+        contentPadding = PaddingValues(vertical = 14.dp),
+        verticalArrangement = Arrangement.spacedBy(6.dp),
+    ) {
+        item {
+            Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
+                Text(
+                    "Hôm nay · Today",
+                    style = ZaloText.Timestamp,
+                    color = ZaloColors.TextSecondary,
+                    modifier = Modifier
+                        .clip(RoundedCornerShape(999.dp))
+                        .background(Color.White.copy(alpha = 0.7f))
+                        .padding(horizontal = 12.dp, vertical = 3.dp),
+                )
+            }
+        }
+        items(messages) { ChatBubble(it) }
+        item {
+            Text("Đã xem · Seen 09:27", style = ZaloText.Timestamp, color = ZaloColors.TextTertiary,
+                modifier = Modifier.fillMaxWidth().padding(end = 16.dp, top = 2.dp), textAlign = TextAlign.End)
+        }
+    }
+}
+```
+
+### Chat Header (Zalo Blue bar)
+
+```kotlin
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material.icons.filled.Call
+import androidx.compose.material.icons.filled.Videocam
+import androidx.compose.material3.Icon
+
+@Composable
+fun ChatHeader(name: String, presence: String) {
+    Row(
+        Modifier.fillMaxWidth().background(ZaloColors.Blue).padding(start = 16.dp, end = 16.dp, top = 6.dp, bottom = 14.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        Icon(Icons.Filled.ArrowBack, "Back", tint = Color.White, modifier = Modifier.size(22.dp))
+        Box(Modifier.size(38.dp).clip(CircleShape).background(Brush.linearGradient(listOf(Color(0xFF4D9FFF), ZaloColors.BlueDeep))))
+        Column(Modifier.weight(1f)) {
+            Text(name, style = ZaloText.Body.copy(fontWeight = FontWeight.SemiBold), color = Color.White)
+            Text(presence, style = ZaloText.Timestamp.copy(fontWeight = FontWeight.Normal), color = Color.White.copy(alpha = 0.85f))
+        }
+        Icon(Icons.Filled.Call, "Call", tint = Color.White, modifier = Modifier.size(20.dp))
+        Icon(Icons.Filled.Videocam, "Video call", tint = Color.White, modifier = Modifier.size(20.dp))
+    }
+}
+```
+
+### Message Composer
+
+```kotlin
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material.icons.filled.PhotoCamera
+import androidx.compose.material.icons.filled.Send
+import androidx.compose.material.icons.outlined.EmojiEmotions
+import androidx.compose.runtime.*
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+
+@Composable
+fun Composer(onSend: (String) -> Unit) {
+    var text by remember { mutableStateOf("") }
+    val haptics = LocalHapticFeedback.current
+    Row(
+        Modifier
+            .fillMaxWidth()
+            .background(ZaloColors.Canvas)
+            .padding(start = 14.dp, end = 14.dp, top = 9.dp, bottom = 14.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        Icon(Icons.Outlined.EmojiEmotions, "Sticker", tint = ZaloColors.Blue, modifier = Modifier.size(23.dp))
+        Box(
+            Modifier
+                .weight(1f).height(38.dp)
+                .clip(RoundedCornerShape(19.dp))
+                .background(ZaloColors.Surface1)
+                .padding(horizontal = 16.dp),
+            contentAlignment = Alignment.CenterStart,
+        ) {
+            BasicTextField(
+                value = text, onValueChange = { text = it },
+                textStyle = ZaloText.Preview.copy(color = ZaloColors.Ink),
+                decorationBox = { inner ->
+                    if (text.isEmpty()) Text("Tin nhắn", style = ZaloText.Preview, color = ZaloColors.TextTertiary)
+                    inner()
+                },
+            )
+        }
+        if (text.isEmpty()) {
+            Icon(Icons.Filled.PhotoCamera, "Camera", tint = ZaloColors.Blue, modifier = Modifier.size(22.dp))
+        } else {
+            Box(
+                Modifier.size(38.dp).clip(CircleShape).background(ZaloColors.Blue)
+                    .clickable {
+                        haptics.performHapticFeedback(HapticFeedbackType.LongPress) // soft impact analog
+                        onSend(text); text = ""
+                    },
+                contentAlignment = Alignment.Center,
+            ) { Icon(Icons.Filled.Send, "Send", tint = Color.White, modifier = Modifier.size(16.dp)) }
+        }
+    }
+}
+```
+
+### Mini-App Launcher Grid
+
+```kotlin
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items
+import androidx.compose.ui.graphics.vector.ImageVector
+
+data class MiniApp(val icon: ImageVector, val tile: Color, val label: String)
+
+@Composable
+fun LauncherGrid(apps: List<MiniApp>) {
+    LazyVerticalGrid(
+        columns = GridCells.Fixed(4),
+        contentPadding = PaddingValues(16.dp),
+        horizontalArrangement = Arrangement.spacedBy(16.dp),
+        verticalArrangement = Arrangement.spacedBy(18.dp),
+        modifier = Modifier.background(ZaloColors.Canvas),
+    ) {
+        items(apps) { a ->
+            Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(7.dp)) {
+                Box(
+                    Modifier.size(52.dp).clip(RoundedCornerShape(15.dp)).background(a.tile),
+                    contentAlignment = Alignment.Center,
+                ) { Icon(a.icon, a.label, tint = Color.White, modifier = Modifier.size(24.dp)) }
+                Text(a.label, style = ZaloText.MiniLabel, color = ZaloColors.Ink, maxLines = 2, textAlign = TextAlign.Center)
+            }
+        }
+    }
+}
+```
+
+### Chat List Row
+
+```kotlin
+@Composable
+fun ChatListRow(name: String, preview: String, time: String, unread: Int, online: Boolean) {
+    Row(
+        Modifier
+            .fillMaxWidth().height(72.dp).padding(horizontal = 16.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        Box {
+            Box(Modifier.size(48.dp).clip(CircleShape).background(Brush.linearGradient(listOf(Color(0xFF4D9FFF), ZaloColors.BlueDeep))))
+            if (online) {
+                Box(
+                    Modifier.size(10.dp).align(Alignment.BottomEnd).clip(CircleShape)
+                        .background(ZaloColors.Success).border(2.dp, Color.White, CircleShape)
+                )
+            }
+        }
+        Column(Modifier.weight(1f)) {
+            Text(name, style = ZaloText.ListTitle.copy(fontWeight = if (unread > 0) FontWeight.Bold else FontWeight.SemiBold), color = ZaloColors.Ink)
+            Text(preview, style = ZaloText.Preview, color = if (unread > 0) ZaloColors.Ink else ZaloColors.TextSecondary, maxLines = 1)
+        }
+        Column(horizontalAlignment = Alignment.End, verticalArrangement = Arrangement.spacedBy(6.dp)) {
+            Text(time, style = ZaloText.Timestamp, color = ZaloColors.TextTertiary)
+            if (unread > 0) {
+                Box(
+                    Modifier.defaultMinSize(minWidth = 16.dp, minHeight = 16.dp).clip(RoundedCornerShape(999.dp))
+                        .background(ZaloColors.Notify).padding(horizontal = 5.dp),
+                    contentAlignment = Alignment.Center,
+                ) { Text("$unread", style = ZaloText.Badge, color = Color.White) }
+            }
+        }
+    }
+    HorizontalDivider(color = ZaloColors.Divider, thickness = 0.5.dp, modifier = Modifier.padding(start = 76.dp))
+}
+```
+
+## 4. Navigation
+
+Zalo's bottom bar has 5 Vietnamese-labeled tabs; active is Zalo Blue (filled icon), no Material tint pill.
+
+```kotlin
+@Composable
+fun ZaloBottomBar(selected: Int, onSelect: (Int) -> Unit, unread: Int) {
+    NavigationBar(containerColor = ZaloColors.Canvas, tonalElevation = 0.dp) {
+        val items = listOf(
+            "Tin nhắn" to Icons.Filled.ChatBubble,
+            "Danh bạ"  to Icons.Filled.People,
+            "Khám phá" to Icons.Filled.GridView,
+            "Nhật ký"  to Icons.Filled.Schedule,
+            "Cá nhân"  to Icons.Filled.AccountCircle,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = {
+                    if (i == 0 && unread > 0) {
+                        BadgedBox(badge = { Badge(containerColor = ZaloColors.Notify) { Text("$unread", style = ZaloText.Badge, color = Color.White) } }) {
+                            Icon(icon, label, modifier = Modifier.size(23.dp))
+                        }
+                    } else {
+                        Icon(icon, label, modifier = Modifier.size(23.dp))
+                    }
+                },
+                label = { Text(label, style = ZaloText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor = ZaloColors.Blue,
+                    selectedTextColor = ZaloColors.Blue,
+                    unselectedIconColor = ZaloColors.TextTertiary,
+                    unselectedTextColor = ZaloColors.TextTertiary,
+                    indicatorColor = Color.Transparent, // no Material pill — Zalo has none
+                ),
+            )
+        }
+    }
+}
+```
+
+The chat top bar is the solid blue `ChatHeader` above; it persists across destinations (keep the blue background on the scaffold top region so there's no color flash on navigation).
+
+## 5. Motion
+
+Zalo motion is functional and quick — it's a dense utility super-app.
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Outgoing bubble send | `AnimatedVisibility` `scaleIn(initialScale = 0.9f, tween(200)) + fadeIn(tween(200))`; soft haptic |
+| Incoming bubble | `AnimatedVisibility` `slideInVertically { it / 4 } + fadeIn` `tween(200)`; typing = 3 dots looped `infiniteRepeatable` |
+| Read receipt | `AnimatedVisibility` `fadeIn(tween(150))` under the last outgoing bubble |
+| Tab change | instant content swap; icon outline→filled + tint handled by `NavigationBarItem` colors |
+| Header transition | Nav3/`NavHost` slide push `tween(300)`; keep the blue scaffold region so the bar doesn't flash |
+| Launcher tile press | `Modifier.scale` 1.0 → 0.94 via `animateFloatAsState(tween(100))` on press, springs back |
+| Reaction picker | long-press bubble -> emoji row `scaleIn(tween(180)) + fadeIn`; soft haptic |
+| Zalo Pay confirm | `Success` checkmark `scaleIn(tween(200))` + snackbar |
+
+```kotlin
+// Outgoing bubble — the canonical Zalo send motion
+AnimatedVisibility(
+    visible = true,
+    enter = scaleIn(initialScale = 0.9f, animationSpec = tween(200)) + fadeIn(tween(200)),
+) { ChatBubble(msg) }
+```
+
+Haptics: `LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)` for the soft send impact and reaction-picker open; `HapticFeedbackConstants.CLOCK_TICK` (via `LocalView`) for tab change; `HapticFeedbackConstants.CONFIRM` for Zalo Pay / friend-add. The typing indicator loops via `rememberInfiniteTransition`.
+
+## 6. Icons
+
+The closest first-party set is `androidx.compose.material:material-icons-extended`.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Tin nhắn (tab) | `message` / `message.fill` | `Icons.Filled.ChatBubble` |
+| Danh bạ (tab) | `person.2` / `person.2.fill` | `Icons.Filled.People` |
+| Khám phá (tab) | `square.grid.2x2` | `Icons.Filled.GridView` |
+| Nhật ký (tab) | `clock` / `clock.fill` | `Icons.Filled.Schedule` |
+| Cá nhân (tab) | `person.crop.circle` | `Icons.Filled.AccountCircle` |
+| Back | `chevron.left` | `Icons.Filled.ArrowBack` |
+| Voice call | `phone.fill` | `Icons.Filled.Call` |
+| Video call | `video.fill` | `Icons.Filled.Videocam` |
+| Send | `paperplane.fill` | `Icons.Filled.Send` |
+| Sticker / emoji | `face.smiling` | `Icons.Outlined.EmojiEmotions` |
+| Camera | `camera.fill` | `Icons.Filled.PhotoCamera` |
+| Attachment | `plus` / `paperclip` | `Icons.Filled.AttachFile` |
+| Search | `magnifyingglass` | `Icons.Filled.Search` |
+| Like (timeline) | `heart.fill` | `Icons.Filled.Favorite` (`#F5325B`) |
+| Verified (OA) | `checkmark.seal.fill` | `Icons.Filled.Verified` (`#0068FF`) |
+| Settings | `gearshape.fill` | `Icons.Filled.Settings` |
+
+## 7. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor 21; Zalo's audience is overwhelmingly Android in Vietnam — keep `minSdk` low but 24 is comfortable for modern motion). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`. Coil `2.6+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()`; the Zalo Blue header should draw under the status bar — keep light-content system-bar icons even in dark mode. The composer and tab bar respect the navigation-bar inset; the thread uses `Modifier.imePadding()` so it scrolls clear of the keyboard.
+- **Font scaling**: `sp` honors the user's font scale — keep it on display, titles, body, bubbles, previews. Pin layout-sensitive text (timestamps, 9sp badges, 10sp tab labels, mini-app captions) but **never clip Vietnamese diacritics** — let chat rows and bubbles grow vertically; the generous `lineHeight`s above protect stacked tone marks.
+- **TalkBack**: label bubbles "{incoming/outgoing} message: {text}, {time}"; chat rows "{name}, {preview}, {unread} unread messages"; the send button "Send message"; launcher tiles "{label}, opens mini-app"; expose day separators as headings via `Modifier.semantics { heading() }`.
+- **Touch targets**: Material guidance is 48.dp — the 20-22dp header/composer icons and 23dp tab icons get 48dp hit areas; chat list rows are 72dp; launcher tiles are 52dp with a 64dp effective hit; the send circle is 38dp + padding.
+- **Contrast**: white on `#0068FF` passes AA; `#1A1A1A` on `#FFFFFF` and `#14223A` on `#DBEBFF` pass AA for bubble text; the red `#F5325B` badge uses white text and passes AA.
+- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, disable the bubble scale-in (plain fade) and the reaction-picker zoom; replace the looping typing dots with a static "Đang soạn tin…" label; keep selection states.
+- **Dark mode**: light-first; the dark scheme flips the chat backdrop to `#101418`, incoming bubbles to `#1F2329`, outgoing to `#0A3A7A` (white text); the asymmetric clipped tail and the blue header/active tab are preserved; drop the incoming-bubble shadow on dark. Do **not** enable `dynamicColorScheme()` — the single Zalo Blue must hold regardless of wallpaper.