Fix live chat badge contrast and tab synchronization bug

Author: Ecomont

app/src/main/java/org/schabi/newpipe/fragments/detail/VideoDetailFragment.kt

@@ -928,16 +928,14 @@ class VideoDetailFragment :
             return
         }
 
-        val commentsPosition = pageAdapter.getItemPositionByTitle(COMMENTS_TAB_TAG)
-        val insertPosition = if (commentsPosition >= 0) commentsPosition + 1 else pageAdapter.count
-
+        // Append live chat tab at the end to avoid FragmentPagerAdapter
+        // position synchronization issues when inserting in the middle
         pageAdapter.addFragment(
             LiveChatFragment.getInstance(serviceId, url, continuation),
-            LIVE_CHAT_TAB_TAG,
-            insertPosition
+            LIVE_CHAT_TAB_TAG
         )
-        tabIcons.add(insertPosition, R.drawable.ic_live_tv)
-        tabContentDescriptions.add(insertPosition, R.string.live_chat_tab_description)
+        tabIcons.add(R.drawable.ic_live_tv)
+        tabContentDescriptions.add(R.string.live_chat_tab_description)
         pageAdapter.notifyDataSetUpdate()
         updateTabIconsAndContentDescriptions()
         updateTabLayoutVisibility()

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

@@ -12,6 +12,7 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.KeyboardArrowUp
+import androidx.compose.material3.Badge
 import androidx.compose.material3.BadgedBox
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
@@ -106,12 +107,15 @@ fun LiveChatSection(liveChatViewModel: LiveChatViewModel = viewModel()) {
             ) {
                 BadgedBox(
                     badge = {
-                        Text(
-                            text = unreadCount.toString(),
-                            modifier = Modifier.padding(4.dp),
-                            style = MaterialTheme.typography.labelSmall,
-                            color = MaterialTheme.colorScheme.onPrimary
-                        )
+                        Badge(
+                            containerColor = MaterialTheme.colorScheme.error,
+                            contentColor = MaterialTheme.colorScheme.onError
+                        ) {
+                            Text(
+                                text = unreadCount.toString(),
+                                style = MaterialTheme.typography.labelSmall
+                            )
+                        }
                     }
                 ) {
                     Icon(