CHANGELOG.md

@@ -11,6 +11,9 @@ The format is a modified version of [Keep a Changelog](https://keepachangelog.co
 - `Other` - for technical stuff.
 
 ## [Unreleased]
+### Added
+- Drag & Drop to reorder Category in Settings ([@cuong-tran](https://github.com/cuong-tran)) ([#1427](https://github.com/mihonapp/mihon/pull/1427))
+
 ### Changed
 - Bump default user agent
 

app/src/main/java/eu/kanade/presentation/category/CategoryScreen.kt

@@ -41,7 +41,7 @@ fun CategoryScreen(
     onClickSortAlphabetically: () -> Unit,
     onClickRename: (Category) -> Unit,
     onClickDelete: (Category) -> Unit,
-    changeOrder: (Category, Int) -> Unit,
+    moveTo: (Category, Int) -> Unit,
     navigateUp: () -> Unit,
 ) {
     val lazyListState = rememberLazyListState()
@@ -87,7 +87,7 @@ fun CategoryScreen(
                 PaddingValues(horizontal = MaterialTheme.padding.medium),
             onClickRename = onClickRename,
             onClickDelete = onClickDelete,
-            changeOrder = changeOrder,
+            moveTo = moveTo,
         )
     }
 }
@@ -99,12 +99,12 @@ private fun CategoryContent(
     paddingValues: PaddingValues,
     onClickRename: (Category) -> Unit,
     onClickDelete: (Category) -> Unit,
-    changeOrder: (Category, Int) -> Unit,
+    moveTo: (Category, Int) -> Unit,
 ) {
     var reorderableList by remember { mutableStateOf(categories.toList()) }
     val reorderableLazyColumnState = rememberReorderableLazyListState(lazyListState) { from, to ->
         reorderableList = reorderableList.toMutableList().apply {
-            changeOrder(reorderableList[from.index], to.index - from.index)
+            moveTo(reorderableList[from.index], to.index - from.index)
             add(to.index, removeAt(from.index))
         }
     }
@@ -122,9 +122,9 @@ private fun CategoryContent(
     ) {
         items(
             items = reorderableList,
-            key = { category -> category.key },
+            key = { category -> category.key() },
         ) { category ->
-            ReorderableItem(reorderableLazyColumnState, category.key) {
+            ReorderableItem(reorderableLazyColumnState, category.key()) {
                 CategoryListItem(
                     modifier = Modifier.animateItem(),
                     category = category,
@@ -136,4 +136,4 @@ private fun CategoryContent(
     }
 }
 
-private val Category.key get() = "category-$id"
+fun Category.key() = "category-$id"

app/src/main/java/eu/kanade/presentation/category/components/CategoryListItem.kt

@@ -6,8 +6,8 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Delete
-import androidx.compose.material.icons.outlined.DragHandle
 import androidx.compose.material.icons.outlined.Edit
+import androidx.compose.material.icons.rounded.DragHandle
 import androidx.compose.material3.ElevatedCard
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
@@ -36,24 +36,21 @@ fun ReorderableCollectionItemScope.CategoryListItem(
             modifier = Modifier
                 .fillMaxWidth()
                 .clickable { onRename() }
-                .padding(vertical = MaterialTheme.padding.small)
+                .padding(MaterialTheme.padding.small),
-                .padding(
-                    start = MaterialTheme.padding.small,
-                    end = MaterialTheme.padding.medium,
-                ),
             verticalAlignment = Alignment.CenterVertically,
         ) {
-            Icon(
+            IconButton(
-                imageVector = Icons.Outlined.DragHandle,
-                contentDescription = null,
                 modifier = Modifier
-                    .padding(MaterialTheme.padding.medium)
                     .draggableHandle(),
-            )
+                onClick = {},
+            ) {
+                Icon(Icons.Rounded.DragHandle, contentDescription = "Reorder")
+            }
             Text(
                 text = category.name,
                 modifier = Modifier
-                    .weight(1f),
+                    .weight(1f)
+                    .padding(start = MaterialTheme.padding.small),
             )
             IconButton(onClick = onRename) {
                 Icon(

app/src/main/java/eu/kanade/tachiyomi/ui/category/CategoryScreen.kt

@@ -43,7 +43,7 @@ class CategoryScreen : Screen() {
             onClickSortAlphabetically = { screenModel.showDialog(CategoryDialog.SortAlphabetically) },
             onClickRename = { screenModel.showDialog(CategoryDialog.Rename(it)) },
             onClickDelete = { screenModel.showDialog(CategoryDialog.Delete(it)) },
-            changeOrder = screenModel::changeOrder,
+            moveTo = screenModel::moveTo,
             navigateUp = navigator::pop,
         )
 

app/src/main/java/eu/kanade/tachiyomi/ui/category/CategoryScreenModel.kt

@@ -74,9 +74,9 @@ class CategoryScreenModel(
         }
     }
 
-    fun changeOrder(category: Category, newOrder: Int) {
+    fun moveTo(category: Category, offset: Int) {
         screenModelScope.launch {
-            when (reorderCategory.changeOrder(category, newOrder)) {
+            when (reorderCategory.await(category, offset)) {
                 is ReorderCategory.Result.InternalError -> _events.send(CategoryEvent.InternalError)
                 else -> {}
             }

domain/src/main/java/tachiyomi/domain/category/interactor/ReorderCategory.kt

@@ -15,7 +15,7 @@ class ReorderCategory(
 
     private val mutex = Mutex()
 
-    suspend fun changeOrder(category: Category, newOrder: Int) = withNonCancellableContext {
+    suspend fun await(category: Category, offset: Int) = withNonCancellableContext {
         mutex.withLock {
             val categories = categoryRepository.getAll()
                 .filterNot(Category::isSystemCategory)
@@ -26,7 +26,7 @@ class ReorderCategory(
                 return@withNonCancellableContext Result.Unchanged
             }
 
-            val newPosition = currentIndex + newOrder
+            val newPosition = currentIndex + offset
 
             try {
                 categories.add(newPosition, categories.removeAt(currentIndex))