Migrate library settings sheet to Compose

2025-11-12 12:08:56 +01:00 · 2022-12-09 17:34:24 -05:00
parent 94232a4937
commit 727399611d
12 changed files with 443 additions and 830 deletions
--- a/app/src/main/java/eu/kanade/presentation/components/SettingsItems.kt
+++ b/app/src/main/java/eu/kanade/presentation/components/SettingsItems.kt
@@ -1,5 +1,6 @@
 package eu.kanade.presentation.components

+import androidx.annotation.StringRes
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
@@ -14,6 +15,7 @@ import androidx.compose.material.icons.filled.ArrowUpward
 import androidx.compose.material.icons.rounded.CheckBox
 import androidx.compose.material.icons.rounded.CheckBoxOutlineBlank
 import androidx.compose.material.icons.rounded.DisabledByDefault
+import androidx.compose.material3.Checkbox
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.RadioButton
@@ -21,19 +23,35 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import tachiyomi.domain.manga.model.TriStateFilter
+import tachiyomi.presentation.core.theme.header
+
+@Composable
+fun HeadingItem(
+    @StringRes labelRes: Int,
+) {
+    Text(
+        text = stringResource(labelRes),
+        style = MaterialTheme.typography.header,
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = TabbedDialogPaddings.Horizontal, vertical = 12.dp),
+    )
+}

@Composable
 fun TriStateItem(
    label: String,
    state: TriStateFilter,
+    enabled: Boolean = true,
    onClick: ((TriStateFilter) -> Unit)?,
 ) {
    Row(
        modifier = Modifier
            .clickable(
-                enabled = onClick != null,
+                enabled = enabled && onClick != null,
                onClick = {
                    when (state) {
                        TriStateFilter.DISABLED -> onClick?.invoke(TriStateFilter.ENABLED_IS)
@@ -47,7 +65,7 @@ fun TriStateItem(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(24.dp),
    ) {
-        val stateAlpha = if (onClick != null) 1f else ContentAlpha.disabled
+        val stateAlpha = if (enabled && onClick != null) 1f else ContentAlpha.disabled

        Icon(
            imageVector = when (state) {
@@ -56,7 +74,7 @@ fun TriStateItem(
                TriStateFilter.ENABLED_NOT -> Icons.Rounded.DisabledByDefault
            },
            contentDescription = null,
-            tint = if (state == TriStateFilter.DISABLED) {
+            tint = if (!enabled || state == TriStateFilter.DISABLED) {
                MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = stateAlpha)
            } else {
                when (onClick) {
@@ -109,6 +127,31 @@ fun SortItem(
    }
 }

+@Composable
+fun CheckboxItem(
+    label: String,
+    checked: Boolean,
+    onClick: () -> Unit,
+) {
+    Row(
+        modifier = Modifier
+            .clickable(onClick = onClick)
+            .fillMaxWidth()
+            .padding(horizontal = TabbedDialogPaddings.Horizontal, vertical = 12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(24.dp),
+    ) {
+        Checkbox(
+            checked = checked,
+            onCheckedChange = null,
+        )
+        Text(
+            text = label,
+            style = MaterialTheme.typography.bodyMedium,
+        )
+    }
+}
+
@Composable
 fun RadioItem(
    label: String,
--- a/app/src/main/java/eu/kanade/presentation/components/TabbedDialog.kt
+++ b/app/src/main/java/eu/kanade/presentation/components/TabbedDialog.kt
@@ -1,11 +1,11 @@
 package eu.kanade.presentation.components

+import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.MoreVert
@@ -20,12 +20,9 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
-import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.layout.onSizeChanged
-import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.util.fastForEachIndexed
@@ -85,26 +82,13 @@ fun TabbedDialog(
            }
            Divider()

-            val density = LocalDensity.current
-            var largestHeight by rememberSaveable { mutableStateOf(0f) }
            HorizontalPager(
-                modifier = Modifier.heightIn(min = largestHeight.dp),
+                modifier = Modifier.animateContentSize(),
                count = tabTitles.size,
                state = pagerState,
                verticalAlignment = Alignment.Top,
            ) { page ->
-                Box(
-                    modifier = Modifier.onSizeChanged {
-                        with(density) {
-                            val heightDp = it.height.toDp()
-                            if (heightDp.value > largestHeight) {
-                                largestHeight = heightDp.value
-                            }
-                        }
-                    },
-                ) {
-                    content(contentPadding, page)
-                }
+                content(contentPadding, page)
            }
        }
    }
--- a/app/src/main/java/eu/kanade/presentation/library/LibrarySettingsDialog.kt
+++ b/app/src/main/java/eu/kanade/presentation/library/LibrarySettingsDialog.kt
@@ -0,0 +1,249 @@
+package eu.kanade.presentation.library
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import eu.kanade.domain.library.service.LibraryPreferences
+import eu.kanade.presentation.components.CheckboxItem
+import eu.kanade.presentation.components.HeadingItem
+import eu.kanade.presentation.components.RadioItem
+import eu.kanade.presentation.components.SortItem
+import eu.kanade.presentation.components.TabbedDialog
+import eu.kanade.presentation.components.TabbedDialogPaddings
+import eu.kanade.presentation.components.TriStateItem
+import eu.kanade.presentation.util.collectAsState
+import eu.kanade.tachiyomi.R
+import eu.kanade.tachiyomi.ui.library.LibrarySettingsScreenModel
+import eu.kanade.tachiyomi.widget.toTriStateFilter
+import tachiyomi.domain.category.model.Category
+import tachiyomi.domain.library.model.LibraryDisplayMode
+import tachiyomi.domain.library.model.LibrarySort
+import tachiyomi.domain.library.model.display
+import tachiyomi.domain.library.model.sort
+import tachiyomi.domain.manga.model.TriStateFilter
+
+@Composable
+fun LibrarySettingsDialog(
+    onDismissRequest: () -> Unit,
+    screenModel: LibrarySettingsScreenModel,
+    activeCategoryIndex: Int,
+) {
+    val state by screenModel.state.collectAsState()
+    val category by remember(activeCategoryIndex) {
+        derivedStateOf { state.categories[activeCategoryIndex] }
+    }
+
+    TabbedDialog(
+        onDismissRequest = onDismissRequest,
+        tabTitles = listOf(
+            stringResource(R.string.action_filter),
+            stringResource(R.string.action_sort),
+            stringResource(R.string.action_display),
+        ),
+    ) { contentPadding, page ->
+        Column(
+            modifier = Modifier
+                .padding(contentPadding)
+                .padding(vertical = TabbedDialogPaddings.Vertical)
+                .verticalScroll(rememberScrollState()),
+        ) {
+            when (page) {
+                0 -> FilterPage(
+                    screenModel = screenModel,
+                )
+                1 -> SortPage(
+                    category = category,
+                    screenModel = screenModel,
+                )
+                2 -> DisplayPage(
+                    category = category,
+                    screenModel = screenModel,
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun ColumnScope.FilterPage(
+    screenModel: LibrarySettingsScreenModel,
+) {
+    val filterDownloaded by screenModel.libraryPreferences.filterDownloaded().collectAsState()
+    val downloadedOnly by screenModel.preferences.downloadedOnly().collectAsState()
+    TriStateItem(
+        label = stringResource(R.string.label_downloaded),
+        state = if (downloadedOnly) {
+            TriStateFilter.ENABLED_IS
+        } else {
+            filterDownloaded.toTriStateFilter()
+        },
+        enabled = !downloadedOnly,
+        onClick = { screenModel.toggleFilter(LibraryPreferences::filterDownloaded) },
+    )
+    val filterUnread by screenModel.libraryPreferences.filterUnread().collectAsState()
+    TriStateItem(
+        label = stringResource(R.string.action_filter_unread),
+        state = filterUnread.toTriStateFilter(),
+        onClick = { screenModel.toggleFilter(LibraryPreferences::filterUnread) },
+    )
+    val filterStarted by screenModel.libraryPreferences.filterStarted().collectAsState()
+    TriStateItem(
+        label = stringResource(R.string.label_started),
+        state = filterStarted.toTriStateFilter(),
+        onClick = { screenModel.toggleFilter(LibraryPreferences::filterStarted) },
+    )
+    val filterBookmarked by screenModel.libraryPreferences.filterBookmarked().collectAsState()
+    TriStateItem(
+        label = stringResource(R.string.action_filter_bookmarked),
+        state = filterBookmarked.toTriStateFilter(),
+        onClick = { screenModel.toggleFilter(LibraryPreferences::filterBookmarked) },
+    )
+    val filterCompleted by screenModel.libraryPreferences.filterCompleted().collectAsState()
+    TriStateItem(
+        label = stringResource(R.string.completed),
+        state = filterCompleted.toTriStateFilter(),
+        onClick = { screenModel.toggleFilter(LibraryPreferences::filterCompleted) },
+    )
+
+    when (screenModel.trackServices.size) {
+        0 -> {
+            // No trackers
+        }
+        1 -> {
+            val service = screenModel.trackServices[0]
+            val filterTracker by screenModel.libraryPreferences.filterTracking(service.id.toInt()).collectAsState()
+            TriStateItem(
+                label = stringResource(R.string.action_filter_tracked),
+                state = filterTracker.toTriStateFilter(),
+                onClick = { screenModel.toggleTracker(service.id.toInt()) },
+            )
+        }
+        else -> {
+            HeadingItem(R.string.action_filter_tracked)
+            screenModel.trackServices.map { service ->
+                val filterTracker by screenModel.libraryPreferences.filterTracking(service.id.toInt()).collectAsState()
+                TriStateItem(
+                    label = stringResource(service.nameRes()),
+                    state = filterTracker.toTriStateFilter(),
+                    onClick = { screenModel.toggleTracker(service.id.toInt()) },
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun ColumnScope.SortPage(
+    category: Category,
+    screenModel: LibrarySettingsScreenModel,
+) {
+    val sortingMode = category.sort.type
+    val sortDescending = !category.sort.isAscending
+
+    listOf(
+        R.string.action_sort_alpha to LibrarySort.Type.Alphabetical,
+        R.string.action_sort_total to LibrarySort.Type.TotalChapters,
+        R.string.action_sort_last_read to LibrarySort.Type.LastRead,
+        R.string.action_sort_last_manga_update to LibrarySort.Type.LastUpdate,
+        R.string.action_sort_unread_count to LibrarySort.Type.UnreadCount,
+        R.string.action_sort_latest_chapter to LibrarySort.Type.LatestChapter,
+        R.string.action_sort_chapter_fetch_date to LibrarySort.Type.ChapterFetchDate,
+        R.string.action_sort_date_added to LibrarySort.Type.DateAdded,
+    ).map { (titleRes, mode) ->
+        SortItem(
+            label = stringResource(titleRes),
+            sortDescending = sortDescending.takeIf { sortingMode == mode },
+            onClick = {
+                val isTogglingDirection = sortingMode == mode
+                val direction = when {
+                    isTogglingDirection -> if (sortDescending) LibrarySort.Direction.Ascending else LibrarySort.Direction.Descending
+                    else -> if (sortDescending) LibrarySort.Direction.Descending else LibrarySort.Direction.Ascending
+                }
+                screenModel.setSort(category, mode, direction)
+            },
+        )
+    }
+}
+
+@Composable
+private fun ColumnScope.DisplayPage(
+    category: Category,
+    screenModel: LibrarySettingsScreenModel,
+) {
+    HeadingItem(R.string.action_display_mode)
+    listOf(
+        R.string.action_display_grid to LibraryDisplayMode.CompactGrid,
+        R.string.action_display_comfortable_grid to LibraryDisplayMode.ComfortableGrid,
+        R.string.action_display_cover_only_grid to LibraryDisplayMode.CoverOnlyGrid,
+        R.string.action_display_list to LibraryDisplayMode.List,
+    ).map { (titleRes, mode) ->
+        RadioItem(
+            label = stringResource(titleRes),
+            selected = category.display == mode,
+            onClick = { screenModel.setDisplayMode(category, mode) },
+        )
+    }
+
+    HeadingItem(R.string.badges_header)
+    val downloadBadge by screenModel.libraryPreferences.downloadBadge().collectAsState()
+    CheckboxItem(
+        label = stringResource(R.string.action_display_download_badge),
+        checked = downloadBadge,
+        onClick = {
+            screenModel.togglePreference(LibraryPreferences::downloadBadge)
+        },
+    )
+    val localBadge by screenModel.libraryPreferences.localBadge().collectAsState()
+    CheckboxItem(
+        label = stringResource(R.string.action_display_local_badge),
+        checked = localBadge,
+        onClick = {
+            screenModel.togglePreference(LibraryPreferences::localBadge)
+        },
+    )
+    val languageBadge by screenModel.libraryPreferences.languageBadge().collectAsState()
+    CheckboxItem(
+        label = stringResource(R.string.action_display_language_badge),
+        checked = languageBadge,
+        onClick = {
+            screenModel.togglePreference(LibraryPreferences::languageBadge)
+        },
+    )
+
+    HeadingItem(R.string.tabs_header)
+    val categoryTabs by screenModel.libraryPreferences.categoryTabs().collectAsState()
+    CheckboxItem(
+        label = stringResource(R.string.action_display_show_tabs),
+        checked = categoryTabs,
+        onClick = {
+            screenModel.togglePreference(LibraryPreferences::categoryTabs)
+        },
+    )
+    val categoryNumberOfItems by screenModel.libraryPreferences.categoryNumberOfItems().collectAsState()
+    CheckboxItem(
+        label = stringResource(R.string.action_display_show_number_of_items),
+        checked = categoryNumberOfItems,
+        onClick = {
+            screenModel.togglePreference(LibraryPreferences::categoryNumberOfItems)
+        },
+    )
+
+    HeadingItem(R.string.other_header)
+    val showContinueReadingButton by screenModel.libraryPreferences.showContinueReadingButton().collectAsState()
+    CheckboxItem(
+        label = stringResource(R.string.action_display_show_continue_reading_button),
+        checked = showContinueReadingButton,
+        onClick = {
+            screenModel.togglePreference(LibraryPreferences::showContinueReadingButton)
+        },
+    )
+}