feat: Conversation banner redesign [WPB-1723] (#3402)

Co-authored-by: Alexandre Ferris <[email protected]>

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

@@ -828,7 +828,15 @@ private fun ConversationScreen(
                         },
                         isInteractionEnabled = messageComposerViewState.interactionAvailability == InteractionAvailability.ENABLED
                     )
-                    ConversationBanner(bannerMessage)
+                    ConversationBanner(
+                        bannerMessage = bannerMessage,
+                        spannedTexts = listOf(
+                            stringResource(R.string.conversation_banner_federated),
+                            stringResource(R.string.conversation_banner_externals),
+                            stringResource(R.string.conversation_banner_guests),
+                            stringResource(R.string.conversation_banner_services)
+                        )
+                    )
                 }
             },
             snackbarHost = {

app/src/main/kotlin/com/wire/android/ui/home/conversations/banner/ConversationBanner.kt

@@ -20,34 +20,97 @@ package com.wire.android.ui.home.conversations.banner
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.HorizontalDivider
 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.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.tooling.preview.Preview
 import com.wire.android.ui.common.dimensions
-import com.wire.android.ui.common.topappbar.StatusLabel
+import com.wire.android.ui.theme.wireColorScheme
+import com.wire.android.ui.theme.wireTypography
+import com.wire.android.util.QueryMatchExtractor
 import com.wire.android.util.ui.UIText
 
 @Composable
-fun ConversationBanner(bannerMessage: UIText?) {
-    bannerMessage?.let {
-        Box(
-            modifier = Modifier
-                .fillMaxWidth()
-                .background(color = MaterialTheme.colorScheme.primary)
-                .padding(vertical = dimensions().spacing6x, horizontal = dimensions().spacing16x),
-            contentAlignment = Alignment.Center
-        ) {
-            StatusLabel(it.asString())
+fun ConversationBanner(
+    bannerMessage: UIText?,
+    modifier: Modifier = Modifier,
+    spannedTexts: List<String> = listOf()
+) {
+    bannerMessage?.let { uiText ->
+        Column(modifier = modifier.fillMaxWidth()) {
+            HorizontalDivider(color = MaterialTheme.wireColorScheme.divider)
+
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .background(color = MaterialTheme.colorScheme.surface)
+                    .padding(vertical = dimensions().spacing6x, horizontal = dimensions().spacing16x),
+                contentAlignment = Alignment.Center
+            ) {
+                Text(
+                    text = styleBannerText(uiText, spannedTexts),
+                    textAlign = TextAlign.Center
+                )
+            }
+
+            HorizontalDivider(color = MaterialTheme.wireColorScheme.divider)
+        }
+    }
+}
+
+@Composable
+private fun styleBannerText(
+    uiText: UIText,
+    spannedTexts: List<String>
+) = buildAnnotatedString {
+    withStyle(
+        style = SpanStyle(
+            color = MaterialTheme.wireColorScheme.onSurface,
+            fontWeight = MaterialTheme.wireTypography.title03.fontWeight,
+            fontSize = MaterialTheme.wireTypography.title03.fontSize,
+            fontFamily = MaterialTheme.wireTypography.title03.fontFamily,
+            fontStyle = MaterialTheme.wireTypography.title03.fontStyle,
+            letterSpacing = MaterialTheme.wireTypography.title03.letterSpacing
+        )
+    ) {
+        append(uiText.asString())
+    }
+
+    spannedTexts.flatMap { textToSpan ->
+        QueryMatchExtractor.extractQueryMatchIndexes(
+            matchText = textToSpan,
+            text = uiText.asString()
+        )
+    }.forEach { highLightIndex ->
+        if (highLightIndex.endIndex <= this.length) {
+            addStyle(
+                style = SpanStyle(
+                    color = MaterialTheme.wireColorScheme.primary,
+                    fontWeight = FontWeight.Bold
+                ),
+                start = highLightIndex.startIndex,
+                end = highLightIndex.endIndex
+            )
         }
     }
 }
 
 @Preview
 @Composable
 fun PreviewConversationBanner() {
-    ConversationBanner(bannerMessage = UIText.DynamicString("Federated users, Externals, guests and services are present"))
+    ConversationBanner(
+        bannerMessage = UIText.DynamicString("Federated users, Externals, guests and services are present"),
+        spannedTexts = listOf("Federated users", "Guests")
+    )
 }

app/src/main/kotlin/com/wire/android/ui/home/conversations/mention/MemberItemToMention.kt

@@ -82,7 +82,7 @@ fun PreviewMemberItemToMention() {
         name = "name",
         label = "handle",
         membership = Membership.Federated,
-        searchQuery = "search",
+        searchQuery = "na",
         clickable = Clickable(),
         modifier = Modifier
     )

app/src/main/res/values-de/strings.xml

@@ -526,6 +526,10 @@
     <string name="label_edit">Bearbeiten</string>
     <string name="label_delete">Löschen</string>
     <string name="info_message_copied">Nachricht kopiert</string>
+    <string name="conversation_banner_federated">Föderierte Benutzer</string>
+    <string name="conversation_banner_externals">Externe</string>
+    <string name="conversation_banner_guests">Gäste</string>
+    <string name="conversation_banner_services">Dienste</string>
     <string name="conversation_banner_federated_externals_guests_services_present">Föderierte Benutzer, Externe und Gäste anwesend, Dienste aktiv</string>
     <string name="conversation_banner_federated_externals_guests_present">Föderierte Benutzer, Externe und Gäste anwesend</string>
     <string name="conversation_banner_federated_externals_services_present">Föderierte Benutzer und Externe anwesend, Dienste aktiv</string>

app/src/main/res/values-es/strings.xml

@@ -480,6 +480,10 @@ Hasta 500 personas pueden unirse a una conversaci&#243;n en grupo.</string>
     <string name="label_edit">Editar</string>
     <string name="label_delete">Eliminar</string>
     <string name="info_message_copied">Mensaje copiado</string>
+    <string name="conversation_banner_federated">Usuarios federados</string>
+    <string name="conversation_banner_externals">externos</string>
+    <string name="conversation_banner_guests">invitados</string>
+    <string name="conversation_banner_services">servicios</string>
     <string name="conversation_banner_federated_externals_guests_services_present">Usuarios federados, externos, invitados y servicios est&#225;n presentes</string>
     <string name="conversation_banner_federated_externals_guests_present">Usuarios federados, externos e invitados est&#225;n presentes</string>
     <string name="conversation_banner_federated_externals_services_present">Usuarios federados, externos y servicios est&#225;n presentes</string>

app/src/main/res/values-hu/strings.xml

@@ -556,6 +556,10 @@
     <string name="label_edit">Szerkesztés</string>
     <string name="label_delete">Törlés</string>
     <string name="info_message_copied">Üzenet másolva</string>
+    <string name="conversation_banner_federated">Szövetségesek</string>
+    <string name="conversation_banner_externals">külsősök</string>
+    <string name="conversation_banner_guests">vendégek</string>
+    <string name="conversation_banner_services">szolgáltatások</string>
     <string name="conversation_banner_federated_externals_guests_services_present">Szövetségesek, külsősök, vendégek és szolgáltatások is vannak itt</string>
     <string name="conversation_banner_federated_externals_guests_present">Szövetségesek, külsősök és vendégek is vannak itt</string>
     <string name="conversation_banner_federated_externals_services_present">Szövetségesek, külsősök és szolgáltatások is vannak itt</string>

app/src/main/res/values-it/strings.xml

@@ -532,6 +532,10 @@ Fino a 500 persone possono unirsi a una conversazione di gruppo.</string>
     <string name="label_edit">Modifica</string>
     <string name="label_delete">Elimina</string>
     <string name="info_message_copied">Messaggio copiato</string>
+    <string name="conversation_banner_federated">utenti federati</string>
+    <string name="conversation_banner_externals">esterni</string>
+    <string name="conversation_banner_guests">ospiti</string>
+    <string name="conversation_banner_services">servizi</string>
     <string name="conversation_banner_federated_externals_guests_services_present">Sono presenti utenti federati, esterni, ospiti e servizi</string>
     <string name="conversation_banner_federated_externals_guests_present">Sono presenti utenti federati, esterni e ospiti</string>
     <string name="conversation_banner_federated_externals_services_present">Sono presenti utenti federati, esterni e servizi</string>

app/src/main/res/values-pl/strings.xml

@@ -453,6 +453,10 @@ Do grupy mo&#380;e do&#322;&#261;czy&#263; maksymalnie 500 os&#243;b.</string>
     <string name="label_edit">Edytuj</string>
     <string name="label_delete">Usu&#324;</string>
     <string name="info_message_copied">Wiadomo&#347;&#263; skopiowana</string>
+    <string name="conversation_banner_federated">u&#380;ytkownicy federowani</string>
+    <string name="conversation_banner_externals">zewn&#281;trzni</string>
+    <string name="conversation_banner_guests">go&#347;cie</string>
+    <string name="conversation_banner_services">us&#322;ugi</string>
     <string name="conversation_banner_federated_externals_guests_services_present">Obecni s&#261; u&#380;ytkownicy federowani, zewn&#281;trzni, go&#347;cie oraz us&#322;ugi.</string>
     <string name="conversation_banner_federated_externals_guests_present">Obecni s&#261; u&#380;ytkownicy federowani, zewn&#281;trzni oraz go&#347;cie.</string>
     <string name="conversation_banner_federated_externals_services_present">Obecni s&#261; u&#380;ytkownicy federowani, zewn&#281;trzni oraz us&#322;ugi.</string>

app/src/main/res/values-pt/strings.xml

@@ -520,6 +520,10 @@ Até 500 pessoas podem participar de uma conversa em grupo.</string>
     <string name="label_edit">Editar</string>
     <string name="label_delete">Excluir</string>
     <string name="info_message_copied">Mensagem copiada</string>
+    <string name="conversation_banner_federated">Usuários federados</string>
+    <string name="conversation_banner_externals">externos</string>
+    <string name="conversation_banner_guests">convidados</string>
+    <string name="conversation_banner_services">serviços</string>
     <string name="conversation_banner_federated_externals_guests_services_present">Usuários federados, externos, convidados e serviços estão presentes</string>
     <string name="conversation_banner_federated_externals_guests_present">Usuários federados, externos e convidados estão presentes</string>
     <string name="conversation_banner_federated_externals_services_present">Usuários federados, externos e serviços estão presentes</string>

app/src/main/res/values-ru/strings.xml

@@ -567,6 +567,10 @@
     <string name="label_edit">Изменить</string>
     <string name="label_delete">Удалить</string>
     <string name="info_message_copied">Сообщение скопировано</string>
+    <string name="conversation_banner_federated">федеративные пользователи</string>
+    <string name="conversation_banner_externals">внешние пользователи</string>
+    <string name="conversation_banner_guests">гости</string>
+    <string name="conversation_banner_services">сервисы</string>
     <string name="conversation_banner_federated_externals_guests_services_present">Присутствуют федеративные пользователи, внешние пользователи, гости и сервисы</string>
     <string name="conversation_banner_federated_externals_guests_present">Присутствуют федеративные пользователи, внешние пользователи и гости</string>
     <string name="conversation_banner_federated_externals_services_present">Присутствуют федеративные пользователи, внешние пользователи и сервисы</string>

app/src/main/res/values-si/strings.xml

@@ -537,6 +537,10 @@
     <string name="label_edit">සංස්කරණය</string>
     <string name="label_delete">මකන්න</string>
     <string name="info_message_copied">පණිවිඩය පිටපත් විය</string>
+    <string name="conversation_banner_federated">ඒකාබද්ධ පරිශ්‍රීලකයින්</string>
+    <string name="conversation_banner_externals">පිටස්තරයින්</string>
+    <string name="conversation_banner_guests">අමුත්තන්</string>
+    <string name="conversation_banner_services">සේවා</string>
     <string name="conversation_banner_federated_externals_guests_services_present">ඒකාබද්ධ පරිශ්‍රීලකයින්, පිටස්තරයින්, අමුත්තන් සහ සේවා ඇත</string>
     <string name="conversation_banner_federated_externals_guests_present">ඒකාබද්ධ පරිශ්‍රීලකයින්, පිටස්තරයින් සහ අමුත්තන් සිටියි</string>
     <string name="conversation_banner_federated_externals_services_present">ඒකාබද්ධ පරිශ්‍රීලකයින්, පිටස්තරයින් සහ සේවා ඇත</string>

app/src/main/res/values/strings.xml

@@ -600,6 +600,10 @@
     <string name="label_edit">Edit</string>
     <string name="label_delete">Delete</string>
     <string name="info_message_copied">Message copied</string>
+    <string name="conversation_banner_federated">federated users</string>
+    <string name="conversation_banner_externals">externals</string>
+    <string name="conversation_banner_guests">guests</string>
+    <string name="conversation_banner_services">services</string>
     <string name="conversation_banner_federated_externals_guests_services_present">Federated users, externals, guests and services are present</string>
     <string name="conversation_banner_federated_externals_guests_present">Federated users, externals and guests are present</string>
     <string name="conversation_banner_federated_externals_services_present">Federated users, externals and services are present</string>