fix(ui): Correct reorder mode behavior and layout

This commit fixes several issues related to the recently implemented reorder mode.

- Adds the missing right-side drag handle in the detail view to support both left- and right-handed users.
- Corrects the behavior of the back button in the detail view to first exit reorder mode before navigating away.
- Implements a proper exit mechanism for reorder mode in the list view by changing the navigation icon to a back arrow.
This commit is contained in:
2025-10-12 22:12:17 +02:00
parent 6b80a06c2f
commit 9ab79eca8e
4 changed files with 46 additions and 39 deletions

View File

@@ -121,7 +121,7 @@ fun AppShell(
// Collect state from ViewModel
val searchQuery by shoppingListsViewModel.searchQuery.collectAsState()
val selectedItem by shoppingListsViewModel.selectedItem.collectAsState()
val isReorderMode by shoppingListsViewModel.isReorderMode.collectAsState()
val newItemName by shoppingListsViewModel.newItemName.collectAsState()
val showCompletedItems by shoppingListsViewModel.showCompletedItems.collectAsState()
val shoppingListWithItems by shoppingListsViewModel.getShoppingListWithItemsStream(selectedListId ?: 0)
@@ -175,45 +175,45 @@ fun AppShell(
}
Column {
if (currentScreen == Screen.ShoppingListDetail) {
TopAppBar(
title = { Text(topBarTitle) },
navigationIcon = {
IconButton(onClick = {
shoppingListsViewModel.disableReorderMode()
currentScreen = Screen.ShoppingLists; selectedListId = null
}) {
TopAppBar(
title = { Text(topBarTitle) },
navigationIcon = {
if (isReorderMode) {
IconButton(onClick = { shoppingListsViewModel.disableReorderMode() }) {
Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = stringResource(R.string.back))
}
},
actions = {},
colors = TopAppBarDefaults.topAppBarColors(
containerColor = Color.Transparent
)
)
} else {
TopAppBar(
title = { Text(topBarTitle, style = MaterialTheme.typography.titleMedium) },
navigationIcon = {
IconButton(onClick = { scope.launch { drawerState.apply { if (isClosed) open() else close() } } }) {
Icon(imageVector = Icons.Default.Menu, contentDescription = stringResource(id = R.string.menu_open))
} else {
when (currentScreen) {
is Screen.ShoppingListDetail -> {
IconButton(onClick = {
currentScreen = Screen.ShoppingLists; selectedListId = null
}) {
Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = stringResource(R.string.back))
}
}
else -> {
IconButton(onClick = { scope.launch { drawerState.apply { if (isClosed) open() else close() } } }) {
Icon(imageVector = Icons.Default.Menu, contentDescription = stringResource(id = R.string.menu_open))
}
}
}
},
actions = {
if (currentScreen == Screen.ShoppingLists) {
IconButton(onClick = {
shoppingListsViewModel.resetListDetails()
showListDialog = true
}) {
Icon(Icons.Default.Add, contentDescription = stringResource(R.string.add_shopping_list))
}
}
},
colors = TopAppBarDefaults.topAppBarColors(
containerColor = Color.Transparent
)
)
}
}
},
actions = {
if (currentScreen == Screen.ShoppingLists && !isReorderMode) {
IconButton(onClick = {
shoppingListsViewModel.resetListDetails()
showListDialog = true
}) {
Icon(Icons.Default.Add, contentDescription = stringResource(R.string.add_shopping_list))
}
}
},
colors = TopAppBarDefaults.topAppBarColors(
containerColor = Color.Transparent
)
)
if (currentScreen == Screen.ShoppingLists) {
OutlinedTextField(
value = searchQuery,

View File

@@ -148,7 +148,7 @@ fun ShoppingListDetailScreen(
val reorderedItems = filteredItems.toMutableList().apply {
add(to.index, removeAt(from.index))
}
viewModel.moveItem(listId ?: 0, reorderedItems)
viewModel.moveItem(reorderedItems)
}
LazyColumn(
state = lazyListState,
@@ -220,6 +220,11 @@ fun ShoppingListDetailScreen(
)
}
}
if (isReorderMode) {
IconButton(modifier = Modifier.draggableHandle(), onClick = {}) {
Icon(Icons.Rounded.DragHandle, contentDescription = "Reorder")
}
}
}
}
}

View File

@@ -42,6 +42,8 @@ import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer

View File

@@ -275,7 +275,7 @@ class ShoppingListsViewModel(private val noteshopRepository: NoteshopRepository)
}
}
fun moveItem(listId: Int, items: List<ShoppingListItem>) {
fun moveItem(items: List<ShoppingListItem>) {
viewModelScope.launch {
val updatedItems = items.mapIndexed { index, item ->
item.copy(displayOrder = index)