Merge pull request #3415 from element-hq/feature/fga/pinned_messages_banner_indicators

Pinned messages banner : adjust indicator to match design.

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/banner/PinnedMessagesBannerStateProvider.kt

@@ -26,14 +26,15 @@ internal class PinnedMessagesBannerStateProvider : PreviewParameterProvider<Pinn
         get() = sequenceOf(
             aHiddenPinnedMessagesBannerState(),
             aLoadingPinnedMessagesBannerState(knownPinnedMessagesCount = 1),
-            aLoadingPinnedMessagesBannerState(knownPinnedMessagesCount = 4),
+            aLoadingPinnedMessagesBannerState(knownPinnedMessagesCount = 5),
             aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 1, currentPinnedMessageIndex = 0),
             aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 2, currentPinnedMessageIndex = 0),
             aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 3, currentPinnedMessageIndex = 0),
-            aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 4, currentPinnedMessageIndex = 0),
-            aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 4, currentPinnedMessageIndex = 1),
-            aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 4, currentPinnedMessageIndex = 2),
-            aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 4, currentPinnedMessageIndex = 3),
+            aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 5, currentPinnedMessageIndex = 0),
+            aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 5, currentPinnedMessageIndex = 1),
+            aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 5, currentPinnedMessageIndex = 2),
+            aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 5, currentPinnedMessageIndex = 3),
+            aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 5, currentPinnedMessageIndex = 4),
         )
 }
 

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/banner/PinnedMessagesBannerView.kt

@@ -29,10 +29,7 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.Stable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -111,7 +108,6 @@ private fun PinnedMessagesBannerRow(
         PinIndicators(
             pinIndex = state.currentPinnedMessageIndex(),
             pinsCount = state.pinnedMessagesCount(),
-            modifier = Modifier.heightIn(max = 40.dp)
         )
         Icon(
             imageVector = CompoundIcons.PinSolid(),
@@ -183,32 +179,41 @@ private fun PinIndicators(
             else -> 11
         }
     }
-    val lazyListState = rememberLazyListState()
-    LaunchedEffect(pinIndex) {
-        val viewportSize = lazyListState.layoutInfo.viewportSize
-        lazyListState.animateScrollToItem(
-            pinIndex,
-            indicatorHeight / 2 - viewportSize.height / 2
-        )
+    val activeIndex = remember(pinIndex) {
+        pinIndex % 3
     }
-    LazyColumn(
+    val shownIndicators = remember(pinsCount, pinIndex) {
+        if (pinsCount <= 3) {
+            pinsCount
+        } else {
+            val isLastPage = pinIndex >= pinsCount - pinsCount % 3
+            if (isLastPage) {
+                pinsCount % 3
+            } else {
+                3
+            }
+        }
+    }
+    val indicatorsCount = pinsCount.coerceAtMost(3)
+
+    Column(
         modifier = modifier,
-        state = lazyListState,
-        verticalArrangement = spacedBy(2.dp),
-        userScrollEnabled = false,
+        verticalArrangement = spacedBy(2.dp)
     ) {
-        items(pinsCount) { index ->
+        for (index in 0 until indicatorsCount) {
             Box(
                 modifier = Modifier
                     .width(2.dp)
                     .height(indicatorHeight.dp)
                     .background(
-                        color = if (index == pinIndex) {
+                        color = if (index == activeIndex) {
                             ElementTheme.colors.iconAccentPrimary
-                        } else {
+                        } else if (index < shownIndicators) {
                             ElementTheme.colors.pinnedMessageBannerIndicator
+                        } else {
+                            Color.Transparent
                         }
-                    )
+                    ),
             )
         }
     }