Migrate library settings sheet to Compose

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,

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)
             }
         }
     }