Small UI iteration on pin feature.

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/model/TimelineItemAction.kt

@@ -32,7 +32,5 @@ sealed class TimelineItemAction(
     data object ReportContent : TimelineItemAction(CommonStrings.action_report_content, CompoundDrawables.ic_compound_chat_problem, destructive = true)
     data object EndPoll : TimelineItemAction(CommonStrings.action_end_poll, CompoundDrawables.ic_compound_polls_end)
     data object Pin : TimelineItemAction(CommonStrings.action_pin, CompoundDrawables.ic_compound_pin)
-
-    // TODO use the Unpin compound icon when available.
-    data object Unpin : TimelineItemAction(CommonStrings.action_unpin, CompoundDrawables.ic_compound_pin)
+    data object Unpin : TimelineItemAction(CommonStrings.action_unpin, CompoundDrawables.ic_compound_unpin)
 }

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

@@ -19,7 +19,11 @@ internal class PinnedMessagesBannerStateProvider : PreviewParameterProvider<Pinn
             aLoadingPinnedMessagesBannerState(knownPinnedMessagesCount = 1),
             aLoadingPinnedMessagesBannerState(knownPinnedMessagesCount = 5),
             aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 1, currentPinnedMessageIndex = 0),
-            aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 2, currentPinnedMessageIndex = 0),
+            aLoadedPinnedMessagesBannerState(
+                knownPinnedMessagesCount = 2,
+                currentPinnedMessageIndex = 0,
+                message = "This is a pinned long message to check the wrapping behavior",
+            ),
             aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 3, currentPinnedMessageIndex = 0),
             aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 5, currentPinnedMessageIndex = 0),
             aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 5, currentPinnedMessageIndex = 1),
@@ -40,9 +44,10 @@ internal fun aLoadingPinnedMessagesBannerState(
 internal fun aLoadedPinnedMessagesBannerState(
     currentPinnedMessageIndex: Int = 0,
     knownPinnedMessagesCount: Int = 1,
+    message: String = "This is a pinned message",
     currentPinnedMessage: PinnedMessagesBannerItem = PinnedMessagesBannerItem(
         eventId = EventId("\$" + Random.nextInt().toString()),
-        formatted = AnnotatedString("This is a pinned message")
+        formatted = AnnotatedString(message)
     ),
     eventSink: (PinnedMessagesBannerEvents) -> Unit = {}
 ) = PinnedMessagesBannerState.Loaded(

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

@@ -18,6 +18,7 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
@@ -98,9 +99,8 @@ private fun PinnedMessagesBannerRow(
                 }
             },
         verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = spacedBy(10.dp)
     ) {
-        Spacer(modifier = Modifier.width(16.dp))
+        Spacer(modifier = Modifier.width(26.dp))
         PinIndicators(
             pinIndex = state.currentPinnedMessageIndex(),
             pinsCount = state.pinnedMessagesCount(),
@@ -109,7 +109,9 @@ private fun PinnedMessagesBannerRow(
             imageVector = CompoundIcons.PinSolid(),
             contentDescription = null,
             tint = ElementTheme.materialColors.secondary,
-            modifier = Modifier.size(20.dp)
+            modifier = Modifier
+                .padding(horizontal = 10.dp)
+                .size(20.dp)
         )
         PinnedMessageItem(
             index = state.currentPinnedMessageIndex(),