Reuse UnreadAtom composable

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

@@ -16,6 +16,7 @@ import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.scaleIn
 import androidx.compose.animation.scaleOut
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
@@ -87,6 +88,7 @@ import io.element.android.features.messages.impl.timeline.model.event.TimelineIt
 import io.element.android.features.messages.impl.timeline.protection.TimelineProtectionState
 import io.element.android.features.messages.impl.timeline.protection.aTimelineProtectionState
 import io.element.android.libraries.androidutils.system.copyToClipboard
+import io.element.android.libraries.designsystem.atomic.atoms.UnreadIndicatorAtom
 import io.element.android.libraries.designsystem.components.dialogs.AlertDialog
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@@ -561,30 +563,19 @@ private fun JumpToPositionButton(
                 }
             }
             val dotYOffset = if (dotAlignment == Alignment.BottomCenter) 4.dp else (-4).dp
-            TimelineUnreadIndicator(
+            if (hasUnread) {
-                isVisible = hasUnread,
+                UnreadIndicatorAtom(
-                modifier = Modifier
+                    modifier = Modifier
-                    .align(dotAlignment)
+                        .align(dotAlignment)
-                    .offset { IntOffset(x = 0, y = dotYOffset.roundToPx()) },
+                        .offset { IntOffset(x = 0, y = dotYOffset.roundToPx()) },
-            )
+                    color = ElementTheme.colors.iconSuccessPrimary,
+                    border = BorderStroke(2.dp, ElementTheme.colors.bgCanvasDefault),
+                )
+            }
         }
     }
 }
 
-@Composable
-private fun TimelineUnreadIndicator(
-    isVisible: Boolean,
-    modifier: Modifier = Modifier,
-) {
-    if (!isVisible) return
-    Box(
-        modifier = modifier
-            .size(12.dp)
-            .background(color = ElementTheme.colors.iconSuccessPrimary, shape = CircleShape)
-            .border(width = 2.dp, color = ElementTheme.colors.bgCanvasDefault, shape = CircleShape),
-    )
-}
-
 @PreviewsDayNight
 @Composable
 internal fun TimelineViewPreview(

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

@@ -8,7 +8,9 @@
 
 package io.element.android.libraries.designsystem.atomic.atoms
 
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
@@ -32,6 +34,7 @@ fun UnreadIndicatorAtom(
     color: Color = ElementTheme.colors.unreadIndicator,
     isVisible: Boolean = true,
     contentDescription: String? = null,
+    border: BorderStroke? = null,
 ) {
     Box(
         modifier = modifier
@@ -41,6 +44,7 @@ fun UnreadIndicatorAtom(
             .size(size)
             .clip(CircleShape)
             .background(if (isVisible) color else Color.Transparent)
+            .then(if (border != null) Modifier.border(border, CircleShape) else Modifier)
     )
 }