Improve TV connect screen UI

android/CHANGELOG.md

@@ -29,6 +29,8 @@ Line wrap the file at 100 chars.                                              Th
 ### Changed
 - Disable Wireguard port setting when a obfuscation is selected since it is not used when an
   obfuscation is applied.
+- Adapt UI on Connect Screen for Android TV, including a navigation rail and redesigned in-app
+  notification bar.
 
 ### Removed
 - Remove Google's resolvers from encrypted DNS proxy.

android/app/build.gradle.kts

@@ -372,6 +372,8 @@ dependencies {
     implementation(projects.lib.resource)
     implementation(projects.lib.shared)
     implementation(projects.lib.talpid)
+    implementation(projects.lib.tv)
+    implementation(projects.lib.ui.component)
     implementation(projects.tile)
     implementation(projects.lib.theme)
     implementation(projects.service)
@@ -388,6 +390,7 @@ dependencies {
     implementation(libs.androidx.lifecycle.runtime)
     implementation(libs.androidx.lifecycle.viewmodel)
     implementation(libs.androidx.lifecycle.runtime.compose)
+    implementation(libs.androidx.tv)
     implementation(libs.arrow)
     implementation(libs.arrow.optics)
     implementation(libs.arrow.resilience)

android/app/src/androidTest/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreenTest.kt

@@ -19,20 +19,20 @@ import net.mullvad.mullvadvpn.compose.state.ConnectUiState
 import net.mullvad.mullvadvpn.compose.test.CIRCULAR_PROGRESS_INDICATOR
 import net.mullvad.mullvadvpn.compose.test.CONNECT_BUTTON_TEST_TAG
 import net.mullvad.mullvadvpn.compose.test.CONNECT_CARD_HEADER_TEST_TAG
-import net.mullvad.mullvadvpn.compose.test.NOTIFICATION_BANNER_ACTION
-import net.mullvad.mullvadvpn.compose.test.NOTIFICATION_BANNER_TEXT_ACTION
 import net.mullvad.mullvadvpn.compose.test.RECONNECT_BUTTON_TEST_TAG
 import net.mullvad.mullvadvpn.compose.test.SELECT_LOCATION_BUTTON_TEST_TAG
 import net.mullvad.mullvadvpn.compose.test.TOP_BAR_ACCOUNT_BUTTON
 import net.mullvad.mullvadvpn.lib.model.ActionAfterDisconnect
 import net.mullvad.mullvadvpn.lib.model.ErrorState
 import net.mullvad.mullvadvpn.lib.model.ErrorStateCause
 import net.mullvad.mullvadvpn.lib.model.GeoIpLocation
+import net.mullvad.mullvadvpn.lib.model.InAppNotification
 import net.mullvad.mullvadvpn.lib.model.TransportProtocol
 import net.mullvad.mullvadvpn.lib.model.TunnelEndpoint
 import net.mullvad.mullvadvpn.lib.model.TunnelState
-import net.mullvad.mullvadvpn.repository.InAppNotification
-import net.mullvad.mullvadvpn.ui.VersionInfo
+import net.mullvad.mullvadvpn.lib.model.VersionInfo
+import net.mullvad.mullvadvpn.lib.ui.component.test.NOTIFICATION_BANNER_ACTION
+import net.mullvad.mullvadvpn.lib.ui.component.test.NOTIFICATION_BANNER_TEXT_ACTION
 import org.junit.jupiter.api.AfterEach
 import org.junit.jupiter.api.BeforeEach
 import org.junit.jupiter.api.Test

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/notificationbanner/NotificationBanner.kt

@@ -1,49 +1,25 @@
 package net.mullvad.mullvadvpn.compose.component.notificationbanner
 
-import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.animateContentSize
-import androidx.compose.animation.slideInVertically
-import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 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.wrapContentWidth
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.platform.testTag
-import androidx.compose.ui.semantics.Role
-import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.text.toUpperCase
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.constraintlayout.compose.ConstraintLayout
-import androidx.constraintlayout.compose.Dimension
 import java.time.Duration
 import net.mullvad.mullvadvpn.compose.component.MullvadTopBar
-import net.mullvad.mullvadvpn.compose.test.NOTIFICATION_BANNER
-import net.mullvad.mullvadvpn.compose.test.NOTIFICATION_BANNER_ACTION
-import net.mullvad.mullvadvpn.compose.test.NOTIFICATION_BANNER_TEXT_ACTION
-import net.mullvad.mullvadvpn.compose.util.rememberPrevious
+import net.mullvad.mullvadvpn.compose.util.isTv
 import net.mullvad.mullvadvpn.lib.model.ErrorState
 import net.mullvad.mullvadvpn.lib.model.ErrorStateCause
+import net.mullvad.mullvadvpn.lib.model.InAppNotification
+import net.mullvad.mullvadvpn.lib.model.VersionInfo
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
-import net.mullvad.mullvadvpn.lib.theme.Dimens
-import net.mullvad.mullvadvpn.lib.theme.color.warning
-import net.mullvad.mullvadvpn.repository.InAppNotification
-import net.mullvad.mullvadvpn.ui.VersionInfo
-import net.mullvad.mullvadvpn.ui.notification.StatusLevel
+import net.mullvad.mullvadvpn.lib.tv.NotificationBannerTv
+import net.mullvad.mullvadvpn.lib.ui.component.AnimatedNotificationBanner
 
 @Preview
 @Composable
@@ -52,18 +28,17 @@ private fun PreviewNotificationBanner() {
         Column(Modifier.background(color = MaterialTheme.colorScheme.surface)) {
             val bannerDataList =
                 listOf(
-                        InAppNotification.UnsupportedVersion(
-                            versionInfo = VersionInfo(currentVersion = "1.0", isSupported = false)
-                        ),
-                        InAppNotification.AccountExpiry(expiry = Duration.ZERO),
-                        InAppNotification.TunnelStateBlocked,
-                        InAppNotification.NewDevice("Courageous Turtle"),
-                        InAppNotification.TunnelStateError(
-                            error = ErrorState(ErrorStateCause.FirewallPolicyError.Generic, true)
-                        ),
-                        InAppNotification.NewVersionChangelog,
-                    )
-                    .map { it.toNotificationData(false, {}, {}, {}, {}, {}) }
+                    InAppNotification.UnsupportedVersion(
+                        versionInfo = VersionInfo(currentVersion = "1.0", isSupported = false)
+                    ),
+                    InAppNotification.AccountExpiry(expiry = Duration.ZERO),
+                    InAppNotification.TunnelStateBlocked,
+                    InAppNotification.NewDevice("Courageous Turtle"),
+                    InAppNotification.TunnelStateError(
+                        error = ErrorState(ErrorStateCause.FirewallPolicyError.Generic, true)
+                    ),
+                    InAppNotification.NewVersionChangelog,
+                )
 
             bannerDataList.forEach {
                 MullvadTopBar(
@@ -72,7 +47,15 @@ private fun PreviewNotificationBanner() {
                     onAccountClicked = {},
                     iconTintColor = MaterialTheme.colorScheme.primary,
                 )
-                Notification(it)
+                NotificationBanner(
+                    notification = it,
+                    isPlayBuild = false,
+                    openAppListing = {},
+                    onClickShowAccount = {},
+                    onClickShowChangelog = {},
+                    onClickDismissChangelog = {},
+                    onClickDismissNewDevice = {},
+                )
                 Spacer(modifier = Modifier.size(16.dp))
             }
         }
@@ -90,163 +73,28 @@ fun NotificationBanner(
     onClickDismissChangelog: () -> Unit,
     onClickDismissNewDevice: () -> Unit,
 ) {
-    // Fix for animating to invisible state
-    val previous = rememberPrevious(current = notification, shouldUpdate = { _, _ -> true })
-    AnimatedVisibility(
-        visible = notification != null,
-        enter = slideInVertically(initialOffsetY = { -it }),
-        exit = slideOutVertically(targetOffsetY = { -it }),
-        modifier = modifier,
-    ) {
-        val visibleNotification = notification ?: previous
-        if (visibleNotification != null)
-            Notification(
-                visibleNotification.toNotificationData(
-                    isPlayBuild = isPlayBuild,
-                    openAppListing,
-                    onClickShowAccount,
-                    onClickShowChangelog,
-                    onClickDismissChangelog,
-                    onClickDismissNewDevice,
-                )
-            )
-    }
-}
-
-@Composable
-@Suppress("LongMethod")
-private fun Notification(notificationBannerData: NotificationData) {
-    val (title, message, statusLevel, action) = notificationBannerData
-    ConstraintLayout(
-        modifier =
-            Modifier.fillMaxWidth()
-                .background(color = MaterialTheme.colorScheme.surfaceContainer)
-                .padding(
-                    start = Dimens.notificationBannerStartPadding,
-                    end = Dimens.notificationBannerEndPadding,
-                    top = Dimens.smallPadding,
-                    bottom = Dimens.smallPadding,
-                )
-                .animateContentSize()
-                .testTag(NOTIFICATION_BANNER)
-    ) {
-        val (status, textTitle, textMessage, actionIcon) = createRefs()
-        NotificationDot(
-            statusLevel,
-            Modifier.constrainAs(status) {
-                top.linkTo(textTitle.top)
-                start.linkTo(parent.start)
-                bottom.linkTo(textTitle.bottom)
-            },
-        )
-        Text(
-            text = title.toUpperCase(),
-            modifier =
-                Modifier.constrainAs(textTitle) {
-                        top.linkTo(parent.top)
-                        start.linkTo(status.end)
-                        if (message != null) {
-                            bottom.linkTo(textMessage.top)
-                        } else {
-                            bottom.linkTo(parent.bottom)
-                        }
-                        if (action != null) {
-                            end.linkTo(actionIcon.start)
-                        } else {
-                            end.linkTo(parent.end)
-                        }
-                        width = Dimension.fillToConstraints
-                    }
-                    .padding(start = Dimens.smallPadding),
-            style = MaterialTheme.typography.bodySmall,
-            color = MaterialTheme.colorScheme.onSurface,
-            maxLines = 1,
-            overflow = TextOverflow.Ellipsis,
+    if (isTv()) {
+        NotificationBannerTv(
+            modifier = modifier,
+            notification = notification,
+            isPlayBuild = isPlayBuild,
+            openAppListing = openAppListing,
+            onClickShowAccount = onClickShowAccount,
+            onClickShowChangelog = onClickShowChangelog,
+            onClickDismissChangelog = onClickDismissChangelog,
+            onClickDismissNewDevice = onClickDismissNewDevice,
         )
-        message?.let { message ->
-            Text(
-                text = message.text,
-                modifier =
-                    Modifier.constrainAs(textMessage) {
-                            top.linkTo(textTitle.bottom)
-                            start.linkTo(textTitle.start)
-                            if (action != null) {
-                                end.linkTo(actionIcon.start)
-                                bottom.linkTo(parent.bottom)
-                            } else {
-                                end.linkTo(parent.end)
-                                bottom.linkTo(parent.bottom)
-                            }
-                            width = Dimension.fillToConstraints
-                            height = Dimension.wrapContent
-                        }
-                        .padding(start = Dimens.smallPadding, top = Dimens.tinyPadding)
-                        .wrapContentWidth(Alignment.Start)
-                        .let {
-                            if (message is NotificationMessage.ClickableText) {
-                                it.clickable(
-                                        onClickLabel = message.contentDescription,
-                                        role = Role.Button,
-                                    ) {
-                                        message.onClick()
-                                    }
-                                    .testTag(NOTIFICATION_BANNER_TEXT_ACTION)
-                            } else {
-                                it
-                            }
-                        },
-                color = MaterialTheme.colorScheme.onSurfaceVariant,
-                style = MaterialTheme.typography.labelMedium,
-            )
-        }
-        action?.let {
-            NotificationAction(
-                it.icon,
-                onClick = it.onClick,
-                contentDescription = it.contentDescription,
-                modifier =
-                    Modifier.constrainAs(actionIcon) {
-                        top.linkTo(parent.top)
-                        end.linkTo(parent.end)
-                        bottom.linkTo(parent.bottom)
-                    },
-            )
-        }
-    }
-}
-
-@Composable
-private fun NotificationDot(statusLevel: StatusLevel, modifier: Modifier) {
-    Box(
-        modifier =
-            modifier
-                .background(
-                    color =
-                        when (statusLevel) {
-                            StatusLevel.Error -> MaterialTheme.colorScheme.error
-                            StatusLevel.Warning -> MaterialTheme.colorScheme.warning
-                            StatusLevel.Info -> MaterialTheme.colorScheme.tertiary
-                        },
-                    shape = CircleShape,
-                )
-                .size(Dimens.notificationStatusIconSize)
-    )
-}
-
-@Composable
-private fun NotificationAction(
-    imageVector: ImageVector,
-    contentDescription: String?,
-    onClick: () -> Unit,
-    modifier: Modifier = Modifier,
-) {
-
-    IconButton(modifier = modifier.testTag(NOTIFICATION_BANNER_ACTION), onClick = onClick) {
-        Icon(
-            modifier = Modifier.padding(Dimens.notificationIconPadding),
-            imageVector = imageVector,
-            contentDescription = contentDescription,
-            tint = MaterialTheme.colorScheme.onSurface,
+    } else {
+        AnimatedNotificationBanner(
+            modifier = modifier,
+            notificationModifier = Modifier.fillMaxWidth(),
+            notification = notification,
+            isPlayBuild = isPlayBuild,
+            openAppListing = openAppListing,
+            onClickShowAccount = onClickShowAccount,
+            onClickShowChangelog = onClickShowChangelog,
+            onClickDismissChangelog = onClickDismissChangelog,
+            onClickDismissNewDevice = onClickDismissNewDevice,
         )
     }
 }

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/RemoveDeviceConfirmationDialog.kt

@@ -15,11 +15,11 @@ import com.ramcosta.composedestinations.result.ResultBackNavigator
 import com.ramcosta.composedestinations.spec.DestinationStyle
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.component.textResource
-import net.mullvad.mullvadvpn.compose.extensions.toAnnotatedString
 import net.mullvad.mullvadvpn.compose.preview.DevicePreviewParameterProvider
 import net.mullvad.mullvadvpn.lib.model.Device
 import net.mullvad.mullvadvpn.lib.model.DeviceId
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.ui.component.toAnnotatedString
 
 @Preview
 @Composable

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/info/InfoDialog.kt

@@ -24,10 +24,10 @@ import androidx.core.text.HtmlCompat
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.button.PrimaryButton
 import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar
-import net.mullvad.mullvadvpn.compose.extensions.toAnnotatedString
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaScrollbar
+import net.mullvad.mullvadvpn.lib.ui.component.toAnnotatedString
 
 @Preview
 @Composable

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/preview/AppInfoUiStatePreviewParameterProvider.kt

@@ -1,7 +1,7 @@
 package net.mullvad.mullvadvpn.compose.preview
 
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
-import net.mullvad.mullvadvpn.ui.VersionInfo
+import net.mullvad.mullvadvpn.lib.model.VersionInfo
 import net.mullvad.mullvadvpn.viewmodel.AppInfoUiState
 
 class AppInfoUiStatePreviewParameterProvider : PreviewParameterProvider<AppInfoUiState> {

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/preview/ConnectUiStatePreviewParameterProvider.kt

@@ -5,6 +5,7 @@ import java.net.InetAddress
 import net.mullvad.mullvadvpn.compose.state.ConnectUiState
 import net.mullvad.mullvadvpn.lib.model.ActionAfterDisconnect
 import net.mullvad.mullvadvpn.lib.model.GeoIpLocation
+import net.mullvad.mullvadvpn.lib.model.InAppNotification
 
 class ConnectUiStatePreviewParameterProvider : PreviewParameterProvider<ConnectUiState> {
     override val values = sequenceOf(ConnectUiState.INITIAL) + generateOtherStates()
@@ -29,7 +30,7 @@ private fun generateOtherStates(): Sequence<ConnectUiState> =
             ),
             TunnelStatePreviewData.generateErrorState(isBlocking = true),
         )
-        .map { state ->
+        .mapIndexed { index, state ->
             ConnectUiState(
                 location =
                     GeoIpLocation(
@@ -45,7 +46,8 @@ private fun generateOtherStates(): Sequence<ConnectUiState> =
                 selectedRelayItemTitle = "Relay Title",
                 tunnelState = state,
                 showLocation = true,
-                inAppNotification = null,
+                inAppNotification =
+                    if (index == 0) InAppNotification.NewDevice("Test Device") else null,
                 deviceName = "Cool Beans",
                 daysLeftUntilExpiry = 42,
                 isPlayBuild = true,