feat: add username in settings #WPB-4368 (#3663)

app/src/main/kotlin/com/wire/android/navigation/HomeDestination.kt

@@ -38,6 +38,7 @@ sealed class HomeDestination(
     @DrawableRes val icon: Int,
     val isSearchable: Boolean = false,
     val withNewConversationFab: Boolean = false,
+    val withUserAvatar: Boolean = true,
     val direction: Direction
 ) {
     data object Conversations : HomeDestination(
@@ -75,6 +76,7 @@ sealed class HomeDestination(
     data object Settings : HomeDestination(
         title = R.string.settings_screen_title,
         icon = R.drawable.ic_settings,
+        withUserAvatar = false,
         direction = SettingsScreenDestination
     )
 

app/src/main/kotlin/com/wire/android/ui/common/RowItemTemplate.kt

@@ -20,6 +20,7 @@ package com.wire.android.ui.common
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.runtime.Composable
@@ -37,6 +38,7 @@ fun RowItemTemplate(
     titleStartPadding: Dp = dimensions().spacing8x,
     subtitle: @Composable () -> Unit = {},
     actions: @Composable () -> Unit = {},
+    wrapTitleContentWidth: Boolean = false,
     clickable: Clickable = Clickable(false) {}
 ) {
     RowItem(
@@ -46,12 +48,18 @@ fun RowItemTemplate(
         leadingIcon()
         Column(
             modifier = Modifier
-                .weight(1f)
                 .padding(start = titleStartPadding)
+                .then(
+                    if (wrapTitleContentWidth) Modifier.wrapContentWidth() else Modifier.weight(1f)
+                )
         ) {
             title()
             subtitle()
         }
+        if (wrapTitleContentWidth) {
+            // Add a spacer to push the actions to the end of the row when weight is not set
+            Spacer(modifier = Modifier.weight(1f))
+        }
         Box(
             modifier = Modifier
                 .wrapContentWidth()

app/src/main/kotlin/com/wire/android/ui/home/HomeTopBar.kt

@@ -68,21 +68,28 @@ fun HomeTopBar(
                     onButtonClicked = { onOpenConversationFilter(navigationItem.currentFilter()) }
                 )
             }
-            val openLabel = stringResource(R.string.content_description_open_label)
+            if (navigationItem.withUserAvatar) {
+                val openLabel = stringResource(R.string.content_description_open_label)
             val contentDescription = if (shouldShowCreateTeamUnreadIndicator) {
                 stringResource(R.string.content_description_home_profile_btn_with_notification)
             } else {
                 stringResource(R.string.content_description_home_profile_btn)
             }
-            UserProfileAvatar(
-                avatarData = userAvatarData,
-                clickable = remember {
-                    Clickable(enabled = true, onClickDescription = openLabel) { onNavigateToSelfUserProfile() }
-                },
-                type = UserProfileAvatarType.WithIndicators.RegularUser(legalHoldIndicatorVisible = withLegalHoldIndicator),
-                shouldShowCreateTeamUnreadIndicator = shouldShowCreateTeamUnreadIndicator,
+                UserProfileAvatar(
+                    avatarData = userAvatarData,
+                    clickable = remember {
+                        Clickable(
+                            enabled = true,
+                            onClickDescription = openLabel
+                        ) { onNavigateToSelfUserProfile() }
+                    },
+                    type = UserProfileAvatarType.WithIndicators.RegularUser(
+                        legalHoldIndicatorVisible = withLegalHoldIndicator
+                    ),
+                    shouldShowCreateTeamUnreadIndicator = shouldShowCreateTeamUnreadIndicator,
                 contentDescription = contentDescription
-            )
+                )
+            }
         },
         elevation = elevation,
     )
@@ -105,6 +112,23 @@ fun PreviewTopBar() {
     }
 }
 
+@PreviewMultipleThemes
+@Composable
+fun PreviewSettingsTopBarWithoutAvatar() {
+    WireTheme {
+        HomeTopBar(
+            navigationItem = HomeDestination.Settings,
+            userAvatarData = UserAvatarData(null, UserAvailabilityStatus.AVAILABLE),
+            elevation = 0.dp,
+            withLegalHoldIndicator = false,
+            shouldShowCreateTeamUnreadIndicator = false,
+            onHamburgerMenuClick = {},
+            onNavigateToSelfUserProfile = {},
+            onOpenConversationFilter = {}
+        )
+    }
+}
+
 @PreviewMultipleThemes
 @Composable
 fun PreviewTopBarWithNameBasedAvatar() {

app/src/main/kotlin/com/wire/android/ui/home/settings/SettingsItem.kt

@@ -19,6 +19,8 @@
 package com.wire.android.ui.home.settings
 
 import androidx.annotation.DrawableRes
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
@@ -29,6 +31,7 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextOverflow
 import com.ramcosta.composedestinations.spec.Direction
 import com.wire.android.R
 import com.wire.android.model.Clickable
@@ -64,41 +67,65 @@ fun SettingsItem(
     modifier: Modifier = Modifier,
     title: String? = null,
     @DrawableRes trailingIcon: Int? = null,
+    trailingText: String? = null,
     switchState: SwitchState = SwitchState.None,
     onRowPressed: Clickable = Clickable(false),
     onIconPressed: Clickable? = null
 ) {
     RowItemTemplate(
         modifier = modifier,
+        wrapTitleContentWidth = true,
         title = {
             if (!title.isNullOrBlank()) {
                 Text(
                     style = MaterialTheme.wireTypography.label01,
                     color = MaterialTheme.wireColorScheme.secondaryText,
                     text = title,
+                    maxLines = 1,
                     modifier = Modifier.padding(start = dimensions().spacing8x)
                 )
             }
             Text(
                 style = MaterialTheme.wireTypography.body01,
                 color = MaterialTheme.wireColorScheme.onBackground,
                 text = text,
+                maxLines = 1,
                 modifier = Modifier.padding(start = dimensions().spacing8x)
             )
         },
         actions = {
-            SettingsOptionSwitch(switchState = switchState)
-            trailingIcon?.let {
-                Icon(
-                    painter = painterResource(id = trailingIcon),
-                    contentDescription = "",
-                    tint = MaterialTheme.wireColorScheme.onSecondaryButtonEnabled,
-                    modifier = Modifier
-                        .defaultMinSize(dimensions().wireIconButtonSize)
-                        .padding(end = dimensions().spacing8x)
-                        .clickable(onIconPressed)
-                )
-            } ?: Icons.Filled.ChevronRight
+            Row(
+                horizontalArrangement = Arrangement.End,
+            ) {
+                SettingsOptionSwitch(switchState = switchState)
+                if (trailingText != null) {
+                    Row(
+                        Modifier
+                            .padding(end = dimensions().spacing12x)
+                            .weight(1f),
+                        horizontalArrangement = Arrangement.End
+                    ) {
+                        Text(
+                            trailingText,
+                            style = MaterialTheme.wireTypography.body01,
+                            color = MaterialTheme.wireColorScheme.secondaryText,
+                            overflow = TextOverflow.Ellipsis,
+                            maxLines = 1,
+                        )
+                    }
+                }
+                trailingIcon?.let {
+                    Icon(
+                        painter = painterResource(id = trailingIcon),
+                        contentDescription = "",
+                        tint = MaterialTheme.wireColorScheme.onSecondaryButtonEnabled,
+                        modifier = Modifier
+                            .defaultMinSize(dimensions().wireIconButtonSize)
+                            .padding(end = dimensions().spacing8x)
+                            .clickable(onIconPressed)
+                    )
+                } ?: Icons.Filled.ChevronRight
+            }
         },
         clickable = onRowPressed
     )
@@ -229,7 +256,7 @@ sealed class SettingsItem(open val id: String, open val title: UIText) {
 
 @PreviewMultipleThemes
 @Composable
-fun PreviewFileRestrictionDialog() {
+fun PreviewSettingsItem() {
     WireTheme {
         SettingsItem(
             title = "Some Setting",
@@ -238,3 +265,29 @@ fun PreviewFileRestrictionDialog() {
         )
     }
 }
+
+@PreviewMultipleThemes
+@Composable
+fun PreviewSettingsItemTrailingComposable() {
+    WireTheme {
+        SettingsItem(
+            title = "Some Setting",
+            text = "This is the value of the setting",
+            trailingIcon = R.drawable.ic_arrow_right,
+            trailingText = "Longlonglonglonglonglonglonglong Name"
+        )
+    }
+}
+
+@PreviewMultipleThemes
+@Composable
+fun PreviewSettingsItemTrailingShortComposable() {
+    WireTheme {
+        SettingsItem(
+            title = "Some Setting",
+            text = "This is the value of the setting",
+            trailingIcon = R.drawable.ic_arrow_right,
+            trailingText = "Short Name"
+        )
+    }
+}

app/src/main/kotlin/com/wire/android/ui/home/settings/SettingsScreen.kt

@@ -105,6 +105,12 @@ fun SettingsScreenContent(
                         add(SettingsItem.BackupAndRestore)
                     }
                 },
+                trailingText = { settingsItem ->
+                    if (settingsItem is SettingsItem.YourAccount) {
+                        return@folderWithElements settingsState.userName
+                    }
+                    return@folderWithElements null
+                },
                 onItemClicked = onItemClicked
             )
 
@@ -160,6 +166,7 @@ fun SettingsScreenContent(
 private fun LazyListScope.folderWithElements(
     header: String,
     items: List<SettingsItem>,
+    trailingText: ((SettingsItem) -> String?)? = null,
     onItemClicked: (SettingsItem.DirectionItem) -> Unit
 ) {
     folderWithElements(
@@ -175,12 +182,17 @@ private fun LazyListScope.folderWithElements(
                 }
             },
             trailingIcon = if (settingsItem is SettingsItem.DirectionItem) R.drawable.ic_arrow_right else null,
+            trailingText = trailingText?.invoke(settingsItem),
         )
     }
 }
 
 @PreviewMultipleThemes
 @Composable
 fun PreviewSettingsScreen() = WireTheme {
-    SettingsScreenContent(settingsState = SettingsState(), onItemClicked = {}, onAppLockSwitchChanged = {},)
+    SettingsScreenContent(
+        settingsState = SettingsState(userName = "Longlonglonglonglonglonglonglong Name"),
+        onItemClicked = {},
+        onAppLockSwitchChanged = {},
+    )
 }

app/src/main/kotlin/com/wire/android/ui/home/settings/SettingsState.kt

@@ -19,5 +19,6 @@ package com.wire.android.ui.home.settings
 
 data class SettingsState(
     val isAppLockEditable: Boolean = false,
-    val isAppLockEnabled: Boolean = false
+    val isAppLockEnabled: Boolean = false,
+    val userName: String = "",
 )

app/src/main/kotlin/com/wire/android/ui/home/settings/SettingsViewModel.kt

@@ -24,16 +24,23 @@ import androidx.compose.runtime.setValue
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import com.wire.android.datastore.GlobalDataStore
+import com.wire.android.util.dispatchers.DispatcherProvider
 import com.wire.kalium.logic.feature.featureConfig.ObserveIsAppLockEditableUseCase
+import com.wire.kalium.logic.feature.user.GetSelfUserUseCase
 import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.SharingStarted
 import kotlinx.coroutines.flow.combine
+import kotlinx.coroutines.flow.flowOn
+import kotlinx.coroutines.flow.shareIn
 import kotlinx.coroutines.launch
 import javax.inject.Inject
 
 @HiltViewModel
 class SettingsViewModel @Inject constructor(
     private val globalDataStore: GlobalDataStore,
-    private val observeIsAppLockEditable: ObserveIsAppLockEditableUseCase
+    private val observeIsAppLockEditable: ObserveIsAppLockEditableUseCase,
+    private val getSelf: GetSelfUserUseCase,
+    private val dispatchers: DispatcherProvider,
 ) : ViewModel() {
     var state by mutableStateOf(SettingsState())
         private set
@@ -51,11 +58,25 @@ class SettingsViewModel @Inject constructor(
                 )
             }.collect { state = it }
         }
+        viewModelScope.launch {
+            fetchSelfUser()
+        }
     }
 
     fun disableAppLock() {
         viewModelScope.launch {
             globalDataStore.clearAppLockPasscode()
         }
     }
+
+    private suspend fun fetchSelfUser() {
+        viewModelScope.launch {
+            val self =
+                getSelf().flowOn(dispatchers.io()).shareIn(this, SharingStarted.WhileSubscribed(1))
+
+            self.collect { user ->
+                state = state.copy(userName = user.name ?: "")
+            }
+        }
+    }
 }