ui: allow item removal

mrlem · mrlem · commit b2b835f6112d · 2025-12-08T21:58:33.000+01:00
diff --git a/features/library/data/src/main/java/org/mrlem/composesample/features/library/data/datasources/local/BookmarkDataSource.kt b/features/library/data/src/main/java/org/mrlem/composesample/features/library/data/datasources/local/BookmarkDataSource.kt
@@ -19,4 +19,7 @@ interface BookmarkDataSource {
 
     @Query("SELECT * FROM bookmark WHERE id = :id")
     suspend fun get(id: Long): BookmarkEntity
+
+    @Query("DELETE FROM bookmark WHERE id = :id")
+    suspend fun delete(id: Long)
 }
diff --git a/features/library/data/src/main/java/org/mrlem/composesample/features/library/data/repositories/DefaultBookmarkRepository.kt b/features/library/data/src/main/java/org/mrlem/composesample/features/library/data/repositories/DefaultBookmarkRepository.kt
@@ -40,6 +40,10 @@ internal class DefaultBookmarkRepository @Inject constructor(
         bookmarkMapper
             .toDomain(bookmarkDataSource.get(id))
 
+    override suspend fun delete(id: Long) {
+        bookmarkDataSource.delete(id)
+    }
+
     override suspend fun getRandom(): String =
         wikipediaMapper
             .toRandomName(wikipediaDataSource.findRandom())
diff --git a/features/library/domain/src/main/java/org/mrlem/composesample/features/library/domain/repositories/BookmarkRepository.kt b/features/library/domain/src/main/java/org/mrlem/composesample/features/library/domain/repositories/BookmarkRepository.kt
@@ -10,6 +10,7 @@ interface BookmarkRepository {
 
     suspend fun add(bookmark: Bookmark): Long
     suspend fun get(id: Long): Bookmark
+    suspend fun delete(id: Long)
     suspend fun getRandom(): String
     suspend fun import(name: String): Bookmark
 }
diff --git a/features/library/ui/src/main/java/org/mrlem/composesample/features/library/ui/list/ListItem.kt b/features/library/ui/src/main/java/org/mrlem/composesample/features/library/ui/list/ListItem.kt
@@ -13,9 +13,10 @@ import org.mrlem.composesample.theme.Theme
 internal fun <Action> ListItem(
     viewState: ListItemViewState<Action>,
     onAction: (Action) -> Unit,
+    modifier: Modifier = Modifier,
 ) {
     Column(
-        modifier = Modifier
+        modifier = modifier
             .then(
                 viewState.onClickAction
                     ?.let { Modifier.clickable { onAction(it) } }
diff --git a/features/library/ui/src/main/java/org/mrlem/composesample/features/library/ui/list/ListScreen.kt b/features/library/ui/src/main/java/org/mrlem/composesample/features/library/ui/list/ListScreen.kt
@@ -10,20 +10,27 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
+import androidx.compose.material.icons.filled.Delete
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.SnackbarHostState
 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.rememberSwipeToDismissBoxState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -36,9 +43,11 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
 import org.mrlem.android.core.feature.ui.UiModePreviews
+import org.mrlem.composesample.features.library.ui.R
 import org.mrlem.composesample.theme.Theme
 
 @Composable
@@ -48,6 +57,7 @@ internal fun ListScreen(
     onItemSelect: (id: Long) -> Unit,
 ) {
     val state by viewModel.state.collectAsState()
+    val errorMessage = stringResource(R.string.library_error)
 
     LaunchedEffect(Unit) {
         viewModel.effects
@@ -57,7 +67,7 @@ internal fun ListScreen(
                         onItemSelect(effect.id)
 
                     is ListViewEffect.ShowError ->
-                        snackbarHostState.showSnackbar("Failed to retrieve data")
+                        snackbarHostState.showSnackbar(errorMessage)
                 }
             }
     }
@@ -76,8 +86,11 @@ internal fun ListScreen(
 private fun ListScreen(
     state: ListViewState,
     onAction: (ListViewAction) -> Unit,
+    modifier: Modifier = Modifier,
 ) {
-    Column {
+    Column(
+        modifier = modifier,
+    ) {
         var fieldValue by remember {
             mutableStateOf(TextFieldValue(state.filter))
         }
@@ -96,7 +109,12 @@ private fun ListScreen(
                 disabledIndicatorColor = Color.Transparent,
                 errorIndicatorColor = Color.Transparent,
             ),
-            placeholder = { Text("Filter articles") },
+            placeholder = {
+                Text(
+                    text = stringResource(id = R.string.library_search_action),
+                )
+            },
+            trailingIcon = { Icon(imageVector = Icons.Default.Search, contentDescription = null) },
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(
@@ -115,74 +133,134 @@ private fun ListScreen(
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun List(
     state: ListViewState,
     modifier: Modifier = Modifier,
     onAction: (ListViewAction) -> Unit = {},
 ) {
+    val listState = rememberLazyListState()
+    val showShadow by remember {
+        derivedStateOf { listState.canScrollBackward }
+    }
+
     Box(
         modifier = modifier,
     ) {
-        val listState = rememberLazyListState()
-
-        val showShadow by remember {
-            derivedStateOf { listState.canScrollBackward }
-        }
-
-        Box(
-            modifier = Modifier
-                .fillMaxWidth(),
+        LazyColumn(
+            state = listState,
+            modifier = Modifier.fillMaxSize(),
         ) {
-            LazyColumn(
-                state = listState,
-                modifier = Modifier
-                    .fillMaxSize(),
-            ) {
-                items(state.items) {
+            items(
+                items = state.items,
+                key = { item -> (item.onClickAction as ListViewAction.ItemClick).itemId },
+            ) { item ->
+                val dismissState = rememberSwipeToDismissBoxState(
+                    confirmValueChange = { dismissValue ->
+                        if (dismissValue == SwipeToDismissBoxValue.EndToStart) {
+                            val action = item.onClickAction as ListViewAction.ItemClick
+                            onAction(ListViewAction.ItemDismiss(action.itemId))
+                            true
+                        } else {
+                            false
+                        }
+                    },
+                )
+
+                SwipeToDismissBox(
+                    state = dismissState,
+                    enableDismissFromStartToEnd = false,
+                    backgroundContent = {
+                        if (dismissState.dismissDirection == SwipeToDismissBoxValue.EndToStart) {
+                            RemoveIcon()
+                        }
+                    },
+                ) {
                     ListItem(
-                        viewState = it,
+                        viewState = item,
                         onAction = onAction,
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .background(MaterialTheme.colorScheme.background),
                     )
                 }
             }
-
-            AnimatedVisibility(
-                visible = showShadow,
-                enter = fadeIn(),
-                exit = fadeOut(),
-                modifier = Modifier.align(Alignment.TopCenter),
-            ) {
-                Box(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .height(Theme.size.medium)
-                        .background(
-                            brush = Brush.verticalGradient(
-                                colors = listOf(
-                                    MaterialTheme.colorScheme.background,
-                                    Color.Transparent,
-                                ),
-                            ),
-                        ),
-                )
-            }
         }
 
-        FloatingActionButton(
-            onClick = { onAction(ListViewAction.ImportRandomClick) },
-            shape = CircleShape,
+        Shadow(
+            visible = showShadow,
+            modifier = Modifier
+                .align(Alignment.TopCenter),
+        )
+
+        ImportButton(
+            onAction = onAction,
             modifier = Modifier
                 .padding(Theme.size.medium)
                 .align(Alignment.BottomEnd),
-        ) {
-            Icon(imageVector = Icons.Filled.Add, contentDescription = "Import random bookmark")
-        }
+        )
+    }
+}
+
+@Composable
+private fun ImportButton(
+    onAction: (ListViewAction) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    FloatingActionButton(
+        onClick = { onAction(ListViewAction.ImportRandomClick) },
+        shape = CircleShape,
+        modifier = modifier,
+    ) {
+        Icon(imageVector = Icons.Filled.Add, contentDescription = stringResource(R.string.library_import_action))
+    }
+}
+
+@Composable
+private fun RemoveIcon() {
+    Icon(
+        imageVector = Icons.Default.Delete,
+        contentDescription = stringResource(R.string.library_remove_action),
+        tint = MaterialTheme.colorScheme.onErrorContainer,
+        modifier = Modifier
+            .fillMaxSize()
+            .background(MaterialTheme.colorScheme.errorContainer)
+            .wrapContentSize(Alignment.CenterEnd)
+            .padding(Theme.size.small),
+    )
+}
+
+@Composable
+private fun Shadow(
+    visible: Boolean,
+    modifier: Modifier = Modifier,
+) {
+    AnimatedVisibility(
+        visible = visible,
+        enter = fadeIn(),
+        exit = fadeOut(),
+        modifier = modifier,
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(Theme.size.medium)
+                .background(
+                    brush = Brush.verticalGradient(
+                        colors = listOf(
+                            MaterialTheme.colorScheme.background,
+                            Color.Transparent,
+                        ),
+                    ),
+                ),
+        )
     }
 }
 
 @UiModePreviews
 @Composable
+@Suppress("MagicNumber")
 private fun Preview() {
     Theme {
         Surface {
@@ -191,17 +269,20 @@ private fun Preview() {
                     items = listOf(
                         ListItemViewState(
                             label = "Georges Brassens",
+                            onClickAction = ListViewAction.ItemClick(1L),
                         ),
                         ListItemViewState(
                             label = "Jacques Brel",
+                            onClickAction = ListViewAction.ItemClick(2L),
                         ),
                         ListItemViewState(
                             label = "Joe Dassin",
+                            onClickAction = ListViewAction.ItemClick(3L),
                         ),
                     ),
                 ),
                 onAction = {},
             )
         }
     }
-}
+}
diff --git a/features/library/ui/src/main/java/org/mrlem/composesample/features/library/ui/list/ListViewAction.kt b/features/library/ui/src/main/java/org/mrlem/composesample/features/library/ui/list/ListViewAction.kt
@@ -6,6 +6,10 @@ internal sealed interface ListViewAction {
         val itemId: Long,
     ) : ListViewAction
 
+    data class ItemDismiss(
+        val itemId: Long,
+    ) : ListViewAction
+
     data object ImportRandomClick : ListViewAction
 
     data class FilterChange(
diff --git a/features/library/ui/src/main/java/org/mrlem/composesample/features/library/ui/list/ListViewModel.kt b/features/library/ui/src/main/java/org/mrlem/composesample/features/library/ui/list/ListViewModel.kt
@@ -9,6 +9,7 @@ import kotlinx.coroutines.flow.combine
 import kotlinx.coroutines.flow.launchIn
 import kotlinx.coroutines.flow.onEach
 import kotlinx.coroutines.flow.stateIn
+import kotlinx.coroutines.launch
 import org.mrlem.android.core.feature.ui.UnidirectionalViewModel
 import org.mrlem.composesample.features.library.domain.repositories.BookmarkRepository
 import org.mrlem.composesample.features.library.domain.usecase.ImportRandomBookmark
@@ -46,6 +47,17 @@ internal class ListViewModel @Inject constructor(
                         trigger(ListViewEffect.GoToItem(action.itemId))
                     }
 
+                    is ListViewAction.ItemDismiss -> {
+                        viewModelScope.launch {
+                            try {
+                                repository.delete(action.itemId)
+                            } catch (e: IOException) {
+                                Timber.e(e, "failed to remove bookmark")
+                                trigger(ListViewEffect.ShowError)
+                            }
+                        }
+                    }
+
                     is ListViewAction.ImportRandomClick -> {
                         try {
                             importRandomBookmark()
diff --git a/features/library/ui/src/main/res/values/strings.xml b/features/library/ui/src/main/res/values/strings.xml
@@ -0,0 +1,6 @@
+<resources>
+    <string name="library_search_action">Search</string>
+    <string name="library_remove_action">Remove</string>
+    <string name="library_import_action">Import random bookmark</string>
+    <string name="library_error">Failed to retrieve data</string>
+</resources>
diff --git a/readme.md b/readme.md
@@ -64,10 +64,6 @@ Navigation is using dedicated modules for stronger feature isolation.
 * doc:
   - document appInit task
   - document features creation
-* sample:
-  - add item removal
 * unit tests
-* room: database in the library module makes sense for this sample app, not for a real app. If
-  you find a multi-module pattern for room, please call me (I'd say this is not possible, by design)
 * room: migration handling
 * di: investigate moving from hilt+autodagger to [metro](https://github.com/ZacSweers/metro) once it gets more mature

Original file line number	Diff line number	Diff line change
`@@ -19,4 +19,7 @@ interface BookmarkDataSource {`
`19`	`19`
`20`	`20`	`@Query("SELECT * FROM bookmark WHERE id = :id")`
`21`	`21`	`suspend fun get(id: Long): BookmarkEntity`
	`22`	`+`
	`23`	`+ @Query("DELETE FROM bookmark WHERE id = :id")`
	`24`	`+ suspend fun delete(id: Long)`
`22`	`25`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@ interface BookmarkRepository {`
`10`	`10`
`11`	`11`	`suspend fun add(bookmark: Bookmark): Long`
`12`	`12`	`suspend fun get(id: Long): Bookmark`
	`13`	`+ suspend fun delete(id: Long)`
`13`	`14`	`suspend fun getRandom(): String`
`14`	`15`	`suspend fun import(name: String): Bookmark`
`15`	`16`	`}`