TaskList's remaining task counter

tasks-app-shared/src/androidMain/kotlin/net/opatry/tasks/app/ui/component/TaskListRowPreview.kt

@@ -0,0 +1,87 @@
+/*
+ * Copyright (c) 2025 Olivier Patry
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the "Software"),
+ * to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software
+ * is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+ * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+ * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE
+ * OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+package net.opatry.tasks.app.ui.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import net.opatry.tasks.app.presentation.model.TaskId
+import net.opatry.tasks.app.presentation.model.TaskListId
+import net.opatry.tasks.app.presentation.model.TaskListUIModel
+import net.opatry.tasks.app.presentation.model.TaskUIModel
+import net.opatry.tasks.app.ui.tooling.TaskfolioThemedPreview
+
+private class TaskListSimplePreviewParameterProvider(
+) : PreviewParameterProvider<TaskListUIModel> {
+    override val values: Sequence<TaskListUIModel>
+        get() = sequenceOf(
+            TaskListUIModel(
+                id = TaskListId(0L),
+                title = "My task list",
+            ),
+            TaskListUIModel(
+                id = TaskListId(0L),
+                title = "My selected task list",
+            ),
+            TaskListUIModel(
+                id = TaskListId(0L),
+                title = "This is a task list with a very very very long name",
+            ),
+            TaskListUIModel(
+                id = TaskListId(0L),
+                title = "This is a task list with a very very very long name",
+                remainingTasks = mapOf(
+                    null to listOf(
+                        TaskUIModel.Todo(
+                            id = TaskId(0L),
+                            title = "Task 1",
+                        ),
+                    ),
+                )
+            ),
+            TaskListUIModel(
+                id = TaskListId(0L),
+                title = "This is a task list with a very very very long name",
+                remainingTasks = mapOf(
+                    null to List(1500) {
+                        TaskUIModel.Todo(
+                            id = TaskId(it.toLong()),
+                            title = "Task $it",
+                        )
+                    }
+                )
+            ),
+        )
+}
+
+@PreviewLightDark
+@Composable
+private fun TaskListRowPreview(
+    @PreviewParameter(TaskListSimplePreviewParameterProvider::class)
+    taskList: TaskListUIModel
+) {
+    TaskfolioThemedPreview {
+        TaskListRow(taskList, isSelected = taskList.title.contains("selected")) {}
+    }
+}

tasks-app-shared/src/androidMain/kotlin/net/opatry/tasks/app/ui/screen/taskListsPanePreview.kt → tasks-app-shared/src/androidMain/kotlin/net/opatry/tasks/app/ui/component/TaskListsColumnPreview.kt

@@ -20,50 +20,55 @@
  * OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-package net.opatry.tasks.app.ui.screen
+package net.opatry.tasks.app.ui.component
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.tooling.preview.PreviewLightDark
-import androidx.compose.ui.tooling.preview.PreviewParameter
-import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import net.opatry.tasks.app.presentation.model.TaskId
 import net.opatry.tasks.app.presentation.model.TaskListId
 import net.opatry.tasks.app.presentation.model.TaskListUIModel
+import net.opatry.tasks.app.presentation.model.TaskUIModel
 import net.opatry.tasks.app.ui.tooling.TaskfolioThemedPreview
 
-private val dataSet = listOf(
-    TaskListUIModel(
-        id = TaskListId(0L),
-        title = "My task list",
-    ),
-    TaskListUIModel(
-        id = TaskListId(0L),
-        title = "My selected task list",
-    ),
-    TaskListUIModel(
-        id = TaskListId(0L),
-        title = "This is a task list with a very very very long name",
-    ),
-)
-
-private class TaskListPreviewParameterProvider(
-    override val values: Sequence<TaskListUIModel> = dataSet.asSequence()
-) : PreviewParameterProvider<TaskListUIModel>
-
-@PreviewLightDark
-@Composable
-private fun TaskListRowPreview(
-    @PreviewParameter(TaskListPreviewParameterProvider::class)
-    taskList: TaskListUIModel
-) {
-    TaskfolioThemedPreview {
-        TaskListRow(taskList, isSelected = taskList.title.contains("selected")) {}
-    }
-}
-
 @PreviewLightDark
 @Composable
 private fun TaskListsColumnPreview() {
+    val taskLists = listOf(
+        TaskListUIModel(
+            id = TaskListId(0L),
+            title = "My task list",
+            remainingTasks = mapOf(
+                null to List(12) {
+                    TaskUIModel.Todo(
+                        id = TaskId(it.toLong()),
+                        title = "Task $it",
+                    )
+                },
+            )
+        ),
+        TaskListUIModel(
+            id = TaskListId(1L),
+            title = "My selected task list",
+        ),
+        TaskListUIModel(
+            id = TaskListId(2L),
+            title = "This is a task list with a very very very long name",
+        ),
+        TaskListUIModel(
+            id = TaskListId(3L),
+            title = "This with remaining task count",
+            remainingTasks = mapOf(
+                null to List(1500) {
+                    TaskUIModel.Todo(
+                        id = TaskId(it.toLong()),
+                        title = "Task $it",
+                    )
+                },
+            )
+        ),
+    )
+
     TaskfolioThemedPreview {
-        TaskListsColumn(dataSet, dataSet.last(), {}, {})
+        TaskListsColumn(taskLists, taskLists.first { it.title.contains("selected") }, {}, {})
     }
 }

tasks-app-shared/src/commonMain/kotlin/net/opatry/tasks/app/ui/component/TaskListRow.kt

@@ -0,0 +1,118 @@
+/*
+ * Copyright (c) 2025 Olivier Patry
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the "Software"),
+ * to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software
+ * is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+ * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+ * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE
+ * OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+package net.opatry.tasks.app.ui.component
+
+import androidx.annotation.VisibleForTesting
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.scaleIn
+import androidx.compose.animation.scaleOut
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.material3.Badge
+import androidx.compose.material3.Card
+import androidx.compose.material3.ListItem
+import androidx.compose.material3.ListItemDefaults
+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.graphics.Color
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.semantics.selected
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import net.opatry.tasks.app.presentation.model.TaskListUIModel
+import net.opatry.tasks.app.ui.component.TaskListRowTestTag.LABEL
+import net.opatry.tasks.app.ui.component.TaskListRowTestTag.REMAINING_TASKS_COUNT_BADGE
+import net.opatry.tasks.app.ui.component.TaskListRowTestTag.REMAINING_TASKS_COUNT_BADGE_LABEL
+
+@VisibleForTesting
+internal object TaskListRowTestTag {
+    const val LABEL = "TASK_LIST_LABEL"
+    const val REMAINING_TASKS_COUNT_BADGE = "TASK_LIST_REMAINING_TASKS_COUNT_BADGE"
+    const val REMAINING_TASKS_COUNT_BADGE_LABEL = "TASK_LIST_REMAINING_TASKS_COUNT_BADGE_LABEL"
+}
+
+@Composable
+fun TaskListRow(
+    taskList: TaskListUIModel,
+    modifier: Modifier = Modifier,
+    isSelected: Boolean = false,
+    onClick: () -> Unit
+) {
+    val remainingTasksCount = taskList.allRemainingTasks.size
+    val cellBackground = when {
+        isSelected -> MaterialTheme.colorScheme.secondaryContainer.copy(alpha = .3f)
+        else -> Color.Unspecified
+    }
+
+    Card(
+        onClick = onClick,
+        modifier = modifier
+            .semantics { selected = isSelected },
+    ) {
+        ListItem(
+            headlineContent = {
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy(8.dp),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Text(
+                        text = taskList.title,
+                        modifier = Modifier
+                            .weight(1f)
+                            .testTag(LABEL),
+                        overflow = TextOverflow.MiddleEllipsis,
+                        maxLines = 1,
+                    )
+                    AnimatedVisibility(
+                        visible = !isSelected && remainingTasksCount > 0,
+                        enter = fadeIn() + scaleIn(),
+                        exit = fadeOut() + scaleOut(),
+                    ) {
+                        Badge(
+                            modifier = Modifier.testTag(REMAINING_TASKS_COUNT_BADGE),
+                            containerColor = MaterialTheme.colorScheme.surfaceVariant,
+                            contentColor = MaterialTheme.colorScheme.onSurfaceVariant,
+                        ) {
+                            Text(
+                                text = when {
+                                    remainingTasksCount > 999 -> "999+"
+                                    else -> remainingTasksCount.toString()
+                                },
+                                modifier = Modifier.testTag(REMAINING_TASKS_COUNT_BADGE_LABEL)
+                            )
+                        }
+                    }
+                }
+            },
+            colors = ListItemDefaults.colors(
+                containerColor = cellBackground
+            )
+        )
+    }
+}

tasks-app-shared/src/commonMain/kotlin/net/opatry/tasks/app/ui/screen/taskListsPane.kt → tasks-app-shared/src/commonMain/kotlin/net/opatry/tasks/app/ui/component/TaskListsColumn.kt

@@ -20,7 +20,7 @@
  * OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-package net.opatry.tasks.app.ui.screen
+package net.opatry.tasks.app.ui.component
 
 import CircleFadingPlus
 import LucideIcons
@@ -34,25 +34,16 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.material3.Card
 import androidx.compose.material3.HorizontalDivider
-import androidx.compose.material3.ListItem
-import androidx.compose.material3.ListItemDefaults
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.testTag
-import androidx.compose.ui.semantics.selected
-import androidx.compose.ui.semantics.semantics
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import net.opatry.tasks.app.presentation.model.TaskListUIModel
-import net.opatry.tasks.app.ui.component.RowWithIcon
-import net.opatry.tasks.app.ui.screen.TaskListsPaneTestTag.NEW_TASK_LIST_BUTTON
-import net.opatry.tasks.app.ui.screen.TaskListsPaneTestTag.TASK_LIST_ROW
+import net.opatry.tasks.app.ui.component.TaskListsPaneTestTag.NEW_TASK_LIST_BUTTON
+import net.opatry.tasks.app.ui.component.TaskListsPaneTestTag.TASK_LIST_ROW
 import net.opatry.tasks.resources.Res
 import net.opatry.tasks.resources.task_lists_screen_add_task_list_cta
 import org.jetbrains.compose.resources.stringResource
@@ -96,39 +87,13 @@ fun TaskListsColumn(
         items(taskLists, { it.id.value }) { taskList ->
             TaskListRow(
                 taskList,
-                Modifier.padding(horizontal = 8.dp).animateItem(),
+                Modifier
+                    .testTag(TASK_LIST_ROW)
+                    .padding(horizontal = 8.dp)
+                    .animateItem(),
                 isSelected = taskList.id == selectedItem?.id,
                 onClick = { onItemClick(taskList) }
             )
         }
     }
 }
-
-@Composable
-fun TaskListRow(
-    taskList: TaskListUIModel,
-    modifier: Modifier = Modifier,
-    isSelected: Boolean = false,
-    onClick: () -> Unit
-) {
-    val cellBackground = when {
-        isSelected -> MaterialTheme.colorScheme.secondaryContainer.copy(alpha = .3f)
-        else -> Color.Unspecified
-    }
-
-    Card(
-        onClick = onClick,
-        modifier = modifier
-            .testTag(TASK_LIST_ROW)
-            .semantics { selected = isSelected },
-    ) {
-        ListItem(
-            headlineContent = {
-                Text(taskList.title, overflow = TextOverflow.MiddleEllipsis, maxLines = 1)
-            },
-            colors = ListItemDefaults.colors(
-                containerColor = cellBackground
-            )
-        )
-    }
-}

tasks-app-shared/src/commonMain/kotlin/net/opatry/tasks/app/ui/screen/taskListScreen.kt

@@ -47,8 +47,9 @@ import net.opatry.tasks.app.ui.TaskEvent
 import net.opatry.tasks.app.ui.asLabel
 import net.opatry.tasks.app.ui.component.LoadingPane
 import net.opatry.tasks.app.ui.component.MyBackHandler
-import net.opatry.tasks.app.ui.component.NoTaskListsEmptyState
 import net.opatry.tasks.app.ui.component.NoTaskListSelectedEmptyState
+import net.opatry.tasks.app.ui.component.NoTaskListsEmptyState
+import net.opatry.tasks.app.ui.component.TaskListsColumn
 import net.opatry.tasks.resources.Res
 import net.opatry.tasks.resources.task_lists_screen_default_task_list_title
 import org.jetbrains.compose.resources.stringResource