designmd-forge 1.2.0

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

@@ -0,0 +1,450 @@
+# Tripadvisor (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Tripadvisor's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s, `Modifier`s, 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 (Tripadvisor's bright white gallery canvas, single-green accent, the five-circle bubble rating) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `Brush` scrim instead of a CALayer gradient, `sp`/`dp` instead of `pt`.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and [Coil](https://coil-kt.github.io/coil/) `2.6+` for images.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/TripColors.kt
+import androidx.compose.ui.graphics.Color
+
+object TripColors {
+    // Canvas & Surfaces
+    val Canvas         = Color(0xFFFFFFFF)
+    val Surface        = Color(0xFFF2F2F2)
+    val Divider        = Color(0xFFE0E0E0)
+    val SurfacePressed = Color(0xFFE8E8E8)
+
+    // Text
+    val TextPrimary    = Color(0xFF000000)
+    val TextSecondary  = Color(0xFF6B6B6B)
+    val TextTertiary   = Color(0xFF9B9B9B)
+
+    // Brand
+    val Green          = Color(0xFF34E0A1)
+    val GreenPressed   = Color(0xFF21C589)
+    val OwlBlack       = Color(0xFF000000)
+
+    // Semantic
+    val EmptyBubble    = Color(0xFFD9D9D9)
+    val ErrorRed       = Color(0xFFD6122E)
+}
+```
+
+Wire it into a Material 3 `lightColorScheme` so ripples, dividers, and default component colors inherit the brand. Tripadvisor is light-first.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.material3.MaterialTheme
+
+private val TripScheme = lightColorScheme(
+    primary        = TripColors.Green,
+    onPrimary      = TripColors.OwlBlack,    // intentional: black on bright mint
+    background     = TripColors.Canvas,
+    onBackground   = TripColors.TextPrimary,
+    surface        = TripColors.Canvas,
+    onSurface      = TripColors.TextPrimary,
+    surfaceVariant = TripColors.Surface,
+    outline        = TripColors.Divider,
+    error          = TripColors.ErrorRed,
+)
+
+@Composable
+fun TripTheme(content: @Composable () -> Unit) =
+    MaterialTheme(colorScheme = TripScheme, typography = TripTypography, content = content)
+```
+
+## 2. Typography
+
+Trip Sans is proprietary. Drop substitute Inter TTFs in `res/font/` (lowercase, snake_case) and build a `FontFamily`. Fall back to the system font (Roboto).
+
+```kotlin
+// ui/theme/TripType.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 TripSans = FontFamily(
+    Font(R.font.inter_regular,  FontWeight.Normal),   // 400
+    Font(R.font.inter_semibold, FontWeight.SemiBold), // 600
+    Font(R.font.inter_bold,     FontWeight.Bold),     // 700
+)
+
+// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1)
+object TripText {
+    val TitleLarge = TextStyle(TripSans, fontWeight = FontWeight.Bold,     fontSize = 28.sp, lineHeight = 32.sp, letterSpacing = (-0.4).sp)
+    val PlaceHero  = TextStyle(TripSans, fontWeight = FontWeight.Bold,     fontSize = 24.sp, lineHeight = 29.sp, letterSpacing = (-0.3).sp)
+    val Section    = TextStyle(TripSans, fontWeight = FontWeight.Bold,     fontSize = 22.sp, lineHeight = 26.sp, letterSpacing = (-0.3).sp)
+    val PlaceName  = TextStyle(TripSans, fontWeight = FontWeight.Bold,     fontSize = 17.sp, lineHeight = 21.sp, letterSpacing = (-0.1).sp)
+    val CardTitle  = TextStyle(TripSans, fontWeight = FontWeight.SemiBold, fontSize = 16.sp, lineHeight = 21.sp, letterSpacing = (-0.1).sp)
+    val ReviewBody = TextStyle(TripSans, fontWeight = FontWeight.Normal,   fontSize = 15.sp, lineHeight = 22.sp)
+    val Button     = TextStyle(TripSans, fontWeight = FontWeight.Bold,     fontSize = 16.sp, lineHeight = 20.sp)
+    val ButtonSec  = TextStyle(TripSans, fontWeight = FontWeight.SemiBold, fontSize = 15.sp, lineHeight = 19.sp)
+    val Meta       = TextStyle(TripSans, fontWeight = FontWeight.Normal,   fontSize = 13.sp, lineHeight = 17.sp)
+    val Tab        = TextStyle(TripSans, fontWeight = FontWeight.SemiBold, fontSize = 11.sp, lineHeight = 13.sp, letterSpacing = 0.2.sp)
+    val Badge      = TextStyle(TripSans, fontWeight = FontWeight.Bold,     fontSize = 11.sp, lineHeight = 13.sp, letterSpacing = 0.4.sp)
+    val Caption    = TextStyle(TripSans, fontWeight = FontWeight.Normal,   fontSize = 12.sp, lineHeight = 16.sp)
+}
+
+// Map onto Material 3 slots so stock components inherit the brand
+val TripTypography = Typography(
+    headlineLarge = TripText.TitleLarge,
+    headlineSmall = TripText.Section,
+    titleMedium   = TripText.PlaceName,
+    bodyMedium    = TripText.ReviewBody,
+    labelSmall    = TripText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### Five-Circle Bubble Rating
+
+```kotlin
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun BubbleRating(
+    value: Float,                 // 0f .. 5f
+    size: Dp = 16.dp,
+    reviewCount: Int? = null,
+    modifier: Modifier = Modifier,
+) {
+    Row(modifier, verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(6.dp)) {
+        Row(horizontalArrangement = Arrangement.spacedBy(2.dp)) {
+            repeat(5) { i ->
+                val fill = (value - i).coerceIn(0f, 1f) // 0, 0.5, or 1
+                Canvas(Modifier.size(size)) {
+                    val r = this.size.minDimension / 2f
+                    drawCircle(TripColors.EmptyBubble, r, Offset(r, r))
+                    if (fill > 0f) {
+                        clipRect(right = this.size.width * fill) {
+                            drawCircle(TripColors.Green, r, Offset(r, r))
+                        }
+                    }
+                }
+            }
+        }
+        if (reviewCount != null) {
+            Text(
+                "%.1f (%,d)".format(value, reviewCount),
+                style = TripText.Meta,
+                color = TripColors.TextSecondary,
+            )
+        }
+    }
+}
+```
+
+### Interactive Bubble Picker (Review Write)
+
+```kotlin
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.spring
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+
+@Composable
+fun BubblePicker(
+    rating: Int,
+    onChange: (Int) -> Unit,
+    size: Dp = 32.dp,
+) {
+    val haptics = LocalHapticFeedback.current
+    Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+        (1..5).forEach { i ->
+            val selected = i <= rating
+            val scale by animateFloatAsState(
+                targetValue = if (i == rating) 1.15f else 1f,
+                animationSpec = spring(dampingRatio = 0.55f),
+                label = "bubble$i",
+            )
+            Box(
+                Modifier
+                    .size(size)
+                    .scale(scale)
+                    .clip(CircleShape)
+                    .background(if (selected) TripColors.Green else TripColors.EmptyBubble)
+                    .clickable(remember { MutableInteractionSource() }, indication = null) {
+                        haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove) // ~iOS light impact
+                        onChange(i)
+                    }
+            )
+        }
+    }
+}
+```
+
+### Primary CTA Pill
+
+```kotlin
+enum class PillStyle { Filled, Outline }
+
+@Composable
+fun TripPillButton(
+    text: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    style: PillStyle = PillStyle.Filled,
+) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    val scale by animateFloatAsState(if (pressed) 0.97f else 1f, label = "pillScale")
+    val filled = style == PillStyle.Filled
+
+    Box(
+        modifier = modifier
+            .scale(scale)
+            .clip(CircleShape)
+            .then(
+                if (filled) Modifier.background(if (pressed) TripColors.GreenPressed else TripColors.Green)
+                else Modifier.border(1.dp, TripColors.OwlBlack, CircleShape)
+            )
+            .clickable(interaction, indication = null, onClick = onClick)
+            .padding(horizontal = if (filled) 28.dp else 24.dp, vertical = if (filled) 14.dp else 12.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        Text(text, style = if (filled) TripText.Button else TripText.ButtonSec, color = TripColors.OwlBlack)
+    }
+}
+```
+
+### Place Card
+
+```kotlin
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material.icons.outlined.FavoriteBorder
+import androidx.compose.material3.Icon
+import coil.compose.AsyncImage
+
+@Composable
+fun PlaceCard(
+    name: String,
+    photoUrl: String,
+    rating: Float,
+    reviews: Int,
+    category: String,
+    priceTier: String,
+    distance: String,
+    awarded: Boolean,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    var saved by remember { mutableStateOf(false) }
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    val scale by animateFloatAsState(if (pressed) 0.98f else 1f, label = "cardScale")
+
+    Column(
+        modifier
+            .scale(scale)
+            .clickable(interaction, indication = null, onClick = onClick),
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        Box {
+            AsyncImage(
+                model = photoUrl,
+                contentDescription = name,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .aspectRatio(3f / 2f)
+                    .clip(RoundedCornerShape(16.dp)),
+                contentScale = ContentScale.Crop,
+            )
+            Box(
+                Modifier
+                    .align(Alignment.TopEnd)
+                    .padding(12.dp)
+                    .size(36.dp)
+                    .clip(CircleShape)
+                    .background(Color.Black.copy(alpha = 0.30f))
+                    .clickable { saved = !saved },
+                contentAlignment = Alignment.Center,
+            ) {
+                Icon(
+                    if (saved) Icons.Filled.Favorite else Icons.Outlined.FavoriteBorder,
+                    contentDescription = if (saved) "Saved" else "Save",
+                    tint = if (saved) TripColors.Green else Color.White,
+                    modifier = Modifier.size(20.dp),
+                )
+            }
+        }
+
+        if (awarded) {
+            Box(
+                Modifier
+                    .clip(CircleShape)
+                    .background(TripColors.Green)
+                    .padding(horizontal = 10.dp, vertical = 4.dp),
+            ) { Text("TRAVELERS' CHOICE", style = TripText.Badge, color = TripColors.OwlBlack) }
+        }
+
+        Text(name, style = TripText.PlaceName, color = TripColors.TextPrimary)
+        BubbleRating(value = rating, size = 16.dp, reviewCount = reviews)
+        Text("$category · $priceTier · $distance", style = TripText.Meta, color = TripColors.TextSecondary)
+    }
+}
+```
+
+### Place Detail Hero (scrim over photo)
+
+```kotlin
+import androidx.compose.ui.graphics.Brush
+
+@Composable
+fun PlaceHero(
+    name: String,
+    photoUrl: String,
+    rating: Float,
+    reviews: Int,
+) {
+    Box(Modifier.fillMaxWidth().height(280.dp)) {
+        AsyncImage(
+            model = photoUrl,
+            contentDescription = "$name photo",
+            modifier = Modifier.fillMaxSize(),
+            contentScale = ContentScale.Crop,
+        )
+        Box(
+            Modifier
+                .fillMaxSize()
+                .background(
+                    Brush.verticalGradient(
+                        0.5f to Color.Transparent,
+                        1f to Color.Black.copy(alpha = 0.55f),
+                    )
+                )
+        )
+        Column(
+            Modifier.align(Alignment.BottomStart).padding(20.dp),
+            verticalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            Text(name, style = TripText.PlaceHero, color = Color.White)
+            Row(verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(6.dp)) {
+                BubbleRating(value = rating, size = 18.dp)
+                Text("%,d reviews".format(reviews), style = TripText.Meta, color = Color.White)
+            }
+        }
+    }
+}
+```
+
+## 4. Bottom Navigation (Tab Bar)
+
+Use Material 3 `NavigationBar`. Tripadvisor's iOS tab bar is `.regularMaterial` blur; Android has no first-class live blur, so use a 96%-opaque white surface. **Active tint is Tripadvisor Green** — green is the active indicator here.
+
+```kotlin
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material3.*
+
+@Composable
+fun TripBottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(
+        containerColor = TripColors.Canvas.copy(alpha = 0.96f),
+        tonalElevation = 0.dp,
+    ) {
+        val items = listOf(
+            "Explore" to Icons.Filled.Explore,
+            "Search"  to Icons.Filled.Search,
+            "Trips"   to Icons.Filled.Work,
+            "Review"  to Icons.Filled.Create,
+            "More"    to Icons.Filled.MoreHoriz,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = { Icon(icon, contentDescription = label, modifier = Modifier.size(24.dp)) },
+                label = { Text(label, style = TripText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor   = TripColors.Green,
+                    selectedTextColor   = TripColors.Green,
+                    unselectedIconColor = TripColors.TextSecondary,
+                    unselectedTextColor = TripColors.TextSecondary,
+                    indicatorColor      = Color.Transparent, // no Material pill — Tripadvisor has none
+                ),
+            )
+        }
+    }
+}
+```
+
+## 5. Navigation
+
+The top bar carries the owl logomark (left, 28.dp), a location pill (center), and the profile avatar (right). Below it, a pinned `#F2F2F2` search field at 48.dp with a full-pill `CircleShape`. On scroll, collapse to a compact blurred bar — Android has no live blur, so use the 96%-opaque white surface and a 1.dp `Divider`. Render the search field in a `Scaffold` `topBar` slot so list content scrolls beneath it.
+
+## 6. Motion
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Save-heart bounce | `Animatable` keyframes 1 → 1.2 → 1 over 280ms; `HapticFeedbackType.LongPress` |
+| Bubble selection | `animateFloatAsState` 1 → 1.15 `spring(dampingRatio = 0.55f)`; `HapticFeedbackType.TextHandleMove` |
+| Card tap | `animateFloatAsState` 1 → 0.98 `spring(dampingRatio = 0.8f)` |
+| Hero parallax | read `LazyListState.firstVisibleItemScrollOffset`, apply `Modifier.graphicsLayer { translationY = offset * 0.5f }` to the hero |
+| Tab switch | `Crossfade` 200ms, active icon swaps to filled variant |
+
+```kotlin
+// Save-heart bounce
+val scale = remember { Animatable(1f) }
+LaunchedEffect(saved) {
+    if (saved) {
+        scale.animateTo(1.2f, tween(140))
+        scale.animateTo(1f, tween(140))
+    }
+}
+```
+
+Haptics: prefer `LocalHapticFeedback`. For richer control use `LocalView.current.performHapticFeedback(HapticFeedbackConstants.CONTEXT_CLICK)` (API 30+) or a `Vibrator` `VibrationEffect.createOneShot(8, ...)` to approximate iOS's `.light` impact.
+
+## 7. Icons
+
+The closest first-party set is `androidx.compose.material:material-icons-extended`. For exact parity with Tripadvisor's custom glyphs, export them as vector drawables and load via `ImageVector.vectorResource(R.drawable.…)`.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Search | `magnifyingglass` | `Icons.Filled.Search` |
+| Save heart | `heart` / `heart.fill` | `Icons.Outlined.FavoriteBorder` / `Icons.Filled.Favorite` |
+| Share | `square.and.arrow.up` | `Icons.Filled.Share` |
+| Back | `chevron.left` | `Icons.AutoMirrored.Filled.ArrowBack` |
+| Filters | `line.3.horizontal.decrease` | `Icons.Filled.Tune` |
+| Location pin | `mappin.and.ellipse` | `Icons.Filled.LocationOn` |
+| Directions | `arrow.triangle.turn.up.right.diamond` | `Icons.Filled.Navigation` |
+| Helpful vote | `hand.thumbsup` | `Icons.Outlined.ThumbUp` / `Icons.Filled.ThumbUp` |
+| Explore (tab) | `safari.fill` | `Icons.Filled.Explore` |
+| Trips (tab) | `suitcase.fill` | `Icons.Filled.Work` |
+| Review (tab) | `square.and.pencil` | `Icons.Filled.Create` |
+| More (tab) | `ellipsis` | `Icons.Filled.MoreHoriz` |
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; modern motion is comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()` in the `Activity`; the white canvas wants `WindowCompat` dark-content system bars. Apply `Modifier.windowInsetsPadding(WindowInsets.systemBars)` or `Scaffold` insets; the detail hero bleeds full-width while the sticky bar clears the status bar.
+- **Font scaling**: `sp` honors the user's font scale automatically — keep it on place names, review body, headers. Pin layout-sensitive units (the bubble rating, tab labels, photo-count pill) by deriving size from `dp` or wrapping in `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))`.
+- **TalkBack**: expose the bubble rating as one combined `contentDescription` (`"Rated 4.5 out of 5, 1,284 reviews"`); make the review picker `Modifier.semantics { stateDescription = "$rating of 5 bubbles" }` with an adjustable role; mark the save heart as a separate toggle button.
+- **Touch targets**: Material guidance is 48.dp minimum. The CTA pill clears it; ensure the 36.dp save-heart overlay has a 48.dp hit area via padding, and each review-form bubble has ≥44.dp effective touch.
+- **Contrast**: `#6B6B6B` on `#FFFFFF` passes WCAG AA at 13sp+. Black-on-`#34E0A1` is intentional and high-contrast — do not switch to white text.
+- **Dynamic color**: do **not** enable Material You `dynamicLightColorScheme()` — Tripadvisor's brand requires the fixed white canvas and the single mint-green accent regardless of wallpaper.