Create UnreadIndicatorAtom with preview.

features/invitelist/impl/src/main/kotlin/io/element/android/features/invitelist/impl/components/InviteSummaryRow.kt

@@ -16,7 +16,6 @@
 
 package io.element.android.features.invitelist.impl.components
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -28,14 +27,11 @@ 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.foundation.shape.CircleShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 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.platform.LocalContext
 import androidx.compose.ui.res.stringResource
@@ -52,6 +48,7 @@ import io.element.android.features.invitelist.impl.model.InviteListInviteSummary
 import io.element.android.features.invitelist.impl.model.InviteListInviteSummaryProvider
 import io.element.android.features.invitelist.impl.model.InviteSender
 import io.element.android.libraries.designsystem.ElementTextStyles
+import io.element.android.libraries.designsystem.atomic.atoms.UnreadIndicatorAtom
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
@@ -74,8 +71,8 @@ internal fun InviteSummaryRow(
 ) {
     Box(
         modifier = modifier
-                .fillMaxWidth()
+            .fillMaxWidth()
-                .heightIn(min = minHeight)
+            .heightIn(min = minHeight)
     ) {
         DefaultInviteSummaryRow(
             invite = invite,
@@ -93,9 +90,9 @@ internal fun DefaultInviteSummaryRow(
 ) {
     Row(
         modifier = Modifier
-                .fillMaxWidth()
+            .fillMaxWidth()
-                .padding(16.dp)
+            .padding(16.dp)
-                .height(IntrinsicSize.Min),
+            .height(IntrinsicSize.Min),
         verticalAlignment = Alignment.Top
     ) {
         Avatar(
@@ -104,9 +101,9 @@ internal fun DefaultInviteSummaryRow(
 
         Column(
             modifier = Modifier
-                    .padding(start = 16.dp, end = 4.dp)
+                .padding(start = 16.dp, end = 4.dp)
-                    .alignByBaseline()
+                .alignByBaseline()
-                    .weight(1f)
+                .weight(1f)
         ) {
             val bonusPadding = if (invite.isNew) 12.dp else 0.dp
 
@@ -145,7 +142,9 @@ internal fun DefaultInviteSummaryRow(
                 OutlinedButton(
                     content = { Text(stringResource(CommonStrings.action_decline), style = ElementTextStyles.Button) },
                     onClick = onDeclineClicked,
-                    modifier = Modifier.weight(1f).heightIn(max = 36.dp),
+                    modifier = Modifier
+                        .weight(1f)
+                        .heightIn(max = 36.dp),
                     contentPadding = PaddingValues(horizontal = 24.dp, vertical = 0.dp),
                 )
 
@@ -154,20 +153,16 @@ internal fun DefaultInviteSummaryRow(
                 Button(
                     content = { Text(stringResource(CommonStrings.action_accept), style = ElementTextStyles.Button) },
                     onClick = onAcceptClicked,
-                    modifier = Modifier.weight(1f).heightIn(max = 36.dp),
+                    modifier = Modifier
+                        .weight(1f)
+                        .heightIn(max = 36.dp),
                     contentPadding = PaddingValues(horizontal = 24.dp, vertical = 0.dp),
                 )
             }
         }
 
         val unreadIndicatorColor = if (invite.isNew) MaterialTheme.roomListUnreadIndicator() else Color.Transparent
-
+        UnreadIndicatorAtom(color = unreadIndicatorColor)
-        Box(
-            modifier = Modifier
-                    .size(12.dp)
-                    .clip(CircleShape)
-                    .background(unreadIndicatorColor)
-        )
     }
 }
 

features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/RoomListView.kt

@@ -28,12 +28,10 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 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.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Snackbar
@@ -46,7 +44,6 @@ import androidx.compose.runtime.getValue
 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.input.nestedscroll.NestedScrollConnection
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.res.stringResource
@@ -64,6 +61,7 @@ import io.element.android.features.roomlist.impl.components.RoomListTopBar
 import io.element.android.features.roomlist.impl.components.RoomSummaryRow
 import io.element.android.features.roomlist.impl.model.RoomListRoomSummary
 import io.element.android.features.roomlist.impl.search.RoomListSearchResultView
+import io.element.android.libraries.designsystem.atomic.atoms.UnreadIndicatorAtom
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Divider
@@ -71,7 +69,6 @@ import io.element.android.libraries.designsystem.theme.components.FloatingAction
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Scaffold
 import io.element.android.libraries.designsystem.theme.components.Text
-import io.element.android.libraries.designsystem.theme.roomListUnreadIndicator
 import io.element.android.libraries.designsystem.utils.LogCompositions
 import io.element.android.libraries.designsystem.utils.rememberSnackbarHostState
 import io.element.android.libraries.matrix.api.core.RoomId
@@ -275,12 +272,7 @@ private fun InvitesEntryPointView(
             if (state.invitesState == InvitesState.NewInvites) {
                 Spacer(Modifier.width(8.dp))
 
-                Box(
+                UnreadIndicatorAtom()
-                    modifier = Modifier
-                        .size(12.dp)
-                        .clip(CircleShape)
-                        .background(MaterialTheme.roomListUnreadIndicator())
-                )
             }
         }
     }

features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomSummaryRow.kt

@@ -17,10 +17,8 @@
 package io.element.android.features.roomlist.impl.components
 
 import androidx.compose.foundation.ExperimentalFoundationApi
-import androidx.compose.foundation.background
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
@@ -29,7 +27,6 @@ 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.shape.CircleShape
 import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.MaterialTheme
@@ -37,7 +34,6 @@ 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.geometry.Rect
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Color
@@ -57,6 +53,7 @@ import com.google.accompanist.placeholder.material.placeholder
 import io.element.android.features.roomlist.impl.model.RoomListRoomSummary
 import io.element.android.features.roomlist.impl.model.RoomListRoomSummaryProvider
 import io.element.android.libraries.core.extensions.orEmpty
+import io.element.android.libraries.designsystem.atomic.atoms.UnreadIndicatorAtom
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
@@ -182,12 +179,9 @@ private fun RowScope.LastMessageAndIndicatorRow(room: RoomListRoomSummary) {
     // Unread
     val unreadIndicatorColor =
         if (room.hasUnread) MaterialTheme.roomListUnreadIndicator() else Color.Transparent
-    Box(
+    UnreadIndicatorAtom(
-        modifier = Modifier
+        modifier = Modifier.padding(top = 3.dp),
-            .padding(top = 3.dp)
+        color = unreadIndicatorColor,
-            .size(12.dp)
-            .clip(CircleShape)
-            .background(unreadIndicatorColor),
     )
 }
 

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/UnreadIndicatorAtom.kt

@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2023 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.atomic.atoms
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.roomListUnreadIndicator
+
+@Composable
+fun UnreadIndicatorAtom(
+    modifier: Modifier = Modifier,
+    size: Dp = 12.dp,
+    color: Color = MaterialTheme.roomListUnreadIndicator(),
+) {
+    Box(
+        modifier = modifier
+            .size(size)
+            .clip(CircleShape)
+            .background(color)
+    )
+}
+
+@Preview
+@Composable
+internal fun UnreadIndicatorAtomLightPreview() =
+    ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+internal fun UnreadIndicatorAtomDarkPreview() =
+    ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    UnreadIndicatorAtom()
+}