Merge branch 'develop' into feature/fga/room_directory

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/BigCheckmark.kt

@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) 2024 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem.components
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.compound.tokens.generated.CompoundIcons
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.theme.bigCheckmarkBorderColor
+import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.theme.components.Surface
+import io.element.android.libraries.ui.strings.CommonStrings
+
+/**
+ * Compound component that displays a big checkmark centered in a rounded square.
+ *
+ * @param modifier the modifier to apply to this layout
+ */
+@Composable
+fun BigCheckmark(
+    modifier: Modifier = Modifier,
+) {
+    Surface(
+        modifier = modifier.size(120.dp),
+        shape = RoundedCornerShape(14.dp),
+        color = ElementTheme.colors.bgCanvasDefault,
+        border = BorderStroke(1.dp, ElementTheme.colors.bigCheckmarkBorderColor),
+        shadowElevation = 4.dp,
+    ) {
+        Box(contentAlignment = Alignment.Center) {
+            Icon(
+                modifier = Modifier.size(72.dp),
+                tint = ElementTheme.colors.iconSuccessPrimary,
+                imageVector = CompoundIcons.CheckCircleSolid(),
+                contentDescription = stringResource(CommonStrings.common_success)
+            )
+        }
+    }
+}
+
+@PreviewsDayNight
+@Composable
+internal fun BigCheckmarkPreview() {
+    ElementPreview {
+        Box(
+            modifier = Modifier.padding(10.dp),
+            contentAlignment = Alignment.Center,
+        ) {
+            BigCheckmark()
+        }
+    }
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/BigIcon.kt

@@ -0,0 +1,155 @@
+/*
+ * Copyright (c) 2024 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.CatchingPokemon
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import androidx.compose.ui.unit.dp
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.compound.tokens.generated.CompoundIcons
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.theme.bigIconDefaultBackgroundColor
+import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.ui.strings.CommonStrings
+
+/**
+ * Compound component that display a big icon centered in a rounded square.
+ */
+object BigIcon {
+    /**
+     * The style of the [BigIcon].
+     */
+    @Immutable
+    sealed interface Style {
+        /**
+         * The default style.
+         *
+         * @param vectorIcon the [ImageVector] to display
+         * @param contentDescription the content description of the icon, if any. It defaults to `null`
+         */
+        data class Default(val vectorIcon: ImageVector, val contentDescription: String? = null) : Style
+
+        /**
+         * An alert style with a transparent background.
+         */
+        data object Alert : Style
+
+        /**
+         * An alert style with a tinted background.
+         */
+        data object AlertSolid : Style
+
+        /**
+         * A success style with a transparent background.
+         */
+        data object Success : Style
+
+        /**
+         * A success style with a tinted background.
+         */
+        data object SuccessSolid : Style
+    }
+
+    /**
+     * Display a [BigIcon].
+     *
+     * @param style the style of the icon
+     * @param modifier the modifier to apply to this layout
+     */
+    @Composable
+    operator fun invoke(
+        style: Style,
+        modifier: Modifier = Modifier,
+    ) {
+        val backgroundColor = when (style) {
+            is Style.Default -> ElementTheme.colors.bigIconDefaultBackgroundColor
+            Style.Alert, Style.Success -> Color.Transparent
+            Style.AlertSolid -> ElementTheme.colors.bgCriticalSubtle
+            Style.SuccessSolid -> ElementTheme.colors.bgSuccessSubtle
+        }
+        val icon = when (style) {
+            is Style.Default -> style.vectorIcon
+            Style.Alert, Style.AlertSolid -> CompoundIcons.Error()
+            Style.Success, Style.SuccessSolid -> CompoundIcons.CheckCircleSolid()
+        }
+        val contentDescription = when (style) {
+            is Style.Default -> style.contentDescription
+            Style.Alert, Style.AlertSolid -> stringResource(CommonStrings.common_error)
+            Style.Success, Style.SuccessSolid -> stringResource(CommonStrings.common_success)
+        }
+        val iconTint = when (style) {
+            is Style.Default -> ElementTheme.colors.iconSecondaryAlpha
+            Style.Alert, Style.AlertSolid -> ElementTheme.colors.iconCriticalPrimary
+            Style.Success, Style.SuccessSolid -> ElementTheme.colors.iconSuccessPrimary
+        }
+        Box(
+            modifier = modifier
+                .size(64.dp)
+                .clip(RoundedCornerShape(14.dp))
+                .background(backgroundColor),
+            contentAlignment = Alignment.Center,
+        ) {
+            Icon(
+                modifier = Modifier.size(32.dp),
+                tint = iconTint,
+                imageVector = icon,
+                contentDescription = contentDescription
+            )
+        }
+    }
+}
+
+@PreviewsDayNight
+@Composable
+internal fun BigIconPreview() {
+    ElementPreview {
+        Row(horizontalArrangement = Arrangement.spacedBy(10.dp), modifier = Modifier.padding(10.dp)) {
+            val provider = BigIconStylePreviewProvider()
+            for (style in provider.values) {
+                BigIcon(style = style)
+            }
+        }
+    }
+}
+
+internal class BigIconStylePreviewProvider : PreviewParameterProvider<BigIcon.Style> {
+    override val values: Sequence<BigIcon.Style>
+        get() = sequenceOf(
+            BigIcon.Style.Default(Icons.Filled.CatchingPokemon),
+            BigIcon.Style.Alert,
+            BigIcon.Style.AlertSolid,
+            BigIcon.Style.Success,
+            BigIcon.Style.SuccessSolid
+        )
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/PageTitle.kt

@@ -0,0 +1,137 @@
+/*
+ * Copyright (c) 2024 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.compound.tokens.generated.CompoundIcons
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.designsystem.theme.components.TextButton
+
+/**
+ * Compound component that displays a big icon, a title, an optional subtitle and an optional call to action component.
+ *
+ * @param title the title to display
+ * @param iconStyle the style of the [BigIcon] to display
+ * @param modifier the modifier to apply to this layout
+ * @param subtitle the optional subtitle to display. It defaults to `null`
+ * @param callToAction the optional call to action component to display. It defaults to `null`
+ */
+@Composable
+fun PageTitle(
+    title: AnnotatedString,
+    iconStyle: BigIcon.Style,
+    modifier: Modifier = Modifier,
+    subtitle: AnnotatedString? = null,
+    callToAction: @Composable (() -> Unit)? = null,
+) {
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(bottom = 40.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        BigIcon(style = iconStyle)
+        Column(
+            modifier = Modifier.padding(vertical = 16.dp),
+            verticalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            Text(
+                modifier = Modifier.fillMaxWidth(),
+                text = title,
+                style = ElementTheme.typography.fontHeadingMdBold,
+                color = ElementTheme.colors.textPrimary,
+                textAlign = TextAlign.Center,
+            )
+
+            subtitle?.let {
+                Text(
+                    modifier = Modifier.fillMaxWidth(),
+                    text = it,
+                    style = ElementTheme.typography.fontBodyMdRegular,
+                    color = ElementTheme.colors.textSecondary,
+                    textAlign = TextAlign.Center,
+                )
+            }
+        }
+        callToAction?.invoke()
+    }
+}
+
+/**
+ * Compound component that displays a big icon, a title, an optional subtitle and an optional call to action component.
+ *
+ * @param title the title to display
+ * @param iconStyle the style of the [BigIcon] to display
+ * @param modifier the modifier to apply to this layout
+ * @param subtitle the optional subtitle to display. It defaults to `null`
+ * @param callToAction the optional call to action component to display. It defaults to `null`
+ */
+@Composable
+fun PageTitle(
+    title: String,
+    iconStyle: BigIcon.Style,
+    modifier: Modifier = Modifier,
+    subtitle: String? = null,
+    callToAction: @Composable (() -> Unit)? = null,
+) = PageTitle(
+    title = AnnotatedString(title),
+    iconStyle = iconStyle,
+    modifier = modifier,
+    subtitle = subtitle?.let { AnnotatedString(it) },
+    callToAction = callToAction
+)
+
+@PreviewsDayNight
+@Composable
+internal fun TitleWithIconFullPreview(@PreviewParameter(BigIconStylePreviewProvider::class) style: BigIcon.Style) {
+    ElementPreview {
+        PageTitle(
+            modifier = Modifier.padding(top = 24.dp),
+            title = AnnotatedString("Headline"),
+            subtitle = AnnotatedString("Description goes here"),
+            iconStyle = style,
+            callToAction = {
+                TextButton(text = "Learn more", onClick = {})
+            }
+        )
+    }
+}
+
+@PreviewsDayNight
+@Composable
+internal fun TitleWithIconMinimalPreview() {
+    ElementPreview {
+        PageTitle(
+            modifier = Modifier.padding(top = 24.dp),
+            title = "Headline",
+            iconStyle = BigIcon.Style.Default(CompoundIcons.CheckCircleSolid()),
+        )
+    }
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/blurhash/BlurHashAsyncImage.kt

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023 New Vector Ltd
+ * Copyright (c) 2024 New Vector Ltd
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,27 +14,22 @@
  * limitations under the License.
  */
 
-package io.element.android.libraries.designsystem.components
+package io.element.android.libraries.designsystem.components.blurhash
 
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.layout.ContentScale
 import coil.compose.AsyncImage
-import com.vanniktech.blurhash.BlurHash
 
 @Composable
 fun BlurHashAsyncImage(
@@ -69,31 +64,3 @@ fun BlurHashAsyncImage(
         }
     }
 }
-
-@Composable
-private fun BlurHashImage(
-    blurHash: String?,
-    contentDescription: String? = null,
-    contentScale: ContentScale = ContentScale.Fit,
-) {
-    if (blurHash == null) return
-    val bitmapState = remember(blurHash) {
-        mutableStateOf(
-            // Build a small blurhash image so that it's fast
-            BlurHash.decode(blurHash, 10, 10)
-        )
-    }
-    DisposableEffect(blurHash) {
-        onDispose {
-            bitmapState.value?.recycle()
-        }
-    }
-    bitmapState.value?.let { bitmap ->
-        Image(
-            modifier = Modifier.fillMaxSize(),
-            bitmap = bitmap.asImageBitmap(),
-            contentScale = contentScale,
-            contentDescription = contentDescription
-        )
-    }
-}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/blurhash/BlurHashBackgroundModifier.kt

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2024 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem.components.blurhash
+
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.unit.IntSize
+
+fun Modifier.blurHashBackground(blurHash: String?, alpha: Float = 1f) = this.composed {
+    val blurHashBitmap = rememberBlurHashImage(blurHash)
+    if (blurHashBitmap != null) {
+        Modifier.drawBehind {
+            drawImage(blurHashBitmap, dstSize = IntSize(size.width.toInt(), size.height.toInt()), alpha = alpha)
+        }
+    } else {
+        this
+    }
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/blurhash/BlurHashImage.kt

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2024 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem.components.blurhash
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.produceState
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.graphics.asImageBitmap
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalInspectionMode
+import com.vanniktech.blurhash.BlurHash
+
+@Suppress("ModifierMissing")
+@Composable
+fun BlurHashImage(
+    blurHash: String?,
+    contentDescription: String? = null,
+    contentScale: ContentScale = ContentScale.Fit,
+) {
+    if (blurHash == null) return
+    val blurHashImage = rememberBlurHashImage(blurHash)
+    blurHashImage?.let { bitmap ->
+        Image(
+            modifier = Modifier.fillMaxSize(),
+            bitmap = bitmap,
+            contentScale = contentScale,
+            contentDescription = contentDescription
+        )
+    }
+}
+
+@Composable
+fun rememberBlurHashImage(blurHash: String?): ImageBitmap? {
+    return if (LocalInspectionMode.current) {
+        blurHash?.let { BlurHash.decode(it, 10, 10)?.asImageBitmap() }
+    } else {
+        produceState<ImageBitmap?>(initialValue = null, blurHash) {
+            blurHash?.let { value = BlurHash.decode(it, 10, 10)?.asImageBitmap() }
+        }.value
+    }
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt

@@ -19,9 +19,12 @@ package io.element.android.libraries.designsystem.theme
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
+import io.element.android.compound.annotations.CoreColorToken
 import io.element.android.compound.previews.ColorListPreview
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.SemanticColors
+import io.element.android.compound.tokens.generated.internal.DarkColorTokens
+import io.element.android.compound.tokens.generated.internal.LightColorTokens
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import kotlinx.collections.immutable.persistentMapOf
@@ -138,6 +141,14 @@ val SemanticColors.mentionPillBackground
         Color(0x26f4f7fa)
     }
 
+@OptIn(CoreColorToken::class)
+val SemanticColors.bigIconDefaultBackgroundColor
+    get() = if (isLight) LightColorTokens.colorAlphaGray300 else DarkColorTokens.colorAlphaGray300
+
+@OptIn(CoreColorToken::class)
+val SemanticColors.bigCheckmarkBorderColor
+    get() = if (isLight) LightColorTokens.colorGray400 else DarkColorTokens.colorGray400
+
 @PreviewsDayNight
 @Composable
 internal fun ColorAliasesPreview() = ElementPreview {
@@ -155,6 +166,7 @@ internal fun ColorAliasesPreview() = ElementPreview {
             "progressIndicatorTrackColor" to ElementTheme.colors.progressIndicatorTrackColor,
             "temporaryColorBgSpecial" to ElementTheme.colors.temporaryColorBgSpecial,
             "iconSuccessPrimaryBackground" to ElementTheme.colors.iconSuccessPrimaryBackground,
+            "bigIconBackgroundColor" to ElementTheme.colors.bigIconDefaultBackgroundColor,
         )
     )
 }