detail: always show the subtasks group so add is reachable

Render the subtasks group on every task, not just ones that already
have children, so the inline add field is available from the start.
Hide the done/total count until there's at least one subtask.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

app/build.gradle.kts

@@ -110,6 +110,7 @@ dependencies {
 
     implementation(libs.hilt.android)
     implementation(libs.androidx.hilt.navigation.compose)
+    implementation(libs.androidx.navigation.compose)
     ksp(libs.hilt.compiler)
 
     implementation(libs.androidx.datastore.preferences)

app/src/main/java/de/jeanlucmakiola/floret/data/prefs/SettingsPrefs.kt

@@ -7,6 +7,8 @@ import androidx.datastore.preferences.core.edit
 import androidx.datastore.preferences.core.intPreferencesKey
 import androidx.datastore.preferences.core.longPreferencesKey
 import androidx.datastore.preferences.core.stringPreferencesKey
+import androidx.datastore.preferences.core.stringSetPreferencesKey
+import de.jeanlucmakiola.floret.domain.TaskFormField
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.map
 import javax.inject.Inject
@@ -21,6 +23,8 @@ data class Settings(
     val defaultListId: Long? = null,
     /** Default minutes before due to remind; 0 = at due time. */
     val reminderLeadMinutes: Int = 0,
+    /** Optional edit-form fields shown by default; the rest sit behind "More fields". */
+    val defaultEditFields: Set<TaskFormField> = emptySet(),
 )
 
 /** App preferences, backed by DataStore. Mirrors Calendula's prefs shape. */
@@ -35,6 +39,9 @@ class SettingsPrefs @Inject constructor(
             dynamicColor = p[DYNAMIC_COLOR] ?: true,
             defaultListId = p[DEFAULT_LIST_ID]?.takeIf { it > 0 },
             reminderLeadMinutes = p[REMINDER_LEAD] ?: 0,
+            defaultEditFields = p[DEFAULT_EDIT_FIELDS].orEmpty()
+                .mapNotNull { name -> runCatching { TaskFormField.valueOf(name) }.getOrNull() }
+                .toSet(),
         )
     }
 
@@ -46,10 +53,15 @@ class SettingsPrefs @Inject constructor(
 
     suspend fun setReminderLeadMinutes(minutes: Int) = dataStore.edit { it[REMINDER_LEAD] = minutes }
 
+    suspend fun setDefaultEditFields(fields: Set<TaskFormField>) = dataStore.edit {
+        it[DEFAULT_EDIT_FIELDS] = fields.mapTo(mutableSetOf()) { field -> field.name }
+    }
+
     private companion object {
         val THEME_MODE = stringPreferencesKey("theme_mode")
         val DYNAMIC_COLOR = booleanPreferencesKey("dynamic_color")
         val DEFAULT_LIST_ID = longPreferencesKey("default_list_id")
         val REMINDER_LEAD = intPreferencesKey("reminder_lead_minutes")
+        val DEFAULT_EDIT_FIELDS = stringSetPreferencesKey("default_edit_fields")
     }
 }

app/src/main/java/de/jeanlucmakiola/floret/data/tasks/TasksRepositoryImpl.kt

@@ -2,7 +2,6 @@ package de.jeanlucmakiola.floret.data.tasks
 
 import de.jeanlucmakiola.floret.data.di.IoDispatcher
 import de.jeanlucmakiola.floret.domain.DayWindow
-import de.jeanlucmakiola.floret.domain.SmartList
 import de.jeanlucmakiola.floret.domain.Task
 import de.jeanlucmakiola.floret.domain.TaskDetail
 import de.jeanlucmakiola.floret.domain.TaskFilter
@@ -44,11 +43,28 @@ class TasksRepositoryImpl @Inject constructor(
     private fun loadTasks(filter: TaskFilter): List<Task> {
         val query = when (filter) {
             is TaskFilter.OfList -> TaskQuery(listId = filter.listId, includeCompleted = true)
-            is TaskFilter.Smart -> TaskQuery(includeCompleted = filter.list == SmartList.COMPLETED)
+            // Read completed tasks too, then let [TaskFiltering.matches] enforce each
+            // smart list's own open/closed semantics. We over-read on purpose so a
+            // parent's subtask-progress reflects ALL its children — completed ones
+            // included — even on smart lists that hide completed tasks themselves.
+            is TaskFilter.Smart -> TaskQuery(includeCompleted = true)
         }
         val (todayStart, todayEnd) = DayWindow.today(Clock.System.now(), ZoneId.systemDefault())
-        return dataSource.tasks(query)
+        val all = dataSource.tasks(query)
+        // (done, total) of direct children per parent, over the unfiltered set.
+        val progress: Map<Long, Pair<Int, Int>> = all
+            .filter { (it.parentId ?: 0L) > 0L }
+            .groupingBy { it.parentId!! }
+            .fold(0 to 0) { (done, total), t ->
+                (if (t.isCompleted) done + 1 else done) to (total + 1)
+            }
+        return all
             .filter { TaskFiltering.matches(it, filter, todayStart, todayEnd) }
+            .map { task ->
+                progress[task.taskId]?.let { (done, total) ->
+                    task.copy(subtaskDone = done, subtaskTotal = total)
+                } ?: task
+            }
             .sortedWith(TaskSorting.DEFAULT)
     }
 

app/src/main/java/de/jeanlucmakiola/floret/domain/Models.kt

@@ -52,6 +52,13 @@ data class Task(
     val distanceFromCurrent: Int?,
     val created: Instant?,
     val lastModified: Instant?,
+    /**
+     * Direct-subtask progress, filled in by the repository over the *full* task
+     * set so a parent's progress chip counts completed children even on smart
+     * lists that hide them. Both 0 when the task has no subtasks.
+     */
+    val subtaskTotal: Int = 0,
+    val subtaskDone: Int = 0,
 ) {
     val isCompleted: Boolean get() = status == TaskStatus.COMPLETED
     val isClosed: Boolean get() = status == TaskStatus.COMPLETED || status == TaskStatus.CANCELLED

app/src/main/java/de/jeanlucmakiola/floret/domain/TaskForm.kt

@@ -30,3 +30,18 @@ data class TaskForm(
 }
 
 enum class TaskFormError { BLANK_TITLE, NO_LIST, DUE_BEFORE_START, REMINDER_WITHOUT_DUE }
+
+/**
+ * Optional edit-form sections that can be shown or tucked behind "More fields"
+ * (the core Title / List / When are always visible). Which render by default is
+ * a setting; the rest unfold on demand. Declaring these as an enum keeps the
+ * disclosure generic, so adding a field later is one entry plus its card.
+ */
+enum class TaskFormField { Description, Priority, Reminder }
+
+/** The optional fields that already carry a value — auto-revealed when editing. */
+fun TaskForm.populatedFields(): Set<TaskFormField> = buildSet {
+    if (!description.isNullOrBlank()) add(TaskFormField.Description)
+    if (priority != Priority.NONE) add(TaskFormField.Priority)
+    if (reminderMinutesBeforeDue != null) add(TaskFormField.Reminder)
+}

app/src/main/java/de/jeanlucmakiola/floret/domain/TaskSections.kt

@@ -0,0 +1,39 @@
+package de.jeanlucmakiola.floret.domain
+
+import kotlin.time.Instant
+
+/** A due-date bucket a task list groups its rows under. */
+enum class TaskSection { OVERDUE, TODAY, UPCOMING, NO_DATE, COMPLETED }
+
+/** A non-empty run of tasks under one [TaskSection], already in display order. */
+data class SectionedTasks(val section: TaskSection, val tasks: List<Task>)
+
+/**
+ * Group already-sorted tasks into due-date sections (the standard task-app
+ * presentation). Pure + side-effect-free so it unit-tests with a fixed clock,
+ * mirroring [TaskFiltering] / [DayWindow]. Completed tasks always fall to the
+ * [TaskSection.COMPLETED] bucket regardless of their due date.
+ *
+ * [todayStart] is local midnight today and [todayEnd] local midnight tomorrow
+ * (compute with [DayWindow]). Only non-empty sections are returned, in the
+ * fixed order Overdue → Today → Upcoming → No date → Completed.
+ */
+object TaskSections {
+
+    fun of(tasks: List<Task>, todayStart: Instant, todayEnd: Instant): List<SectionedTasks> {
+        val bySection = tasks.groupBy { sectionOf(it, todayStart, todayEnd) }
+        return TaskSection.entries.mapNotNull { section ->
+            bySection[section]?.takeIf { it.isNotEmpty() }?.let { SectionedTasks(section, it) }
+        }
+    }
+
+    fun sectionOf(task: Task, todayStart: Instant, todayEnd: Instant): TaskSection {
+        if (task.isCompleted) return TaskSection.COMPLETED
+        val due = task.due ?: return TaskSection.NO_DATE
+        return when {
+            due < todayStart -> TaskSection.OVERDUE
+            due < todayEnd -> TaskSection.TODAY
+            else -> TaskSection.UPCOMING
+        }
+    }
+}

app/src/main/java/de/jeanlucmakiola/floret/ui/RootScreen.kt

@@ -19,13 +19,12 @@ import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import de.jeanlucmakiola.floret.R
 import de.jeanlucmakiola.floret.data.tasks.ProviderStatus
-import de.jeanlucmakiola.floret.ui.lists.ListsScreen
+import de.jeanlucmakiola.floret.ui.navigation.FloretNavHost
 import de.jeanlucmakiola.floret.ui.permission.PermissionViewModel
 
 /**
- * App root: gates on the tasks-provider permission, then shows the home
- * ([ListsScreen]). Navigation to the task-list / edit screens is wired as those
- * screens land (next milestones); the callbacks are stubs for now.
+ * App root: gates on the tasks-provider permission, then hands off to
+ * [FloretNavHost] (lists → task list → detail / edit).
  */
 @Composable
 fun RootScreen(
@@ -50,11 +49,7 @@ fun RootScreen(
             action = stringResource(R.string.onboarding_permission_button),
             onAction = { launcher.launch(permission.permissionsToRequest.toTypedArray()) },
         )
-        ProviderStatus.READY -> ListsScreen(
-            modifier = modifier,
-            onOpenFilter = { /* TODO: navigate to TaskListScreen */ },
-            onNewTask = { /* TODO: navigate to TaskEditScreen */ },
-        )
+        ProviderStatus.READY -> FloretNavHost(modifier = modifier)
     }
 }
 

app/src/main/java/de/jeanlucmakiola/floret/ui/common/DateTimeField.kt

@@ -0,0 +1,166 @@
+package de.jeanlucmakiola.floret.ui.common
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.Clear
+import androidx.compose.material.icons.rounded.Event
+import androidx.compose.material3.DatePicker
+import androidx.compose.material3.DatePickerDialog
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.material3.TimePicker
+import androidx.compose.material3.rememberDatePickerState
+import androidx.compose.material3.rememberTimePickerState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import de.jeanlucmakiola.floret.R
+import java.time.LocalDate
+import java.time.LocalTime
+import java.time.ZoneId
+import java.time.ZoneOffset
+import kotlin.time.Instant
+
+private val zone: ZoneId get() = ZoneId.systemDefault()
+
+internal fun Instant.toLocalDate(): LocalDate =
+    java.time.Instant.ofEpochMilli(toEpochMilliseconds()).atZone(zone).toLocalDate()
+
+internal fun Instant.toLocalTime(): LocalTime =
+    java.time.Instant.ofEpochMilli(toEpochMilliseconds()).atZone(zone).toLocalTime()
+
+internal fun localToInstant(date: LocalDate, time: LocalTime): Instant =
+    Instant.fromEpochMilliseconds(date.atTime(time).atZone(zone).toInstant().toEpochMilli())
+
+/**
+ * A labelled date(-time) field for the edit form: a tonal row showing the
+ * current value (or nothing), tappable to pick a date and — unless [allDay] —
+ * a time. A clear affordance appears once a value is set. Emits `null` when
+ * cleared. Styled to match the app's rounded tonal family.
+ */
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun DateTimeField(
+    label: String,
+    value: Instant?,
+    allDay: Boolean,
+    onChange: (Instant?) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    var showDatePicker by remember { mutableStateOf(false) }
+    var showTimePicker by remember { mutableStateOf(false) }
+    var pendingDate by remember { mutableStateOf<LocalDate?>(null) }
+
+    Surface(
+        onClick = { showDatePicker = true },
+        shape = RoundedCornerShape(22.dp),
+        color = MaterialTheme.colorScheme.surfaceContainerHigh,
+        modifier = modifier.fillMaxWidth(),
+    ) {
+        Row(
+            modifier = Modifier.padding(horizontal = 20.dp, vertical = 14.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(12.dp),
+        ) {
+            Icon(Icons.Rounded.Event, contentDescription = null, tint = MaterialTheme.colorScheme.onSurfaceVariant)
+            Column(modifier = Modifier.weight(1f)) {
+                Text(
+                    text = label,
+                    style = MaterialTheme.typography.labelMedium,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                )
+                Text(
+                    text = value?.formatDateTime(allDay) ?: stringResource(R.string.edit_set),
+                    style = MaterialTheme.typography.bodyLarge,
+                )
+            }
+            if (value != null) {
+                IconButton(onClick = { onChange(null) }) {
+                    Icon(Icons.Rounded.Clear, contentDescription = stringResource(R.string.edit_clear))
+                }
+            }
+        }
+    }
+
+    if (showDatePicker) {
+        val initialMillis = (value ?: Instant.fromEpochMilliseconds(System.currentTimeMillis()))
+            .toLocalDate().atStartOfDay(ZoneOffset.UTC).toInstant().toEpochMilli()
+        val dateState = rememberDatePickerState(initialSelectedDateMillis = initialMillis)
+        DatePickerDialog(
+            onDismissRequest = { showDatePicker = false },
+            confirmButton = {
+                TextButton(
+                    onClick = {
+                        showDatePicker = false
+                        val millis = dateState.selectedDateMillis ?: return@TextButton
+                        val date = java.time.Instant.ofEpochMilli(millis)
+                            .atZone(ZoneOffset.UTC).toLocalDate()
+                        if (allDay) {
+                            onChange(localToInstant(date, LocalTime.MIDNIGHT))
+                        } else {
+                            pendingDate = date
+                            showTimePicker = true
+                        }
+                    },
+                ) { Text(stringResource(android.R.string.ok)) }
+            },
+            dismissButton = {
+                TextButton(onClick = { showDatePicker = false }) {
+                    Text(stringResource(android.R.string.cancel))
+                }
+            },
+        ) { DatePicker(state = dateState) }
+    }
+
+    if (showTimePicker) {
+        val base = value ?: Instant.fromEpochMilliseconds(System.currentTimeMillis())
+        val timeState = rememberTimePickerState(
+            initialHour = base.toLocalTime().hour,
+            initialMinute = base.toLocalTime().minute,
+        )
+        Dialog(onDismissRequest = { showTimePicker = false }) {
+            Surface(
+                shape = RoundedCornerShape(28.dp),
+                color = MaterialTheme.colorScheme.surfaceContainerHigh,
+            ) {
+                Column(
+                    modifier = Modifier.padding(24.dp),
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    verticalArrangement = Arrangement.spacedBy(16.dp),
+                ) {
+                    TimePicker(state = timeState)
+                    Row(
+                        modifier = Modifier.fillMaxWidth(),
+                        horizontalArrangement = Arrangement.End,
+                    ) {
+                        TextButton(onClick = { showTimePicker = false }) {
+                            Text(stringResource(android.R.string.cancel))
+                        }
+                        TextButton(onClick = {
+                            showTimePicker = false
+                            val date = pendingDate ?: return@TextButton
+                            onChange(localToInstant(date, LocalTime.of(timeState.hour, timeState.minute)))
+                        }) { Text(stringResource(android.R.string.ok)) }
+                    }
+                }
+            }
+        }
+    }
+}

app/src/main/java/de/jeanlucmakiola/floret/ui/common/DateTimeFormat.kt

@@ -0,0 +1,28 @@
+package de.jeanlucmakiola.floret.ui.common
+
+import java.time.ZoneId
+import java.time.format.DateTimeFormatter
+import java.time.format.FormatStyle
+import kotlin.time.Instant
+
+/**
+ * Locale-aware display formatting for the [kotlin.time.Instant]s the domain
+ * uses. Kept tiny and dependency-free; the data layer stores instants, the UI
+ * renders them in the device's zone and locale.
+ */
+private val dateFormatter: DateTimeFormatter = DateTimeFormatter.ofLocalizedDate(FormatStyle.MEDIUM)
+private val timeFormatter: DateTimeFormatter = DateTimeFormatter.ofLocalizedTime(FormatStyle.SHORT)
+
+private fun Instant.atSystemZone() =
+    java.time.Instant.ofEpochMilli(toEpochMilliseconds())
+        .atZone(ZoneId.systemDefault())
+
+/** Medium localized date, e.g. "18 Jun 2026". */
+fun Instant.formatDate(): String = atSystemZone().format(dateFormatter)
+
+/** Short localized time, e.g. "14:30". */
+fun Instant.formatTime(): String = atSystemZone().format(timeFormatter)
+
+/** Date alone for all-day items, otherwise date + time. */
+fun Instant.formatDateTime(allDay: Boolean): String =
+    if (allDay) formatDate() else "${formatDate()} · ${formatTime()}"

app/src/main/java/de/jeanlucmakiola/floret/ui/common/GroupedList.kt

@@ -18,6 +18,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
@@ -36,10 +37,51 @@ fun positionOf(index: Int, count: Int): Position = when {
     else -> Position.Middle
 }
 
+/** Corner radii for a grouped segment: full at the group's outer edges, small between. */
+fun groupedShape(position: Position, full: Dp, small: Dp): Shape = when (position) {
+    Position.Alone -> RoundedCornerShape(full)
+    Position.Top -> RoundedCornerShape(topStart = full, topEnd = full, bottomStart = small, bottomEnd = small)
+    Position.Middle -> RoundedCornerShape(small)
+    Position.Bottom -> RoundedCornerShape(topStart = small, topEnd = small, bottomStart = full, bottomEnd = full)
+}
+
 /**
- * One row in a grouped list: an M3 [ListItem] over a tonal [Surface] whose
- * corner radii come from its [position] (so a run of rows reads as a single
- * rounded card). Corners morph further on press — the expressive shape play.
+ * One segment of a grouped list: a tonal [Surface] whose corner radii come from
+ * [position] (so a run reads as a single rounded card), with a small gap below
+ * all but the last. Corners morph rounder on press — the expressive shape play.
+ * The caller supplies [content] and any horizontal inset via [modifier], so the
+ * same primitive serves both the 16dp-inset lists and full-width detail cards.
+ */
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun GroupedSurface(
+    position: Position,
+    modifier: Modifier = Modifier,
+    onClick: (() -> Unit)? = null,
+    color: Color = MaterialTheme.colorScheme.surfaceContainerHigh,
+    content: @Composable () -> Unit,
+) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    val full by animateDpAsState(if (pressed) 36.dp else 22.dp, label = "fullCorner")
+    val small by animateDpAsState(if (pressed) 36.dp else 6.dp, label = "smallCorner")
+    val shape = groupedShape(position, full, small)
+    val gap = when (position) {
+        Position.Top, Position.Middle -> Modifier.padding(bottom = 2.dp)
+        Position.Bottom, Position.Alone -> Modifier
+    }
+    val base = modifier.fillMaxWidth().then(gap)
+    if (onClick != null) {
+        Surface(onClick = onClick, color = color, shape = shape, interactionSource = interaction, modifier = base) { content() }
+    } else {
+        Surface(color = color, shape = shape, modifier = base) { content() }
+    }
+}
+
+/**
+ * One row in a grouped list: an M3 [ListItem] over a [GroupedSurface] (the
+ * tonal, position-shaped, press-morphing family container). Insets 16dp like
+ * the lists overview.
  */
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -54,24 +96,6 @@ fun GroupedRow(
     trailing: @Composable (() -> Unit)? = null,
     onClick: (() -> Unit)? = null,
 ) {
-    val interaction = remember { MutableInteractionSource() }
-    val pressed by interaction.collectIsPressedAsState()
-    val full by animateDpAsState(if (pressed) 36.dp else 22.dp, label = "fullCorner")
-    val small by animateDpAsState(if (pressed) 36.dp else 6.dp, label = "smallCorner")
-    val shape = when (position) {
-        Position.Alone -> RoundedCornerShape(full)
-        Position.Top -> RoundedCornerShape(
-            topStart = full, topEnd = full, bottomStart = small, bottomEnd = small,
-        )
-        Position.Middle -> RoundedCornerShape(small)
-        Position.Bottom -> RoundedCornerShape(
-            topStart = small, topEnd = small, bottomStart = full, bottomEnd = full,
-        )
-    }
-    val gap = when (position) {
-        Position.Top, Position.Middle -> Modifier.padding(bottom = 2.dp)
-        Position.Bottom, Position.Alone -> Modifier
-    }
     val itemColors = if (selected) {
         ListItemDefaults.colors(
             containerColor = Color.Transparent,
@@ -83,7 +107,17 @@ fun GroupedRow(
     } else {
         ListItemDefaults.colors(containerColor = Color.Transparent)
     }
-    val item: @Composable () -> Unit = {
+    val containerColor = if (selected) {
+        MaterialTheme.colorScheme.secondaryContainer
+    } else {
+        MaterialTheme.colorScheme.surfaceContainerHigh
+    }
+    GroupedSurface(
+        position = position,
+        modifier = modifier.padding(horizontal = 16.dp),
+        onClick = onClick,
+        color = containerColor,
+    ) {
         ListItem(
             headlineContent = { Text(title) },
             supportingContent = summary?.let { text -> { Text(text) } },
@@ -93,24 +127,4 @@ fun GroupedRow(
             modifier = Modifier.heightIn(min = minHeight),
         )
     }
-    val base = modifier
-        .fillMaxWidth()
-        .padding(horizontal = 16.dp)
-        .then(gap)
-    val containerColor = if (selected) {
-        MaterialTheme.colorScheme.secondaryContainer
-    } else {
-        MaterialTheme.colorScheme.surfaceContainerHigh
-    }
-    if (onClick != null) {
-        Surface(
-            onClick = onClick,
-            color = containerColor,
-            shape = shape,
-            interactionSource = interaction,
-            modifier = base,
-        ) { item() }
-    } else {
-        Surface(color = containerColor, shape = shape, modifier = base) { item() }
-    }
 }

app/src/main/java/de/jeanlucmakiola/floret/ui/common/InlineTextField.kt

@@ -0,0 +1,83 @@
+package de.jeanlucmakiola.floret.ui.common
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.isSpecified
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardCapitalization
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.unit.dp
+
+/**
+ * The app's borderless text input: no underline, no outline, just the tonal
+ * card behind it. Floret uses this inside a tonal [androidx.compose.material3.Surface]
+ * for the edit form (title + cards), so anything that takes text reads as one
+ * family rather than a boxed Material field. Ported from Calendula so the two
+ * apps share one input style.
+ */
+@Composable
+fun InlineTextField(
+    value: String,
+    onValueChange: (String) -> Unit,
+    placeholder: String,
+    modifier: Modifier = Modifier
+        .fillMaxWidth()
+        .padding(vertical = 4.dp),
+    textStyle: TextStyle = MaterialTheme.typography.titleMedium,
+    singleLine: Boolean = true,
+    minLines: Int = 1,
+    keyboardType: KeyboardType = KeyboardType.Text,
+    capitalization: KeyboardCapitalization = KeyboardCapitalization.Sentences,
+    imeAction: ImeAction = ImeAction.Default,
+    /** Invoked when the IME action key (e.g. Done) is pressed. */
+    onImeAction: (() -> Unit)? = null,
+) {
+    val resolvedStyle = textStyle.copy(
+        color = if (textStyle.color.isSpecified) {
+            textStyle.color
+        } else {
+            MaterialTheme.colorScheme.onSurface
+        },
+    )
+    BasicTextField(
+        value = value,
+        onValueChange = onValueChange,
+        textStyle = resolvedStyle,
+        singleLine = singleLine,
+        minLines = minLines,
+        keyboardOptions = KeyboardOptions(
+            keyboardType = keyboardType,
+            capitalization = capitalization,
+            imeAction = imeAction,
+        ),
+        keyboardActions = onImeAction?.let { action ->
+            KeyboardActions(onAny = { action() })
+        } ?: KeyboardActions.Default,
+        cursorBrush = SolidColor(MaterialTheme.colorScheme.primary),
+        decorationBox = { innerTextField ->
+            Box {
+                if (value.isEmpty()) {
+                    // Clearly fainter than typed text, so a hint never reads as
+                    // prefilled content.
+                    Text(
+                        text = placeholder,
+                        style = resolvedStyle,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.5f),
+                    )
+                }
+                innerTextField()
+            }
+        },
+        modifier = modifier,
+    )
+}

app/src/main/java/de/jeanlucmakiola/floret/ui/common/ListChip.kt

@@ -3,17 +3,23 @@ package de.jeanlucmakiola.floret.ui.common
 import androidx.compose.foundation.background
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Checklist
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 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.graphics.luminance
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 
 /**
@@ -53,3 +59,25 @@ fun ListColorChip(color: Int, modifier: Modifier = Modifier) {
         )
     }
 }
+
+/**
+ * A small pill naming the task's list, filled in the list's (pastelised) colour.
+ * The label flips black/white by the fill's luminance so it stays legible on any
+ * hue in light and dark. Used in mixed views (smart lists) where rows span lists.
+ */
+@Composable
+fun ListNameChip(name: String, color: Int, modifier: Modifier = Modifier) {
+    val dark = isSystemInDarkTheme()
+    val fill = pastelize(color, dark)
+    val onFill = if (fill.luminance() > 0.5f) Color.Black else Color.White
+    Surface(color = fill, shape = RoundedCornerShape(50), modifier = modifier) {
+        Text(
+            text = name,
+            color = onFill,
+            style = MaterialTheme.typography.labelSmall,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+            modifier = Modifier.padding(horizontal = 8.dp, vertical = 2.dp),
+        )
+    }
+}

app/src/main/java/de/jeanlucmakiola/floret/ui/common/OptionCard.kt

@@ -0,0 +1,95 @@
+package de.jeanlucmakiola.floret.ui.common
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.isSpecified
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.unit.dp
+
+/**
+ * The app's standard pick in a selection dialog: a full-width tonal card,
+ * optionally with a leading icon and a supporting line; the selected option is
+ * highlighted. Stack with 8dp gaps inside an AlertDialog — the only sanctioned
+ * selection-modal style (no radio rows, no bare text lists). Ported from
+ * Calendula so the families' dialogs read identically.
+ */
+@Composable
+fun OptionCard(
+    label: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    icon: ImageVector? = null,
+    /** Icon tint override, e.g. a list colour; unspecified follows selection. */
+    iconTint: Color = Color.Unspecified,
+    supportingText: String? = null,
+    selected: Boolean = false,
+    /** Label colour override, e.g. primary for an emphasised entry. */
+    labelColor: Color = Color.Unspecified,
+) {
+    val contentColor = if (selected) {
+        MaterialTheme.colorScheme.onSecondaryContainer
+    } else {
+        MaterialTheme.colorScheme.onSurface
+    }
+    Surface(
+        onClick = onClick,
+        color = if (selected) {
+            MaterialTheme.colorScheme.secondaryContainer
+        } else {
+            MaterialTheme.colorScheme.surfaceContainerHighest
+        },
+        shape = RoundedCornerShape(12.dp),
+        modifier = modifier.fillMaxWidth(),
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.padding(horizontal = 16.dp, vertical = 14.dp),
+        ) {
+            if (icon != null) {
+                Icon(
+                    imageVector = icon,
+                    contentDescription = null,
+                    tint = when {
+                        iconTint.isSpecified -> iconTint
+                        selected -> MaterialTheme.colorScheme.onSecondaryContainer
+                        else -> MaterialTheme.colorScheme.onSurfaceVariant
+                    },
+                    modifier = Modifier.size(20.dp),
+                )
+                Spacer(Modifier.width(12.dp))
+            }
+            Column {
+                Text(
+                    text = label,
+                    style = MaterialTheme.typography.titleMedium,
+                    color = if (labelColor.isSpecified) labelColor else contentColor,
+                )
+                if (supportingText != null) {
+                    Text(
+                        text = supportingText,
+                        style = MaterialTheme.typography.bodySmall,
+                        color = if (selected) {
+                            MaterialTheme.colorScheme.onSecondaryContainer.copy(alpha = 0.8f)
+                        } else {
+                            MaterialTheme.colorScheme.onSurfaceVariant
+                        },
+                    )
+                }
+            }
+        }
+    }
+}

app/src/main/java/de/jeanlucmakiola/floret/ui/detail/TaskDetailScreen.kt

@@ -0,0 +1,497 @@
+package de.jeanlucmakiola.floret.ui.detail
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.rounded.ArrowBack
+import androidx.compose.material.icons.automirrored.rounded.ListAlt
+import androidx.compose.material.icons.automirrored.rounded.Notes
+import androidx.compose.material.icons.rounded.Add
+import androidx.compose.material.icons.rounded.Check
+import androidx.compose.material.icons.rounded.Checklist
+import androidx.compose.material.icons.rounded.Delete
+import androidx.compose.material.icons.rounded.Edit
+import androidx.compose.material.icons.rounded.ExpandMore
+import androidx.compose.material.icons.rounded.Flag
+import androidx.compose.material.icons.rounded.Percent
+import androidx.compose.material.icons.rounded.Schedule
+import androidx.compose.material3.Checkbox
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.LinearProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import de.jeanlucmakiola.floret.R
+import de.jeanlucmakiola.floret.domain.Task
+import de.jeanlucmakiola.floret.domain.TaskDetail
+import de.jeanlucmakiola.floret.ui.common.GroupedSurface
+import de.jeanlucmakiola.floret.ui.common.formatDate
+import de.jeanlucmakiola.floret.ui.common.formatTime
+import de.jeanlucmakiola.floret.ui.common.pastelize
+import de.jeanlucmakiola.floret.ui.common.positionOf
+import de.jeanlucmakiola.floret.ui.tasklist.priorityLabel
+import de.jeanlucmakiola.floret.ui.tasklist.priorityTint
+
+/**
+ * One task's detail. Each fact is its own tonal card with a leading icon (the
+ * Calendula detail pattern); only genuinely-grouped things — the subtasks — use
+ * the grouped-row run. Edit / delete live in the top bar.
+ */
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun TaskDetailScreen(
+    onEdit: () -> Unit,
+    onDeleted: () -> Unit,
+    onBack: () -> Unit,
+    modifier: Modifier = Modifier,
+    viewModel: TaskDetailViewModel = hiltViewModel(),
+) {
+    val state by viewModel.state.collectAsStateWithLifecycle()
+
+    Scaffold(
+        modifier = modifier,
+        topBar = {
+            TopAppBar(
+                title = { Text(stringResource(R.string.task_detail_title)) },
+                navigationIcon = {
+                    IconButton(onClick = onBack) {
+                        Icon(
+                            Icons.AutoMirrored.Rounded.ArrowBack,
+                            contentDescription = stringResource(R.string.back),
+                        )
+                    }
+                },
+                actions = {
+                    val content = state as? TaskDetailUiState.Content
+                    IconButton(onClick = onEdit, enabled = content != null) {
+                        Icon(Icons.Rounded.Edit, contentDescription = stringResource(R.string.edit))
+                    }
+                    IconButton(
+                        onClick = {
+                            content?.let {
+                                viewModel.delete(it.detail.task)
+                                onDeleted()
+                            }
+                        },
+                        enabled = content != null,
+                    ) {
+                        Icon(Icons.Rounded.Delete, contentDescription = stringResource(R.string.delete))
+                    }
+                },
+            )
+        },
+    ) { inner ->
+        when (val s = state) {
+            TaskDetailUiState.Loading -> Unit
+            TaskDetailUiState.NotFound ->
+                CenteredMessage(stringResource(R.string.task_detail_not_found), inner)
+            is TaskDetailUiState.Content -> DetailBody(
+                detail = s.detail,
+                inner = inner,
+                onToggle = { viewModel.toggleComplete(s.detail.task) },
+                onToggleSubtask = { viewModel.toggleComplete(it) },
+                onAddSubtask = { viewModel.addSubtask(it) },
+                onOpenSubtask = { /* reserved: subtask navigation lands with the subtasks milestone */ },
+            )
+        }
+    }
+}
+
+@Composable
+private fun DetailBody(
+    detail: TaskDetail,
+    inner: androidx.compose.foundation.layout.PaddingValues,
+    onToggle: () -> Unit,
+    onToggleSubtask: (Task) -> Unit,
+    onAddSubtask: (String) -> Unit,
+    onOpenSubtask: (Long) -> Unit,
+) {
+    val task = detail.task
+    val dark = isSystemInDarkTheme()
+    val accent = pastelize(task.effectiveColor, dark)
+    val gap = 12.dp
+    var subtasksExpanded by rememberSaveable { mutableStateOf(true) }
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(inner)
+            // Shrink the scroll viewport by the keyboard so the focused add-subtask
+            // field scrolls into view above the IME instead of being hidden.
+            .imePadding()
+            .verticalScroll(rememberScrollState())
+            .padding(start = 24.dp, end = 24.dp, top = 8.dp, bottom = 40.dp),
+    ) {
+        // Title + complete toggle, with a short list-coloured accent beneath.
+        Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+            Checkbox(checked = task.isCompleted, onCheckedChange = { onToggle() })
+            Text(
+                text = task.title.ifBlank { stringResource(R.string.task_untitled) },
+                style = MaterialTheme.typography.headlineMedium,
+                fontWeight = FontWeight.SemiBold,
+                textDecoration = if (task.isCompleted) TextDecoration.LineThrough else null,
+                modifier = Modifier.weight(1f),
+            )
+        }
+        Spacer(Modifier.height(10.dp))
+        Box(
+            modifier = Modifier
+                .width(48.dp)
+                .height(3.dp)
+                .background(accent, RoundedCornerShape(2.dp)),
+        )
+
+        Spacer(Modifier.height(20.dp))
+
+        // One card per fact; gaps between, no shared container (they aren't a group).
+        val cards = buildList<@Composable () -> Unit> {
+            // When — the Calendula time card: date primary, time(s) secondary.
+            taskWhenLines(task)?.let { (primary, secondary) ->
+                add {
+                    DetailCard(icon = Icons.Rounded.Schedule, iconContentDescription = stringResource(R.string.detail_due)) {
+                        Text(primary, style = MaterialTheme.typography.titleMedium)
+                        if (secondary != null) {
+                            Spacer(Modifier.height(2.dp))
+                            Text(
+                                secondary,
+                                style = MaterialTheme.typography.bodyMedium,
+                                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                            )
+                        }
+                    }
+                }
+            }
+
+            // List — icon tinted in the list colour conveys identity (no extra dot).
+            add {
+                DetailCard(
+                    icon = Icons.Rounded.Checklist,
+                    iconTint = accent,
+                    iconContentDescription = stringResource(R.string.detail_list),
+                ) {
+                    Text(
+                        text = task.listName ?: stringResource(R.string.detail_list),
+                        style = MaterialTheme.typography.titleMedium,
+                    )
+                }
+            }
+
+            // Priority — the flag moves to the front, tinted like the list rows.
+            if (task.priority != de.jeanlucmakiola.floret.domain.Priority.NONE) {
+                add {
+                    DetailCard(
+                        icon = Icons.Rounded.Flag,
+                        iconTint = priorityTint(task.priority),
+                        iconContentDescription = stringResource(R.string.detail_priority),
+                    ) {
+                        Text(priorityLabel(task.priority), style = MaterialTheme.typography.titleMedium)
+                    }
+                }
+            }
+
+            // Progress — only meaningful with subtasks. Uses the provider's
+            // percent when set, otherwise the subtask completion ratio.
+            if (detail.subtasks.isNotEmpty()) {
+                val total = detail.subtasks.size
+                val doneCount = detail.subtasks.count { it.isCompleted }
+                val pct = task.percentComplete ?: (doneCount * 100 / total)
+                add {
+                    DetailCard(icon = Icons.Rounded.Percent, iconContentDescription = stringResource(R.string.detail_progress)) {
+                        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
+                            Text(stringResource(R.string.detail_progress), style = MaterialTheme.typography.titleMedium)
+                            Text(
+                                stringResource(R.string.percent_complete, pct),
+                                style = MaterialTheme.typography.titleMedium,
+                                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                            )
+                        }
+                        Spacer(Modifier.height(8.dp))
+                        LinearProgressIndicator(progress = { pct / 100f }, modifier = Modifier.fillMaxWidth())
+                    }
+                }
+            }
+
+            // Description.
+            task.description?.takeIf { it.isNotBlank() }?.let { description ->
+                add {
+                    DetailCard(icon = Icons.AutoMirrored.Rounded.Notes, iconContentDescription = null) {
+                        Text(description, style = MaterialTheme.typography.bodyMedium)
+                    }
+                }
+            }
+
+            // Subtasks — a genuine group: a connected grouped run whose first
+            // segment is the expand/collapse toggle. Always shown (even with no
+            // subtasks yet) so the add field is reachable on any task.
+            add {
+                SubtasksGroup(
+                    subtasks = detail.subtasks,
+                    expanded = subtasksExpanded,
+                    onToggle = { subtasksExpanded = !subtasksExpanded },
+                    onToggleSubtask = onToggleSubtask,
+                    onAddSubtask = onAddSubtask,
+                    onOpenSubtask = onOpenSubtask,
+                )
+            }
+        }
+        cards.forEachIndexed { index, card ->
+            if (index > 0) Spacer(Modifier.height(gap))
+            card()
+        }
+    }
+}
+
+/**
+ * Subtasks as a connected grouped run (the GroupedRow family look) at the
+ * cards' width: the first segment is the expand/collapse toggle (icon,
+ * "Subtasks", a done/total count, chevron); the rest are the subtask rows.
+ */
+@Composable
+private fun SubtasksGroup(
+    subtasks: List<Task>,
+    expanded: Boolean,
+    onToggle: () -> Unit,
+    onToggleSubtask: (Task) -> Unit,
+    onAddSubtask: (String) -> Unit,
+    onOpenSubtask: (Long) -> Unit,
+) {
+    val done = subtasks.count { it.isCompleted }
+    // Completed subtasks sink to the bottom; stable, so order is otherwise kept.
+    val ordered = remember(subtasks) { subtasks.sortedBy { it.isCompleted } }
+    val rotation by animateFloatAsState(if (expanded) 180f else 0f, label = "subtasksChevron")
+    // Segments when expanded: header + the always-present add row + each subtask.
+    val count = if (expanded) subtasks.size + 2 else 1
+
+    // First segment: the toggle header.
+    GroupedSurface(position = positionOf(0, count), onClick = onToggle) {
+        Row(
+            modifier = Modifier.fillMaxWidth().heightIn(min = 56.dp).padding(horizontal = 16.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Icon(
+                imageVector = Icons.AutoMirrored.Rounded.ListAlt,
+                contentDescription = null,
+                tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                modifier = Modifier.size(24.dp),
+            )
+            Spacer(Modifier.width(16.dp))
+            Text(
+                text = stringResource(R.string.detail_subtasks),
+                style = MaterialTheme.typography.titleMedium,
+                modifier = Modifier.weight(1f),
+            )
+            // No count until there's something to count.
+            if (subtasks.isNotEmpty()) {
+                Text(
+                    text = "$done / ${subtasks.size}",
+                    style = MaterialTheme.typography.labelLarge,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                )
+                Spacer(Modifier.width(8.dp))
+            }
+            Icon(
+                imageVector = Icons.Rounded.ExpandMore,
+                contentDescription = null,
+                tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                modifier = Modifier.rotate(rotation),
+            )
+        }
+    }
+
+    if (expanded) {
+        // Always-present add row at the top of the list, in an accent tone.
+        GroupedSurface(
+            position = positionOf(1, count),
+            color = MaterialTheme.colorScheme.primaryContainer,
+        ) {
+            AddSubtaskField(onAdd = onAddSubtask)
+        }
+        ordered.forEachIndexed { index, sub ->
+            GroupedSurface(
+                position = positionOf(index + 2, count),
+                onClick = { onOpenSubtask(sub.taskId) },
+            ) {
+                Row(
+                    modifier = Modifier.fillMaxWidth().heightIn(min = 56.dp).padding(start = 8.dp, end = 16.dp),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Checkbox(checked = sub.isCompleted, onCheckedChange = { onToggleSubtask(sub) })
+                    Spacer(Modifier.width(4.dp))
+                    Text(
+                        text = sub.title.ifBlank { stringResource(R.string.task_untitled) },
+                        style = MaterialTheme.typography.bodyLarge,
+                        textDecoration = if (sub.isCompleted) TextDecoration.LineThrough else null,
+                        color = if (sub.isCompleted) {
+                            MaterialTheme.colorScheme.onSurfaceVariant
+                        } else {
+                            MaterialTheme.colorScheme.onSurface
+                        },
+                        modifier = Modifier.weight(1f),
+                    )
+                }
+            }
+        }
+    }
+}
+
+/**
+ * Inline "add a subtask" — title only; submits on the tick or the IME action.
+ * A [BasicTextField] (not the boxed Material field) so its text lines up exactly
+ * with the subtask titles, the checkbox column matched by the leading + icon.
+ */
+@Composable
+private fun AddSubtaskField(onAdd: (String) -> Unit) {
+    var text by remember { mutableStateOf("") }
+    fun submit() {
+        if (text.isNotBlank()) {
+            onAdd(text.trim())
+            text = ""
+        }
+    }
+    val accentOn = MaterialTheme.colorScheme.onPrimaryContainer
+    Row(
+        modifier = Modifier.fillMaxWidth().heightIn(min = 56.dp).padding(start = 8.dp, end = 8.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Box(modifier = Modifier.size(48.dp), contentAlignment = Alignment.Center) {
+            Icon(Icons.Rounded.Add, contentDescription = null, tint = accentOn)
+        }
+        Spacer(Modifier.width(4.dp))
+        BasicTextField(
+            value = text,
+            onValueChange = { text = it },
+            singleLine = true,
+            textStyle = MaterialTheme.typography.bodyLarge.copy(color = accentOn),
+            cursorBrush = SolidColor(accentOn),
+            keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
+            keyboardActions = KeyboardActions(onDone = { submit() }),
+            modifier = Modifier.weight(1f),
+            decorationBox = { inner ->
+                if (text.isEmpty()) {
+                    Text(
+                        text = stringResource(R.string.add_task_hint),
+                        style = MaterialTheme.typography.bodyLarge,
+                        color = accentOn.copy(alpha = 0.7f),
+                    )
+                }
+                inner()
+            },
+        )
+        if (text.isNotBlank()) {
+            IconButton(onClick = ::submit) {
+                Icon(Icons.Rounded.Check, contentDescription = stringResource(R.string.cd_add_task), tint = accentOn)
+            }
+        }
+    }
+}
+
+/** One info card: tonal container, leading icon in the gutter, value to the right. */
+@Composable
+private fun DetailCard(
+    icon: ImageVector,
+    iconContentDescription: String?,
+    iconTint: Color = MaterialTheme.colorScheme.onSurfaceVariant,
+    content: @Composable ColumnScope.() -> Unit,
+) {
+    Surface(
+        color = MaterialTheme.colorScheme.surfaceContainerHigh,
+        shape = RoundedCornerShape(16.dp),
+        modifier = Modifier.fillMaxWidth(),
+    ) {
+        Row(
+            modifier = Modifier.padding(16.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Icon(
+                imageVector = icon,
+                contentDescription = iconContentDescription,
+                tint = iconTint,
+                modifier = Modifier.size(24.dp),
+            )
+            Spacer(Modifier.width(16.dp))
+            Column(modifier = Modifier.weight(1f), content = content)
+        }
+    }
+}
+
+/**
+ * The task's "when", formatted like Calendula's event time card: a primary date
+ * line and an optional secondary time line. A start+due pair reads as a range;
+ * `null` when the task has no dates at all.
+ */
+@Composable
+private fun taskWhenLines(task: Task): Pair<String, String?>? {
+    val start = task.start
+    val due = task.due
+    return when {
+        start != null && due != null -> {
+            val sameDay = start.formatDate() == due.formatDate()
+            val primary = if (sameDay) due.formatDate() else "${start.formatDate()} – ${due.formatDate()}"
+            val secondary = if (task.isAllDay) null else "${start.formatTime()} – ${due.formatTime()}"
+            primary to secondary
+        }
+        due != null -> due.formatDate() to if (task.isAllDay) null else due.formatTime()
+        start != null -> start.formatDate() to if (task.isAllDay) null else start.formatTime()
+        else -> null
+    }
+}
+
+@Composable
+private fun CenteredMessage(text: String, inner: androidx.compose.foundation.layout.PaddingValues) {
+    Box(
+        modifier = Modifier.fillMaxSize().padding(inner).padding(32.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        Text(
+            text = text,
+            style = MaterialTheme.typography.bodyLarge,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+            textAlign = TextAlign.Center,
+        )
+    }
+}

app/src/main/java/de/jeanlucmakiola/floret/ui/detail/TaskDetailViewModel.kt

@@ -6,6 +6,7 @@ import dagger.hilt.android.lifecycle.HiltViewModel
 import de.jeanlucmakiola.floret.data.tasks.TasksRepository
 import de.jeanlucmakiola.floret.domain.Task
 import de.jeanlucmakiola.floret.domain.TaskDetail
+import de.jeanlucmakiola.floret.domain.TaskForm
 import kotlinx.coroutines.ExperimentalCoroutinesApi
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.SharingStarted
@@ -54,4 +55,15 @@ class TaskDetailViewModel @Inject constructor(
     fun delete(task: Task) = viewModelScope.launch {
         runCatching { repository.deleteTask(task.taskId) }
     }
+
+    /** Add a subtask (title only) under the currently-shown task. */
+    fun addSubtask(title: String) = viewModelScope.launch {
+        val parent = (state.value as? TaskDetailUiState.Content)?.detail?.task ?: return@launch
+        if (title.isBlank()) return@launch
+        runCatching {
+            repository.createTask(
+                TaskForm(title = title.trim(), listId = parent.listId, parentId = parent.taskId),
+            )
+        }
+    }
 }

app/src/main/java/de/jeanlucmakiola/floret/ui/edit/TaskEditScreen.kt

@@ -0,0 +1,741 @@
+package de.jeanlucmakiola.floret.ui.edit
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.rounded.Notes
+import androidx.compose.material.icons.rounded.Add
+import androidx.compose.material.icons.rounded.ArrowDropDown
+import androidx.compose.material.icons.rounded.Checklist
+import androidx.compose.material.icons.rounded.Circle
+import androidx.compose.material.icons.rounded.Clear
+import androidx.compose.material.icons.rounded.Close
+import androidx.compose.material.icons.rounded.Flag
+import androidx.compose.material.icons.rounded.Notifications
+import androidx.compose.material.icons.rounded.Schedule
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Button
+import androidx.compose.material3.DatePicker
+import androidx.compose.material3.DatePickerDialog
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.SegmentedButton
+import androidx.compose.material3.SegmentedButtonDefaults
+import androidx.compose.material3.SingleChoiceSegmentedButtonRow
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Switch
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.material3.TimePicker
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.rememberDatePickerState
+import androidx.compose.material3.rememberTimePickerState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import de.jeanlucmakiola.floret.R
+import de.jeanlucmakiola.floret.domain.Priority
+import de.jeanlucmakiola.floret.domain.TaskFormError
+import de.jeanlucmakiola.floret.domain.TaskFormField
+import de.jeanlucmakiola.floret.domain.TaskList
+import de.jeanlucmakiola.floret.ui.common.InlineTextField
+import de.jeanlucmakiola.floret.ui.common.OptionCard
+import de.jeanlucmakiola.floret.ui.common.formatDate
+import de.jeanlucmakiola.floret.ui.common.formatTime
+import de.jeanlucmakiola.floret.ui.common.localToInstant
+import de.jeanlucmakiola.floret.ui.common.pastelize
+import de.jeanlucmakiola.floret.ui.common.toLocalDate
+import de.jeanlucmakiola.floret.ui.common.toLocalTime
+import de.jeanlucmakiola.floret.ui.tasklist.priorityLabel
+import java.time.LocalTime
+import java.time.ZoneOffset
+import kotlin.time.Instant
+
+/**
+ * Create / edit form, in the family's tonal-card language (mirrors Calendula's
+ * event editor): a borderless headline title with a list-colour accent bar, a
+ * "When" card with the all-day toggle and tappable schedule rows, a tappable
+ * list card, and the optional Description / Priority / Reminder sections that
+ * unfold from "More fields" (which ones start open is a setting). Validated
+ * through the M1 [TaskEditViewModel] / [de.jeanlucmakiola.floret.domain.TaskForm];
+ * the VM flips `saved` once the write lands, which pops us back.
+ */
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun TaskEditScreen(
+    onSaved: () -> Unit,
+    onBack: () -> Unit,
+    modifier: Modifier = Modifier,
+    viewModel: TaskEditViewModel = hiltViewModel(),
+) {
+    val state by viewModel.state.collectAsStateWithLifecycle()
+
+    LaunchedEffect(state.saved) { if (state.saved) onSaved() }
+
+    Scaffold(
+        modifier = modifier,
+        topBar = {
+            TopAppBar(
+                title = {},
+                navigationIcon = {
+                    IconButton(onClick = onBack) {
+                        Icon(Icons.Rounded.Close, contentDescription = stringResource(R.string.close))
+                    }
+                },
+                actions = {
+                    Button(
+                        onClick = viewModel::save,
+                        enabled = !state.loading,
+                        modifier = Modifier.padding(end = 12.dp),
+                    ) { Text(stringResource(R.string.save)) }
+                },
+                colors = TopAppBarDefaults.topAppBarColors(
+                    containerColor = MaterialTheme.colorScheme.surface,
+                ),
+            )
+        },
+    ) { inner ->
+        if (state.loading) return@Scaffold
+        EditContent(
+            state = state,
+            viewModel = viewModel,
+            modifier = Modifier.padding(inner),
+        )
+    }
+}
+
+private enum class PickerTarget { Start, Due }
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun EditContent(
+    state: TaskEditUiState,
+    viewModel: TaskEditViewModel,
+    modifier: Modifier = Modifier,
+) {
+    val dark = isSystemInDarkTheme()
+    val selectedList = state.lists.firstOrNull { it.id == state.listId }
+    // The accent ties the form to the detail screen's language: the bar under
+    // the title takes the target list's colour.
+    val accent = selectedList?.let { pastelize(it.color, dark) } ?: MaterialTheme.colorScheme.primary
+    val gap = 12.dp
+
+    var pickerTarget by remember { mutableStateOf<PickerTarget?>(null) }
+    var showListPicker by rememberSaveable { mutableStateOf(false) }
+    var showReminderPicker by rememberSaveable { mutableStateOf(false) }
+    var showFieldPicker by rememberSaveable { mutableStateOf(false) }
+
+    Column(
+        modifier = modifier
+            // Shrink the scroll viewport by the keyboard so the focused field
+            // scrolls into view above the IME instead of being hidden.
+            .imePadding()
+            .verticalScroll(rememberScrollState())
+            .padding(start = 24.dp, end = 24.dp, top = 8.dp, bottom = 40.dp),
+    ) {
+        // Title: borderless headline + accent bar, mirroring the detail screen.
+        InlineField(
+            value = state.title,
+            onValueChange = viewModel::onTitleChange,
+            placeholder = stringResource(R.string.edit_title_hint),
+            textStyle = MaterialTheme.typography.headlineMedium.copy(fontWeight = FontWeight.SemiBold),
+        )
+        Spacer(Modifier.height(10.dp))
+        Box(
+            modifier = Modifier
+                .width(48.dp)
+                .height(3.dp)
+                .background(accent, RoundedCornerShape(2.dp)),
+        )
+        if (TaskFormError.BLANK_TITLE in state.errors) {
+            Spacer(Modifier.height(6.dp))
+            FieldError(R.string.error_blank_title)
+        }
+
+        Spacer(Modifier.height(20.dp))
+
+        // "When" card: the icon centres on the all-day row (header); the start /
+        // due rows continue below in the same text column.
+        EditCard(
+            icon = Icons.Rounded.Schedule,
+            iconContentDescription = stringResource(R.string.edit_when),
+            header = {
+                Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier.fillMaxWidth()) {
+                    Text(
+                        text = stringResource(R.string.edit_all_day),
+                        style = MaterialTheme.typography.titleMedium,
+                        modifier = Modifier.weight(1f),
+                    )
+                    Switch(checked = state.isAllDay, onCheckedChange = viewModel::onAllDayChange)
+                }
+            },
+        ) {
+            Spacer(Modifier.height(4.dp))
+            ScheduleRow(
+                label = stringResource(R.string.edit_start_label),
+                value = state.start,
+                allDay = state.isAllDay,
+                onPick = { pickerTarget = PickerTarget.Start },
+                onClear = { viewModel.onStartChange(null) },
+            )
+            ScheduleRow(
+                label = stringResource(R.string.edit_due_label),
+                value = state.due,
+                allDay = state.isAllDay,
+                onPick = { pickerTarget = PickerTarget.Due },
+                onClear = { viewModel.onDueChange(null) },
+                isError = TaskFormError.DUE_BEFORE_START in state.errors,
+            )
+            if (TaskFormError.DUE_BEFORE_START in state.errors) {
+                Spacer(Modifier.height(2.dp))
+                FieldError(R.string.error_due_before_start)
+            }
+        }
+
+        Spacer(Modifier.height(gap))
+
+        // List card — tap anywhere to pick the target list.
+        EditCard(
+            icon = Icons.Rounded.Checklist,
+            iconContentDescription = stringResource(R.string.edit_list_label),
+            iconTint = accent,
+            onClick = { showListPicker = true }.takeIf { state.lists.isNotEmpty() },
+        ) {
+            Text(
+                text = selectedList?.name ?: stringResource(R.string.error_no_list),
+                style = MaterialTheme.typography.titleMedium,
+                color = if (selectedList == null) MaterialTheme.colorScheme.error else Color.Unspecified,
+            )
+            selectedList?.accountName?.takeIf { it.isNotBlank() }?.let { account ->
+                Text(
+                    text = account,
+                    style = MaterialTheme.typography.bodySmall,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                )
+            }
+        }
+
+        // Optional sections: which start open is a setting; the rest unfold
+        // behind the "More fields" button below.
+        OptionalFormSection(visible = TaskFormField.Description in state.visibleFields) {
+            Spacer(Modifier.height(gap))
+            EditCard(
+                icon = Icons.AutoMirrored.Rounded.Notes,
+                iconContentDescription = stringResource(R.string.field_description),
+                iconAtTop = true,
+            ) {
+                InlineField(
+                    value = state.description,
+                    onValueChange = viewModel::onDescriptionChange,
+                    placeholder = stringResource(R.string.field_description),
+                    singleLine = false,
+                    minLines = 3,
+                )
+            }
+        }
+
+        OptionalFormSection(visible = TaskFormField.Priority in state.visibleFields) {
+            Spacer(Modifier.height(gap))
+            // Not an EditCard: the four buttons need the card's full width, so
+            // the label sits on its own row above rather than in the indented
+            // icon-gutter column (where "Medium" would wrap to a second line).
+            Surface(
+                color = MaterialTheme.colorScheme.surfaceContainerHigh,
+                shape = RoundedCornerShape(16.dp),
+                modifier = Modifier.fillMaxWidth(),
+            ) {
+                Column(modifier = Modifier.padding(16.dp)) {
+                    Row(verticalAlignment = Alignment.CenterVertically) {
+                        Icon(
+                            Icons.Rounded.Flag,
+                            contentDescription = null,
+                            tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                            modifier = Modifier.size(24.dp),
+                        )
+                        Spacer(Modifier.width(16.dp))
+                        Text(
+                            text = stringResource(R.string.edit_priority_label),
+                            style = MaterialTheme.typography.titleMedium,
+                        )
+                    }
+                    Spacer(Modifier.height(12.dp))
+                    SingleChoiceSegmentedButtonRow(modifier = Modifier.fillMaxWidth()) {
+                        Priority.entries.forEachIndexed { index, priority ->
+                            SegmentedButton(
+                                selected = state.priority == priority,
+                                onClick = { viewModel.onPriorityChange(priority) },
+                                shape = SegmentedButtonDefaults.itemShape(index, Priority.entries.size),
+                                // Drop the selected-check icon; with four buttons
+                                // its reserved width is what crowds the labels.
+                                icon = {},
+                            ) {
+                                Text(
+                                    text = priorityLabel(priority),
+                                    maxLines = 1,
+                                    style = MaterialTheme.typography.labelLarge,
+                                )
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        OptionalFormSection(visible = TaskFormField.Reminder in state.visibleFields) {
+            Spacer(Modifier.height(gap))
+            EditCard(
+                icon = Icons.Rounded.Notifications,
+                iconContentDescription = null,
+                onClick = { showReminderPicker = true },
+            ) {
+                Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier.fillMaxWidth()) {
+                    Column(modifier = Modifier.weight(1f)) {
+                        Text(
+                            text = stringResource(reminderOptionFor(state.reminderMinutesBeforeDue).labelRes),
+                            style = MaterialTheme.typography.titleMedium,
+                        )
+                        Text(
+                            text = stringResource(R.string.edit_reminder_label),
+                            style = MaterialTheme.typography.bodySmall,
+                            color = MaterialTheme.colorScheme.onSurfaceVariant,
+                        )
+                    }
+                    Icon(
+                        imageVector = Icons.Rounded.ArrowDropDown,
+                        contentDescription = null,
+                        tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                    )
+                }
+                if (TaskFormError.REMINDER_WITHOUT_DUE in state.errors) {
+                    Spacer(Modifier.height(2.dp))
+                    FieldError(R.string.error_reminder_without_due)
+                }
+            }
+        }
+
+        OptionalFormSection(visible = state.hiddenFields.isNotEmpty()) {
+            Spacer(Modifier.height(20.dp))
+            TextButton(
+                onClick = { showFieldPicker = true },
+                modifier = Modifier.align(Alignment.CenterHorizontally),
+            ) {
+                Icon(Icons.Rounded.Add, contentDescription = null, modifier = Modifier.size(18.dp))
+                Spacer(Modifier.width(8.dp))
+                Text(stringResource(R.string.edit_more_fields))
+            }
+        }
+
+        if (state.saveFailed) {
+            Spacer(Modifier.height(gap))
+            FieldError(R.string.edit_save_failed)
+        }
+    }
+
+    pickerTarget?.let { target ->
+        val current = if (target == PickerTarget.Start) state.start else state.due
+        DateTimePickerFlow(
+            initial = current,
+            allDay = state.isAllDay,
+            onResult = {
+                if (target == PickerTarget.Start) viewModel.onStartChange(it) else viewModel.onDueChange(it)
+                pickerTarget = null
+            },
+            onDismiss = { pickerTarget = null },
+        )
+    }
+
+    if (showListPicker) {
+        ListPickerDialog(
+            lists = state.lists,
+            selectedId = state.listId,
+            onSelect = { viewModel.onListChange(it); showListPicker = false },
+            onDismiss = { showListPicker = false },
+        )
+    }
+
+    if (showReminderPicker) {
+        ReminderPickerDialog(
+            selected = state.reminderMinutesBeforeDue,
+            onSelect = { viewModel.onReminderChange(it); showReminderPicker = false },
+            onDismiss = { showReminderPicker = false },
+        )
+    }
+
+    if (showFieldPicker) {
+        FieldPickerDialog(
+            hiddenFields = state.hiddenFields,
+            onSelect = { viewModel.revealField(it); showFieldPicker = false },
+            onDismiss = { showFieldPicker = false },
+        )
+    }
+}
+
+/**
+ * Wrapper for an optional form section: fields added via "More fields" spring
+ * open instead of popping in. (Initially-visible sections render without
+ * animating on the first frame they're added.)
+ */
+@Composable
+private fun OptionalFormSection(visible: Boolean, content: @Composable ColumnScope.() -> Unit) {
+    AnimatedVisibility(
+        visible = visible,
+        enter = expandVertically() + fadeIn(),
+        exit = shrinkVertically() + fadeOut(),
+    ) {
+        Column(modifier = Modifier.fillMaxWidth(), content = content)
+    }
+}
+
+/**
+ * One info card mirroring the detail screen's card: tonal container, leading
+ * icon in the gutter, value to the right. Optionally clickable as a whole.
+ */
+@Composable
+private fun EditCard(
+    icon: ImageVector,
+    iconContentDescription: String?,
+    iconTint: Color = MaterialTheme.colorScheme.onSurfaceVariant,
+    onClick: (() -> Unit)? = null,
+    // Multiline-input cards align the icon with the field's first text line.
+    iconAtTop: Boolean = false,
+    // Tall cards pass their first row here: the icon centres on it, and
+    // [content] continues below, indented to the same text column.
+    header: (@Composable ColumnScope.() -> Unit)? = null,
+    content: @Composable ColumnScope.() -> Unit,
+) {
+    val shape = RoundedCornerShape(16.dp)
+    val color = MaterialTheme.colorScheme.surfaceContainerHigh
+    val inner: @Composable () -> Unit = {
+        if (header != null) {
+            Column(modifier = Modifier.padding(16.dp)) {
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    Icon(icon, iconContentDescription, tint = iconTint, modifier = Modifier.size(24.dp))
+                    Spacer(Modifier.width(16.dp))
+                    Column(modifier = Modifier.weight(1f), content = header)
+                }
+                Column(modifier = Modifier.padding(start = 40.dp), content = content)
+            }
+        } else {
+            Row(
+                modifier = Modifier.padding(16.dp),
+                verticalAlignment = if (iconAtTop) Alignment.Top else Alignment.CenterVertically,
+            ) {
+                Icon(
+                    imageVector = icon,
+                    contentDescription = iconContentDescription,
+                    tint = iconTint,
+                    // 4dp mirrors InlineField's vertical padding, so a
+                    // top-aligned icon centres on the first text line.
+                    modifier = Modifier
+                        .padding(top = if (iconAtTop) 4.dp else 0.dp)
+                        .size(24.dp),
+                )
+                Spacer(Modifier.width(16.dp))
+                Column(modifier = Modifier.weight(1f), content = content)
+            }
+        }
+    }
+    if (onClick != null) {
+        Surface(onClick = onClick, color = color, shape = shape, modifier = Modifier.fillMaxWidth()) { inner() }
+    } else {
+        Surface(color = color, shape = shape, modifier = Modifier.fillMaxWidth()) { inner() }
+    }
+}
+
+/**
+ * Borderless input used inside the cards (and as the headline title) — a thin
+ * wrapper over the shared [InlineTextField] so the form and the rest of the app
+ * share one input style.
+ */
+@Composable
+private fun InlineField(
+    value: String,
+    onValueChange: (String) -> Unit,
+    placeholder: String,
+    textStyle: androidx.compose.ui.text.TextStyle = MaterialTheme.typography.titleMedium,
+    singleLine: Boolean = true,
+    minLines: Int = 1,
+) {
+    InlineTextField(
+        value = value,
+        onValueChange = onValueChange,
+        placeholder = placeholder,
+        textStyle = textStyle,
+        singleLine = singleLine,
+        minLines = minLines,
+    )
+}
+
+/**
+ * One schedule row: label, then the tappable date and (unless all-day) time —
+ * or "Set" when empty. Tapping runs the date → time picker flow; a clear
+ * affordance appears once a value is set. Tappable values read as links
+ * (primary); an error flips them to the error colour.
+ */
+@Composable
+private fun ScheduleRow(
+    label: String,
+    value: Instant?,
+    allDay: Boolean,
+    onPick: () -> Unit,
+    onClear: () -> Unit,
+    isError: Boolean = false,
+) {
+    val valueColor = if (isError) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.primary
+    Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier.fillMaxWidth()) {
+        Text(
+            text = label,
+            style = MaterialTheme.typography.bodyMedium,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+            modifier = Modifier.weight(1f),
+        )
+        if (value == null) {
+            Text(
+                text = stringResource(R.string.edit_set),
+                style = MaterialTheme.typography.titleMedium,
+                color = MaterialTheme.colorScheme.primary,
+                modifier = Modifier.clickable(onClick = onPick).padding(vertical = 8.dp, horizontal = 6.dp),
+            )
+        } else {
+            Text(
+                text = value.formatDate(),
+                style = MaterialTheme.typography.titleMedium,
+                color = valueColor,
+                modifier = Modifier.clickable(onClick = onPick).padding(vertical = 8.dp, horizontal = 6.dp),
+            )
+            if (!allDay) {
+                Text(
+                    text = value.formatTime(),
+                    style = MaterialTheme.typography.titleMedium,
+                    color = valueColor,
+                    modifier = Modifier.clickable(onClick = onPick).padding(vertical = 8.dp, horizontal = 6.dp),
+                )
+            }
+            IconButton(onClick = onClear, modifier = Modifier.size(40.dp)) {
+                Icon(
+                    Icons.Rounded.Clear,
+                    contentDescription = stringResource(R.string.edit_clear),
+                    tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                    modifier = Modifier.size(20.dp),
+                )
+            }
+        }
+    }
+}
+
+private fun nowInstant(): Instant = Instant.fromEpochMilliseconds(System.currentTimeMillis())
+
+/** Pick a date, then (unless all-day) a time; emits the combined instant once. */
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun DateTimePickerFlow(
+    initial: Instant?,
+    allDay: Boolean,
+    onResult: (Instant) -> Unit,
+    onDismiss: () -> Unit,
+) {
+    var pendingDate by remember { mutableStateOf<java.time.LocalDate?>(null) }
+    var showTime by remember { mutableStateOf(false) }
+
+    if (!showTime) {
+        val initialMillis = (initial ?: nowInstant())
+            .toLocalDate().atStartOfDay(ZoneOffset.UTC).toInstant().toEpochMilli()
+        val dateState = rememberDatePickerState(initialSelectedDateMillis = initialMillis)
+        DatePickerDialog(
+            onDismissRequest = onDismiss,
+            confirmButton = {
+                TextButton(onClick = {
+                    val millis = dateState.selectedDateMillis ?: run { onDismiss(); return@TextButton }
+                    val date = java.time.Instant.ofEpochMilli(millis).atZone(ZoneOffset.UTC).toLocalDate()
+                    if (allDay) {
+                        onResult(localToInstant(date, LocalTime.MIDNIGHT))
+                    } else {
+                        pendingDate = date
+                        showTime = true
+                    }
+                }) { Text(stringResource(android.R.string.ok)) }
+            },
+            dismissButton = {
+                TextButton(onClick = onDismiss) { Text(stringResource(android.R.string.cancel)) }
+            },
+        ) { DatePicker(state = dateState) }
+    } else {
+        val base = initial ?: nowInstant()
+        val timeState = rememberTimePickerState(
+            initialHour = base.toLocalTime().hour,
+            initialMinute = base.toLocalTime().minute,
+        )
+        AlertDialog(
+            onDismissRequest = onDismiss,
+            text = { TimePicker(state = timeState) },
+            confirmButton = {
+                TextButton(onClick = {
+                    val date = pendingDate ?: return@TextButton
+                    onResult(localToInstant(date, LocalTime.of(timeState.hour, timeState.minute)))
+                }) { Text(stringResource(android.R.string.ok)) }
+            },
+            dismissButton = {
+                TextButton(onClick = onDismiss) { Text(stringResource(android.R.string.cancel)) }
+            },
+        )
+    }
+}
+
+@Composable
+private fun ListPickerDialog(
+    lists: List<TaskList>,
+    selectedId: Long?,
+    onSelect: (Long) -> Unit,
+    onDismiss: () -> Unit,
+) {
+    val dark = isSystemInDarkTheme()
+    AlertDialog(
+        onDismissRequest = onDismiss,
+        title = { Text(stringResource(R.string.edit_list_label)) },
+        text = {
+            Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+                lists.forEach { list ->
+                    OptionCard(
+                        label = list.name,
+                        onClick = { onSelect(list.id) },
+                        icon = Icons.Rounded.Circle,
+                        iconTint = pastelize(list.color, dark),
+                        supportingText = list.accountName.takeIf { it.isNotBlank() },
+                        selected = list.id == selectedId,
+                    )
+                }
+            }
+        },
+        confirmButton = {
+            TextButton(onClick = onDismiss) { Text(stringResource(R.string.dialog_cancel)) }
+        },
+    )
+}
+
+@Composable
+private fun ReminderPickerDialog(
+    selected: Int?,
+    onSelect: (Int?) -> Unit,
+    onDismiss: () -> Unit,
+) {
+    AlertDialog(
+        onDismissRequest = onDismiss,
+        title = { Text(stringResource(R.string.edit_reminder_label)) },
+        text = {
+            Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+                reminderOptions.forEach { option ->
+                    OptionCard(
+                        label = stringResource(option.labelRes),
+                        onClick = { onSelect(option.minutes) },
+                        selected = option.minutes == selected,
+                    )
+                }
+            }
+        },
+        confirmButton = {
+            TextButton(onClick = onDismiss) { Text(stringResource(R.string.dialog_cancel)) }
+        },
+    )
+}
+
+/** Picks one hidden optional section to add to the form. */
+@Composable
+private fun FieldPickerDialog(
+    hiddenFields: List<TaskFormField>,
+    onSelect: (TaskFormField) -> Unit,
+    onDismiss: () -> Unit,
+) {
+    AlertDialog(
+        onDismissRequest = onDismiss,
+        title = { Text(stringResource(R.string.edit_more_fields)) },
+        text = {
+            Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+                hiddenFields.forEach { field ->
+                    OptionCard(
+                        label = stringResource(fieldLabel(field)),
+                        onClick = { onSelect(field) },
+                        icon = fieldIcon(field),
+                    )
+                }
+            }
+        },
+        confirmButton = {
+            TextButton(onClick = onDismiss) { Text(stringResource(R.string.dialog_cancel)) }
+        },
+    )
+}
+
+private fun fieldLabel(field: TaskFormField): Int = when (field) {
+    TaskFormField.Description -> R.string.field_description
+    TaskFormField.Priority -> R.string.edit_priority_label
+    TaskFormField.Reminder -> R.string.edit_reminder_label
+}
+
+private fun fieldIcon(field: TaskFormField): ImageVector = when (field) {
+    TaskFormField.Description -> Icons.AutoMirrored.Rounded.Notes
+    TaskFormField.Priority -> Icons.Rounded.Flag
+    TaskFormField.Reminder -> Icons.Rounded.Notifications
+}
+
+private data class ReminderOption(val labelRes: Int, val minutes: Int?)
+
+private val reminderOptions = listOf(
+    ReminderOption(R.string.reminder_none, null),
+    ReminderOption(R.string.reminder_at_due, 0),
+    ReminderOption(R.string.reminder_5_min, 5),
+    ReminderOption(R.string.reminder_10_min, 10),
+    ReminderOption(R.string.reminder_30_min, 30),
+    ReminderOption(R.string.reminder_1_hour, 60),
+    ReminderOption(R.string.reminder_1_day, 1_440),
+)
+
+private fun reminderOptionFor(minutes: Int?): ReminderOption =
+    reminderOptions.firstOrNull { it.minutes == minutes } ?: reminderOptions.first()
+
+@Composable
+private fun FieldError(messageRes: Int) {
+    Text(
+        text = stringResource(messageRes),
+        color = MaterialTheme.colorScheme.error,
+        style = MaterialTheme.typography.bodySmall,
+        modifier = Modifier.padding(start = 4.dp),
+    )
+}

app/src/main/java/de/jeanlucmakiola/floret/ui/edit/TaskEditViewModel.kt

@@ -9,7 +9,9 @@ import de.jeanlucmakiola.floret.data.tasks.TasksRepository
 import de.jeanlucmakiola.floret.domain.Priority
 import de.jeanlucmakiola.floret.domain.TaskForm
 import de.jeanlucmakiola.floret.domain.TaskFormError
+import de.jeanlucmakiola.floret.domain.TaskFormField
 import de.jeanlucmakiola.floret.domain.TaskList
+import de.jeanlucmakiola.floret.domain.populatedFields
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.asStateFlow
@@ -36,6 +38,10 @@ data class TaskEditUiState(
     val parentId: Long? = null,
     val reminderMinutesBeforeDue: Int? = null,
     val lists: List<TaskList> = emptyList(),
+    /** Optional sections currently shown (core Title / List / When are always on). */
+    val visibleFields: Set<TaskFormField> = emptySet(),
+    /** Optional sections still tucked behind "More fields". */
+    val hiddenFields: List<TaskFormField> = emptyList(),
     val errors: Set<TaskFormError> = emptySet(),
     val saveFailed: Boolean = false,
     val saved: Boolean = false,
@@ -53,21 +59,28 @@ class TaskEditViewModel @Inject constructor(
 
     private var editingTaskId: Long? = null
 
+    /** Sections shown by default (a setting); the rest unfold via [revealField]. */
+    private var defaultFields: Set<TaskFormField> = emptySet()
+
     /** Start a fresh task, optionally pre-selecting a list / parent. */
     fun bindNew(presetListId: Long? = null, parentId: Long? = null) {
         editingTaskId = null
         viewModelScope.launch {
+            val settings = settingsPrefs.settings.first()
+            defaultFields = settings.defaultEditFields
             val lists = runCatching { repository.taskLists().first() }.getOrElse { emptyList() }
             val defaultList = presetListId
-                ?: settingsPrefs.settings.first().defaultListId
+                ?: settings.defaultListId
                 ?: lists.firstOrNull { !it.isLocal }?.id
                 ?: lists.firstOrNull()?.id
-            _state.value = TaskEditUiState(
-                loading = false,
-                isNew = true,
-                listId = defaultList,
-                parentId = parentId,
-                lists = lists,
+            _state.value = withFields(
+                TaskEditUiState(
+                    loading = false,
+                    isNew = true,
+                    listId = defaultList,
+                    parentId = parentId,
+                    lists = lists,
+                ),
             )
         }
     }
@@ -76,28 +89,49 @@ class TaskEditViewModel @Inject constructor(
     fun bindEdit(taskId: Long) {
         editingTaskId = taskId
         viewModelScope.launch {
+            defaultFields = settingsPrefs.settings.first().defaultEditFields
             val lists = runCatching { repository.taskLists().first() }.getOrElse { emptyList() }
             val task = runCatching { repository.taskDetail(taskId).first()?.task }.getOrNull()
             if (task == null) {
                 _state.value = _state.value.copy(loading = false, lists = lists)
                 return@launch
             }
-            _state.value = TaskEditUiState(
-                loading = false,
-                isNew = false,
-                title = task.title,
-                description = task.description.orEmpty(),
-                listId = task.listId,
-                start = task.start,
-                due = task.due,
-                isAllDay = task.isAllDay,
-                priority = task.priority,
-                parentId = task.parentId,
-                lists = lists,
+            _state.value = withFields(
+                TaskEditUiState(
+                    loading = false,
+                    isNew = false,
+                    title = task.title,
+                    description = task.description.orEmpty(),
+                    listId = task.listId,
+                    start = task.start,
+                    due = task.due,
+                    isAllDay = task.isAllDay,
+                    priority = task.priority,
+                    parentId = task.parentId,
+                    lists = lists,
+                ),
             )
         }
     }
 
+    /** Reveal an optional section (one tap from the "More fields" picker). */
+    fun revealField(field: TaskFormField) = update {
+        val visible = it.visibleFields + field
+        it.copy(visibleFields = visible, hiddenFields = hiddenOf(visible))
+    }
+
+    /**
+     * Resolve which optional sections are visible: the default set, plus any
+     * field that already carries a value (so editing never hides real data).
+     */
+    private fun withFields(state: TaskEditUiState): TaskEditUiState {
+        val visible = defaultFields + state.toForm().populatedFields()
+        return state.copy(visibleFields = visible, hiddenFields = hiddenOf(visible))
+    }
+
+    private fun hiddenOf(visible: Set<TaskFormField>): List<TaskFormField> =
+        TaskFormField.entries.filterNot { it in visible }
+
     fun onTitleChange(value: String) = update { it.copy(title = value, errors = emptySet()) }
     fun onDescriptionChange(value: String) = update { it.copy(description = value) }
     fun onListChange(listId: Long) = update { it.copy(listId = listId, errors = emptySet()) }
@@ -109,17 +143,7 @@ class TaskEditViewModel @Inject constructor(
 
     fun save() {
         val current = _state.value
-        val form = TaskForm(
-            title = current.title,
-            listId = current.listId ?: 0L,
-            description = current.description.ifBlank { null },
-            start = current.start,
-            due = current.due,
-            isAllDay = current.isAllDay,
-            priority = current.priority,
-            parentId = current.parentId,
-            reminderMinutesBeforeDue = current.reminderMinutesBeforeDue,
-        )
+        val form = current.toForm()
         val errors = form.validate()
         if (errors.isNotEmpty()) {
             _state.value = current.copy(errors = errors)
@@ -142,3 +166,16 @@ class TaskEditViewModel @Inject constructor(
         _state.value = block(_state.value)
     }
 }
+
+/** Snapshot the editable state as a validated [TaskForm]. */
+private fun TaskEditUiState.toForm(): TaskForm = TaskForm(
+    title = title,
+    listId = listId ?: 0L,
+    description = description.ifBlank { null },
+    start = start,
+    due = due,
+    isAllDay = isAllDay,
+    priority = priority,
+    parentId = parentId,
+    reminderMinutesBeforeDue = reminderMinutesBeforeDue,
+)

app/src/main/java/de/jeanlucmakiola/floret/ui/navigation/Destinations.kt

@@ -0,0 +1,88 @@
+package de.jeanlucmakiola.floret.ui.navigation
+
+import androidx.navigation.NavType
+import androidx.navigation.navArgument
+import de.jeanlucmakiola.floret.domain.SmartList
+import de.jeanlucmakiola.floret.domain.TaskFilter
+
+/**
+ * String-based route table for the app's [androidx.navigation.NavHost].
+ *
+ * Routes are kept stringly-typed (rather than the type-safe `@Serializable`
+ * API) so we don't have to pull in the kotlinx-serialization Gradle plugin for
+ * four small destinations. Each destination exposes a `route` template (for
+ * `composable(...)`) and a builder that fills the arguments (for `navigate`).
+ *
+ * Argument convention: optional `Long`s default to [NO_ID] (`-1`) rather than
+ * being nullable, which sidesteps the lack of a nullable-Long [NavType].
+ */
+object Dest {
+
+    const val NO_ID = -1L
+
+    /** Home — smart lists + the user's lists. */
+    const val LISTS = "lists"
+
+    /**
+     * One [TaskFilter]'s tasks. Carries *either* `listId` (a real list) *or*
+     * `smart` (a [SmartList] name); whichever is set decides the filter.
+     */
+    object TaskList {
+        const val ARG_LIST_ID = "listId"
+        const val ARG_SMART = "smart"
+        const val route = "taskList?$ARG_LIST_ID={$ARG_LIST_ID}&$ARG_SMART={$ARG_SMART}"
+
+        val arguments = listOf(
+            navArgument(ARG_LIST_ID) { type = NavType.LongType; defaultValue = NO_ID },
+            navArgument(ARG_SMART) { type = NavType.StringType; nullable = true; defaultValue = null },
+        )
+
+        fun build(filter: TaskFilter): String = when (filter) {
+            is TaskFilter.OfList -> "taskList?$ARG_LIST_ID=${filter.listId}"
+            is TaskFilter.Smart -> "taskList?$ARG_SMART=${filter.list.name}"
+        }
+
+        /** Reconstruct the filter from a destination's arguments. */
+        fun filterOf(smart: String?, listId: Long): TaskFilter =
+            if (smart != null) TaskFilter.Smart(SmartList.valueOf(smart))
+            else TaskFilter.OfList(listId)
+    }
+
+    /** A single task's detail. */
+    object TaskDetail {
+        const val ARG_TASK_ID = "taskId"
+        const val route = "taskDetail/{$ARG_TASK_ID}"
+        val arguments = listOf(navArgument(ARG_TASK_ID) { type = NavType.LongType })
+        fun build(taskId: Long): String = "taskDetail/$taskId"
+    }
+
+    /**
+     * The create / edit form. `taskId` set ([NO_ID] otherwise) ⇒ edit; for a new
+     * task, `presetListId` / `parentId` optionally seed the form.
+     */
+    object TaskEdit {
+        const val ARG_TASK_ID = "taskId"
+        const val ARG_PRESET_LIST_ID = "presetListId"
+        const val ARG_PARENT_ID = "parentId"
+        const val route =
+            "taskEdit?$ARG_TASK_ID={$ARG_TASK_ID}" +
+                "&$ARG_PRESET_LIST_ID={$ARG_PRESET_LIST_ID}" +
+                "&$ARG_PARENT_ID={$ARG_PARENT_ID}"
+
+        val arguments = listOf(
+            navArgument(ARG_TASK_ID) { type = NavType.LongType; defaultValue = NO_ID },
+            navArgument(ARG_PRESET_LIST_ID) { type = NavType.LongType; defaultValue = NO_ID },
+            navArgument(ARG_PARENT_ID) { type = NavType.LongType; defaultValue = NO_ID },
+        )
+
+        fun buildEdit(taskId: Long): String = "taskEdit?$ARG_TASK_ID=$taskId"
+
+        fun buildNew(presetListId: Long? = null, parentId: Long? = null): String {
+            val params = buildList {
+                if (presetListId != null) add("$ARG_PRESET_LIST_ID=$presetListId")
+                if (parentId != null) add("$ARG_PARENT_ID=$parentId")
+            }
+            return if (params.isEmpty()) "taskEdit" else "taskEdit?${params.joinToString("&")}"
+        }
+    }
+}

app/src/main/java/de/jeanlucmakiola/floret/ui/navigation/FloretNavHost.kt

@@ -0,0 +1,116 @@
+package de.jeanlucmakiola.floret.ui.navigation
+
+import androidx.compose.animation.EnterTransition
+import androidx.compose.animation.ExitTransition
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideOutHorizontally
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.Modifier
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import de.jeanlucmakiola.floret.domain.TaskFilter
+import de.jeanlucmakiola.floret.ui.detail.TaskDetailScreen
+import de.jeanlucmakiola.floret.ui.detail.TaskDetailViewModel
+import de.jeanlucmakiola.floret.ui.edit.TaskEditScreen
+import de.jeanlucmakiola.floret.ui.edit.TaskEditViewModel
+import de.jeanlucmakiola.floret.ui.lists.ListsScreen
+import de.jeanlucmakiola.floret.ui.tasklist.TaskListScreen
+import de.jeanlucmakiola.floret.ui.tasklist.TaskListViewModel
+
+/**
+ * The single in-app back stack: lists → task list → detail / edit.
+ *
+ * Each destination resolves its own Hilt [androidx.lifecycle.ViewModel] and
+ * feeds it the route arguments through that VM's `bind(...)` method (the VMs
+ * were built render-only in M1 and take their input this way rather than from a
+ * `SavedStateHandle`). Screens receive plain navigation lambdas so they stay
+ * unaware of the nav library.
+ */
+@Composable
+fun FloretNavHost(modifier: Modifier = Modifier) {
+    val nav = rememberNavController()
+    val slide = rememberNavSlideSpec()
+
+    NavHost(
+        navController = nav,
+        startDestination = Dest.LISTS,
+        modifier = modifier,
+        // Only the screen on top moves; the background is always held static.
+        // Forward is a plain fade-in over the held screen — calm, not a slide.
+        // Back (and the predictive-back drag, which drives popExit) is the snappy
+        // slide-out to the right, revealing the held screen unmoved.
+        enterTransition = { fadeIn() },
+        exitTransition = { ExitTransition.None },
+        popEnterTransition = { EnterTransition.None },
+        popExitTransition = { slideOutHorizontally(slide) { it } + fadeOut() },
+    ) {
+        composable(Dest.LISTS) {
+            ListsScreen(
+                onOpenFilter = { filter -> nav.navigate(Dest.TaskList.build(filter)) },
+                onNewTask = { nav.navigate(Dest.TaskEdit.buildNew()) },
+            )
+        }
+
+        composable(Dest.TaskList.route, arguments = Dest.TaskList.arguments) { entry ->
+            val args = entry.arguments
+            val filter = Dest.TaskList.filterOf(
+                smart = args?.getString(Dest.TaskList.ARG_SMART),
+                listId = args?.getLong(Dest.TaskList.ARG_LIST_ID) ?: Dest.NO_ID,
+            )
+            val vm: TaskListViewModel = hiltViewModel()
+            LaunchedEffect(filter) { vm.bind(filter) }
+
+            TaskListScreen(
+                filter = filter,
+                viewModel = vm,
+                onOpenTask = { taskId -> nav.navigate(Dest.TaskDetail.build(taskId)) },
+                onNewTask = {
+                    val presetListId = (filter as? TaskFilter.OfList)?.listId
+                    nav.navigate(Dest.TaskEdit.buildNew(presetListId = presetListId))
+                },
+                onBack = { nav.popBackStack() },
+            )
+        }
+
+        composable(Dest.TaskDetail.route, arguments = Dest.TaskDetail.arguments) { entry ->
+            val taskId = entry.arguments?.getLong(Dest.TaskDetail.ARG_TASK_ID) ?: Dest.NO_ID
+            val vm: TaskDetailViewModel = hiltViewModel()
+            LaunchedEffect(taskId) { vm.bind(taskId) }
+
+            TaskDetailScreen(
+                viewModel = vm,
+                onEdit = { nav.navigate(Dest.TaskEdit.buildEdit(taskId)) },
+                onDeleted = { nav.popBackStack() },
+                onBack = { nav.popBackStack() },
+            )
+        }
+
+        composable(Dest.TaskEdit.route, arguments = Dest.TaskEdit.arguments) { entry ->
+            val args = entry.arguments
+            val taskId = args?.getLong(Dest.TaskEdit.ARG_TASK_ID) ?: Dest.NO_ID
+            val presetListId = args?.getLong(Dest.TaskEdit.ARG_PRESET_LIST_ID) ?: Dest.NO_ID
+            val parentId = args?.getLong(Dest.TaskEdit.ARG_PARENT_ID) ?: Dest.NO_ID
+            val vm: TaskEditViewModel = hiltViewModel()
+            LaunchedEffect(taskId, presetListId, parentId) {
+                if (taskId != Dest.NO_ID) {
+                    vm.bindEdit(taskId)
+                } else {
+                    vm.bindNew(
+                        presetListId = presetListId.takeIf { it != Dest.NO_ID },
+                        parentId = parentId.takeIf { it != Dest.NO_ID },
+                    )
+                }
+            }
+
+            TaskEditScreen(
+                viewModel = vm,
+                onSaved = { nav.popBackStack() },
+                onBack = { nav.popBackStack() },
+            )
+        }
+    }
+}

app/src/main/java/de/jeanlucmakiola/floret/ui/navigation/FloretTransitions.kt

@@ -0,0 +1,21 @@
+package de.jeanlucmakiola.floret.ui.navigation
+
+import androidx.compose.animation.core.FiniteAnimationSpec
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.unit.IntOffset
+
+/**
+ * The horizontal slide spec for screen-to-screen navigation: the *fast*
+ * spring-physics spec from the active motion scheme — snappy with a subtle
+ * springy settle, rather than a fixed easing curve. Same choice as Calendula's
+ * calendar slide, so the two apps move the same way.
+ *
+ * Read in composable scope so the non-composable `NavHost` transition lambdas
+ * can capture it.
+ */
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
+@Composable
+fun rememberNavSlideSpec(): FiniteAnimationSpec<IntOffset> =
+    MaterialTheme.motionScheme.fastSpatialSpec()

app/src/main/java/de/jeanlucmakiola/floret/ui/tasklist/TaskListScreen.kt

@@ -0,0 +1,602 @@
+package de.jeanlucmakiola.floret.ui.tasklist
+
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.rounded.ArrowBack
+import androidx.compose.material.icons.automirrored.rounded.ListAlt
+import androidx.compose.material.icons.rounded.Add
+import androidx.compose.material.icons.rounded.Check
+import androidx.compose.material.icons.rounded.Checklist
+import androidx.compose.material.icons.rounded.Delete
+import androidx.compose.material.icons.rounded.ExpandMore
+import androidx.compose.material.icons.rounded.Flag
+import androidx.compose.material3.Checkbox
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ExtendedFloatingActionButton
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.MediumTopAppBar
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
+import androidx.compose.material3.SwipeToDismissBox
+import androidx.compose.material3.SwipeToDismissBoxValue
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.rememberSwipeToDismissBoxState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import de.jeanlucmakiola.floret.R
+import de.jeanlucmakiola.floret.domain.DayWindow
+import de.jeanlucmakiola.floret.domain.Priority
+import de.jeanlucmakiola.floret.domain.SmartList
+import de.jeanlucmakiola.floret.domain.Task
+import de.jeanlucmakiola.floret.domain.TaskFilter
+import de.jeanlucmakiola.floret.domain.TaskSection
+import de.jeanlucmakiola.floret.domain.TaskSections
+import de.jeanlucmakiola.floret.ui.common.ListNameChip
+import de.jeanlucmakiola.floret.ui.common.Position
+import de.jeanlucmakiola.floret.ui.common.formatDateTime
+import de.jeanlucmakiola.floret.ui.common.pastelize
+import de.jeanlucmakiola.floret.ui.common.positionOf
+import java.time.ZoneId
+import kotlin.time.Clock
+
+/**
+ * The tasks for one [TaskFilter]: due-date section headers, grouped tonal rows
+ * with a leading checkbox, swipe-to-complete (start→end) / swipe-to-delete
+ * (end→start), and — for a real list — an inline add field. Renders against the
+ * M1 [TaskListViewModel]; actions are fire-and-forget and flow back live.
+ */
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun TaskListScreen(
+    filter: TaskFilter,
+    onOpenTask: (Long) -> Unit,
+    onNewTask: () -> Unit,
+    onBack: () -> Unit,
+    modifier: Modifier = Modifier,
+    viewModel: TaskListViewModel = hiltViewModel(),
+) {
+    val state by viewModel.state.collectAsStateWithLifecycle()
+    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
+    val listName = (state as? TaskListUiState.Content)?.listName
+
+    Scaffold(
+        modifier = modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
+        topBar = {
+            MediumTopAppBar(
+                title = { Text(titleFor(filter, listName)) },
+                navigationIcon = {
+                    IconButton(onClick = onBack) {
+                        Icon(
+                            Icons.AutoMirrored.Rounded.ArrowBack,
+                            contentDescription = stringResource(R.string.back),
+                        )
+                    }
+                },
+                scrollBehavior = scrollBehavior,
+            )
+        },
+        floatingActionButton = {
+            ExtendedFloatingActionButton(
+                onClick = onNewTask,
+                icon = { Icon(Icons.Rounded.Add, contentDescription = null) },
+                text = { Text(stringResource(R.string.new_task)) },
+            )
+        },
+    ) { inner ->
+        when (val s = state) {
+            TaskListUiState.Loading -> Unit // brief; avoids a flash before first emission
+            TaskListUiState.Failure -> CenteredMessage(stringResource(R.string.task_list_failure), inner)
+            is TaskListUiState.Content -> TaskListBody(s, filter, inner, onOpenTask, viewModel)
+        }
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
+@Composable
+private fun TaskListBody(
+    state: TaskListUiState.Content,
+    filter: TaskFilter,
+    inner: PaddingValues,
+    onOpenTask: (Long) -> Unit,
+    viewModel: TaskListViewModel,
+) {
+    val (todayStart, todayEnd) = remember { DayWindow.today(Clock.System.now(), ZoneId.systemDefault()) }
+    // A parent represents its children via a progress chip (counts come from the
+    // repository, over the full set), so drop children from the flat list — unless
+    // their parent isn't in this view (can happen in smart lists), where we keep
+    // them standalone so nothing silently vanishes.
+    val displayTasks = remember(state.tasks) {
+        val present = state.tasks.mapTo(HashSet()) { it.taskId }
+        state.tasks.filter { (it.parentId ?: 0L) <= 0L || it.parentId !in present }
+    }
+    val sections = remember(displayTasks) { TaskSections.of(displayTasks, todayStart, todayEnd) }
+    val showHeaders = sections.size > 1
+    val listId = (filter as? TaskFilter.OfList)?.listId
+    // In a mixed view (a smart list) the list colour bar + name disambiguate
+    // rows; inside a single real list both are redundant.
+    val showListName = filter is TaskFilter.Smart
+    // Completed tasks collapse away by default to keep the active list in focus.
+    var completedExpanded by rememberSaveable { mutableStateOf(false) }
+
+    LazyColumn(
+        modifier = Modifier.fillMaxSize(),
+        contentPadding = PaddingValues(
+            top = inner.calculateTopPadding() + 8.dp,
+            bottom = inner.calculateBottomPadding() + 96.dp,
+        ),
+    ) {
+        if (listId != null) {
+            item(key = "inline-add") {
+                InlineAdd(onAdd = { title -> viewModel.quickAdd(title, listId) })
+            }
+        }
+
+        if (state.tasks.isEmpty()) {
+            item(key = "empty") { EmptyState(stringResource(R.string.task_list_empty)) }
+        }
+
+        sections.forEach { section ->
+            val collapsible = showHeaders && section.section == TaskSection.COMPLETED
+            if (showHeaders) {
+                stickyHeader(key = "hdr-${section.section}") {
+                    if (collapsible) {
+                        CollapsibleSectionHeader(
+                            label = sectionLabel(section.section),
+                            count = section.tasks.size,
+                            expanded = completedExpanded,
+                            onToggle = { completedExpanded = !completedExpanded },
+                        )
+                    } else {
+                        SectionHeader(sectionLabel(section.section))
+                    }
+                }
+            }
+            if (!collapsible || completedExpanded) {
+                itemsIndexed(section.tasks, key = { _, t -> t.taskId }) { index, task ->
+                    TaskRow(
+                        task = task,
+                        position = positionOf(index, section.tasks.size),
+                        showListName = showListName,
+                        subtaskDone = task.subtaskDone,
+                        subtaskTotal = task.subtaskTotal,
+                        onToggle = { viewModel.toggleComplete(task) },
+                        onDelete = { viewModel.delete(task) },
+                        onClick = { onOpenTask(task.taskId) },
+                    )
+                }
+            }
+        }
+    }
+}
+
+/** Inline "add a task" — title only, into the current list. */
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun InlineAdd(onAdd: (String) -> Unit) {
+    var text by remember { mutableStateOf("") }
+    fun submit() {
+        if (text.isNotBlank()) {
+            onAdd(text.trim())
+            text = ""
+        }
+    }
+    Surface(
+        shape = RoundedCornerShape(22.dp),
+        color = MaterialTheme.colorScheme.surfaceContainerHigh,
+        modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 4.dp),
+    ) {
+        TextField(
+            value = text,
+            onValueChange = { text = it },
+            placeholder = { Text(stringResource(R.string.add_task_hint)) },
+            leadingIcon = { Icon(Icons.Rounded.Add, contentDescription = null) },
+            trailingIcon = {
+                if (text.isNotBlank()) {
+                    IconButton(onClick = ::submit) {
+                        Icon(Icons.Rounded.Check, contentDescription = stringResource(R.string.cd_add_task))
+                    }
+                }
+            },
+            singleLine = true,
+            keyboardOptions = androidx.compose.foundation.text.KeyboardOptions(imeAction = ImeAction.Done),
+            keyboardActions = androidx.compose.foundation.text.KeyboardActions(onDone = { submit() }),
+            colors = TextFieldDefaults.colors(
+                focusedContainerColor = Color.Transparent,
+                unfocusedContainerColor = Color.Transparent,
+                focusedIndicatorColor = Color.Transparent,
+                unfocusedIndicatorColor = Color.Transparent,
+            ),
+            modifier = Modifier.fillMaxWidth(),
+        )
+    }
+}
+
+/**
+ * One task row: a tonal grouped-card surface (corners from [position], morphing
+ * rounder on press — the app's shape family) wrapped in a swipe box. Swiping
+ * right toggles complete (snaps back); swiping left deletes.
+ */
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun TaskRow(
+    task: Task,
+    position: Position,
+    showListName: Boolean,
+    subtaskDone: Int,
+    subtaskTotal: Int,
+    onToggle: () -> Unit,
+    onDelete: () -> Unit,
+    onClick: () -> Unit,
+) {
+    val dismissState = rememberSwipeToDismissBoxState(
+        confirmValueChange = { value ->
+            when (value) {
+                SwipeToDismissBoxValue.StartToEnd -> { onToggle(); false } // toggle, snap back
+                SwipeToDismissBoxValue.EndToStart -> { onDelete(); true }  // delete, dismiss
+                SwipeToDismissBoxValue.Settled -> false
+            }
+        },
+    )
+    val gap = when (position) {
+        Position.Top, Position.Middle -> Modifier.padding(bottom = 2.dp)
+        Position.Bottom, Position.Alone -> Modifier
+    }
+
+    SwipeToDismissBox(
+        state = dismissState,
+        modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp).then(gap),
+        backgroundContent = { SwipeBackground(dismissState.targetValue, task.isCompleted) },
+    ) {
+        TaskRowContent(task, position, showListName, subtaskDone, subtaskTotal, onToggle, onClick)
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
+@Composable
+private fun TaskRowContent(
+    task: Task,
+    position: Position,
+    showListName: Boolean,
+    subtaskDone: Int,
+    subtaskTotal: Int,
+    onToggle: () -> Unit,
+    onClick: () -> Unit,
+) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    val full by animateDpAsState(if (pressed) 36.dp else 22.dp, label = "fullCorner")
+    val small by animateDpAsState(if (pressed) 36.dp else 6.dp, label = "smallCorner")
+    val dark = isSystemInDarkTheme()
+    val due = task.due?.formatDateTime(task.isAllDay)
+    val listName = task.listName?.takeIf { showListName && it.isNotBlank() }
+    val hasSupporting = due != null || listName != null || subtaskTotal > 0
+
+    Surface(
+        onClick = onClick,
+        shape = cardShape(position, full, small),
+        color = MaterialTheme.colorScheme.surfaceContainerHigh,
+        interactionSource = interaction,
+        modifier = Modifier.fillMaxWidth(),
+    ) {
+        // Hand-laid row (not ListItem) so a one- vs two-line body never trips
+        // ListItem's three-line heuristic and leaves dead space at the bottom.
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .heightIn(min = 64.dp)
+                .padding(start = 12.dp, end = 16.dp, top = 8.dp, bottom = 8.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            // Calendula's signature accent: a slim pastelised colour bar for the
+            // list, paired here with the task's completion checkbox.
+            Box(
+                modifier = Modifier
+                    .size(width = 5.dp, height = 32.dp)
+                    .clip(RoundedCornerShape(3.dp))
+                    .background(pastelize(task.effectiveColor, dark)),
+            )
+            Checkbox(checked = task.isCompleted, onCheckedChange = { onToggle() })
+            Spacer(Modifier.width(4.dp))
+            Column(modifier = Modifier.weight(1f)) {
+                Text(
+                    text = task.title.ifBlank { stringResource(R.string.task_untitled) },
+                    style = MaterialTheme.typography.bodyLarge,
+                    maxLines = 2,
+                    overflow = TextOverflow.Ellipsis,
+                    textDecoration = if (task.isCompleted) TextDecoration.LineThrough else null,
+                    color = if (task.isCompleted) {
+                        MaterialTheme.colorScheme.onSurfaceVariant
+                    } else {
+                        MaterialTheme.colorScheme.onSurface
+                    },
+                )
+                if (hasSupporting) {
+                    Spacer(Modifier.height(3.dp))
+                    // Flow so the chips wrap to a further line when due date + list
+                    // + subtask progress can't share one (e.g. a dated task with
+                    // subtasks), rather than squeezing the trailing chip.
+                    FlowRow(
+                        verticalArrangement = Arrangement.spacedBy(3.dp),
+                        horizontalArrangement = Arrangement.spacedBy(8.dp),
+                        itemVerticalAlignment = Alignment.CenterVertically,
+                    ) {
+                        if (due != null) {
+                            Text(
+                                text = due,
+                                style = MaterialTheme.typography.bodyMedium,
+                                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                            )
+                        }
+                        if (listName != null) ListNameChip(listName, task.effectiveColor)
+                        if (subtaskTotal > 0) SubtaskCountChip(subtaskDone, subtaskTotal)
+                    }
+                }
+            }
+            priorityFlag(task.priority)?.let { flag ->
+                Spacer(Modifier.width(8.dp))
+                flag()
+            }
+        }
+    }
+}
+
+/** A flag tinted by priority, or nothing for [Priority.NONE]. */
+@Composable
+private fun priorityFlag(priority: Priority): (@Composable () -> Unit)? {
+    if (priority == Priority.NONE) return null
+    return { Icon(Icons.Rounded.Flag, contentDescription = priorityLabel(priority), tint = priorityTint(priority)) }
+}
+
+/** A small neutral pill showing subtask progress, e.g. "3 / 5". */
+@Composable
+private fun SubtaskCountChip(done: Int, total: Int) {
+    Surface(
+        color = MaterialTheme.colorScheme.surfaceContainerHighest,
+        shape = RoundedCornerShape(50),
+    ) {
+        Row(
+            modifier = Modifier.padding(horizontal = 8.dp, vertical = 2.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(4.dp),
+        ) {
+            Icon(
+                imageVector = Icons.AutoMirrored.Rounded.ListAlt,
+                contentDescription = null,
+                tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                modifier = Modifier.size(14.dp),
+            )
+            Text(
+                text = "$done / $total",
+                style = MaterialTheme.typography.labelSmall,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+            )
+        }
+    }
+}
+
+/** Shared priority colour so the flag reads the same in the list and the detail view. */
+@Composable
+internal fun priorityTint(priority: Priority): Color = when (priority) {
+    Priority.NONE -> MaterialTheme.colorScheme.onSurfaceVariant
+    Priority.HIGH -> MaterialTheme.colorScheme.error
+    Priority.MEDIUM -> MaterialTheme.colorScheme.tertiary
+    Priority.LOW -> MaterialTheme.colorScheme.onSurfaceVariant
+}
+
+/** The colored reveal behind a swiping row: complete on the left, delete on the right. */
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun SwipeBackground(target: SwipeToDismissBoxValue, isCompleted: Boolean) {
+    val (color, icon, desc, alignment) = when (target) {
+        SwipeToDismissBoxValue.StartToEnd -> SwipeStyle(
+            MaterialTheme.colorScheme.primaryContainer,
+            Icons.Rounded.Check,
+            if (isCompleted) R.string.cd_reopen else R.string.cd_complete,
+            Alignment.CenterStart,
+        )
+        SwipeToDismissBoxValue.EndToStart -> SwipeStyle(
+            MaterialTheme.colorScheme.errorContainer,
+            Icons.Rounded.Delete,
+            R.string.delete,
+            Alignment.CenterEnd,
+        )
+        SwipeToDismissBoxValue.Settled -> SwipeStyle(
+            Color.Transparent, Icons.Rounded.Check, R.string.cd_complete, Alignment.CenterStart,
+        )
+    }
+    Surface(color = color, shape = RoundedCornerShape(22.dp), modifier = Modifier.fillMaxSize()) {
+        Box(modifier = Modifier.fillMaxSize().padding(horizontal = 24.dp), contentAlignment = alignment) {
+            Icon(icon, contentDescription = stringResource(desc))
+        }
+    }
+}
+
+private data class SwipeStyle(
+    val color: Color,
+    val icon: androidx.compose.ui.graphics.vector.ImageVector,
+    val descRes: Int,
+    val alignment: Alignment,
+)
+
+private fun cardShape(position: Position, full: androidx.compose.ui.unit.Dp, small: androidx.compose.ui.unit.Dp): Shape =
+    when (position) {
+        Position.Alone -> RoundedCornerShape(full)
+        Position.Top -> RoundedCornerShape(topStart = full, topEnd = full, bottomStart = small, bottomEnd = small)
+        Position.Middle -> RoundedCornerShape(small)
+        Position.Bottom -> RoundedCornerShape(topStart = small, topEnd = small, bottomStart = full, bottomEnd = full)
+    }
+
+@Composable
+private fun SectionHeader(text: String) {
+    // Opaque surface so rows scroll cleanly under the pinned header.
+    Surface(color = MaterialTheme.colorScheme.surface, modifier = Modifier.fillMaxWidth()) {
+        Text(
+            text = text,
+            style = MaterialTheme.typography.titleSmall,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+            modifier = Modifier.padding(start = 28.dp, end = 28.dp, top = 16.dp, bottom = 8.dp),
+        )
+    }
+}
+
+/** A tappable section header with a count and a chevron that rotates on expand. */
+@Composable
+private fun CollapsibleSectionHeader(
+    label: String,
+    count: Int,
+    expanded: Boolean,
+    onToggle: () -> Unit,
+) {
+    val rotation by animateFloatAsState(if (expanded) 180f else 0f, label = "chevron")
+    Surface(
+        onClick = onToggle,
+        color = MaterialTheme.colorScheme.surface,
+        modifier = Modifier.fillMaxWidth(),
+    ) {
+        Row(
+            modifier = Modifier.padding(start = 28.dp, end = 20.dp, top = 16.dp, bottom = 8.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Text(
+                text = label,
+                style = MaterialTheme.typography.titleSmall,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+            )
+            Spacer(Modifier.size(8.dp))
+            Text(
+                text = count.toString(),
+                style = MaterialTheme.typography.labelLarge,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                modifier = Modifier.weight(1f),
+            )
+            Icon(
+                imageVector = Icons.Rounded.ExpandMore,
+                contentDescription = null,
+                tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                modifier = Modifier.rotate(rotation),
+            )
+        }
+    }
+}
+
+/** Icon + message for an empty list — the Calendula agenda-empty pattern. */
+@Composable
+private fun EmptyState(text: String) {
+    Column(
+        modifier = Modifier.fillMaxWidth().padding(horizontal = 32.dp, vertical = 64.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Icon(
+            imageVector = Icons.Rounded.Checklist,
+            contentDescription = null,
+            tint = MaterialTheme.colorScheme.onSurfaceVariant,
+            modifier = Modifier.size(48.dp),
+        )
+        Spacer(Modifier.height(16.dp))
+        Text(
+            text = text,
+            style = MaterialTheme.typography.titleMedium,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+            textAlign = TextAlign.Center,
+        )
+    }
+}
+
+@Composable
+private fun CenteredMessage(text: String, inner: PaddingValues) {
+    Box(
+        modifier = Modifier.fillMaxSize().padding(inner).padding(32.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        Text(
+            text = text,
+            style = MaterialTheme.typography.bodyLarge,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+            textAlign = TextAlign.Center,
+        )
+    }
+}
+
+@Composable
+private fun titleFor(filter: TaskFilter, listName: String?): String = when (filter) {
+    is TaskFilter.OfList -> listName ?: stringResource(R.string.tasks_title)
+    is TaskFilter.Smart -> stringResource(
+        when (filter.list) {
+            SmartList.TODAY -> R.string.smart_today
+            SmartList.UPCOMING -> R.string.smart_upcoming
+            SmartList.OVERDUE -> R.string.smart_overdue
+            SmartList.ALL -> R.string.smart_all
+            SmartList.NO_DATE -> R.string.smart_no_date
+            SmartList.COMPLETED -> R.string.smart_completed
+        },
+    )
+}
+
+@Composable
+private fun sectionLabel(section: TaskSection): String = stringResource(
+    when (section) {
+        TaskSection.OVERDUE -> R.string.section_overdue
+        TaskSection.TODAY -> R.string.section_today
+        TaskSection.UPCOMING -> R.string.section_upcoming
+        TaskSection.NO_DATE -> R.string.section_no_date
+        TaskSection.COMPLETED -> R.string.section_completed
+    },
+)
+
+@Composable
+internal fun priorityLabel(priority: Priority): String = stringResource(
+    when (priority) {
+        Priority.NONE -> R.string.priority_none
+        Priority.LOW -> R.string.priority_low
+        Priority.MEDIUM -> R.string.priority_medium
+        Priority.HIGH -> R.string.priority_high
+    },
+)

app/src/main/java/de/jeanlucmakiola/floret/ui/tasklist/TaskListViewModel.kt

@@ -12,6 +12,7 @@ import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.SharingStarted
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.catch
+import kotlinx.coroutines.flow.combine
 import kotlinx.coroutines.flow.filterNotNull
 import kotlinx.coroutines.flow.flatMapLatest
 import kotlinx.coroutines.flow.map
@@ -23,7 +24,13 @@ import javax.inject.Inject
 sealed interface TaskListUiState {
     data object Loading : TaskListUiState
     data object Failure : TaskListUiState
-    data class Content(val tasks: List<Task>) : TaskListUiState
+
+    /**
+     * [listName] is the real list's name when the filter is a
+     * [TaskFilter.OfList] (for the top-bar title), `null` for smart lists —
+     * the screen falls back to the smart label in that case.
+     */
+    data class Content(val tasks: List<Task>, val listName: String? = null) : TaskListUiState
 }
 
 /**
@@ -42,8 +49,16 @@ class TaskListViewModel @Inject constructor(
     val state: StateFlow<TaskListUiState> =
         filter.filterNotNull()
             .flatMapLatest { f ->
-                repository.tasks(f)
-                    .map<List<Task>, TaskListUiState> { TaskListUiState.Content(it) }
+                val tasks = repository.tasks(f)
+                val content: kotlinx.coroutines.flow.Flow<TaskListUiState> = when (f) {
+                    is TaskFilter.OfList ->
+                        combine(tasks, repository.taskLists()) { list, lists ->
+                            TaskListUiState.Content(list, lists.firstOrNull { it.id == f.listId }?.name)
+                        }
+                    is TaskFilter.Smart ->
+                        tasks.map { TaskListUiState.Content(it) }
+                }
+                content
                     .onStart { emit(TaskListUiState.Loading) }
                     .catch { emit(TaskListUiState.Failure) }
             }

app/src/main/res/values/strings.xml

@@ -4,6 +4,88 @@
 
     <!-- Generic -->
     <string name="task_untitled">Untitled task</string>
+    <string name="back">Back</string>
+    <string name="save">Save</string>
+    <string name="delete">Delete</string>
+
+    <!-- Task list -->
+    <string name="tasks_title">Tasks</string>
+    <string name="task_list_empty">No tasks here yet.</string>
+    <string name="task_list_failure">Could not load these tasks.</string>
+    <string name="smart_no_date">No date</string>
+    <string name="smart_completed">Completed</string>
+
+    <!-- Task detail -->
+    <string name="task_detail_title">Task</string>
+    <string name="task_detail_not_found">This task no longer exists.</string>
+    <string name="edit">Edit</string>
+
+    <!-- Task edit -->
+    <string name="edit_task_title">Edit task</string>
+    <string name="new_task_title">New task</string>
+    <string name="field_title">Title</string>
+    <string name="field_description">Description</string>
+    <string name="edit_save_failed">Could not save. Try again.</string>
+
+    <!-- Task list: inline add + swipe -->
+    <string name="add_task_hint">Add a task</string>
+    <string name="cd_add_task">Add task</string>
+    <string name="cd_complete">Complete</string>
+    <string name="cd_reopen">Reopen</string>
+
+    <!-- Sections (due-date buckets) -->
+    <string name="section_overdue">Overdue</string>
+    <string name="section_today">Today</string>
+    <string name="section_upcoming">Upcoming</string>
+    <string name="section_no_date">No date</string>
+    <string name="section_completed">Completed</string>
+
+    <!-- Priority -->
+    <string name="priority_none">None</string>
+    <string name="priority_low">Low</string>
+    <string name="priority_medium">Medium</string>
+    <string name="priority_high">High</string>
+
+    <!-- Task detail -->
+    <string name="detail_mark_complete">Mark complete</string>
+    <string name="detail_mark_incomplete">Mark not complete</string>
+    <string name="detail_list">List</string>
+    <string name="detail_due">Due</string>
+    <string name="detail_start">Starts</string>
+    <string name="detail_priority">Priority</string>
+    <string name="detail_progress">Progress</string>
+    <string name="detail_subtasks">Subtasks</string>
+    <string name="percent_complete">%1$d%%</string>
+
+    <!-- Task edit -->
+    <string name="edit_list_label">List</string>
+    <string name="edit_start_label">Starts</string>
+    <string name="edit_due_label">Due</string>
+    <string name="edit_all_day">All day</string>
+    <string name="edit_priority_label">Priority</string>
+    <string name="edit_reminder_label">Reminder</string>
+    <string name="edit_set">Set</string>
+    <string name="edit_clear">Clear</string>
+    <string name="edit_title_hint">Task title</string>
+    <string name="edit_when">When</string>
+    <string name="edit_more_fields">More fields</string>
+    <string name="close">Close</string>
+    <string name="dialog_cancel">Cancel</string>
+
+    <!-- Reminder offsets -->
+    <string name="reminder_none">None</string>
+    <string name="reminder_at_due">At time of task</string>
+    <string name="reminder_5_min">5 minutes before</string>
+    <string name="reminder_10_min">10 minutes before</string>
+    <string name="reminder_30_min">30 minutes before</string>
+    <string name="reminder_1_hour">1 hour before</string>
+    <string name="reminder_1_day">1 day before</string>
+
+    <!-- Form validation -->
+    <string name="error_blank_title">Enter a title.</string>
+    <string name="error_no_list">Choose a list.</string>
+    <string name="error_due_before_start">Due can\'t be before the start.</string>
+    <string name="error_reminder_without_due">Set a due date to use a reminder.</string>
 
     <!-- Lists overview -->
     <string name="lists_header">Lists</string>

app/src/test/java/de/jeanlucmakiola/floret/domain/TaskSectionsTest.kt

@@ -0,0 +1,47 @@
+package de.jeanlucmakiola.floret.domain
+
+import com.google.common.truth.Truth.assertThat
+import org.junit.jupiter.api.Test
+import kotlin.time.Instant
+
+class TaskSectionsTest {
+
+    private val dayMs = 86_400_000L
+    private val todayStart = Instant.fromEpochMilliseconds(1000 * dayMs)
+    private val todayEnd = Instant.fromEpochMilliseconds(1001 * dayMs)
+
+    private fun at(millis: Long) = Instant.fromEpochMilliseconds(millis)
+    private fun sectionOf(task: Task) = TaskSections.sectionOf(task, todayStart, todayEnd)
+
+    @Test
+    fun `buckets by due relative to today`() {
+        assertThat(sectionOf(testTask(due = at(1000 * dayMs - 1)))).isEqualTo(TaskSection.OVERDUE)
+        assertThat(sectionOf(testTask(due = at(1000 * dayMs + 1)))).isEqualTo(TaskSection.TODAY)
+        assertThat(sectionOf(testTask(due = at(1001 * dayMs + 1)))).isEqualTo(TaskSection.UPCOMING)
+        assertThat(sectionOf(testTask(due = null))).isEqualTo(TaskSection.NO_DATE)
+    }
+
+    @Test
+    fun `completed always lands in completed regardless of due`() {
+        val overdueButDone = testTask(status = TaskStatus.COMPLETED, due = at(1000 * dayMs - 1))
+        assertThat(sectionOf(overdueButDone)).isEqualTo(TaskSection.COMPLETED)
+    }
+
+    @Test
+    fun `of returns only non-empty sections in fixed order`() {
+        val tasks = listOf(
+            testTask(id = 1, due = at(1001 * dayMs + 1)),   // upcoming
+            testTask(id = 2, due = at(1000 * dayMs - 1)),   // overdue
+            testTask(id = 3, status = TaskStatus.COMPLETED), // completed
+        )
+        val sections = TaskSections.of(tasks, todayStart, todayEnd)
+        assertThat(sections.map { it.section })
+            .containsExactly(TaskSection.OVERDUE, TaskSection.UPCOMING, TaskSection.COMPLETED)
+            .inOrder()
+    }
+
+    @Test
+    fun `empty input yields no sections`() {
+        assertThat(TaskSections.of(emptyList(), todayStart, todayEnd)).isEmpty()
+    }
+}

docs/ROADMAP.md

@@ -13,7 +13,7 @@ Status legend: ✅ done · 🚧 in progress · ⬜ not started
 The full non-visual stack ("backoffice") over the OpenTasks `TaskContract`
 provider is **done and unit-tested**; the Material 3 Expressive UI is being
 built screen by screen on top of it. App builds, gates on provider/permission,
-and renders the lists overview.
+and navigates lists → task list → detail / edit through base screen scaffolds.
 
 ---
 
@@ -44,12 +44,14 @@ Replace the functional scaffold with the real Material 3 Expressive UI, screen
 by screen, against the already-built ViewModels.
 - ✅ Provider/permission onboarding gate (`RootScreen`).
 - ✅ Lists overview (`ListsScreen`) — smart lists + user lists grouped by account.
-- 🚧 Navigation host wiring (the `onOpenFilter` / `onNewTask` callbacks in
-  `RootScreen` are currently stubs).
-- ⬜ Task list screen — checkbox rows, swipe-to-complete / swipe-to-delete,
-  inline add field, section headers for smart lists, FAB.
-- ⬜ Toggle complete (swipe + checkbox), create / edit / delete, local-list
-  creation wired to the UI.
+- ✅ Navigation host wiring (`FloretNavHost` + `Dest` route table: lists → task
+  list → detail / edit, each binding its M1 ViewModel from route args).
+- 🚧 Task list screen — base scaffold lands (checkbox rows, toggle-complete, open
+  / new-task nav). Remaining: swipe-to-complete / -delete, inline add field,
+  section headers for smart lists.
+- 🚧 Detail + edit screens — base scaffolds land (detail shows title /
+  description / subtasks with edit+delete; edit has title / description / save).
+  Remaining: full CRUD fields and local-list creation wired to the UI.
 
 ### ⬜ M3 — Detail / edit polish
 Task detail and edit screens: due/start date-time pickers, priority,

gradle/libs.versions.toml

@@ -22,6 +22,7 @@ kotlinxDatetime = "0.7.0"
 kotlinxCoroutines = "1.10.2"
 turbine = "1.2.0"
 hiltNavigationCompose = "1.3.0"
+navigationCompose = "2.9.0"
 lifecycleCompose = "2.10.0"
 androidxTestRules = "1.7.0"
 # Glance: 1.1.1 is the latest stable (1.2.0 is still rc, 1.3.0 alpha).
@@ -78,6 +79,9 @@ turbine = { group = "app.cash.turbine", name = "turbine", version.ref = "turbine
 # Hilt navigation-compose (for hiltViewModel() in Composables)
 androidx-hilt-navigation-compose = { group = "androidx.hilt", name = "hilt-navigation-compose", version.ref = "hiltNavigationCompose" }
 
+# Navigation-compose (the NavHost / back stack)
+androidx-navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigationCompose" }
+
 # Lifecycle compose (for collectAsStateWithLifecycle)
 androidx-lifecycle-runtime-compose = { group = "androidx.lifecycle", name = "lifecycle-runtime-compose", version.ref = "lifecycleCompose" }