feat: create TaskItem composable with tests

foliary/src/commonMain/composeResources/values/strings.xml

@@ -46,6 +46,10 @@
     <string name="today_title">Foliary</string>
     <!-- endregion -->
 
+    <!-- region Task Item -->
+    <string name="task_item_overdue">Overdue</string>
+    <!-- endregion -->
+
     <!-- region System trat -->
     <string name="open_app">Open Foliary</string>
     <string name="quit">Quit</string>

foliary/src/commonMain/kotlin/dev/appoutlet/foliary/core/ui/component/card/FoliaryCard.kt

@@ -3,18 +3,21 @@ package dev.appoutlet.foliary.core.ui.component.card
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.material3.Card
+import androidx.compose.material3.CardColors
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.dropShadow
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.shadow.Shadow
 import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
 
 @Composable
 fun FoliaryCard(
     modifier: Modifier = Modifier,
+    colors: CardColors = FoliaryCardDefaults.colors(),
     content: @Composable ColumnScope.() -> Unit
 ) {
     Card(
@@ -23,18 +26,27 @@ fun FoliaryCard(
                 shape = MaterialTheme.shapes.extraLarge,
                 shadow = Shadow(
                     radius = 60.dp,
-                    spread = 0.dp,
+                    spread = 10.dp,
                     offset = DpOffset(0.dp, 0.dp),
-                    color = MaterialTheme.colorScheme.onBackground.copy(alpha = 0.06f),
+                    color = MaterialTheme.colorScheme.onBackground.copy(alpha = 0.1f),
                 )
             ),
         shape = MaterialTheme.shapes.extraLarge,
-        colors = CardDefaults.cardColors(
-            containerColor = MaterialTheme.colorScheme.surface,
-            contentColor = MaterialTheme.colorScheme.onSurface
-        ),
+        colors = colors,
         border = BorderStroke(1.dp, MaterialTheme.colorScheme.outline),
         elevation = CardDefaults.cardElevation(defaultElevation = 0.dp),
         content = content
     )
 }
+
+object FoliaryCardDefaults {
+
+    @Composable
+    fun colors(
+        containerColor: Color = MaterialTheme.colorScheme.surface,
+        contentColor: Color = MaterialTheme.colorScheme.onSurface,
+    ): CardColors = CardDefaults.cardColors(
+        containerColor = containerColor,
+        contentColor = contentColor,
+    )
+}

foliary/src/commonMain/kotlin/dev/appoutlet/foliary/core/ui/component/checkbox/FoliaryCheckbox.kt

@@ -0,0 +1,80 @@
+package dev.appoutlet.foliary.core.ui.component.checkbox
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.selection.toggleable
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+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.semantics.Role
+import androidx.compose.ui.unit.dp
+import com.composables.icons.lucide.Check
+import com.composables.icons.lucide.Lucide
+
+@Composable
+fun FoliaryCheckbox(
+    checked: Boolean,
+    onCheckedChange: ((Boolean) -> Unit)?,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+) {
+    val containerColor by animateColorAsState(
+        targetValue = if (checked) {
+            MaterialTheme.colorScheme.primary
+        } else {
+            MaterialTheme.colorScheme.background
+        },
+        label = "FoliaryCheckboxContainerColor",
+    )
+
+    val borderColor by animateColorAsState(
+        targetValue = if (checked) {
+            MaterialTheme.colorScheme.primary
+        } else {
+            MaterialTheme.colorScheme.outline
+        },
+        label = "FoliaryCheckboxBorderColor",
+    )
+
+    Box(
+        modifier = modifier
+            .size(24.dp)
+            .clip(CircleShape)
+            .toggleable(
+                value = checked,
+                enabled = enabled && onCheckedChange != null,
+                role = Role.Checkbox,
+                onValueChange = { onCheckedChange?.invoke(it) },
+            )
+            .background(containerColor)
+            .border(BorderStroke(2.dp, borderColor), CircleShape),
+        contentAlignment = Alignment.Center,
+    ) {
+        AnimatedVisibility(visible = checked, enter = fadeIn(), exit = fadeOut()) {
+            Checkmark(color = MaterialTheme.colorScheme.onPrimary)
+        }
+    }
+}
+
+@Composable
+private fun Checkmark(color: Color) {
+    Icon(
+        modifier = Modifier.size(14.dp),
+        imageVector = Lucide.Check,
+        contentDescription = null,
+        tint = color
+    )
+}

foliary/src/commonMain/kotlin/dev/appoutlet/foliary/core/ui/component/task/TaskItem.kt

@@ -0,0 +1,179 @@
+package dev.appoutlet.foliary.core.ui.component.task
+
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.foundation.background
+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.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.IconButtonDefaults
+import androidx.compose.material3.MaterialTheme
+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.platform.testTag
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import com.composables.icons.lucide.Info
+import com.composables.icons.lucide.Lucide
+import com.composables.icons.lucide.Play
+import dev.appoutlet.foliary.core.ui.component.card.FoliaryCard
+import dev.appoutlet.foliary.core.ui.component.card.FoliaryCardDefaults
+import dev.appoutlet.foliary.core.ui.component.checkbox.FoliaryCheckbox
+import foliary.foliary.generated.resources.Res
+import foliary.foliary.generated.resources.task_item_overdue
+import org.jetbrains.compose.resources.stringResource
+
+@Composable
+fun TaskItem(
+    title: String,
+    modifier: Modifier = Modifier,
+    description: String? = null,
+    isCompleted: Boolean = false,
+    onCompletedChange: (Boolean) -> Unit = { },
+    onStartClick: () -> Unit = {},
+    isOverdue: Boolean = false,
+) {
+    val cardContainerColor = animateColorAsState(
+        targetValue = if (isCompleted) {
+            MaterialTheme.colorScheme.surfaceDim
+        } else {
+            MaterialTheme.colorScheme.surface
+        },
+    )
+
+    FoliaryCard(
+        modifier = modifier.fillMaxWidth(),
+        colors = FoliaryCardDefaults.colors(containerColor = cardContainerColor.value),
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(12.dp),
+        ) {
+            FoliaryCheckbox(
+                checked = isCompleted,
+                onCheckedChange = onCompletedChange,
+                modifier = Modifier.testTag("TaskItem:Checkbox"),
+            )
+
+            TaskItemContent(
+                title = title,
+                description = description,
+                isCompleted = isCompleted,
+                isOverdue = isOverdue,
+                modifier = Modifier.weight(1f),
+            )
+
+            StartButton(onClick = onStartClick)
+        }
+    }
+}
+
+@Composable
+private fun TaskItemContent(
+    title: String,
+    description: String?,
+    isCompleted: Boolean,
+    isOverdue: Boolean,
+    modifier: Modifier = Modifier,
+) {
+    val titleColor = animateColorAsState(
+        targetValue = if (isCompleted) {
+            MaterialTheme.colorScheme.onSurface.copy(alpha = CompletedAlpha)
+        } else {
+            MaterialTheme.colorScheme.primary
+        },
+    )
+
+    Column(
+        modifier = modifier,
+        verticalArrangement = Arrangement.spacedBy(4.dp),
+    ) {
+        Text(
+            text = title,
+            modifier = Modifier.testTag("TaskItem:Title"),
+            style = MaterialTheme.typography.titleMedium,
+            color = titleColor.value,
+            textDecoration = if (isCompleted) TextDecoration.LineThrough else null,
+            maxLines = MaxTitleLines,
+            overflow = TextOverflow.Ellipsis,
+        )
+
+        description?.let {
+            Text(
+                text = it,
+                modifier = Modifier.testTag("TaskItem:Description"),
+                style = MaterialTheme.typography.bodyMedium,
+                color = MaterialTheme.colorScheme.onBackground,
+                maxLines = MaxDescriptionLines,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+
+        Row {
+            if (isOverdue && !isCompleted) {
+                OverduePill()
+            }
+        }
+    }
+}
+
+@Composable
+private fun OverduePill() {
+    Row(
+        modifier = Modifier
+            .padding(top = 4.dp)
+            .clip(CircleShape)
+            .background(color = MaterialTheme.colorScheme.surfaceDim, shape = CircleShape)
+            .padding(horizontal = 8.dp, vertical = 4.dp)
+            .testTag("TaskItem:OverduePill"),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(4.dp)
+    ) {
+        Icon(
+            modifier = Modifier.size(12.dp),
+            imageVector = Lucide.Info,
+            contentDescription = null,
+            tint = MaterialTheme.colorScheme.error
+        )
+
+        Text(
+            text = stringResource(Res.string.task_item_overdue),
+            modifier = Modifier,
+            style = MaterialTheme.typography.labelSmall,
+            color = MaterialTheme.colorScheme.error
+        )
+    }
+}
+
+@Composable
+private fun StartButton(onClick: () -> Unit) {
+    IconButton(
+        onClick = onClick,
+        modifier = Modifier.testTag("TaskItem:StartButton"),
+        colors = IconButtonDefaults.iconButtonColors(
+            containerColor = MaterialTheme.colorScheme.secondary
+        )
+    ) {
+        Icon(
+            imageVector = Lucide.Play,
+            contentDescription = null,
+            tint = MaterialTheme.colorScheme.primary
+        )
+    }
+}
+
+private const val CompletedAlpha = 0.38f
+private const val MaxDescriptionLines = 3
+private const val MaxTitleLines = 2

foliary/src/commonMain/kotlin/dev/appoutlet/foliary/core/ui/theme/Color.kt

@@ -29,7 +29,7 @@ val scrimLight = Color(0xFF000000)
 val inverseSurfaceLight = Color(0xFF313030)
 val inverseOnSurfaceLight = Color(0xFFF4F0EF)
 val inversePrimaryLight = Color(0xFF9ED1BD)
-val surfaceDimLight = Color(0xFFDDD9D8)
+val surfaceDimLight = Color(0xFFF4F3F0)
 val surfaceBrightLight = Color(0xFFFCF8F7)
 val surfaceContainerLowestLight = Color(0xFFFFFFFF)
 val surfaceContainerLowLight = Color(0xFFF7F3F2)

foliary/src/commonMain/kotlin/dev/appoutlet/foliary/feature/main/MainScreen.kt

@@ -46,18 +46,16 @@ fun MainScreen() {
             adaptiveInfo = currentWindowAdaptiveInfoV2(),
         )
 
-        val itemTopPadding = remember(layoutType) {
+        val (windowDecorationPadding, itemTopPadding) = remember(layoutType) {
             when (layoutType) {
                 NavigationSuiteType.NavigationRail,
                 NavigationSuiteType.WideNavigationRailExpanded,
-                NavigationSuiteType.WideNavigationRailCollapsed -> 16.dp
+                NavigationSuiteType.WideNavigationRailCollapsed -> getWindowDecorationPadding() to 16.dp
 
-                else -> 0.dp
+                else -> 0.dp to 0.dp
             }
         }
 
-        val windowDecorationPadding = remember { getWindowDecorationPadding() }
-
         NavigationSuiteScaffold(
             modifier = Modifier
                 .fillMaxSize()