Use Compose for Category screen (#7454)

* Use Compose for Category screen * Use correct string for CategoryRenameDialog title Co-authored-by: AntsyLich <59261191+AntsyLich@users.noreply.github.com> Co-authored-by: AntsyLich <59261191+AntsyLich@users.noreply.github.com>
2025-11-15 13:37:29 +01:00 · 2022-07-09 18:31:14 +02:00
parent 14a08f0668
commit 86bacbe586
27 changed files with 676 additions and 859 deletions
--- a/app/src/main/java/eu/kanade/presentation/category/CategoryScreen.kt
+++ b/app/src/main/java/eu/kanade/presentation/category/CategoryScreen.kt
@@ -0,0 +1,109 @@
+package eu.kanade.presentation.category
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.rememberTopAppBarScrollState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.platform.LocalContext
+import eu.kanade.presentation.category.components.CategoryContent
+import eu.kanade.presentation.category.components.CategoryCreateDialog
+import eu.kanade.presentation.category.components.CategoryDeleteDialog
+import eu.kanade.presentation.category.components.CategoryFloatingActionButton
+import eu.kanade.presentation.category.components.CategoryRenameDialog
+import eu.kanade.presentation.category.components.CategoryTopAppBar
+import eu.kanade.presentation.components.EmptyScreen
+import eu.kanade.presentation.components.Scaffold
+import eu.kanade.presentation.util.horizontalPadding
+import eu.kanade.presentation.util.plus
+import eu.kanade.presentation.util.topPaddingValues
+import eu.kanade.tachiyomi.R
+import eu.kanade.tachiyomi.ui.category.CategoryPresenter
+import eu.kanade.tachiyomi.ui.category.CategoryPresenter.Dialog
+import eu.kanade.tachiyomi.util.system.toast
+import kotlinx.coroutines.flow.collectLatest
+
+@Composable
+fun CategoryScreen(
+    presenter: CategoryPresenter,
+    navigateUp: () -> Unit,
+) {
+    val lazyListState = rememberLazyListState()
+    val topAppBarScrollState = rememberTopAppBarScrollState()
+    val topAppBarScrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(topAppBarScrollState)
+    Scaffold(
+        modifier = Modifier
+            .statusBarsPadding()
+            .nestedScroll(topAppBarScrollBehavior.nestedScrollConnection),
+        topBar = {
+            CategoryTopAppBar(
+                topAppBarScrollBehavior = topAppBarScrollBehavior,
+                navigateUp = navigateUp,
+            )
+        },
+        floatingActionButton = {
+            CategoryFloatingActionButton(
+                lazyListState = lazyListState,
+                onCreate = { presenter.dialog = CategoryPresenter.Dialog.Create },
+            )
+        },
+    ) { paddingValues ->
+        val context = LocalContext.current
+        val categories by presenter.categories.collectAsState(initial = emptyList())
+        if (categories.isEmpty()) {
+            EmptyScreen(textResource = R.string.information_empty_category)
+        } else {
+            CategoryContent(
+                categories = categories,
+                lazyListState = lazyListState,
+                paddingValues = paddingValues + topPaddingValues + PaddingValues(horizontal = horizontalPadding),
+                onMoveUp = { presenter.moveUp(it) },
+                onMoveDown = { presenter.moveDown(it) },
+                onRename = { presenter.dialog = Dialog.Rename(it) },
+                onDelete = { presenter.dialog = Dialog.Delete(it) },
+            )
+        }
+        val onDismissRequest = { presenter.dialog = null }
+        when (val dialog = presenter.dialog) {
+            Dialog.Create -> {
+                CategoryCreateDialog(
+                    onDismissRequest = onDismissRequest,
+                    onCreate = { presenter.createCategory(it) },
+                )
+            }
+            is Dialog.Rename -> {
+                CategoryRenameDialog(
+                    onDismissRequest = onDismissRequest,
+                    onRename = { presenter.renameCategory(dialog.category, it) },
+                    category = dialog.category,
+                )
+            }
+            is Dialog.Delete -> {
+                CategoryDeleteDialog(
+                    onDismissRequest = onDismissRequest,
+                    onDelete = { presenter.deleteCategory(dialog.category) },
+                    category = dialog.category,
+                )
+            }
+            else -> {}
+        }
+        LaunchedEffect(Unit) {
+            presenter.events.collectLatest { event ->
+                when (event) {
+                    is CategoryPresenter.Event.CategoryWithNameAlreadyExists -> {
+                        context.toast(R.string.error_category_exists)
+                    }
+                    is CategoryPresenter.Event.InternalError -> {
+                        context.toast(R.string.internal_error)
+                    }
+                }
+            }
+        }
+    }
+}
--- a/app/src/main/java/eu/kanade/presentation/category/components/CategoryContent.kt
+++ b/app/src/main/java/eu/kanade/presentation/category/components/CategoryContent.kt
@@ -0,0 +1,39 @@
+package eu.kanade.presentation.category.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.unit.dp
+import eu.kanade.domain.category.model.Category
+
+@Composable
+fun CategoryContent(
+    categories: List<Category>,
+    lazyListState: LazyListState,
+    paddingValues: PaddingValues,
+    onMoveUp: (Category) -> Unit,
+    onMoveDown: (Category) -> Unit,
+    onRename: (Category) -> Unit,
+    onDelete: (Category) -> Unit,
+) {
+    LazyColumn(
+        state = lazyListState,
+        contentPadding = paddingValues,
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        itemsIndexed(categories) { index, category ->
+            CategoryListItem(
+                category = category,
+                canMoveUp = index != 0,
+                canMoveDown = index != categories.lastIndex,
+                onMoveUp = onMoveUp,
+                onMoveDown = onMoveDown,
+                onRename = onRename,
+                onDelete = onDelete,
+            )
+        }
+    }
+}
--- a/app/src/main/java/eu/kanade/presentation/category/components/CategoryDialogs.kt
+++ b/app/src/main/java/eu/kanade/presentation/category/components/CategoryDialogs.kt
@@ -0,0 +1,115 @@
+package eu.kanade.presentation.category.components
+
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.res.stringResource
+import eu.kanade.domain.category.model.Category
+import eu.kanade.presentation.components.TextButton
+import eu.kanade.tachiyomi.R
+
+@Composable
+fun CategoryCreateDialog(
+    onDismissRequest: () -> Unit,
+    onCreate: (String) -> Unit,
+) {
+    val (name, onNameChange) = remember { mutableStateOf("") }
+    AlertDialog(
+        onDismissRequest = onDismissRequest,
+        confirmButton = {
+            TextButton(onClick = {
+                onCreate(name)
+                onDismissRequest()
+            },) {
+                Text(text = stringResource(id = R.string.action_add))
+            }
+        },
+        dismissButton = {
+            TextButton(onClick = onDismissRequest) {
+                Text(text = stringResource(id = R.string.action_cancel))
+            }
+        },
+        title = {
+            Text(text = stringResource(id = R.string.action_add_category))
+        },
+        text = {
+            OutlinedTextField(
+                value = name,
+                onValueChange = onNameChange,
+                label = {
+                    Text(text = stringResource(id = R.string.name))
+                },
+            )
+        },
+    )
+}
+
+@Composable
+fun CategoryRenameDialog(
+    onDismissRequest: () -> Unit,
+    onRename: (String) -> Unit,
+    category: Category,
+) {
+    val (name, onNameChange) = remember { mutableStateOf(category.name) }
+    AlertDialog(
+        onDismissRequest = onDismissRequest,
+        confirmButton = {
+            TextButton(onClick = {
+                onRename(name)
+                onDismissRequest()
+            },) {
+                Text(text = stringResource(id = android.R.string.ok))
+            }
+        },
+        dismissButton = {
+            TextButton(onClick = onDismissRequest) {
+                Text(text = stringResource(id = R.string.action_cancel))
+            }
+        },
+        title = {
+            Text(text = stringResource(id = R.string.action_rename_category))
+        },
+        text = {
+            OutlinedTextField(
+                value = name,
+                onValueChange = onNameChange,
+                label = {
+                    Text(text = stringResource(id = R.string.name))
+                },
+            )
+        },
+    )
+}
+
+@Composable
+fun CategoryDeleteDialog(
+    onDismissRequest: () -> Unit,
+    onDelete: () -> Unit,
+    category: Category,
+) {
+    AlertDialog(
+        onDismissRequest = onDismissRequest,
+        confirmButton = {
+            TextButton(onClick = onDismissRequest) {
+                Text(text = stringResource(R.string.no))
+            }
+        },
+        dismissButton = {
+            TextButton(onClick = {
+                onDelete()
+                onDismissRequest()
+            },) {
+                Text(text = stringResource(R.string.yes))
+            }
+        },
+        title = {
+            Text(text = stringResource(R.string.delete_category))
+        },
+        text = {
+            Text(text = stringResource(R.string.delete_category_confirmation, category.name))
+        },
+    )
+}
--- a/app/src/main/java/eu/kanade/presentation/category/components/CategoryFloatingActionButton.kt
+++ b/app/src/main/java/eu/kanade/presentation/category/components/CategoryFloatingActionButton.kt
@@ -0,0 +1,30 @@
+package eu.kanade.presentation.category.components
+
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Add
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import eu.kanade.presentation.components.ExtendedFloatingActionButton
+import eu.kanade.presentation.util.isScrolledToEnd
+import eu.kanade.presentation.util.isScrollingUp
+import eu.kanade.tachiyomi.R
+
+@Composable
+fun CategoryFloatingActionButton(
+    lazyListState: LazyListState,
+    onCreate: () -> Unit,
+) {
+    ExtendedFloatingActionButton(
+        text = { Text(text = stringResource(id = R.string.action_add)) },
+        icon = { Icon(imageVector = Icons.Outlined.Add, contentDescription = "") },
+        onClick = onCreate,
+        modifier = Modifier
+            .navigationBarsPadding(),
+        expanded = lazyListState.isScrollingUp() || lazyListState.isScrolledToEnd(),
+    )
+}
--- a/app/src/main/java/eu/kanade/presentation/category/components/CategoryListItem.kt
+++ b/app/src/main/java/eu/kanade/presentation/category/components/CategoryListItem.kt
@@ -0,0 +1,63 @@
+package eu.kanade.presentation.category.components
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.ArrowDropDown
+import androidx.compose.material.icons.outlined.ArrowDropUp
+import androidx.compose.material.icons.outlined.Delete
+import androidx.compose.material.icons.outlined.Edit
+import androidx.compose.material.icons.outlined.Label
+import androidx.compose.material3.ElevatedCard
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import eu.kanade.domain.category.model.Category
+import eu.kanade.presentation.util.horizontalPadding
+
+@Composable
+fun CategoryListItem(
+    category: Category,
+    canMoveUp: Boolean,
+    canMoveDown: Boolean,
+    onMoveUp: (Category) -> Unit,
+    onMoveDown: (Category) -> Unit,
+    onRename: (Category) -> Unit,
+    onDelete: (Category) -> Unit,
+) {
+    ElevatedCard {
+        Row(
+            modifier = Modifier
+                .padding(start = horizontalPadding, top = horizontalPadding, end = horizontalPadding),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Icon(imageVector = Icons.Outlined.Label, contentDescription = "")
+            Text(text = category.name, modifier = Modifier.padding(start = horizontalPadding))
+        }
+        Row {
+            IconButton(
+                onClick = { onMoveUp(category) },
+                enabled = canMoveUp,
+            ) {
+                Icon(imageVector = Icons.Outlined.ArrowDropUp, contentDescription = "")
+            }
+            IconButton(
+                onClick = { onMoveDown(category) },
+                enabled = canMoveDown,
+            ) {
+                Icon(imageVector = Icons.Outlined.ArrowDropDown, contentDescription = "")
+            }
+            Spacer(modifier = Modifier.weight(1f))
+            IconButton(onClick = { onRename(category) }) {
+                Icon(imageVector = Icons.Outlined.Edit, contentDescription = "")
+            }
+            IconButton(onClick = { onDelete(category) }) {
+                Icon(imageVector = Icons.Outlined.Delete, contentDescription = "")
+            }
+        }
+    }
+}
--- a/app/src/main/java/eu/kanade/presentation/category/components/CategoryTopAppBar.kt
+++ b/app/src/main/java/eu/kanade/presentation/category/components/CategoryTopAppBar.kt
@@ -0,0 +1,33 @@
+package eu.kanade.presentation.category.components
+
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.SmallTopAppBar
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarScrollBehavior
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import eu.kanade.tachiyomi.R
+
+@Composable
+fun CategoryTopAppBar(
+    topAppBarScrollBehavior: TopAppBarScrollBehavior,
+    navigateUp: () -> Unit,
+) {
+    SmallTopAppBar(
+        navigationIcon = {
+            IconButton(onClick = navigateUp) {
+                Icon(
+                    imageVector = Icons.Default.ArrowBack,
+                    contentDescription = stringResource(R.string.abc_action_bar_up_description),
+                )
+            }
+        },
+        title = {
+            Text(text = stringResource(id = R.string.action_edit_categories))
+        },
+        scrollBehavior = topAppBarScrollBehavior,
+    )
+}
--- a/app/src/main/java/eu/kanade/presentation/util/Constants.kt
+++ b/app/src/main/java/eu/kanade/presentation/util/Constants.kt
@@ -3,6 +3,12 @@ package eu.kanade.presentation.util
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.ui.unit.dp

-val horizontalPadding = 16.dp
+private val horizontal = 16.dp

-val topPaddingValues = PaddingValues(top = 8.dp)
+private val vertical = 8.dp
+
+val horizontalPadding = horizontal
+
+val verticalPadding = vertical
+
+val topPaddingValues = PaddingValues(top = vertical)