PM-16622 PM-16623 and PM-16624 adding the first three coachmarks to t…

…he segemented controls along with how the nav bar scrim shows

more

app/src/main/java/com/x8bit/bitwarden/ui/platform/components/segment/BitwardenSegmentedButton.kt

@@ -14,6 +14,7 @@ import androidx.compose.foundation.layout.union
 import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.material3.SegmentedButton
 import androidx.compose.material3.SingleChoiceSegmentedButtonRow
+import androidx.compose.material3.SingleChoiceSegmentedButtonRowScope
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -32,13 +33,19 @@ import kotlinx.collections.immutable.ImmutableList
  * @param modifier Modifier.
  * @param windowInsets The insets to be applied to this composable.
  */
+@Suppress("MaxLineLength")
 @Composable
 fun BitwardenSegmentedButton(
     options: ImmutableList<SegmentedButtonState>,
     modifier: Modifier = Modifier,
     windowInsets: WindowInsets = WindowInsets.displayCutout
         .union(WindowInsets.navigationBars)
         .only(WindowInsetsSides.Horizontal),
+    optionContent: @Composable SingleChoiceSegmentedButtonRowScope.(SegmentedButtonState) -> Unit = {
+        this.SegmentedButtonOptionContent(
+            option = it,
+        )
+    },
 ) {
     if (options.isEmpty()) return
     Box(
@@ -57,30 +64,40 @@ fun BitwardenSegmentedButton(
                 .padding(horizontal = 4.dp),
             space = 0.dp,
         ) {
-            options.forEachIndexed { index, option ->
-                SegmentedButton(
-                    enabled = option.isEnabled,
-                    selected = option.isChecked,
-                    onClick = option.onClick,
-                    colors = bitwardenSegmentedButtonColors(),
-                    shape = BitwardenTheme.shapes.segmentedControl,
-                    border = BorderStroke(width = 0.dp, color = Color.Transparent),
-                    label = {
-                        Text(
-                            text = option.text,
-                            style = BitwardenTheme.typography.labelLarge,
-                        )
-                    },
-                    icon = {
-                        // No icon required
-                    },
-                    modifier = Modifier.semantics { option.testTag?.let { testTag = it } },
-                )
+            options.forEach { option ->
+                optionContent(option)
             }
         }
     }
 }
 
+/**
+ * Default content definition for each option in a [BitwardenSegmentedButton].
+ */
+@Composable
+fun SingleChoiceSegmentedButtonRowScope.SegmentedButtonOptionContent(
+    option: SegmentedButtonState,
+) {
+    SegmentedButton(
+        enabled = option.isEnabled,
+        selected = option.isChecked,
+        onClick = option.onClick,
+        colors = bitwardenSegmentedButtonColors(),
+        shape = BitwardenTheme.shapes.segmentedControl,
+        border = BorderStroke(width = 0.dp, color = Color.Transparent),
+        label = {
+            Text(
+                text = option.text,
+                style = BitwardenTheme.typography.labelLarge,
+            )
+        },
+        icon = {
+            // No icon required
+        },
+        modifier = Modifier.semantics { option.testTag?.let { testTag = it } },
+    )
+}
+
 /**
  * Models state for an individual button in a [BitwardenSegmentedButton].
  */

app/src/main/java/com/x8bit/bitwarden/ui/platform/feature/vaultunlockednavbar/VaultUnlockedNavBarScreen.kt

@@ -15,6 +15,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.onGloballyPositioned
@@ -172,7 +173,11 @@ private fun VaultUnlockedNavBarScaffold(
     onNavigateToSetupAutoFillScreen: () -> Unit,
     onNavigateToImportLogins: (SnackbarRelay) -> Unit,
 ) {
-    var shouldDimNavBar by remember { mutableStateOf(false) }
+    var shouldDimNavBar by rememberSaveable { mutableStateOf(false) }
+    // This does not need to be saved as we only want to capture click for the current composition.
+    val navBarScrimClickCount = remember {
+        mutableIntStateOf(0)
+    }
 
     // This scaffold will host screens that contain top bars while not hosting one itself.
     // We need to ignore the all insets here and let the content screens handle it themselves.
@@ -197,7 +202,7 @@ private fun VaultUnlockedNavBarScaffold(
                 BitwardenAnimatedScrim(
                     isVisible = shouldDimNavBar,
                     onClick = {
-                        // Do nothing
+                        navBarScrimClickCount.value += 1
                     },
                     modifier = Modifier
                         .fillMaxWidth()
@@ -239,6 +244,10 @@ private fun VaultUnlockedNavBarScaffold(
             )
             generatorGraph(
                 onNavigateToPasswordHistory = { navigateToPasswordHistory() },
+                onDimNavBarRequest = { shouldDim ->
+                    shouldDimNavBar = shouldDim
+                },
+                scrimClickCount = navBarScrimClickCount,
             )
             settingsGraph(
                 navController = navController,

app/src/main/java/com/x8bit/bitwarden/ui/tools/feature/generator/GeneratorGraphNavigation.kt

@@ -1,5 +1,6 @@
 package com.x8bit.bitwarden.ui.tools.feature.generator
 
+import androidx.compose.runtime.State
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.NavOptions
@@ -12,13 +13,17 @@ const val GENERATOR_GRAPH_ROUTE: String = "generator_graph"
  */
 fun NavGraphBuilder.generatorGraph(
     onNavigateToPasswordHistory: () -> Unit,
+    onDimNavBarRequest: (Boolean) -> Unit,
+    scrimClickCount: State<Int>,
 ) {
     navigation(
         route = GENERATOR_GRAPH_ROUTE,
         startDestination = GENERATOR_ROUTE,
     ) {
         generatorDestination(
             onNavigateToPasswordHistory = onNavigateToPasswordHistory,
+            onDimNavBarRequest = onDimNavBarRequest,
+            scrimClickCount = scrimClickCount,
         )
     }
 }

app/src/main/java/com/x8bit/bitwarden/ui/tools/feature/generator/GeneratorNavigation.kt

@@ -1,5 +1,8 @@
 package com.x8bit.bitwarden.ui.tools.feature.generator
 
+import androidx.compose.runtime.State
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.remember
 import androidx.lifecycle.SavedStateHandle
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
@@ -48,11 +51,15 @@ data class GeneratorArgs(
  */
 fun NavGraphBuilder.generatorDestination(
     onNavigateToPasswordHistory: () -> Unit,
+    onDimNavBarRequest: (Boolean) -> Unit,
+    scrimClickCount: State<Int>,
 ) {
     composable(GENERATOR_ROUTE) {
         GeneratorScreen(
             onNavigateToPasswordHistory = onNavigateToPasswordHistory,
             onNavigateBack = {},
+            onDimNavBarRequest = onDimNavBarRequest,
+            scrimClickCount = scrimClickCount,
         )
     }
 }
@@ -76,6 +83,10 @@ fun NavGraphBuilder.generatorModalDestination(
         GeneratorScreen(
             onNavigateToPasswordHistory = {},
             onNavigateBack = onNavigateBack,
+            onDimNavBarRequest = {},
+            scrimClickCount = remember {
+                mutableIntStateOf(0)
+            },
         )
     }
 }