Make send event state UI easier to click (#6739)

* Make send event state UI easier to click

Make it so the whole timestamp view can be clicked

* Update screenshots

* Simplify `clickableModifier`

---------

Co-authored-by: ElementBot <android@element.io>

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineEventTimestampView.kt

@@ -15,9 +15,12 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
@@ -47,9 +50,39 @@ fun TimelineEventTimestampView(
     val isMessageEdited = event.content.isEdited()
     val isMessageRedacted = event.content.isRedacted()
     val tint = if (hasError || hasEncryptionCritical && !isMessageRedacted) ElementTheme.colors.textCriticalPrimary else ElementTheme.colors.textSecondary
+
+    val shield = event.messageShield
+    val isVerifiedUserSendFailure = event.localSendState is LocalEventSendState.Failed.VerifiedUser
+    val onClickLabel = when {
+        shield != null -> stringResource(CommonStrings.a11y_view_details)
+        hasError && isVerifiedUserSendFailure -> stringResource(CommonStrings.action_open_context_menu)
+        else -> null
+    }
+    val clickableModifier = remember(shield, hasError) {
+        when {
+            shield != null -> {
+                Modifier.clickable(
+                    onClickLabel = onClickLabel,
+                ) {
+                    eventSink(TimelineEvent.ShowShieldDialog(shield))
+                }
+            }
+            hasError -> Modifier
+                .clickable(
+                    enabled = isVerifiedUserSendFailure,
+                    onClickLabel = onClickLabel,
+                ) {
+                    eventSink(TimelineEvent.ComputeVerifiedUserSendFailure(event))
+                }
+            else -> Modifier
+        }
+    }
     Row(
         modifier = Modifier
             .padding(PaddingValues(start = TimelineEventTimestampViewDefaults.spacing))
+            // For a better click target, make the corners rounded
+            .clip(RoundedCornerShape(8.dp))
+            .then(clickableModifier)
             .then(modifier),
         verticalAlignment = Alignment.CenterVertically,
     ) {
@@ -67,36 +100,22 @@ fun TimelineEventTimestampView(
             color = tint,
         )
         if (hasError) {
-            val isVerifiedUserSendFailure = event.localSendState is LocalEventSendState.Failed.VerifiedUser
             Spacer(modifier = Modifier.width(2.dp))
             Icon(
                 imageVector = CompoundIcons.ErrorSolid(),
                 contentDescription = stringResource(id = CommonStrings.common_sending_failed),
                 tint = tint,
-                modifier = Modifier
-                    .size(15.dp, 18.dp)
-                    .clickable(
-                        enabled = isVerifiedUserSendFailure,
-                        onClickLabel = stringResource(CommonStrings.action_open_context_menu),
-                    ) {
-                        eventSink(TimelineEvent.ComputeVerifiedUserSendFailure(event))
-                    }
+                modifier = Modifier.size(15.dp, 18.dp),
             )
         }
 
         if (!isMessageRedacted) {
-            event.messageShield?.let { shield ->
+            shield?.let { shield ->
                 Spacer(modifier = Modifier.width(2.dp))
                 Icon(
                     imageVector = shield.toIcon(),
                     contentDescription = stringResource(id = CommonStrings.a11y_encryption_details),
-                    modifier = Modifier
-                        .size(15.dp)
-                        .clickable(
-                            onClickLabel = stringResource(CommonStrings.a11y_view_details),
-                        ) {
-                            eventSink(TimelineEvent.ShowShieldDialog(shield))
-                        },
+                    modifier = Modifier.size(15.dp),
                     tint = shield.toIconColor(),
                 )
                 Spacer(modifier = Modifier.width(4.dp))

tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Day_9_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a8fa43d296a984d242ed56f7879de4c38f3da94147c365c424248eba2c4ad61d
-size 371263
+oid sha256:fbd5652457d495c3c6692c151be27c985cf47e95c8b89af9b6edc8c1b734acc8
+size 371265

tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Night_9_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bcd9e0934b5f6808d58a3d3506641f173c4b223d78c605de09832d3741e8834f
-size 149300
+oid sha256:75ace43e27a0c8f9786b0494931c3ef5e12d903e7417dddecfb34c9526e74f3c
+size 149314