ui: fix layout jump when collapsing telegram channel topics and Added Telegram, GitHub buttons in About screen

app/src/main/java/com/theveloper/pixelplay/presentation/screens/AboutScreen.kt

@@ -83,6 +83,9 @@ import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.role
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
@@ -130,7 +133,6 @@ private val CoreMaintainer = Contributor(
     avatarUrl = "https://avatars.githubusercontent.com/u/26845343?v=4",
     iconRes = R.drawable.round_developer_board_24,
     githubUrl = "https://github.com/theovilardo",
-    telegramUrl = "https://t.me/thevelopersupport",
 )
 
 private val PinnedCommunityMembers = listOf(
@@ -497,6 +499,7 @@ private fun AboutHeroCard(
 ) {
     val heroShape = AbsoluteSmoothCornerShape(30.dp, 60)
     val haptic = LocalHapticFeedback.current
+    val context = LocalContext.current
 
     Surface(
         modifier = modifier,
@@ -578,6 +581,82 @@ private fun AboutHeroCard(
                 Spacer(modifier = Modifier.height(12.dp))
 
                 CommunitySignalsRow()
+
+                Spacer(modifier = Modifier.height(12.dp))
+
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.spacedBy(8.dp),
+                ) {
+                    SocialChip(
+                        label = stringResource(R.string.about_github_label),
+                        subtitle = stringResource(R.string.about_github_subtitle),
+                        iconRes = R.drawable.github,
+                        contentDescription = stringResource(R.string.about_cd_open_github_repo),
+                        onClick = { openUrl(context, "https://github.com/theovilardo/PixelPlayer") },
+                        modifier = Modifier.weight(1f),
+                    )
+                    SocialChip(
+                        label = stringResource(R.string.about_telegram_label),
+                        subtitle = stringResource(R.string.about_telegram_subtitle),
+                        iconRes = R.drawable.telegram,
+                        contentDescription = stringResource(R.string.about_cd_join_telegram),
+                        onClick = { openUrl(context, "https://t.me/thevelopersupport") },
+                        modifier = Modifier.weight(1f),
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun SocialChip(
+    label: String,
+    subtitle: String,
+    @DrawableRes iconRes: Int,
+    contentDescription: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Surface(
+        onClick = onClick,
+        modifier = modifier
+            .height(52.dp)
+            .clearAndSetSemantics {
+                this.contentDescription = contentDescription
+                this.role = Role.Button
+            },
+        shape = AbsoluteSmoothCornerShape(14.dp, 60),
+        color = MaterialTheme.colorScheme.surfaceContainerHigh.copy(alpha = 0.92f),
+        tonalElevation = 1.dp,
+    ) {
+        Row(
+            modifier = Modifier.padding(horizontal = 12.dp),
+            horizontalArrangement = Arrangement.Start,
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Icon(
+                painter = painterResource(iconRes),
+                contentDescription = null,
+                modifier = Modifier.size(20.dp),
+                tint = MaterialTheme.colorScheme.primary,
+            )
+            Spacer(modifier = Modifier.width(10.dp))
+            Column(
+                verticalArrangement = Arrangement.Center
+            ) {
+                Text(
+                    text = label,
+                    style = MaterialTheme.typography.labelLarge,
+                    fontWeight = FontWeight.Bold,
+                    color = MaterialTheme.colorScheme.onSurface,
+                )
+                Text(
+                    text = subtitle,
+                    style = MaterialTheme.typography.labelSmall,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                )
             }
         }
     }

app/src/main/java/com/theveloper/pixelplay/presentation/telegram/dashboard/TelegramDashboardScreen.kt

@@ -348,15 +348,20 @@ fun TelegramDashboardScreen(
                     )
                 },
                 confirmButton = {
-                    TextButton(onClick = {
-                        viewModel.removeChannel(channel.chatId)
-                        channelPendingRemoval = null
-                    }) {
+                    FilledTonalButton(
+                        onClick = {
+                            viewModel.removeChannel(channel.chatId)
+                            channelPendingRemoval = null
+                        },
+                        colors = androidx.compose.material3.ButtonDefaults.filledTonalButtonColors(
+                            containerColor = MaterialTheme.colorScheme.errorContainer,
+                            contentColor = MaterialTheme.colorScheme.onErrorContainer
+                        )
+                    ) {
                         Text(
                             text = stringResource(R.string.telegram_remove_channel_confirm_action),
                             fontFamily = GoogleSansRounded,
-                            fontWeight = FontWeight.SemiBold,
-                            color = MaterialTheme.colorScheme.error
+                            fontWeight = FontWeight.SemiBold
                         )
                     }
                 },
@@ -427,8 +432,7 @@ private fun ExpressiveChannelItem(
         Column(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(horizontal = 16.dp, vertical = 14.dp),
-            verticalArrangement = Arrangement.spacedBy(14.dp)
+                .padding(horizontal = 16.dp, vertical = 14.dp)
         ) {
             // ── Channel header row ──────────────────────────────────────
             Row(
@@ -486,6 +490,8 @@ private fun ExpressiveChannelItem(
                 }
             }
 
+            Spacer(modifier = Modifier.height(14.dp))
+
             // ── Meta pills ──────────────────────────────────────────────
             FlowRow(
                 horizontalArrangement = Arrangement.spacedBy(8.dp),
@@ -515,6 +521,8 @@ private fun ExpressiveChannelItem(
                 }
             }
 
+            Spacer(modifier = Modifier.height(14.dp))
+
             // ── Action buttons ──────────────────────────────────────────
             Row(
                 modifier = Modifier.fillMaxWidth(),
@@ -593,6 +601,7 @@ private fun ExpressiveChannelItem(
                     modifier = Modifier.fillMaxWidth(),
                     verticalArrangement = Arrangement.spacedBy(0.dp)
                 ) {
+                    Spacer(modifier = Modifier.height(14.dp))
                     HorizontalDivider(
                         modifier = Modifier.padding(vertical = 4.dp),
                         color = MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.5f)

app/src/main/res/values-ar/strings_settings.xml

@@ -297,4 +297,10 @@
     <string name="backup_history_modules_line">وحدات عدد %1$d · إصدار %2$s · إصدار المخطط البرمجي %3$d</string>
     <string name="setcat_language_korean">Korean (الكورية)</string>
     <string name="setcat_language_norwegian_bokmal">Norwegian (النرويجية بوكمول)</string>
+    <string name="about_github_label">GitHub</string>
+    <string name="about_github_subtitle">مستودع الكود</string>
+    <string name="about_telegram_label">تليجرام</string>
+    <string name="about_telegram_subtitle">الدعم</string>
+    <string name="about_cd_open_github_repo">فتح مستودع GitHub</string>
+    <string name="about_cd_join_telegram">الانضمام إلى مجتمع تليجرام</string>
 </resources>

app/src/main/res/values-de/strings_settings.xml

@@ -633,6 +633,12 @@
     <string name="about_contributors_section_title">Open-Source-Mitwirkende</string>
     <string name="about_contributors_section_subtitle">Aktuelle Mitwirkenden-Liste von GitHub.</string>
     <string name="about_contributions_format">%1$d Beiträge</string>
+    <string name="about_github_label">GitHub</string>
+    <string name="about_github_subtitle">Repository</string>
+    <string name="about_telegram_label">Telegram</string>
+    <string name="about_telegram_subtitle">Support</string>
+    <string name="about_cd_open_github_repo">GitHub-Repository öffnen</string>
+    <string name="about_cd_join_telegram">Der Telegram-Community beitreten</string>
     <string name="about_cd_open_github_profile">GitHub-Profil öffnen</string>
     <string name="about_cd_open_telegram">Telegram öffnen</string>
     <string name="about_cd_contributor_avatar">Avatar von %1$s</string>

app/src/main/res/values-es/strings_settings.xml

@@ -633,6 +633,12 @@
     <string name="about_contributors_section_title">Colaboradores de código abierto</string>
     <string name="about_contributors_section_subtitle">Lista de colaboradores en vivo desde GitHub.</string>
     <string name="about_contributions_format">%1$d contrib.</string>
+    <string name="about_github_label">GitHub</string>
+    <string name="about_github_subtitle">Repositorio</string>
+    <string name="about_telegram_label">Telegram</string>
+    <string name="about_telegram_subtitle">Soporte</string>
+    <string name="about_cd_open_github_repo">Abrir repositorio de GitHub</string>
+    <string name="about_cd_join_telegram">Unirse a la comunidad de Telegram</string>
     <string name="about_cd_open_github_profile">Abrir perfil de GitHub</string>
     <string name="about_cd_open_telegram">Abrir Telegram</string>
     <string name="about_cd_contributor_avatar">Avatar de %1$s</string>

app/src/main/res/values-fr/strings_settings.xml

@@ -629,6 +629,12 @@
     <string name="about_contributors_section_title">Contributeurs open source</string>
     <string name="about_contributors_section_subtitle">Liste des contributeurs en direct de GitHub.</string>
     <string name="about_contributions_format">%1$d contrib.</string>
+    <string name="about_github_label">GitHub</string>
+    <string name="about_github_subtitle">Dépôt</string>
+    <string name="about_telegram_label">Telegram</string>
+    <string name="about_telegram_subtitle">Support</string>
+    <string name="about_cd_open_github_repo">Ouvrir le dépôt GitHub</string>
+    <string name="about_cd_join_telegram">Rejoindre la communauté Telegram</string>
     <string name="about_cd_open_github_profile">Ouvrir le profil GitHub</string>
     <string name="about_cd_open_telegram">Ouvrir Telegram</string>
     <string name="about_cd_contributor_avatar">Avatar de %1$s</string>

app/src/main/res/values-in/strings_settings.xml

@@ -629,6 +629,12 @@
     <string name="about_contributors_section_title">Kontributor open source</string>
     <string name="about_contributors_section_subtitle">Daftar kontributor langsung dari GitHub.</string>
     <string name="about_contributions_format">%1$d kontrib.</string>
+    <string name="about_github_label">GitHub</string>
+    <string name="about_github_subtitle">Repositori</string>
+    <string name="about_telegram_label">Telegram</string>
+    <string name="about_telegram_subtitle">Dukungan</string>
+    <string name="about_cd_open_github_repo">Buka repositori GitHub</string>
+    <string name="about_cd_join_telegram">Bergabung dengan komunitas Telegram</string>
     <string name="about_cd_open_github_profile">Buka profil GitHub</string>
     <string name="about_cd_open_telegram">Buka Telegram</string>
     <string name="about_cd_contributor_avatar">Avatar %1$s</string>

app/src/main/res/values-it/strings_settings.xml

@@ -633,6 +633,12 @@
     <string name="about_contributors_section_title">Contributori open source</string>
     <string name="about_contributors_section_subtitle">Lista contributori live da GitHub.</string>
     <string name="about_contributions_format">%1$d contrib.</string>
+    <string name="about_github_label">GitHub</string>
+    <string name="about_github_subtitle">Repository</string>
+    <string name="about_telegram_label">Telegram</string>
+    <string name="about_telegram_subtitle">Supporto</string>
+    <string name="about_cd_open_github_repo">Apri repository GitHub</string>
+    <string name="about_cd_join_telegram">Unisciti alla community di Telegram</string>
     <string name="about_cd_open_github_profile">Apri profilo GitHub</string>
     <string name="about_cd_open_telegram">Apri Telegram</string>
     <string name="about_cd_contributor_avatar">Avatar di %1$s</string>

app/src/main/res/values-ko/strings_settings.xml

@@ -633,6 +633,12 @@
     <string name="about_contributors_section_title">오픈 소스 기여자</string>
     <string name="about_contributors_section_subtitle">GitHub의 실시간 기여자 목록입니다.</string>
     <string name="about_contributions_format">기여 %1$d회</string>
+    <string name="about_github_label">GitHub</string>
+    <string name="about_github_subtitle">저장소</string>
+    <string name="about_telegram_label">Telegram</string>
+    <string name="about_telegram_subtitle">지원</string>
+    <string name="about_cd_open_github_repo">GitHub 저장소 열기</string>
+    <string name="about_cd_join_telegram">Telegram 커뮤니티 가입</string>
     <string name="about_cd_open_github_profile">GitHub 프로필 열기</string>
     <string name="about_cd_open_telegram">Telegram 열기</string>
     <string name="about_cd_contributor_avatar">%1$s 아바타</string>

app/src/main/res/values-nb/strings_settings.xml

@@ -633,6 +633,12 @@
     <string name="about_contributors_section_title">Bidragsytere til åpen kildekode</string>
     <string name="about_contributors_section_subtitle">Live bidragsyterliste fra GitHub.</string>
     <string name="about_contributions_format">%1$d bidrag.</string>
+    <string name="about_github_label">GitHub</string>
+    <string name="about_github_subtitle">Kodelager</string>
+    <string name="about_telegram_label">Telegram</string>
+    <string name="about_telegram_subtitle">Støtte</string>
+    <string name="about_cd_open_github_repo">Åpne GitHub-kodelager</string>
+    <string name="about_cd_join_telegram">Bli med i Telegram-samfunnet</string>
     <string name="about_cd_open_github_profile">Åpne GitHub-profil</string>
     <string name="about_cd_open_telegram">Åpne Telegram</string>
     <string name="about_cd_contributor_avatar">Avatar av %1$s</string>

app/src/main/res/values-ru/strings_settings.xml

@@ -633,6 +633,12 @@
     <string name="about_contributors_section_title">Участники open source</string>
     <string name="about_contributors_section_subtitle">Актуальный список участников с GitHub.</string>
     <string name="about_contributions_format">%1$d вклад.</string>
+    <string name="about_github_label">GitHub</string>
+    <string name="about_github_subtitle">Репозиторий</string>
+    <string name="about_telegram_label">Telegram</string>
+    <string name="about_telegram_subtitle">Поддержка</string>
+    <string name="about_cd_open_github_repo">Открыть репозиторий GitHub</string>
+    <string name="about_cd_join_telegram">Присоединиться к сообществу Telegram</string>
     <string name="about_cd_open_github_profile">Открыть профиль GitHub</string>
     <string name="about_cd_open_telegram">Открыть Telegram</string>
     <string name="about_cd_contributor_avatar">Аватар %1$s</string>

app/src/main/res/values-tr/strings_settings.xml

@@ -633,6 +633,12 @@
     <string name="about_contributors_section_title">Açık kaynak katkıda bulunanlar</string>
     <string name="about_contributors_section_subtitle">GitHub\'dan canlı katkıda bulunanlar listesi.</string>
     <string name="about_contributions_format">%1$d katkı</string>
+    <string name="about_github_label">GitHub</string>
+    <string name="about_github_subtitle">Depo</string>
+    <string name="about_telegram_label">Telegram</string>
+    <string name="about_telegram_subtitle">Destek</string>
+    <string name="about_cd_open_github_repo">GitHub deposunu aç</string>
+    <string name="about_cd_join_telegram">Telegram topluluğuna katıl</string>
     <string name="about_cd_open_github_profile">GitHub profilini aç</string>
     <string name="about_cd_open_telegram">Telegram\'ı aç</string>
     <string name="about_cd_contributor_avatar">%1$s avatarı</string>

app/src/main/res/values-zh-rCN/strings_settings.xml

@@ -633,6 +633,12 @@
     <string name="about_contributors_section_title">开源贡献者</string>
     <string name="about_contributors_section_subtitle">来自 GitHub 的实时贡献者名单。</string>
     <string name="about_contributions_format">%1$d 次贡献</string>
+    <string name="about_github_label">GitHub</string>
+    <string name="about_github_subtitle">代码仓库</string>
+    <string name="about_telegram_label">Telegram</string>
+    <string name="about_telegram_subtitle">支持</string>
+    <string name="about_cd_open_github_repo">打开 GitHub 仓库</string>
+    <string name="about_cd_join_telegram">加入 Telegram 社区</string>
     <string name="about_cd_open_github_profile">打开 GitHub 个人资料</string>
     <string name="about_cd_open_telegram">打开 Telegram</string>
     <string name="about_cd_contributor_avatar">%1$s 的头像</string>

app/src/main/res/values/strings_settings.xml

@@ -633,6 +633,12 @@
     <string name="about_contributors_section_title">Open source contributors</string>
     <string name="about_contributors_section_subtitle">Live contributor list from GitHub.</string>
     <string name="about_contributions_format">%1$d contrib.</string>
+    <string name="about_github_label">GitHub</string>
+    <string name="about_github_subtitle">Repository</string>
+    <string name="about_telegram_label">Telegram</string>
+    <string name="about_telegram_subtitle">Support</string>
+    <string name="about_cd_open_github_repo">Open GitHub repository</string>
+    <string name="about_cd_join_telegram">Join Telegram community</string>
     <string name="about_cd_open_github_profile">Open GitHub profile</string>
     <string name="about_cd_open_telegram">Open Telegram</string>
     <string name="about_cd_contributor_avatar">Avatar of %1$s</string>