knock requests : refine and clean banner

features/knockrequests/impl/src/main/kotlin/io/element/android/features/knockrequests/impl/banner/DefaultKnockRequestsBannerRenderer.kt

@@ -17,16 +17,13 @@ import javax.inject.Inject
 @ContributesBinding(RoomScope::class)
 class DefaultKnockRequestsBannerRenderer @Inject constructor(
     private val presenter: KnockRequestsBannerPresenter,
-): KnockRequestsBannerRenderer {
-
+) : KnockRequestsBannerRenderer {
     @Composable
     override fun View(modifier: Modifier, onViewRequestsClick: () -> Unit) {
         val state = presenter.present()
         KnockRequestsBannerView(
             state = state,
-            onDismissClick = {},
             onViewRequestsClick = onViewRequestsClick,
         )
     }
-
 }

features/knockrequests/impl/src/main/kotlin/io/element/android/features/knockrequests/impl/banner/KnockRequestsBannerEvents.kt

@@ -0,0 +1,15 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * Please see LICENSE in the repository root for full details.
+ */
+
+package io.element.android.features.knockrequests.impl.banner
+
+import io.element.android.features.knockrequests.impl.KnockRequest
+
+sealed interface KnockRequestsBannerEvents {
+    data class Accept(val knockRequest: KnockRequest) : KnockRequestsBannerEvents
+    data object Dismiss : KnockRequestsBannerEvents
+}

features/knockrequests/impl/src/main/kotlin/io/element/android/features/knockrequests/impl/banner/KnockRequestsBannerPresenter.kt

@@ -8,12 +8,35 @@
 package io.element.android.features.knockrequests.impl.banner
 
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import io.element.android.libraries.architecture.AsyncAction
 import io.element.android.libraries.architecture.Presenter
+import kotlinx.collections.immutable.persistentListOf
 import javax.inject.Inject
 
-class KnockRequestsBannerPresenter @Inject constructor(): Presenter<KnockRequestsBannerState> {
+class KnockRequestsBannerPresenter @Inject constructor() : Presenter<KnockRequestsBannerState> {
     @Composable
     override fun present(): KnockRequestsBannerState {
-        return KnockRequestsBannerState.Hidden
+        var shouldShowBanner by remember { mutableStateOf(false) }
+
+        fun handleEvents(event: KnockRequestsBannerEvents) {
+            when (event) {
+                is KnockRequestsBannerEvents.Accept -> Unit
+                is KnockRequestsBannerEvents.Dismiss -> {
+                    shouldShowBanner = false
+                }
+            }
+        }
+
+        return KnockRequestsBannerState(
+            knockRequests = persistentListOf(),
+            acceptAction = AsyncAction.Uninitialized,
+            canAccept = false,
+            isVisible = shouldShowBanner,
+            eventSink = ::handleEvents,
+        )
     }
 }

features/knockrequests/impl/src/main/kotlin/io/element/android/features/knockrequests/impl/banner/KnockRequestsBannerState.kt

@@ -8,7 +8,6 @@
 package io.element.android.features.knockrequests.impl.banner
 
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.Immutable
 import androidx.compose.ui.res.pluralStringResource
 import androidx.compose.ui.res.stringResource
 import io.element.android.features.knockrequests.impl.KnockRequest
@@ -18,42 +17,39 @@ import io.element.android.libraries.ui.strings.CommonPlurals
 import io.element.android.libraries.ui.strings.CommonStrings
 import kotlinx.collections.immutable.ImmutableList
 
-@Immutable
-sealed interface KnockRequestsBannerState {
-    data object Hidden : KnockRequestsBannerState
-    data class Visible(
-        val knockRequests: ImmutableList<KnockRequest>,
-        val acceptAction: AsyncAction<Unit>,
-        val canAccept: Boolean,
-    ) : KnockRequestsBannerState {
+data class KnockRequestsBannerState(
+    val isVisible: Boolean,
+    val knockRequests: ImmutableList<KnockRequest>,
+    val acceptAction: AsyncAction<Unit>,
+    val canAccept: Boolean,
+    val eventSink: (KnockRequestsBannerEvents) -> Unit,
+) {
+    val subtitle = if (knockRequests.size == 1) {
+        knockRequests.first().userId.value
+    } else {
+        null
+    }
 
-        val subtitle = if (knockRequests.size == 1) {
-            knockRequests.first().userId.value
-        } else {
-            null
-        }
+    val reason = if (knockRequests.size == 1) {
+        knockRequests.first().reason
+    } else {
+        null
+    }
 
-        val reason = if (knockRequests.size == 1) {
-            knockRequests.first().reason
-        } else {
-            null
-        }
-
-        @Composable
-        fun formattedTitle(): String {
-            return when (knockRequests.size) {
-                0 -> ""
-                1 -> stringResource(CommonStrings.screen_room_single_knock_request_title, knockRequests.first().getBestName())
-                else -> {
-                    val firstRequest = knockRequests.first()
-                    val otherRequestsCount = knockRequests.size - 1
-                    pluralStringResource(
-                        id = CommonPlurals.screen_room_multiple_knock_requests_title,
-                        count = otherRequestsCount,
-                        firstRequest.getBestName(),
-                        otherRequestsCount
-                    )
-                }
+    @Composable
+    fun formattedTitle(): String {
+        return when (knockRequests.size) {
+            0 -> ""
+            1 -> stringResource(CommonStrings.screen_room_single_knock_request_title, knockRequests.first().getBestName())
+            else -> {
+                val firstRequest = knockRequests.first()
+                val otherRequestsCount = knockRequests.size - 1
+                pluralStringResource(
+                    id = CommonPlurals.screen_room_multiple_knock_requests_title,
+                    count = otherRequestsCount,
+                    firstRequest.getBestName(),
+                    otherRequestsCount
+                )
             }
         }
     }

features/knockrequests/impl/src/main/kotlin/io/element/android/features/knockrequests/impl/banner/KnockRequestsBannerStateProvider.kt

@@ -16,15 +16,23 @@ import kotlinx.collections.immutable.toImmutableList
 class KnockRequestsBannerStateProvider : PreviewParameterProvider<KnockRequestsBannerState> {
     override val values: Sequence<KnockRequestsBannerState>
         get() = sequenceOf(
-            KnockRequestsBannerState.Hidden,
-            aVisibleKnockRequestsBannerState(),
-            aVisibleKnockRequestsBannerState(
+            aKnockRequestsBannerState(),
+            aKnockRequestsBannerState(
+                knockRequests = listOf(
+                    aKnockRequest(
+                        reason = "A very long reason that should probably be truncated, " +
+                            "but could be also expanded so you can see it over the lines, wow," +
+                            "very amazing reason, I know, right, I'm so good at writing reasons."
+                    )
+                )
+            ),
+            aKnockRequestsBannerState(
                 knockRequests = listOf(
                     aKnockRequest(),
                     aKnockRequest(displayName = "Alice")
                 )
             ),
-            aVisibleKnockRequestsBannerState(
+            aKnockRequestsBannerState(
                 knockRequests = listOf(
                     aKnockRequest(),
                     aKnockRequest(displayName = "Alice"),
@@ -32,24 +40,28 @@ class KnockRequestsBannerStateProvider : PreviewParameterProvider<KnockRequestsB
                     aKnockRequest(displayName = "Charlie")
                 )
             ),
-            aVisibleKnockRequestsBannerState(
+            aKnockRequestsBannerState(
                 canAccept = false
             ),
-            aVisibleKnockRequestsBannerState(
+            aKnockRequestsBannerState(
                 acceptAction = AsyncAction.Loading
             ),
-            aVisibleKnockRequestsBannerState(
-                acceptAction = AsyncAction.Failure(Throwable())
+            aKnockRequestsBannerState(
+                acceptAction = AsyncAction.Failure(Throwable("Failed to accept knock"))
             ),
         )
 }
 
-fun aVisibleKnockRequestsBannerState(
+fun aKnockRequestsBannerState(
     knockRequests: List<KnockRequest> = listOf(aKnockRequest()),
     acceptAction: AsyncAction<Unit> = AsyncAction.Uninitialized,
     canAccept: Boolean = true,
-) = KnockRequestsBannerState.Visible(
+    isVisible: Boolean = true,
+    eventSink: (KnockRequestsBannerEvents) -> Unit = {}
+) = KnockRequestsBannerState(
     knockRequests = knockRequests.toImmutableList(),
     acceptAction = acceptAction,
-    canAccept = canAccept
+    canAccept = canAccept,
+    isVisible = isVisible,
+    eventSink = eventSink,
 )

features/knockrequests/impl/src/main/kotlin/io/element/android/features/knockrequests/impl/banner/KnockRequestsBannerView.kt

@@ -7,6 +7,9 @@
 
 package io.element.android.features.knockrequests.impl.banner
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.shrinkVertically
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
@@ -27,6 +30,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
@@ -52,96 +56,102 @@ private const val MAX_AVATAR_COUNT = 3
 @Composable
 fun KnockRequestsBannerView(
     state: KnockRequestsBannerState,
-    onDismissClick: () -> Unit,
     onViewRequestsClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    when (state) {
-        is KnockRequestsBannerState.Hidden -> Unit
-        is KnockRequestsBannerState.Visible -> VisibleKnockRequestsBannerView(
-            state = state,
-            onDismissClick = onDismissClick,
-            onViewRequestsClick = onViewRequestsClick,
-            modifier = modifier
-        )
+    AnimatedVisibility(
+        visible = state.isVisible,
+        enter = expandVertically(),
+        exit = shrinkVertically(),
+        modifier = modifier,
+    ) {
+        Surface(
+            shape = MaterialTheme.shapes.small,
+            color = ElementTheme.colors.bgCanvasDefaultLevel1,
+            shadowElevation = 24.dp,
+            modifier = Modifier.padding(16.dp),
+        ) {
+            KnockRequestsBannerContent(
+                state = state,
+                onViewRequestsClick = onViewRequestsClick,
+            )
+        }
     }
 }
 
 @Composable
-private fun VisibleKnockRequestsBannerView(
-    state: KnockRequestsBannerState.Visible,
-    onDismissClick: () -> Unit,
+private fun KnockRequestsBannerContent(
+    state: KnockRequestsBannerState,
     onViewRequestsClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Surface(
-        modifier.fillMaxWidth(),
-        shape = MaterialTheme.shapes.small,
-        color = ElementTheme.colors.bgCanvasDefaultLevel1,
-        shadowElevation = 24.dp
+    fun onDismissClick() {
+        state.eventSink(KnockRequestsBannerEvents.Dismiss)
+    }
+
+    Column(
+        modifier
+            .fillMaxWidth()
+            .padding(all = 16.dp)
     ) {
-        Column(
-                Modifier
-                        .fillMaxWidth()
-                        .padding(all = 16.dp)
-        ) {
-            Row {
-                KnockRequestAvatarView(state.knockRequests)
-                Spacer(modifier = Modifier.width(10.dp))
-                Column(modifier = Modifier.weight(1f)) {
+        Row {
+            KnockRequestAvatarView(state.knockRequests)
+            Spacer(modifier = Modifier.width(10.dp))
+            Column(modifier = Modifier.weight(1f)) {
+                Text(
+                    text = state.formattedTitle(),
+                    style = ElementTheme.typography.fontBodyMdMedium,
+                    color = MaterialTheme.colorScheme.primary,
+                    textAlign = TextAlign.Start,
+                )
+                if (state.subtitle != null) {
                     Text(
-                        text = state.formattedTitle(),
-                        style = ElementTheme.typography.fontBodyMdMedium,
-                        color = MaterialTheme.colorScheme.primary,
+                        text = state.subtitle,
+                        style = ElementTheme.typography.fontBodySmRegular,
+                        color = MaterialTheme.colorScheme.secondary,
                         textAlign = TextAlign.Start,
                     )
-                    if (state.subtitle != null) {
-                        Text(
-                            text = state.subtitle,
-                            style = ElementTheme.typography.fontBodySmRegular,
-                            color = MaterialTheme.colorScheme.secondary,
-                            textAlign = TextAlign.Start,
-                        )
-                    }
                 }
-                Icon(
-                    modifier = Modifier.clickable(onClick = onDismissClick),
-                    imageVector = CompoundIcons.Close(),
-                    contentDescription = stringResource(CommonStrings.action_close)
-                )
-            }
-            if (state.reason != null) {
-                Spacer(modifier = Modifier.height(16.dp))
-                Text(
-                    text = state.reason,
-                    color = ElementTheme.colors.textPrimary,
-                    style = ElementTheme.typography.fontBodyMdRegular,
-                )
             }
+            Icon(
+                modifier = Modifier.clickable(onClick = ::onDismissClick),
+                imageVector = CompoundIcons.Close(),
+                contentDescription = stringResource(CommonStrings.action_close)
+            )
+        }
+        if (state.reason != null) {
             Spacer(modifier = Modifier.height(16.dp))
-            Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(12.dp)) {
-                if (state.knockRequests.size > 1) {
+            Text(
+                text = state.reason,
+                color = ElementTheme.colors.textPrimary,
+                style = ElementTheme.typography.fontBodyMdRegular,
+                maxLines = 2,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+        Spacer(modifier = Modifier.height(16.dp))
+        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(12.dp)) {
+            if (state.knockRequests.size > 1) {
+                Button(
+                    text = "View all",
+                    onClick = onViewRequestsClick,
+                    size = ButtonSize.MediumLowPadding,
+                    modifier = Modifier.weight(1f),
+                )
+            } else {
+                OutlinedButton(
+                    text = "View",
+                    onClick = onViewRequestsClick,
+                    size = ButtonSize.MediumLowPadding,
+                    modifier = Modifier.weight(1f),
+                )
+                if (state.canAccept) {
                     Button(
-                        text = "View all",
-                        onClick = onViewRequestsClick,
+                        text = "Accept",
+                        onClick = {},
                         size = ButtonSize.MediumLowPadding,
                         modifier = Modifier.weight(1f),
                     )
-                } else {
-                    OutlinedButton(
-                        text = "View",
-                        onClick = onViewRequestsClick,
-                        size = ButtonSize.MediumLowPadding,
-                        modifier = Modifier.weight(1f),
-                    )
-                    if (state.canAccept) {
-                        Button(
-                            text = "Accept",
-                            onClick = {},
-                            size = ButtonSize.MediumLowPadding,
-                            modifier = Modifier.weight(1f),
-                        )
-                    }
                 }
             }
         }
@@ -178,11 +188,11 @@ private fun KnockRequestAvatarListView(
                 Box(
                     contentAlignment = Alignment.Center,
                     modifier = Modifier
-                            .size(size = avatarSize)
-                            .clip(CircleShape)
-                            .background(color = ElementTheme.colors.bgCanvasDefaultLevel1)
-                            .zIndex(-index.toFloat()),
-                    ) {
+                        .size(size = avatarSize)
+                        .clip(CircleShape)
+                        .background(color = ElementTheme.colors.bgCanvasDefaultLevel1)
+                        .zIndex(-index.toFloat()),
+                ) {
                     Avatar(
                         modifier = Modifier.padding(2.dp),
                         avatarData = knockRequest.getAvatarData(AvatarSize.KnockRequestBanner),
@@ -197,8 +207,6 @@ private fun KnockRequestAvatarListView(
 internal fun KnockRequestsBannerViewPreview(@PreviewParameter(KnockRequestsBannerStateProvider::class) state: KnockRequestsBannerState) = ElementPreview {
     KnockRequestsBannerView(
         state = state,
-        onDismissClick = {},
         onViewRequestsClick = {},
-        modifier = Modifier.padding(16.dp)
     )
 }