Bug 1885602 - Part 3: Add MenuHeader for the menu redesign r=android-reviewers,007

Source: https://www.figma.com/file/RFz9fYtotQCQuinwcZujZt/Menu-Redesign?type=design&node-id=9940-23719&mode=dev

Differential Revision: https://phabricator.services.mozilla.com/D207054

mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/MenuDialogFragment.kt

@@ -14,6 +14,7 @@ import androidx.compose.ui.platform.ViewCompositionStrategy
 import com.google.android.material.bottomsheet.BottomSheetBehavior
 import com.google.android.material.bottomsheet.BottomSheetDialogFragment
 import org.mozilla.fenix.R
+import org.mozilla.fenix.components.accounts.AccountState
 import org.mozilla.fenix.components.menu.compose.MenuDialog
 import org.mozilla.fenix.components.menu.compose.MenuDialogBottomSheet
 import org.mozilla.fenix.theme.FirefoxTheme
@@ -44,7 +45,13 @@ class MenuDialogFragment : BottomSheetDialogFragment() {
         setContent {
             FirefoxTheme {
                 MenuDialogBottomSheet(onRequestDismiss = {}) {
-                    MenuDialog()
+                    MenuDialog(
+                        account = null,
+                        accountState = AccountState.NO_ACCOUNT,
+                        onSignInButtonClick = {},
+                        onHelpButtonClick = {},
+                        onSettingsButtonClick = {},
+                    )
                 }
             }
         }

mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MenuDialog.kt

@@ -7,6 +7,8 @@ package org.mozilla.fenix.components.menu.compose
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -14,7 +16,11 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import mozilla.components.service.fxa.store.Account
 import org.mozilla.fenix.R
+import org.mozilla.fenix.components.accounts.AccountState
+import org.mozilla.fenix.components.accounts.AccountState.NO_ACCOUNT
+import org.mozilla.fenix.components.menu.compose.header.MenuHeader
 import org.mozilla.fenix.compose.Divider
 import org.mozilla.fenix.compose.annotation.LightDarkPreview
 import org.mozilla.fenix.compose.list.IconListItem
@@ -23,10 +29,32 @@ import org.mozilla.fenix.theme.Theme
 
 /**
  * The menu bottom sheet dialog.
+ *
+ * @param account [Account] information available for a synced account.
+ * @param accountState The [AccountState] of a synced account.
+ * @param onSignInButtonClick Invoked when the user clicks on the "Sign in" button.
+ * @param onHelpButtonClick Invoked when the user clicks on the help button.
+ * @param onSettingsButtonClick Invoked when the user clicks on the settings button.
  */
 @Composable
-fun MenuDialog() {
+fun MenuDialog(
+    account: Account?,
+    accountState: AccountState,
+    onSignInButtonClick: () -> Unit,
+    onHelpButtonClick: () -> Unit,
+    onSettingsButtonClick: () -> Unit,
+) {
     Column {
+        MenuHeader(
+            account = account,
+            accountState = accountState,
+            onSignInButtonClick = onSignInButtonClick,
+            onHelpButtonClick = onHelpButtonClick,
+            onSettingsButtonClick = onSettingsButtonClick,
+        )
+
+        Spacer(modifier = Modifier.height(8.dp))
+
         MainMenu()
     }
 }
@@ -70,7 +98,13 @@ private fun MenuDialogPreview() {
             modifier = Modifier
                 .background(color = FirefoxTheme.colors.layer3),
         ) {
-            MenuDialog()
+            MenuDialog(
+                account = null,
+                accountState = NO_ACCOUNT,
+                onSignInButtonClick = {},
+                onHelpButtonClick = {},
+                onSettingsButtonClick = {},
+            )
         }
     }
 }
@@ -83,7 +117,13 @@ private fun MenuDialogPrivatePreview() {
             modifier = Modifier
                 .background(color = FirefoxTheme.colors.layer3),
         ) {
-            MenuDialog()
+            MenuDialog(
+                account = null,
+                accountState = NO_ACCOUNT,
+                onSignInButtonClick = {},
+                onHelpButtonClick = {},
+                onSettingsButtonClick = {},
+            )
         }
     }
 }

mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/header/MenuHeader.kt

@@ -0,0 +1,115 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+package org.mozilla.fenix.components.menu.compose.header
+
+import androidx.compose.foundation.background
+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.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import mozilla.components.service.fxa.store.Account
+import org.mozilla.fenix.R
+import org.mozilla.fenix.components.accounts.AccountState
+import org.mozilla.fenix.components.accounts.AccountState.NO_ACCOUNT
+import org.mozilla.fenix.compose.Divider
+import org.mozilla.fenix.compose.annotation.LightDarkPreview
+import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
+
+@Composable
+internal fun MenuHeader(
+    account: Account?,
+    accountState: AccountState,
+    onSignInButtonClick: () -> Unit,
+    onHelpButtonClick: () -> Unit,
+    onSettingsButtonClick: () -> Unit,
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(start = 12.dp, end = 6.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        MozillaAccountMenuButton(
+            account = account,
+            accountState = accountState,
+            onSignInButtonClick = onSignInButtonClick,
+            modifier = Modifier.weight(1f),
+        )
+
+        Spacer(modifier = Modifier.width(8.dp))
+
+        Divider(modifier = Modifier.size(width = 2.dp, height = 32.dp))
+
+        IconButton(
+            onClick = onHelpButtonClick,
+        ) {
+            Icon(
+                painter = painterResource(id = R.drawable.mozac_ic_help_circle_24),
+                contentDescription = null,
+                tint = FirefoxTheme.colors.iconSecondary,
+            )
+        }
+
+        IconButton(
+            onClick = onSettingsButtonClick,
+        ) {
+            Icon(
+                painter = painterResource(id = R.drawable.mozac_ic_settings_24),
+                contentDescription = null,
+                tint = FirefoxTheme.colors.iconSecondary,
+            )
+        }
+    }
+}
+
+@LightDarkPreview
+@Composable
+private fun MenuHeaderPreview() {
+    FirefoxTheme {
+        Column(
+            modifier = Modifier
+                .background(color = FirefoxTheme.colors.layer3),
+        ) {
+            MenuHeader(
+                account = null,
+                accountState = NO_ACCOUNT,
+                onSignInButtonClick = {},
+                onHelpButtonClick = {},
+                onSettingsButtonClick = {},
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun MenuHeaderPrivatePreview() {
+    FirefoxTheme(theme = Theme.Private) {
+        Column(
+            modifier = Modifier
+                .background(color = FirefoxTheme.colors.layer3),
+        ) {
+            MenuHeader(
+                account = null,
+                accountState = NO_ACCOUNT,
+                onSignInButtonClick = {},
+                onHelpButtonClick = {},
+                onSettingsButtonClick = {},
+            )
+        }
+    }
+}