designmd-forge 1.2.0

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

@@ -0,0 +1,711 @@
+# Todoist (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Todoist's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s (the priority checkbox, the hero task row, the tinted-shadow FAB, the quick-add card), `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 (the whisper-quiet white canvas, Todoist Red as a strict verb color, the four-tier priority checkbox, and — critically — the **tinted red FAB shadow**) while making everything idiomatic Android — a `NavigationBar`/drawer instead of a UITabBar, `SwipeToDismissBox` instead of `.swipeActions`, `LocalHapticFeedback` instead of `.sensoryFeedback`, `sp`/`dp` instead of `pt`.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3. No remote images and no color extraction, so neither Coil nor `androidx.palette` is required.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/TodoistColors.kt
+import androidx.compose.ui.graphics.Color
+
+object TodoistColors {
+    // Canvas & Surfaces
+    val Canvas       = Color(0xFFFFFFFF)
+    val SurfaceGray  = Color(0xFFFAFAFA)
+    val SurfaceGray2 = Color(0xFFF0F0F0)
+    val Divider      = Color(0xFFEEEEEE)
+
+    // Text
+    val Ink          = Color(0xFF202020) // intentional: warm near-black, never pure #000
+    val Secondary    = Color(0xFF808080)
+    val Tertiary     = Color(0xFFB0B0B0)
+
+    // Brand & Priorities
+    val Red          = Color(0xFFDC4C3E) // FAB, P1, brand mark, primary CTA — verbs only
+    val RedPressed   = Color(0xFFB53C30)
+    val RedTint      = Color(0xFFFBE5E2)
+    val P2Orange     = Color(0xFFEB8909)
+    val P3Blue       = Color(0xFF246FE0)
+    val P4Gray       = Color(0xFFB0B0B0)
+
+    // Semantic
+    val Success      = Color(0xFF058527)
+    val Error        = Color(0xFFD1453B)
+
+    // Dark mode
+    val DarkCanvas   = Color(0xFF1F1F1F)
+    val DarkSurface  = Color(0xFF282828)
+    val DarkSurface2 = Color(0xFF363636)
+    val DarkDivider  = Color(0xFF3D3D3D)
+    val DarkText     = Color(0xFFE8E8E8)
+    val DarkTextSec  = Color(0xFFA0A0A0)
+    val RedDark      = Color(0xFFE44332) // brightens slightly for dark contrast
+
+    // User-selectable project palette (subset — the colored dots)
+    val ProjBerryRed = Color(0xFFB8255F)
+    val ProjRed      = Color(0xFFDB4035)
+    val ProjOrange   = Color(0xFFFF9933)
+    val ProjYellow   = Color(0xFFFAD000)
+    val ProjGreen    = Color(0xFF299438)
+    val ProjMint     = Color(0xFF6ACCBC)
+    val ProjTeal     = Color(0xFF158FAD)
+    val ProjSky      = Color(0xFF14AAF5)
+    val ProjBlue     = Color(0xFF4073FF)
+    val ProjGrape    = Color(0xFF884DFF)
+    val ProjViolet   = Color(0xFFAF38EB)
+    val ProjMagenta  = Color(0xFFE05194)
+}
+```
+
+Todoist is light-first (white canvas, content-forward). Wire a Material 3 `lightColorScheme` so ripples, dividers, and stock component defaults inherit the brand; provide the dark scheme (engineered for late-night planning).
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.MaterialTheme
+
+private val TodoistLight = lightColorScheme(
+    primary        = TodoistColors.Red,
+    onPrimary      = Color.White,
+    background     = TodoistColors.Canvas,
+    onBackground   = TodoistColors.Ink,
+    surface        = TodoistColors.SurfaceGray,
+    onSurface      = TodoistColors.Ink,
+    surfaceVariant = TodoistColors.SurfaceGray2,
+    outline        = TodoistColors.Divider,
+    error          = TodoistColors.Error,
+)
+
+private val TodoistDark = darkColorScheme(
+    primary        = TodoistColors.RedDark,
+    onPrimary      = Color.White,
+    background     = TodoistColors.DarkCanvas,
+    onBackground   = TodoistColors.DarkText,
+    surface        = TodoistColors.DarkSurface,
+    onSurface      = TodoistColors.DarkText,
+    surfaceVariant = TodoistColors.DarkSurface2,
+    outline        = TodoistColors.DarkDivider,
+    error          = TodoistColors.Error,
+)
+
+@Composable
+fun TodoistTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) =
+    MaterialTheme(
+        colorScheme = if (darkTheme) TodoistDark else TodoistLight,
+        typography = TodoistTypography,
+        content = content,
+    )
+```
+
+## 2. Typography
+
+Todoist deliberately uses the **platform font** — no custom face — to feel like a respectful native citizen. On Android the platform face is **Roboto**; use `FontFamily.Default` (Compose resolves Roboto / the device system font and picks the right optical variant). This mirrors Todoist's "SF Pro, no exceptions" decision.
+
+```kotlin
+// ui/theme/TodoistType.kt
+import androidx.compose.material3.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+private val Sys = FontFamily.Default // Roboto / system — Todoist uses the platform face by design
+
+// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1)
+object TodoistText {
+    val LargeNav    = TextStyle(Sys, fontWeight = FontWeight.Bold,     fontSize = 34.sp, lineHeight = 39.sp, letterSpacing = (-0.4).sp)
+    val InlineNav   = TextStyle(Sys, fontWeight = FontWeight.SemiBold, fontSize = 17.sp, lineHeight = 20.sp, letterSpacing = (-0.2).sp)
+    val SectionHdr  = TextStyle(Sys, fontWeight = FontWeight.SemiBold, fontSize = 13.sp, lineHeight = 16.sp, letterSpacing = 0.6.sp) // UPPERCASE at call site
+    val TaskBody    = TextStyle(Sys, fontWeight = FontWeight.Normal,   fontSize = 16.sp, lineHeight = 22.sp, letterSpacing = (-0.1).sp)
+    val TaskBold    = TextStyle(Sys, fontWeight = FontWeight.SemiBold, fontSize = 16.sp, lineHeight = 22.sp, letterSpacing = (-0.1).sp)
+    val Subtask     = TextStyle(Sys, fontWeight = FontWeight.Normal,   fontSize = 15.sp, lineHeight = 20.sp, letterSpacing = (-0.1).sp)
+    val Meta        = TextStyle(Sys, fontWeight = FontWeight.Normal,   fontSize = 13.sp, lineHeight = 16.sp)
+    val MetaOverdue = TextStyle(Sys, fontWeight = FontWeight.Medium,   fontSize = 13.sp, lineHeight = 16.sp)
+    val SidebarSys  = TextStyle(Sys, fontWeight = FontWeight.Medium,   fontSize = 15.sp, lineHeight = 19.sp)
+    val SidebarProj = TextStyle(Sys, fontWeight = FontWeight.Normal,   fontSize = 15.sp, lineHeight = 19.sp)
+    val QuickAdd    = TextStyle(Sys, fontWeight = FontWeight.Normal,   fontSize = 17.sp, lineHeight = 22.sp)
+    val Button      = TextStyle(Sys, fontWeight = FontWeight.SemiBold, fontSize = 16.sp, lineHeight = 16.sp)
+    val FabGlyph    = TextStyle(Sys, fontWeight = FontWeight.Normal,   fontSize = 28.sp, lineHeight = 28.sp)
+    val Tab         = TextStyle(Sys, fontWeight = FontWeight.Medium,   fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.1.sp)
+    val Caption     = TextStyle(Sys, fontWeight = FontWeight.Normal,   fontSize = 12.sp, lineHeight = 16.sp)
+    val KarmaNum    = TextStyle(Sys, fontWeight = FontWeight.Bold,     fontSize = 28.sp, lineHeight = 28.sp, letterSpacing = (-0.2).sp)
+}
+
+// Map onto Material 3 slots so stock components inherit the brand
+val TodoistTypography = Typography(
+    headlineLarge = TodoistText.LargeNav,
+    titleMedium   = TodoistText.InlineNav,
+    bodyLarge     = TodoistText.TaskBody,
+    bodyMedium    = TodoistText.Meta,
+    labelLarge    = TodoistText.Button,
+    labelSmall    = TodoistText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### Priority Checkbox
+
+The four-tier priority lives on the **checkbox stroke**, never the row background. Mirrors DESIGN-swiftui.md §3.
+
+```kotlin
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+import androidx.compose.ui.unit.dp
+
+enum class Priority { P1, P2, P3, P4 }
+
+val Priority.color: Color
+    get() = when (this) {
+        Priority.P1 -> TodoistColors.Red
+        Priority.P2 -> TodoistColors.P2Orange
+        Priority.P3 -> TodoistColors.P3Blue
+        Priority.P4 -> TodoistColors.P4Gray
+    }
+
+val Priority.fillTint: Color
+    get() = when (this) {
+        Priority.P1 -> TodoistColors.Red.copy(alpha = 0.10f)
+        Priority.P2 -> TodoistColors.P2Orange.copy(alpha = 0.08f)
+        Priority.P3 -> TodoistColors.P3Blue.copy(alpha = 0.08f)
+        Priority.P4 -> Color.Transparent
+    }
+
+@Composable
+fun TodoistCheckbox(
+    priority: Priority,
+    checked: Boolean,
+    onCheckedChange: (Boolean) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val haptics = LocalHapticFeedback.current
+    val interaction = remember { MutableInteractionSource() }
+
+    Box(
+        modifier = modifier
+            .size(44.dp) // 44.dp hit area — never compress
+            .clickable(interaction, indication = null) {
+                haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove) // ~iOS light impact
+                onCheckedChange(!checked)
+            },
+        contentAlignment = Alignment.Center,
+    ) {
+        Box(
+            Modifier
+                .size(22.dp)
+                .clip(CircleShape)
+                .background(if (checked) priority.color else priority.fillTint)
+                .border(1.5.dp, priority.color, CircleShape),
+            contentAlignment = Alignment.Center,
+        ) {
+            if (checked) {
+                Icon(Icons.Filled.Check, contentDescription = null, tint = Color.White, modifier = Modifier.size(12.dp))
+            }
+        }
+    }
+}
+```
+
+### Task Row (The Hero Component)
+
+Edge-to-edge, 52.dp minimum, content + metadata, divider inset 64.dp from the left (aligned with task content, not the checkbox). On complete: strikethrough + fade.
+
+```kotlin
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.automirrored.outlined.Comment
+import androidx.compose.material3.Text
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.text.style.TextOverflow
+
+sealed interface TaskDate {
+    data object Today : TaskDate
+    data object Tomorrow : TaskDate
+    data class Overdue(val label: String) : TaskDate
+    data class Future(val label: String) : TaskDate
+}
+
+@Composable
+fun TaskRow(
+    content: String,
+    priority: Priority,
+    date: TaskDate?,
+    project: Pair<String, Color>?,
+    commentCount: Int,
+    checked: Boolean,
+    onCheckedChange: (Boolean) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .background(TodoistColors.Canvas)
+            .heightIn(min = 52.dp)
+            .drawBehind {
+                val inset = 64.dp.toPx()
+                drawLine(
+                    TodoistColors.Divider,
+                    Offset(inset, size.height),
+                    Offset(size.width, size.height),
+                    0.5.dp.toPx(),
+                )
+            }
+            .padding(horizontal = 16.dp, vertical = 12.dp),
+        verticalAlignment = Alignment.Top,
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        TodoistCheckbox(priority, checked, onCheckedChange)
+
+        Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(4.dp)) {
+            Text(
+                content,
+                style = TodoistText.TaskBody,
+                color = if (checked) TodoistColors.Tertiary else TodoistColors.Ink,
+                textDecoration = if (checked) TextDecoration.LineThrough else TextDecoration.None,
+                maxLines = 3,
+                overflow = TextOverflow.Ellipsis,
+            )
+            if (date != null || project != null || commentCount > 0) {
+                Row(horizontalArrangement = Arrangement.spacedBy(12.dp), verticalAlignment = Alignment.CenterVertically) {
+                    date?.let { DatePill(it) }
+                    project?.let { (name, c) -> ProjectTag(name, c) }
+                    if (commentCount > 0) CommentBadge(commentCount)
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun DatePill(d: TaskDate) {
+    when (d) {
+        TaskDate.Today        -> Text("Today", style = TodoistText.Meta, color = TodoistColors.Success)
+        TaskDate.Tomorrow     -> Text("Tomorrow", style = TodoistText.Meta, color = TodoistColors.Ink)
+        is TaskDate.Overdue   -> Text(d.label, style = TodoistText.MetaOverdue, color = TodoistColors.Red)
+        is TaskDate.Future    -> Text(d.label, style = TodoistText.Meta, color = TodoistColors.Secondary)
+    }
+}
+
+@Composable
+fun ProjectTag(name: String, color: Color) {
+    Row(horizontalArrangement = Arrangement.spacedBy(6.dp), verticalAlignment = Alignment.CenterVertically) {
+        Box(Modifier.size(8.dp).clip(CircleShape).background(color))
+        Text("# $name", style = TodoistText.Meta, color = TodoistColors.Secondary)
+    }
+}
+
+@Composable
+private fun CommentBadge(count: Int) {
+    Row(horizontalArrangement = Arrangement.spacedBy(4.dp), verticalAlignment = Alignment.CenterVertically) {
+        Icon(Icons.AutoMirrored.Outlined.Comment, null, tint = TodoistColors.Secondary, modifier = Modifier.size(12.dp))
+        Text("$count", style = TodoistText.Meta, color = TodoistColors.Secondary)
+    }
+}
+```
+
+### Floating Action Button (Tinted Red Shadow — The Signature)
+
+This is one of the most-copied details in the app: the FAB shadow is **dyed Todoist Red**, not generic black. Compose `Modifier.shadow` accepts `spotColor`/`ambientColor` on API 28+; tint both to red.
+
+```kotlin
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.draw.shadow
+
+@Composable
+fun TodoistFAB(onClick: () -> Unit, modifier: Modifier = Modifier) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    val scale by animateFloatAsState(if (pressed) 0.94f else 1f, label = "fabScale")
+    val haptics = LocalHapticFeedback.current
+
+    Box(
+        modifier = modifier
+            .size(56.dp)
+            .scale(scale)
+            .shadow(
+                elevation = if (pressed) 4.dp else 16.dp,
+                shape = CircleShape,
+                spotColor = TodoistColors.Red,    // SIGNATURE: tinted red, not black
+                ambientColor = TodoistColors.Red,
+            )
+            .clip(CircleShape)
+            .background(if (pressed) TodoistColors.RedPressed else TodoistColors.Red)
+            .clickable(interaction, indication = null) {
+                haptics.performHapticFeedback(HapticFeedbackType.LongPress) // ~iOS medium impact
+                onClick()
+            }
+            .semantics { contentDescription = "Add task" },
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(Icons.Filled.Add, contentDescription = null, tint = Color.White, modifier = Modifier.size(28.dp))
+    }
+}
+```
+
+> Pre-API-28, `spotColor` is ignored (shadows are always black). Fall back to drawing a soft red radial glow behind the circle with `Modifier.drawBehind` so the signature reads on every device.
+
+### Quick-Add Card (Natural-Language Input)
+
+Bottom-sheet, natural-language entry with inline smart-parsing chips. Use a Material 3 `ModalBottomSheet` for the container.
+
+```kotlin
+import androidx.compose.foundation.horizontalScroll
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Surface
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.text.input.TextFieldValue
+
+@Composable
+fun QuickAddCard(
+    onAdd: (String) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    var text by remember { mutableStateOf(TextFieldValue("")) }
+    var selectedDate by remember { mutableStateOf<String?>("Today") }
+    var selectedPriority by remember { mutableStateOf(Priority.P4) }
+    val haptics = LocalHapticFeedback.current
+
+    Surface(
+        color = TodoistColors.Canvas,
+        shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
+        shadowElevation = 4.dp,
+        modifier = modifier,
+    ) {
+        Column(Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(16.dp)) {
+            Text("Add task", style = TodoistText.InlineNav, color = TodoistColors.Ink)
+
+            BasicTextField(
+                value = text,
+                onValueChange = { text = it },
+                textStyle = TodoistText.QuickAdd.copy(color = TodoistColors.Ink),
+                cursorBrush = SolidColor(TodoistColors.Red),
+                modifier = Modifier.fillMaxWidth(),
+                decorationBox = { inner ->
+                    if (text.text.isEmpty()) {
+                        Text("Take out the trash today p1 #home", style = TodoistText.QuickAdd, color = TodoistColors.Tertiary)
+                    }
+                    inner()
+                },
+            )
+
+            if (text.text.isNotEmpty()) {
+                Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                    selectedDate?.let { SmartChip(it, TodoistColors.Success) }
+                    if (selectedPriority != Priority.P4) {
+                        SmartChip("P${selectedPriority.ordinal + 1}", selectedPriority.color)
+                    }
+                }
+            }
+
+            HorizontalDivider(color = TodoistColors.Divider)
+
+            Row(
+                Modifier.horizontalScroll(rememberScrollState()),
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+            ) {
+                ActionChip(Icons.Filled.CalendarToday, selectedDate ?: "Date")
+                ActionChip(Icons.Outlined.Flag, "Priority")
+                ActionChip(Icons.Filled.Tag, "Project")
+                ActionChip(Icons.Filled.Label, "Labels")
+                ActionChip(Icons.Filled.Notifications, "Reminders")
+            }
+
+            Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.CenterEnd) {
+                val enabled = text.text.isNotEmpty()
+                Box(
+                    Modifier
+                        .clip(RoundedCornerShape(8.dp))
+                        .background(if (enabled) TodoistColors.Red else TodoistColors.SurfaceGray2)
+                        .clickable(enabled = enabled) {
+                            haptics.performHapticFeedback(HapticFeedbackType.LongPress) // ~iOS success
+                            onAdd(text.text)
+                        }
+                        .padding(horizontal = 24.dp, vertical = 12.dp),
+                ) {
+                    Text("Add task", style = TodoistText.Button, color = if (enabled) Color.White else TodoistColors.Tertiary)
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun SmartChip(label: String, color: Color) {
+    Box(
+        Modifier.clip(RoundedCornerShape(6.dp)).background(color.copy(alpha = 0.12f))
+            .padding(horizontal = 8.dp, vertical = 4.dp)
+    ) {
+        Text(label, style = TodoistText.Meta.copy(fontWeight = FontWeight.Medium), color = color)
+    }
+}
+
+@Composable
+private fun ActionChip(icon: androidx.compose.ui.graphics.vector.ImageVector, label: String) {
+    Row(
+        Modifier.clip(RoundedCornerShape(50)).border(1.dp, TodoistColors.Divider, RoundedCornerShape(50))
+            .padding(horizontal = 12.dp, vertical = 8.dp),
+        horizontalArrangement = Arrangement.spacedBy(6.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Icon(icon, null, tint = TodoistColors.Ink, modifier = Modifier.size(12.dp))
+        Text(label, style = TodoistText.Meta.copy(fontWeight = FontWeight.Medium), color = TodoistColors.Ink)
+    }
+}
+```
+
+### Section Header & Sidebar Row
+
+```kotlin
+import androidx.compose.material.icons.filled.ChevronRight
+import androidx.compose.material.icons.filled.ExpandMore
+
+@Composable
+fun TodoistSectionHeader(title: String, isOverdue: Boolean, collapsed: Boolean, onToggle: () -> Unit) {
+    Row(
+        Modifier
+            .fillMaxWidth()
+            .background(TodoistColors.Canvas)
+            .height(36.dp)
+            .drawBehind { drawLine(TodoistColors.Divider, Offset(0f, size.height), Offset(size.width, size.height), 0.5.dp.toPx()) }
+            .padding(horizontal = 16.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Text(
+            title.uppercase(),
+            style = TodoistText.SectionHdr,
+            color = if (isOverdue) TodoistColors.Red else TodoistColors.Secondary,
+        )
+        Spacer(Modifier.weight(1f))
+        Icon(
+            if (collapsed) Icons.Filled.ChevronRight else Icons.Filled.ExpandMore,
+            contentDescription = if (collapsed) "Expand" else "Collapse",
+            tint = if (isOverdue) TodoistColors.Red else TodoistColors.Secondary,
+            modifier = Modifier.size(48.dp).clickable(onClick = onToggle).padding(14.dp),
+        )
+    }
+}
+
+@Composable
+fun SidebarRow(
+    icon: androidx.compose.ui.graphics.vector.ImageVector,
+    label: String,
+    count: Int?,
+    selected: Boolean,
+    overdue: Boolean,
+    onClick: () -> Unit,
+) {
+    Box {
+        Row(
+            Modifier
+                .fillMaxWidth()
+                .height(44.dp)
+                .background(if (selected) TodoistColors.Red.copy(alpha = 0.08f) else Color.Transparent)
+                .clickable(onClick = onClick)
+                .padding(horizontal = 16.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(12.dp),
+        ) {
+            Icon(icon, null, tint = TodoistColors.Ink, modifier = Modifier.size(20.dp))
+            Text(label, style = TodoistText.SidebarSys, color = TodoistColors.Ink)
+            Spacer(Modifier.weight(1f))
+            if (count != null && count > 0) {
+                Box(
+                    Modifier
+                        .then(if (overdue) Modifier.clip(CircleShape).background(TodoistColors.Red) else Modifier)
+                        .padding(horizontal = 8.dp, vertical = 2.dp)
+                ) {
+                    Text("$count", style = TodoistText.Meta, color = if (overdue) Color.White else TodoistColors.Secondary)
+                }
+            }
+        }
+        if (selected) {
+            Box(Modifier.width(3.dp).fillMaxHeight().background(TodoistColors.Red))
+        }
+    }
+}
+```
+
+## 4. Swipe Actions & Task-Completion Collapse (the distinctive interaction)
+
+Todoist has no color extraction. Its defining dynamic moves are **swipe-to-schedule** and the **strikethrough → collapse-upward** completion. On Android, swipe uses Material 3 `SwipeToDismissBox`; the collapse uses `AnimatedVisibility` + `shrinkVertically`.
+
+```kotlin
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.animation.core.tween
+import androidx.compose.material3.SwipeToDismissBox
+import androidx.compose.material3.SwipeToDismissBoxValue
+import androidx.compose.material3.rememberSwipeToDismissBoxState
+
+@Composable
+fun SwipeableTaskRow(
+    visible: Boolean,
+    onScheduleToday: () -> Unit,
+    onPostpone: () -> Unit,
+    rowContent: @Composable () -> Unit,
+) {
+    // Strikethrough already lives in TaskRow; here we collapse the row upward on complete (~250ms)
+    AnimatedVisibility(
+        visible = visible,
+        exit = shrinkVertically(animationSpec = tween(250)) + fadeOut(tween(250)),
+    ) {
+        val dismissState = rememberSwipeToDismissBoxState(
+            confirmValueChange = {
+                when (it) {
+                    SwipeToDismissBoxValue.StartToEnd -> { onScheduleToday(); false } // swipe right → schedule (green)
+                    SwipeToDismissBoxValue.EndToStart -> { onPostpone(); false }       // swipe left → postpone (orange)
+                    else -> false
+                }
+            }
+        )
+        SwipeToDismissBox(
+            state = dismissState,
+            backgroundContent = {
+                val toEnd = dismissState.dismissDirection == SwipeToDismissBoxValue.StartToEnd
+                Box(
+                    Modifier
+                        .fillMaxSize()
+                        .background(if (toEnd) TodoistColors.Success else TodoistColors.P2Orange)
+                        .padding(horizontal = 20.dp),
+                    contentAlignment = if (toEnd) Alignment.CenterStart else Alignment.CenterEnd,
+                ) {
+                    Icon(
+                        if (toEnd) Icons.Filled.CalendarToday else Icons.Filled.Schedule,
+                        contentDescription = null, tint = Color.White, modifier = Modifier.size(20.dp),
+                    )
+                }
+            },
+        ) { rowContent() }
+    }
+}
+```
+
+Hoist `visible` and the completion logic into a `ViewModel`: tapping the checkbox flips `checked` (animating fill + check ~200ms), then after an 80ms hold sets `visible = false`, collapsing the row upward while the list below slides up.
+
+## 5. Navigation (sidebar drawer + iPad rail)
+
+On iPhone Todoist uses a full-screen **drawer** (hamburger), not a tab bar; the iPad tab bar maps to a `NavigationBar`. Use a Material 3 `ModalNavigationDrawer` for phones. Android has no live blur — the large-title nav uses a 92%-opaque canvas `Surface` when content scrolls beneath, instead of `.regularMaterial`.
+
+```kotlin
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material3.*
+
+@Composable
+fun TodoistTabBar(selected: Int, onSelect: (Int) -> Unit) { // iPad / large-screen only
+    NavigationBar(containerColor = TodoistColors.Canvas, tonalElevation = 0.dp) {
+        val items = listOf(
+            "Today"    to Icons.Filled.CalendarToday,
+            "Upcoming" to Icons.Filled.EventNote,
+            "Search"   to Icons.Filled.Search,
+            "Browse"   to Icons.Filled.GridView,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = { Icon(icon, contentDescription = label, modifier = Modifier.size(22.dp)) },
+                label = { Text(label, style = TodoistText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor   = TodoistColors.Red,
+                    selectedTextColor   = TodoistColors.Red,
+                    unselectedIconColor = TodoistColors.Secondary,
+                    unselectedTextColor = TodoistColors.Secondary,
+                    indicatorColor      = TodoistColors.Red.copy(alpha = 0.08f),
+                ),
+            )
+        }
+    }
+}
+```
+
+The FAB sits 24.dp above the bottom bar (or 88.dp above the home indicator when there is no bar) at the trailing edge — render it in the `Scaffold` `floatingActionButton` slot.
+
+## 6. Motion
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Checkbox tap | fill `animateColorAsState` transparent → priority color over 200ms `tween`; check icon fades in; `HapticFeedbackType.TextHandleMove` |
+| Task complete | 80ms hold → `AnimatedVisibility` `shrinkVertically(tween(250))` + `fadeOut`; list below slides up |
+| Task uncomplete | reverse — `expandVertically` + `fadeIn` |
+| FAB tap | `animateFloatAsState(0.94f)` + shadow `16.dp → 4.dp`; `HapticFeedbackType.LongPress` |
+| Quick-add sheet | Material 3 `ModalBottomSheet` (spring); commit → success-style haptic |
+| Smart-parsing chip | `AnimatedVisibility` scale 0.8 → 1.0 + fade over 200ms; `HapticFeedbackType.TextHandleMove` per chip |
+| Karma flame pulse | `rememberInfiniteTransition` alpha 0.7 → 1.0, 800ms `RepeatMode.Reverse` |
+
+```kotlin
+// Karma flame ember pulse (DESIGN.md §4 Karma Flame)
+@Composable
+fun KarmaFlame() {
+    val t = rememberInfiniteTransition(label = "karma")
+    val a by t.animateFloat(0.7f, 1f, infiniteRepeatable(tween(800), RepeatMode.Reverse), label = "ember")
+    Icon(
+        Icons.Filled.LocalFireDepartment,
+        contentDescription = "Karma streak",
+        tint = TodoistColors.Red,
+        modifier = Modifier.size(14.dp).graphicsLayer { alpha = a },
+    )
+}
+```
+
+Haptics: prefer `LocalHapticFeedback`. For the lighter checkbox tick use `LocalView.current.performHapticFeedback(HapticFeedbackConstants.CLOCK_TICK)`; for the quick-add success a `Vibrator` `VibrationEffect.createOneShot(10, ...)` approximates iOS `.notificationOccurred(.success)`.
+
+## 7. Icons
+
+Todoist uses standard system glyphs (no custom typeface, minimal custom iconography). The closest first-party set is `androidx.compose.material:material-icons-extended`; the flag and karma flame are good vector-drawable candidates if you want pixel parity.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Checkbox empty | `circle` | `Icons.Outlined.Circle` |
+| Checkbox complete | `circle.fill` + `checkmark` | filled circle + `Icons.Filled.Check` |
+| Priority flag | `flag.fill` / `flag` | `Icons.Filled.Flag` / `Icons.Outlined.Flag` |
+| FAB | `plus` | `Icons.Filled.Add` |
+| Today filter | `calendar` | `Icons.Filled.CalendarToday` |
+| Upcoming | `calendar.badge.clock` | `Icons.Filled.EventNote` |
+| Filters & Labels | `magnifyingglass` | `Icons.Filled.Search` |
+| Project (sidebar) | color dot | colored `Box` + `CircleShape` |
+| Comment count | `bubble.right` | `Icons.AutoMirrored.Outlined.Comment` |
+| Sort / filter | `slider.horizontal.3` | `Icons.Filled.Tune` |
+| Menu (drawer) | `line.horizontal.3` | `Icons.Filled.Menu` |
+| Karma flame | `flame.fill` | `Icons.Filled.LocalFireDepartment` |
+| Schedule (swipe) | `calendar` | `Icons.Filled.CalendarToday` |
+| Reminders (chip) | `bell` | `Icons.Filled.Notifications` |
+| Labels (chip) | `tag` | `Icons.Filled.Label` |
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; the tinted-shadow FAB needs API 28+ for `spotColor` — see fallback in §3). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()` in the `Activity`. Apply `Scaffold` insets or `Modifier.windowInsetsPadding(WindowInsets.systemBars)` so the FAB sits 24.dp above the gesture nav and edge-to-edge task rows aren't clipped by the cutout.
+- **Font scaling**: `sp` honors the user's font scale automatically — keep it on task content, sidebar items, and the large nav title. Pin layout-sensitive text: the 13sp UPPERCASE section headers, 13sp date metadata, the 28sp FAB glyph, and tab labels are layout-critical — derive from `dp` or wrap in `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))`. The 22sp checkbox hit area must stay 44.dp regardless.
+- **TalkBack**: the task row should merge into one element with `Modifier.semantics(mergeDescendants = true) { contentDescription = "$priority, $content, $dateText, $project, $commentCount comments" }`, and the checkbox must be a **separate** focusable element ("Mark complete" / "Mark incomplete"). Priority is non-decorative meaning — it must be in the spoken label, never implied by color alone.
+- **Touch targets**: Material guidance is 48.dp minimum. The 56.dp FAB clears it; the 22.dp checkbox carries a 44.dp hit area via padding (do not compress even if the row visually looks smaller); the section-header chevron carries a 48.dp hit area.
+- **Contrast**: Ink `#202020` on white passes WCAG AAA at all sizes. Secondary `#808080` on white only passes AA at 14sp+ Medium or 18sp+ — used carefully for 13sp metadata; if targeting strict compliance, bump metadata toward `#6E6E6E`. The P2 orange `#EB8909` on white is a known low-contrast pair for the date pill — it passes AA only at 16sp+ Bold, so keep the overdue/today states (red/green) for anything smaller.
+- **Reduce motion**: when a reduced-motion preference is set, skip the 250ms collapse-upward (instant fade out) and the smart-chip scale-in.
+- **Dynamic color**: Todoist *could* embrace Material You for a system-blended feel, but the brand depends on the exact carmine `#DC4C3E` (FAB, P1, brand mark) — keep `dynamicColorScheme` **disabled** so the verb-red and the four-tier priority colors never shift with the user's wallpaper.