Added a way to open unit groups screen from units list screen

app/src/main/java/com/sadellie/unitto/MainActivity.kt

@@ -123,6 +123,7 @@ fun UnittoApp(
                 currentUnit = mainViewModel.unitFrom,
                 navigateUp = { navController.navigateUp() },
                 selectAction = { mainViewModel.changeUnitFrom(it) },
+                navigateToSettingsActtion = { navController.navigate(UNIT_GROUPS_SCREEN) },
                 viewModel = secondViewModel
             )
         }

app/src/main/java/com/sadellie/unitto/screens/second/SecondScreen.kt

@@ -135,6 +135,7 @@ private fun BasicUnitListScreen(
  *
  * @param currentUnit Currently selected [AbstractUnit].
  * @param navigateUp Action to navigate up. Called when user click back button.
+ * @param navigateToSettingsActtion Action to perform when clicking settings chip at the end.
  * @param selectAction Action to perform when user clicks on [UnitListItem].
  * @param viewModel [SecondViewModel].
  */
@@ -142,6 +143,7 @@ private fun BasicUnitListScreen(
 fun LeftSideScreen(
     currentUnit: AbstractUnit,
     navigateUp: () -> Unit,
+    navigateToSettingsActtion: () -> Unit,
     selectAction: (AbstractUnit) -> Unit,
     viewModel: SecondViewModel
 ) = BasicUnitListScreen(
@@ -157,6 +159,7 @@ fun LeftSideScreen(
                 viewModel.toggleSelectedChip(it)
                 viewModel.loadUnitsToShow(true)
             },
+            navigateToSettingsActtion = navigateToSettingsActtion,
             lazyListState = lazyListState
         )
     },

app/src/main/java/com/sadellie/unitto/screens/second/components/ChipsRow.kt

@@ -25,6 +25,7 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyListState
@@ -33,6 +34,7 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Check
+import androidx.compose.material.icons.filled.Settings
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -53,6 +55,7 @@ import com.sadellie.unitto.data.units.UnitGroup
  * @param items All [UnitGroup]s
  * @param chosenUnitGroup Currently selected [UnitGroup]
  * @param selectAction Action to perform when a chip is clicked
+ * @param navigateToSettingsActtion Action to perform when clicking settings chip at the end
  * @param lazyListState Used for animated scroll when entering unit selection screen
  */
 @Composable
@@ -60,9 +63,9 @@ fun ChipsRow(
     items: List<UnitGroup> = ALL_UNIT_GROUPS,
     chosenUnitGroup: UnitGroup?,
     selectAction: (UnitGroup) -> Unit,
+    navigateToSettingsActtion: () -> Unit,
     lazyListState: LazyListState
 ) {
-    val chipShape = RoundedCornerShape(8.dp)
     LazyRow(
         modifier = Modifier.background(MaterialTheme.colorScheme.background),
         state = lazyListState,
@@ -71,25 +74,9 @@ fun ChipsRow(
     ) {
         items(items, key = { it.name }) { item ->
             val isSelected: Boolean = item == chosenUnitGroup
-            Row(
+            UnittoFilterChip(
-                modifier = Modifier
+                isSelected = isSelected,
-                    .height(32.dp)
+                selectAction = { selectAction(item) }
-                    .clip(chipShape)
-                    .background(
-                        if (isSelected) MaterialTheme.colorScheme.secondaryContainer else Color.Transparent
-                    )
-                    // Remove border when selected
-                    .border(
-                        1.dp,
-                        if (isSelected) Color.Transparent else MaterialTheme.colorScheme.outline,
-                        chipShape
-                    )
-                    .clickable { selectAction(item) }
-                    .padding(
-                        start = 8.dp,
-                        end = 16.dp
-                    ),
-                verticalAlignment = Alignment.CenterVertically
             ) {
                 AnimatedVisibility(visible = isSelected) {
                     Icon(
@@ -106,5 +93,61 @@ fun ChipsRow(
                 )
             }
         }
+
+        /**
+         * Usually this chip is placed at the start, but since we scroll to currently selected
+         * chip, user may never find it. There is higher chance that user will notice this chip when
+         * scrolling right (to the last one).
+         */
+        item("settings") {
+            UnittoFilterChip(
+                isSelected = false,
+                selectAction = navigateToSettingsActtion,
+                paddingValues = PaddingValues(horizontal = 8.dp)
+            ) {
+                Icon(
+                    modifier = Modifier.height(18.dp),
+                    imageVector = Icons.Default.Settings,
+                    contentDescription = stringResource(id = R.string.open_settings_description)
+                )
+            }
+        }
+    }
+}
+
+/**
+ * Basic chip implementation
+ *
+ * @param isSelected Chip state.
+ * @param selectAction Action to perform when clicking chip.
+ * @param paddingValues Padding values applied to Row.
+ * @param content Content of the list. Icon and/or label.
+ */
+@Composable
+private fun UnittoFilterChip(
+    isSelected: Boolean,
+    selectAction: () -> Unit,
+    paddingValues: PaddingValues = PaddingValues(start = 8.dp, end = 16.dp),
+    content: @Composable RowScope.() -> Unit
+) {
+    val chipShape = RoundedCornerShape(8.dp)
+    Row(
+        modifier = Modifier
+            .height(32.dp)
+            .clip(chipShape)
+            .background(
+                if (isSelected) MaterialTheme.colorScheme.secondaryContainer else Color.Transparent
+            )
+            // Remove border when selected
+            .border(
+                1.dp,
+                if (isSelected) Color.Transparent else MaterialTheme.colorScheme.outline,
+                chipShape
+            )
+            .clickable { selectAction() }
+            .padding(paddingValues),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        content()
     }
 }