Improve comment replies dialog layout

Author: Stypox

app/src/main/java/org/schabi/newpipe/ui/components/video/comment/CommentRepliesDialog.kt

@@ -6,9 +6,7 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.HorizontalDivider
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
-import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
@@ -65,41 +63,42 @@ private fun CommentRepliesDialog(
     val state = rememberLazyListState()
 
     ModalBottomSheet(onDismissRequest = onDismissRequest) {
-        Surface(color = MaterialTheme.colorScheme.background) {
-            LazyColumnScrollbar(
-                state = state,
-                settings = ScrollbarSettings.Default.copy(
-                    thumbSelectedColor = md_theme_dark_primary,
-                    thumbUnselectedColor = Color.Red
-                )
+        LazyColumnScrollbar(
+            state = state,
+            settings = ScrollbarSettings.Default.copy(
+                thumbSelectedColor = md_theme_dark_primary,
+                thumbUnselectedColor = Color.Red
+            )
+        ) {
+            LazyColumn(
+                modifier = Modifier.nestedScroll(nestedScrollInterop),
+                state = state
             ) {
-                LazyColumn(
-                    modifier = Modifier.nestedScroll(nestedScrollInterop),
-                    state = state
-                ) {
-                    item {
-                        CommentRepliesHeader(comment = parentComment)
-                        HorizontalDivider(thickness = 1.dp)
-                    }
+                item {
+                    CommentRepliesHeader(comment = parentComment)
+                    HorizontalDivider(
+                        thickness = 1.dp,
+                        modifier = Modifier.padding(start = 24.dp, end = 24.dp, bottom = 8.dp)
+                    )
+                }
 
-                    if (comments.itemCount == 0) {
-                        item {
-                            val refresh = comments.loadState.refresh
-                            if (refresh is LoadState.Loading) {
-                                LoadingIndicator(modifier = Modifier.padding(top = 8.dp))
+                if (comments.itemCount == 0) {
+                    item {
+                        val refresh = comments.loadState.refresh
+                        if (refresh is LoadState.Loading) {
+                            LoadingIndicator(modifier = Modifier.padding(top = 8.dp))
+                        } else {
+                            val message = if (refresh is LoadState.Error) {
+                                R.string.error_unable_to_load_comments
                             } else {
-                                val message = if (refresh is LoadState.Error) {
-                                    R.string.error_unable_to_load_comments
-                                } else {
-                                    R.string.no_comments
-                                }
-                                NoItemsMessage(message)
+                                R.string.no_comments
                             }
+                            NoItemsMessage(message)
                         }
-                    } else {
-                        items(comments.itemCount) {
-                            Comment(comment = comments[it]!!)
-                        }
+                    }
+                } else {
+                    items(comments.itemCount) {
+                        Comment(comment = comments[it]!!)
                     }
                 }
             }

app/src/main/java/org/schabi/newpipe/ui/components/video/comment/CommentRepliesHeader.kt

@@ -20,6 +20,7 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import coil.compose.AsyncImage
@@ -43,11 +44,13 @@ fun CommentRepliesHeader(comment: CommentsInfoItem) {
             verticalAlignment = Alignment.CenterVertically
         ) {
             Row(
-                modifier = Modifier.clickable {
-                    NavigationHelper.openCommentAuthorIfPresent(context, comment)
-                },
+                modifier = Modifier
+                    .padding(end = 12.dp)
+                    .clip(CircleShape)
+                    .clickable { NavigationHelper.openCommentAuthorIfPresent(context, comment) }
+                    .weight(1.0f, true),
                 horizontalArrangement = Arrangement.spacedBy(8.dp),
-                verticalAlignment = Alignment.CenterVertically
+                verticalAlignment = Alignment.CenterVertically,
             ) {
                 AsyncImage(
                     model = ImageStrategy.choosePreferredImage(comment.uploaderAvatars),
@@ -60,14 +63,18 @@ fun CommentRepliesHeader(comment: CommentsInfoItem) {
                 )
 
                 Column {
-                    Text(text = comment.uploaderName)
+                    Text(
+                        text = comment.uploaderName,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                        style = MaterialTheme.typography.titleSmall,
+                    )
 
                     Text(
-                        color = MaterialTheme.colorScheme.secondary,
-                        style = MaterialTheme.typography.bodySmall,
                         text = Localization.relativeTimeOrTextual(
                             context, comment.uploadDate, comment.textualUploadDate
-                        )
+                        ),
+                        style = MaterialTheme.typography.bodySmall,
                     )
                 }
             }
@@ -80,7 +87,10 @@ fun CommentRepliesHeader(comment: CommentsInfoItem) {
                     painter = painterResource(R.drawable.ic_thumb_up),
                     contentDescription = stringResource(R.string.detail_likes_img_view_description)
                 )
-                Text(text = Localization.likeCount(context, comment.likeCount))
+                Text(
+                    text = Localization.likeCount(context, comment.likeCount),
+                    maxLines = 1,
+                )
 
                 if (comment.isHeartedByUploader) {
                     Image(
@@ -100,7 +110,8 @@ fun CommentRepliesHeader(comment: CommentsInfoItem) {
 
         DescriptionText(
             description = comment.commentText,
-            style = MaterialTheme.typography.bodyMedium
+            style = MaterialTheme.typography.bodyMedium,
+            modifier = Modifier.padding(8.dp)
         )
     }
 }
@@ -111,7 +122,7 @@ fun CommentRepliesHeader(comment: CommentsInfoItem) {
 fun CommentRepliesHeaderPreview() {
     val comment = CommentsInfoItem(
         commentText = Description("Hello world!", Description.PLAIN_TEXT),
-        uploaderName = "Test",
+        uploaderName = "Test really long lorem ipsum dolor sit",
         likeCount = 1000,
         isPinned = true,
         isHeartedByUploader = true