Update sort menu design

app/src/main/java/org/tasks/dialogs/SortSettingsActivity.kt

@@ -13,6 +13,7 @@ import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -21,16 +22,15 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.Chip
-import androidx.compose.material.ChipDefaults
 import androidx.compose.material.ContentAlpha
-import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.ArrowDownward
 import androidx.compose.material.icons.outlined.ArrowUpward
+import androidx.compose.material.icons.outlined.ExpandCircleDown
+import androidx.compose.material.icons.outlined.SwapVert
 import androidx.compose.material3.Divider
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ModalBottomSheet
@@ -45,7 +45,9 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.tooling.preview.Preview
@@ -409,84 +411,41 @@ fun BottomSheetContent(
     clickSortMode: () -> Unit,
     clickCompletedMode: () -> Unit,
 ) {
-    Row(
+    SortRow(
-        modifier = Modifier.padding(16.dp),
+        title = R.string.sort_grouping,
-        verticalAlignment = Alignment.CenterVertically,
+        icon = Icons.Outlined.ExpandCircleDown,
-    ) {
+        ascending = groupAscending,
-        Column(
+        sortMode = groupMode,
-            modifier = Modifier
+        showAscending = groupMode != SortHelper.GROUP_NONE,
-                .verticalScroll(rememberScrollState())
+        onClick = clickGroupMode,
-                .weight(1f)
+        setAscending = setGroupAscending
-                .clickable { clickGroupMode() }
+    )
-        ) {
+    SortRow(
-            Text(
+        title = R.string.sort_sorting,
-                text = stringResource(id = R.string.sort_grouping),
+        body = remember(manualSort, astridSort, sortMode) {
-                style = MaterialTheme.typography.h6,
+            when {
-            )
+                manualSort -> R.string.SSD_sort_my_order
-            Text(
+                astridSort -> R.string.astrid_sort_order
-                text = stringResource(id = groupMode.modeString),
+                else -> sortMode.modeString
-                style = MaterialTheme.typography.body1,
-            )
-        }
-        if (groupMode != SortHelper.GROUP_NONE) {
-            Spacer(modifier = Modifier.width(16.dp))
-            val displayAscending = when (groupMode) {
-                SortHelper.SORT_IMPORTANCE -> !groupAscending
-                else -> groupAscending
-            }
-            OrderingChip(
-                ascending = displayAscending,
-                onClick = { setGroupAscending(!groupAscending) }
-            )
-        }
-    }
-    Row(
-        modifier = Modifier.padding(16.dp),
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-        Column(
-            modifier = Modifier
-                .weight(1f)
-                .clickable { clickSortMode() }
-        ) {
-            Text(
-                text = stringResource(id = R.string.sort_sorting),
-                style = MaterialTheme.typography.h6,
-            )
-            Text(
-                text = stringResource(
-                    id = when {
-                        manualSort -> R.string.SSD_sort_my_order
-                        astridSort -> R.string.astrid_sort_order
-                        else -> sortMode.modeString
-                    }
-                ),
-                style = MaterialTheme.typography.body1,
-            )
-        }
-        if (!(manualSort || astridSort)) {
-            Spacer(modifier = Modifier.width(16.dp))
-            val displayAscending = when (sortMode) {
-                SortHelper.SORT_AUTO,
-                SortHelper.SORT_IMPORTANCE -> !sortAscending
-                else -> sortAscending
             }
-            OrderingChip(
+        },
-                ascending = displayAscending,
+        ascending = sortAscending,
-                onClick = { setSortAscending(!sortAscending) }
+        sortMode = sortMode,
-            )
+        showAscending = !(manualSort || astridSort),
-        }
+        onClick = clickSortMode,
-    }
+        setAscending = setSortAscending,
+    )
     if (!astridSort) {
         Divider(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(vertical = 8.dp)
                 .height(1.dp)
         )
         Row(
             verticalAlignment = Alignment.CenterVertically,
-            modifier = Modifier.padding(horizontal = 16.dp)
+            modifier = Modifier
+                .padding(horizontal = 16.dp)
+                .clickable { setCompletedAtBottom(!completedAtBottom) },
         ) {
             Text(
                 text = stringResource(R.string.completed_tasks_at_bottom),
@@ -499,64 +458,93 @@ fun BottomSheetContent(
             )
         }
         if (completedAtBottom) {
-            Row(
+            Divider(
-                modifier = Modifier.padding(16.dp),
+                modifier = Modifier
-                verticalAlignment = Alignment.CenterVertically,
+                    .fillMaxWidth()
-            ) {
+                    .height(1.dp)
-                Column(
+            )
-                    modifier = Modifier
+            SortRow(
-                        .weight(1f)
+                title = R.string.completed,
-                        .clickable { clickCompletedMode() }
+                ascending = completedAscending,
-                ) {
+                sortMode = completedMode,
-                    Text(
+                onClick = clickCompletedMode,
-                        text = stringResource(id = R.string.completed),
+                setAscending = setCompletedAscending,
-                        style = MaterialTheme.typography.h6,
+            )
-                    )
-                    Text(
-                        text = stringResource(id = completedMode.modeString),
-                        style = MaterialTheme.typography.body1,
-                    )
-                }
-                Spacer(modifier = Modifier.width(16.dp))
-                val displayAscending = when (completedMode) {
-                    SortHelper.SORT_IMPORTANCE -> !completedAscending
-                    else -> completedAscending
-                }
-                OrderingChip(
-                    ascending = displayAscending,
-                    onClick = { setCompletedAscending(!completedAscending) }
-                )
-            }
         }
     }
 }
 
-@OptIn(ExperimentalMaterialApi::class)
 @Composable
-fun OrderingChip(
+fun SortRow(
+    icon: ImageVector = Icons.Outlined.SwapVert,
+    title: Int,
     ascending: Boolean,
+    sortMode: Int,
+    body: Int = remember(sortMode) { sortMode.modeString },
+    showAscending: Boolean = true,
     onClick: () -> Unit,
+    setAscending: (Boolean) -> Unit,
 ) {
-    Chip(
+    Row(
-        onClick = onClick,
+        modifier = Modifier
-        shape = RoundedCornerShape(4.dp),
+            .clickable { onClick() }
-        border = ChipDefaults.outlinedBorder,
+            .padding(16.dp),
-        colors = ChipDefaults.outlinedChipColors(),
+        verticalAlignment = Alignment.CenterVertically,
-        leadingIcon = {
+    ) {
-            Icon(
+        Icon(
-                imageVector = if (ascending) Icons.Outlined.ArrowUpward else Icons.Outlined.ArrowDownward,
+            imageVector = icon,
-                modifier = Modifier.size(16.dp),
+            contentDescription = null,
-                contentDescription = null,
+            modifier = Modifier
-            )
+                .padding(end = 16.dp)
-        },
+                .size(24.dp)
-        content = {
+                .alpha(ContentAlpha.medium),
-            Text(
+        )
-                text = stringResource(id = if (ascending) R.string.sort_ascending else R.string.sort_descending),
+        Column(modifier = Modifier.weight(1f)) {
-                style = MaterialTheme.typography.body1,
+            Text(text = stringResource(id = title), style = MaterialTheme.typography.body1)
+            Text(text = stringResource(id = body), style = MaterialTheme.typography.body2)
+        }
+        if (showAscending) {
+            Spacer(modifier = Modifier.width(16.dp))
+            val displayAscending = when (sortMode) {
+                SortHelper.SORT_AUTO,
+                SortHelper.SORT_IMPORTANCE -> !ascending
+
+                else -> ascending
+            }
+            OrderingButton(
+                ascending = displayAscending,
+                onClick = { setAscending(!ascending) }
             )
-        },
+        }
-    )
+    }
+}
 
+@Composable
+fun OrderingButton(
+    ascending: Boolean,
+    onClick: () -> Unit,
+) {
+    Row(
+        modifier = Modifier
+            .height(32.dp)
+            .clickable { onClick() },
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Divider(modifier = Modifier
+            .width(1.dp)
+            .fillMaxHeight())
+        Icon(
+            imageVector = if (ascending) Icons.Outlined.ArrowUpward else Icons.Outlined.ArrowDownward,
+            modifier = Modifier
+                .padding(horizontal = 8.dp)
+                .size(16.dp),
+            contentDescription = null,
+        )
+        Text(
+            text = stringResource(id = if (ascending) R.string.sort_ascending else R.string.sort_descending),
+            style = MaterialTheme.typography.body2,
+        )
+    }
 }
 
 private val Int.modeString: Int