Make CheckBox/RadioButton text clickable and refine layout (#416)

* Make CheckBox/RadioButton text clickable

* Introduce LabeledCheckbox and refine layout

app/src/main/kotlin/com/hippo/ehviewer/ui/CommonOperations.kt

@@ -18,11 +18,9 @@ package com.hippo.ehviewer.ui
 import android.Manifest
 import android.content.Context
 import android.content.Intent
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.DriveFileMove
@@ -32,15 +30,12 @@ import androidx.compose.material.icons.filled.Download
 import androidx.compose.material.icons.filled.Favorite
 import androidx.compose.material.icons.filled.FavoriteBorder
 import androidx.compose.material.icons.filled.HeartBroken
-import androidx.compose.material3.Checkbox
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.SelectableDates
 import androidx.compose.material3.Text
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -62,6 +57,7 @@ import com.hippo.ehviewer.download.DownloadService
 import com.hippo.ehviewer.download.downloadDir
 import com.hippo.ehviewer.download.downloadLocation
 import com.hippo.ehviewer.ui.tools.DialogState
+import com.hippo.ehviewer.ui.tools.LabeledCheckbox
 import com.hippo.ehviewer.util.FavouriteStatusRouter
 import com.hippo.ehviewer.util.findActivity
 import com.hippo.ehviewer.util.isAtLeastT
@@ -345,16 +341,13 @@ suspend fun DialogState.confirmRemoveDownload(info: GalleryInfo, onDismiss: () -
                     style = MaterialTheme.typography.titleMedium,
                 )
                 Spacer(modifier = Modifier.height(16.dp))
-                Row(
-                    modifier = Modifier.clickable(
-                        interactionSource = remember { MutableInteractionSource() },
-                        indication = null,
-                    ) { checked = !checked },
-                    verticalAlignment = Alignment.CenterVertically,
-                ) {
-                    Checkbox(checked = checked, onCheckedChange = { checked = it })
-                    Text(text = stringResource(id = R.string.download_remove_dialog_check_text))
-                }
+                LabeledCheckbox(
+                    modifier = Modifier.fillMaxWidth(),
+                    checked = checked,
+                    onCheckedChange = { checked = it },
+                    label = stringResource(id = R.string.download_remove_dialog_check_text),
+                    indication = null,
+                )
             }
         },
     )
@@ -375,16 +368,13 @@ suspend fun DialogState.confirmRemoveDownloadRange(list: Collection<DownloadInfo
                     style = MaterialTheme.typography.titleMedium,
                 )
                 Spacer(modifier = Modifier.height(16.dp))
-                Row(
-                    modifier = Modifier.clickable(
-                        interactionSource = remember { MutableInteractionSource() },
-                        indication = null,
-                    ) { checked = !checked },
-                    verticalAlignment = Alignment.CenterVertically,
-                ) {
-                    Checkbox(checked = checked, onCheckedChange = { checked = it })
-                    Text(text = stringResource(id = R.string.download_remove_dialog_check_text))
-                }
+                LabeledCheckbox(
+                    modifier = Modifier.fillMaxWidth(),
+                    checked = checked,
+                    onCheckedChange = { checked = it },
+                    label = stringResource(id = R.string.download_remove_dialog_check_text),
+                    indication = null,
+                )
             }
         },
     )

app/src/main/kotlin/com/hippo/ehviewer/ui/main/AdvanceTable.kt

@@ -6,9 +6,9 @@ import kotlinx.parcelize.Parcelize
 object AdvanceTable {
     const val SH = 0x1
     const val STO = 0x2
-    const val SFL = 0x100
-    const val SFU = 0x200
-    const val SFT = 0x400
+    const val SFL = 0x4
+    const val SFU = 0x8
+    const val SFT = 0x10
 }
 
 @Parcelize

app/src/main/kotlin/com/hippo/ehviewer/ui/main/AdvancedSearch.kt

@@ -1,11 +1,11 @@
 package com.hippo.ehviewer.ui.main
 
-import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.material3.Checkbox
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.ExposedDropdownMenuBox
 import androidx.compose.material3.ExposedDropdownMenuDefaults
@@ -28,32 +28,35 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.dp
 import com.hippo.ehviewer.R
+import com.hippo.ehviewer.ui.tools.LabeledCheckbox
 import com.hippo.ehviewer.util.toIntOrDefault
 
 @Composable
 fun SearchAdvanced(
+    modifier: Modifier = Modifier,
     state: AdvancedSearchOption,
     onStateChanged: (AdvancedSearchOption) -> Unit,
-) = Column {
+) = FlowRow(modifier = modifier, horizontalArrangement = Arrangement.Center, maxItemsInEachRow = 2) {
     ProvideTextStyle(MaterialTheme.typography.bodyMedium) {
         val adv = state.advanceSearch
         fun checked(bit: Int) = adv and bit != 0
-        fun AdvancedSearchOption.inv(checked: Boolean, bit: Int) = onStateChanged(copy(advanceSearch = if (!checked) advanceSearch xor bit else advanceSearch or bit))
-        Row {
-            Row(modifier = Modifier.weight(1f)) {
-                Checkbox(checked = checked(AdvanceTable.SH), onCheckedChange = { state.inv(it, AdvanceTable.SH) })
-                Text(text = stringResource(id = R.string.search_sh), modifier = Modifier.align(Alignment.CenterVertically))
-            }
-            Row(modifier = Modifier.weight(1f)) {
-                Checkbox(checked = checked(AdvanceTable.STO), onCheckedChange = { state.inv(it, AdvanceTable.STO) })
-                Text(text = stringResource(id = R.string.search_sto), modifier = Modifier.align(Alignment.CenterVertically))
-            }
-        }
+        fun AdvancedSearchOption.inv(bit: Int) = onStateChanged(copy(advanceSearch = advanceSearch xor bit))
+        LabeledCheckbox(
+            checked = checked(AdvanceTable.SH),
+            onCheckedChange = { state.inv(AdvanceTable.SH) },
+            label = stringResource(id = R.string.search_sh),
+        )
+        LabeledCheckbox(
+            checked = checked(AdvanceTable.STO),
+            onCheckedChange = { state.inv(AdvanceTable.STO) },
+            label = stringResource(id = R.string.search_sto),
+        )
         val minRatingItems = stringArrayResource(id = R.array.search_min_rating)
         var expanded by remember { mutableStateOf(false) }
         ExposedDropdownMenuBox(
             expanded = expanded,
             onExpandedChange = { expanded = !expanded },
+            modifier = Modifier.align(Alignment.CenterVertically).padding(12.dp),
         ) {
             val softwareKeyboardController = LocalSoftwareKeyboardController.current
             OutlinedTextField(
@@ -87,8 +90,11 @@ fun SearchAdvanced(
         }
         Row(verticalAlignment = Alignment.CenterVertically) {
             var enabled by rememberSaveable { mutableStateOf(false) }
-            Checkbox(checked = enabled, onCheckedChange = { enabled = it })
-            Text(text = stringResource(id = R.string.search_sp), modifier = Modifier.align(Alignment.CenterVertically))
+            LabeledCheckbox(
+                checked = enabled,
+                onCheckedChange = { enabled = it },
+                label = stringResource(id = R.string.search_sp),
+            )
             OutlinedTextField(
                 keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.NumberPassword),
                 value = if (enabled && state.fromPage != -1) state.fromPage.toString() else "",
@@ -97,7 +103,7 @@ fun SearchAdvanced(
                 singleLine = true,
                 enabled = enabled,
             )
-            Text(text = stringResource(id = R.string.search_sp_to), modifier = Modifier.align(Alignment.CenterVertically))
+            Text(text = stringResource(id = R.string.search_sp_to))
             OutlinedTextField(
                 keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.NumberPassword),
                 value = if (enabled && state.toPage != -1) state.toPage.toString() else "",
@@ -106,22 +112,25 @@ fun SearchAdvanced(
                 singleLine = true,
                 enabled = enabled,
             )
-            Text(text = stringResource(id = R.string.search_sp_suffix), modifier = Modifier.align(Alignment.CenterVertically))
+            Text(text = stringResource(id = R.string.search_sp_suffix))
         }
-        Text(text = stringResource(id = R.string.search_sf))
-        Row {
-            Row(modifier = Modifier.weight(1f)) {
-                Checkbox(checked = checked(AdvanceTable.SFL), onCheckedChange = { state.inv(it, AdvanceTable.SFL) })
-                Text(text = stringResource(id = R.string.search_sfl), modifier = Modifier.align(Alignment.CenterVertically))
-            }
-            Row(modifier = Modifier.weight(1f)) {
-                Checkbox(checked = checked(AdvanceTable.SFU), onCheckedChange = { state.inv(it, AdvanceTable.SFU) })
-                Text(text = stringResource(id = R.string.search_sfu), modifier = Modifier.align(Alignment.CenterVertically))
-            }
-            Row(modifier = Modifier.weight(1f)) {
-                Checkbox(checked = checked(AdvanceTable.SFT), onCheckedChange = { state.inv(it, AdvanceTable.SFT) })
-                Text(text = stringResource(id = R.string.search_sft), modifier = Modifier.align(Alignment.CenterVertically))
-            }
+        Text(text = stringResource(id = R.string.search_sf), modifier = Modifier.align(Alignment.CenterVertically))
+        FlowRow {
+            LabeledCheckbox(
+                checked = checked(AdvanceTable.SFL),
+                onCheckedChange = { state.inv(AdvanceTable.SFL) },
+                label = stringResource(id = R.string.search_sfl),
+            )
+            LabeledCheckbox(
+                checked = checked(AdvanceTable.SFU),
+                onCheckedChange = { state.inv(AdvanceTable.SFU) },
+                label = stringResource(id = R.string.search_sfu),
+            )
+            LabeledCheckbox(
+                checked = checked(AdvanceTable.SFT),
+                onCheckedChange = { state.inv(AdvanceTable.SFT) },
+                label = stringResource(id = R.string.search_sft),
+            )
         }
     }
 }

app/src/main/kotlin/com/hippo/ehviewer/ui/main/ImageSearch.kt

@@ -7,7 +7,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.material3.Card
-import androidx.compose.material3.Checkbox
 import androidx.compose.material3.FilledTonalButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ProvideTextStyle
@@ -20,6 +19,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import coil.compose.AsyncImage
 import com.hippo.ehviewer.R
+import com.hippo.ehviewer.ui.tools.LabeledCheckbox
 
 @Composable
 fun ImageSearch(
@@ -29,7 +29,10 @@ fun ImageSearch(
     onUssChecked: (Boolean) -> Unit,
     osc: Boolean,
     onOscChecked: (Boolean) -> Unit,
-) = Column(modifier = Modifier.fillMaxWidth()) {
+) = Column(
+    modifier = Modifier.fillMaxWidth(),
+    horizontalAlignment = Alignment.CenterHorizontally,
+) {
     AnimatedVisibility(visible = imagePath.isNotBlank(), modifier = Modifier.align(Alignment.CenterHorizontally)) {
         Card {
             val maxSize = dimensionResource(id = R.dimen.image_search_max_size)
@@ -48,14 +51,16 @@ fun ImageSearch(
     }
     ProvideTextStyle(MaterialTheme.typography.bodyMedium) {
         Row {
-            Row(modifier = Modifier.weight(1f)) {
-                Checkbox(checked = uss, onCheckedChange = onUssChecked)
-                Text(text = stringResource(id = R.string.search_uss), modifier = Modifier.align(Alignment.CenterVertically))
-            }
-            Row(modifier = Modifier.weight(1f)) {
-                Checkbox(checked = osc, onCheckedChange = onOscChecked)
-                Text(text = stringResource(id = R.string.search_osc), modifier = Modifier.align(Alignment.CenterVertically))
-            }
+            LabeledCheckbox(
+                checked = uss,
+                onCheckedChange = onUssChecked,
+                label = stringResource(id = R.string.search_uss),
+            )
+            LabeledCheckbox(
+                checked = osc,
+                onCheckedChange = onOscChecked,
+                label = stringResource(id = R.string.search_osc),
+            )
         }
     }
 }

app/src/main/kotlin/com/hippo/ehviewer/ui/main/NormalSearch.kt

@@ -1,18 +1,16 @@
 package com.hippo.ehviewer.ui.main
 
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.Help
 import androidx.compose.material.icons.filled.Check
-import androidx.compose.material3.Checkbox
 import androidx.compose.material3.FilterChip
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
@@ -23,10 +21,12 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.hippo.ehviewer.R
 import com.hippo.ehviewer.client.EhUtils
+import com.hippo.ehviewer.ui.tools.LabeledCheckbox
 
 private val categoryTable = arrayOf(
     EhUtils.DOUJINSHI to R.string.doujinshi,
@@ -50,6 +50,7 @@ private val modeTable = arrayOf(
 
 @Composable
 fun NormalSearch(
+    modifier: Modifier = Modifier,
     category: Int,
     onCategoryChanged: (Int) -> Unit,
     searchMode: Int,
@@ -60,7 +61,7 @@ fun NormalSearch(
     maxItemsInEachRow: Int,
 ) {
     FlowRow(
-        modifier = Modifier.wrapContentHeight(align = Alignment.Top),
+        modifier = modifier.wrapContentHeight(align = Alignment.Top),
         maxItemsInEachRow = maxItemsInEachRow,
     ) {
         categoryTable.forEach {
@@ -74,37 +75,37 @@ fun NormalSearch(
                         Icon(imageVector = Icons.Default.Check, contentDescription = null)
                     }
                 },
-                modifier = Modifier.padding(horizontal = 4.dp).align(alignment = Alignment.CenterVertically).widthIn(min = 142.dp),
+                modifier = Modifier.padding(horizontal = 4.dp).widthIn(min = 142.dp)
+                    .align(alignment = Alignment.CenterVertically).weight(1f),
             )
         }
     }
     ProvideTextStyle(MaterialTheme.typography.bodyMedium) {
-        FlowRow {
+        FlowRow(
+            horizontalArrangement = Arrangement.SpaceBetween,
+            maxItemsInEachRow = maxItemsInEachRow,
+        ) {
             modeTable.forEach {
                 Row(
-                    modifier = Modifier.weight(1F).width(112.dp),
+                    modifier = Modifier.clip(MaterialTheme.shapes.small)
+                        .clickable { onSearchModeChanged(it.first) }.padding(end = 12.dp),
                     verticalAlignment = Alignment.CenterVertically,
                 ) {
                     RadioButton(
                         selected = it.first == searchMode,
                         onClick = { onSearchModeChanged(it.first) },
                     )
-                    Text(
-                        text = stringResource(id = it.second),
-                    )
+                    Text(text = stringResource(id = it.second))
                 }
             }
-        }
-        Row(horizontalArrangement = Arrangement.Start) {
-            Box(modifier = Modifier.weight(1f)) {
-                IconButton(onClick = showInfo) {
-                    Icon(imageVector = Icons.AutoMirrored.Default.Help, contentDescription = null)
-                }
-            }
-            Row(modifier = Modifier.weight(1f)) {
-                Checkbox(checked = isAdvanced, onCheckedChange = onAdvancedChanged)
-                Text(text = stringResource(id = R.string.search_enable_advance), modifier = Modifier.align(Alignment.CenterVertically))
+            IconButton(onClick = showInfo) {
+                Icon(imageVector = Icons.AutoMirrored.Default.Help, contentDescription = null)
             }
+            LabeledCheckbox(
+                checked = isAdvanced,
+                onCheckedChange = onAdvancedChanged,
+                label = stringResource(id = R.string.search_enable_advance),
+            )
         }
     }
 }

app/src/main/kotlin/com/hippo/ehviewer/ui/screen/GalleryListScreen.kt

@@ -649,8 +649,14 @@ fun GalleryListScreen(lub: ListUrlBuilder, navigator: DestinationsNavigator) {
                 },
         ) {
             AnimatedVisibility(visible = searchNormalMode) {
-                ElevatedCard(modifier = Modifier.fillMaxWidth().padding(vertical = dimensionResource(id = R.dimen.search_layout_margin_v))) {
-                    Column(modifier = Modifier.padding(horizontal = dimensionResource(id = R.dimen.search_category_padding_h), vertical = dimensionResource(id = R.dimen.search_category_padding_v))) {
+                ElevatedCard(modifier = Modifier.padding(vertical = dimensionResource(id = R.dimen.search_layout_margin_v))) {
+                    Column(
+                        modifier = Modifier.padding(
+                            horizontal = dimensionResource(id = R.dimen.search_category_padding_h),
+                            vertical = dimensionResource(id = R.dimen.search_category_padding_v),
+                        ).fillMaxWidth(),
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                    ) {
                         Text(
                             text = stringResource(id = R.string.search_normal),
                             modifier = Modifier.height(dimensionResource(id = R.dimen.search_category_title_height)),
@@ -678,8 +684,14 @@ fun GalleryListScreen(lub: ListUrlBuilder, navigator: DestinationsNavigator) {
                 }
             }
             AnimatedVisibility(visible = searchNormalMode && searchAdvancedMode) {
-                ElevatedCard(modifier = Modifier.fillMaxWidth().padding(vertical = dimensionResource(id = R.dimen.search_layout_margin_v))) {
-                    Column(modifier = Modifier.padding(horizontal = dimensionResource(id = R.dimen.search_category_padding_h), vertical = dimensionResource(id = R.dimen.search_category_padding_v))) {
+                ElevatedCard(modifier = Modifier.padding(vertical = dimensionResource(id = R.dimen.search_layout_margin_v))) {
+                    Column(
+                        modifier = Modifier.padding(
+                            horizontal = dimensionResource(id = R.dimen.search_category_padding_h),
+                            vertical = dimensionResource(id = R.dimen.search_category_padding_v),
+                        ).fillMaxWidth(),
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                    ) {
                         Text(
                             text = stringResource(id = R.string.search_advance),
                             modifier = Modifier.height(dimensionResource(id = R.dimen.search_category_title_height)),
@@ -694,8 +706,14 @@ fun GalleryListScreen(lub: ListUrlBuilder, navigator: DestinationsNavigator) {
                 }
             }
             AnimatedVisibility(visible = !searchNormalMode) {
-                ElevatedCard(modifier = Modifier.fillMaxWidth().padding(vertical = dimensionResource(id = R.dimen.search_layout_margin_v))) {
-                    Column(modifier = Modifier.padding(horizontal = dimensionResource(id = R.dimen.search_category_padding_h), vertical = dimensionResource(id = R.dimen.search_category_padding_v))) {
+                ElevatedCard(modifier = Modifier.padding(vertical = dimensionResource(id = R.dimen.search_layout_margin_v))) {
+                    Column(
+                        modifier = Modifier.padding(
+                            horizontal = dimensionResource(id = R.dimen.search_category_padding_h),
+                            vertical = dimensionResource(id = R.dimen.search_category_padding_v),
+                        ).fillMaxWidth(),
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                    ) {
                         Text(
                             text = stringResource(id = R.string.search_image),
                             modifier = Modifier.height(dimensionResource(id = R.dimen.search_category_title_height)),

app/src/main/kotlin/com/hippo/ehviewer/ui/settings/FilterScreen.kt

@@ -3,6 +3,7 @@ package com.hippo.ehviewer.ui.settings
 import android.content.DialogInterface
 import android.view.View
 import androidx.appcompat.app.AlertDialog
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -143,11 +144,11 @@ fun FilterScreen(navigator: DestinationsNavigator) {
                             )
                         }
                         items(filters) { filter ->
+                            val filterCheckBoxRecomposeScope = currentRecomposeScope
                             Row(
-                                modifier = Modifier.fillMaxWidth(),
+                                modifier = Modifier.fillMaxWidth().clickable { filter.trigger { filterCheckBoxRecomposeScope.invalidate() } },
                                 verticalAlignment = Alignment.CenterVertically,
                             ) {
-                                val filterCheckBoxRecomposeScope = currentRecomposeScope
                                 Checkbox(
                                     checked = filter.enable,
                                     onCheckedChange = { filter.trigger { filterCheckBoxRecomposeScope.invalidate() } },

app/src/main/kotlin/com/hippo/ehviewer/ui/tools/Dialog.kt

@@ -26,7 +26,6 @@ import androidx.compose.material.icons.filled.Info
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.AlertDialogDefaults
 import androidx.compose.material3.BasicAlertDialog
-import androidx.compose.material3.Checkbox
 import androidx.compose.material3.DatePicker
 import androidx.compose.material3.DatePickerDefaults
 import androidx.compose.material3.DatePickerDialog
@@ -235,16 +234,12 @@ class DialogState {
                             isError = error != null,
                             keyboardOptions = if (isNumber) KeyboardOptions(keyboardType = KeyboardType.Number) else KeyboardOptions.Default,
                         )
-                        Row(
-                            modifier = Modifier.clickable { checkedState = !checkedState }.fillMaxWidth(),
-                            verticalAlignment = Alignment.CenterVertically,
-                        ) {
-                            Checkbox(
-                                checked = checkedState,
-                                onCheckedChange = { checkedState = !checkedState },
-                            )
-                            Text(text = stringResource(checkBoxText))
-                        }
+                        LabeledCheckbox(
+                            modifier = Modifier.fillMaxWidth(),
+                            checked = checkedState,
+                            onCheckedChange = { checkedState = !checkedState },
+                            label = stringResource(checkBoxText),
+                        )
                     }
                 },
             )
@@ -488,16 +483,12 @@ class DialogState {
                     }
                 }
             }
-            Row(
-                modifier = Modifier.clickable { checked = !checked }.fillMaxWidth().padding(horizontal = 8.dp),
-                verticalAlignment = Alignment.CenterVertically,
-            ) {
-                Checkbox(
-                    checked = checked,
-                    onCheckedChange = { checked = !checked },
-                )
-                Text(text = stringResource(checkBoxText))
-            }
+            LabeledCheckbox(
+                modifier = Modifier.fillMaxWidth().padding(horizontal = 8.dp),
+                checked = checked,
+                onCheckedChange = { checked = !checked },
+                label = stringResource(checkBoxText),
+            )
         }
     }
 

app/src/main/kotlin/com/hippo/ehviewer/ui/tools/LabeledCheckbox.kt

@@ -0,0 +1,41 @@
+package com.hippo.ehviewer.ui.tools
+
+import androidx.compose.foundation.Indication
+import androidx.compose.foundation.LocalIndication
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Checkbox
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun LabeledCheckbox(
+    modifier: Modifier = Modifier,
+    checked: Boolean,
+    onCheckedChange: (Boolean) -> Unit,
+    label: String,
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    indication: Indication? = LocalIndication.current,
+) {
+    Row(
+        modifier = modifier
+            .clip(MaterialTheme.shapes.small)
+            .clickable(
+                interactionSource = interactionSource,
+                indication = indication,
+            ) { onCheckedChange(!checked) }
+            .padding(end = 12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Checkbox(checked = checked, onCheckedChange = onCheckedChange)
+        Text(text = label)
+    }
+}

app/src/main/res/values-zh-rCN/strings.xml

@@ -86,8 +86,8 @@
     <string name="search_specify_tag">指定标签</string>
     <string name="search_enable_advance">启用高级选项</string>
     <string name="search_tip">一般搜索：就是搜索。\n\n订阅搜素：在订阅中搜索。\n\n指定上传者：列出该上传者上传的画廊。其他选项会被忽略。\n\n指定标签：列出含有该标签的画廊。其他选项会被忽略。</string>
-    <string name="search_sh">仅显示被删除的画廊</string>
-    <string name="search_sto">仅显示有种子的画廊</string>
+    <string name="search_sh">仅被删除的画廊</string>
+    <string name="search_sto">仅有种子的画廊</string>
     <string name="search_sr">最低评分：</string>
     <string name="search_sp">页数：</string>
     <string name="search_sp_to">到</string>

app/src/main/res/values/strings.xml

@@ -124,8 +124,8 @@
     <string name="search_specify_tag">Specify tag</string>
     <string name="search_enable_advance">Enable advance options</string>
     <string name="search_tip">Normal search: Simply search.\n\nSubscription search: Search in subscriptions.\n\nSpecify uploader: Search for galleries uploaded by the specified uploader. All other options will be ignored.\n\nSpecify tag: Search for galleries that contain the specified tag. Only one tag accepted. Other options will be ignored.</string>
-    <string name="search_sh">Only Show Expunged Galleries</string>
-    <string name="search_sto">Only Show Galleries With Torrents</string>
+    <string name="search_sh">Expunged Galleries only</string>
+    <string name="search_sto">Require Gallery Torrent</string>
     <string name="search_sr">Minimum Rating:</string>
     <string name="search_sp">Pages:</string>
     <string name="search_sp_to">to</string>