Rosetta/mobile-android
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Refactor ProfileScreen to adopt Telegram-style components and improve UI consistency

Browse Source
This commit is contained in:
k1ngsterr1
2026-01-21 16:13:24 +05:00
parent dcfbb020be
commit d443592435
4 changed files with 639 additions and 816 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
app/src/main/java/com/rosetta/messenger/ui/settings/BackupScreen.kt
View File

@@ -4,6 +4,9 @@ import androidx.activity.compose.BackHandler
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.statusBars
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.verticalScroll
@@ -46,23 +49,20 @@ fun BackupScreen(
modifier = Modifier
.fillMaxSize()
.background(backgroundColor)
.windowInsetsPadding(WindowInsets.statusBars)
) {
// Top Bar
Surface(
modifier = Modifier.fillMaxWidth(),
color = backgroundColor
) {
// Telegram-style Header
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 4.dp, vertical = 8.dp),
.padding(horizontal = 4.dp, vertical = 12.dp),
verticalAlignment = Alignment.CenterVertically
) {
IconButton(onClick = onBack) {
Icon(
imageVector = Icons.Filled.ArrowBack,
contentDescription = "Back",
tint = if (isDarkTheme) Color.White else Color.Black
tint = textColor
)
}
Text(
@@ -73,7 +73,6 @@ fun BackupScreen(
modifier = Modifier.padding(start = 8.dp)
)
}
}
// Content
Column(
@@ -85,27 +84,26 @@ fun BackupScreen(
// Warning Card
Surface(
modifier = Modifier.fillMaxWidth(),
color = (if (isDarkTheme) Color(0xFFFF8787) else Color(0xFFEF4444)).copy(alpha = 0.15f),
shape = RoundedCornerShape(12.dp)
color = surfaceColor,
shape = RoundedCornerShape(10.dp)
) {
Row(
Column(
modifier = Modifier.padding(16.dp),
verticalAlignment = Alignment.CenterVertically
horizontalAlignment = Alignment.CenterHorizontally
) {
Icon(
imageVector = Icons.Filled.Warning,
contentDescription = null,
tint = if (isDarkTheme) Color(0xFFFF8787) else Color(0xFFEF4444),
modifier = Modifier
.size(24.dp)
.padding(top = 2.dp)
tint = Color(0xFFFFAC00),
modifier = Modifier.size(48.dp)
)
Spacer(modifier = Modifier.width(12.dp))
Spacer(modifier = Modifier.height(12.dp))
Text(
text = "If you want to give your recovery phrase to someone, please stop! This may lead to the compromise of your conversations.",
fontSize = 13.sp,
color = textColor,
lineHeight = 18.sp
fontSize = 14.sp,
color = secondaryTextColor,
lineHeight = 20.sp,
modifier = Modifier.fillMaxWidth()
)
}
}
@@ -113,19 +111,11 @@ fun BackupScreen(
Spacer(modifier = Modifier.height(24.dp))
if (seedPhrase == null) {
// Password Input
Text(
text = "Confirm Password",
fontSize = 14.sp,
fontWeight = FontWeight.SemiBold,
color = textColor,
modifier = Modifier.padding(bottom = 8.dp)
)
// Password Input Section
Surface(
modifier = Modifier.fillMaxWidth(),
color = surfaceColor,
shape = RoundedCornerShape(12.dp)
shape = RoundedCornerShape(10.dp)
) {
Row(
modifier = Modifier
@@ -185,26 +175,18 @@ fun BackupScreen(
}
Text(
text = "To view your recovery phrase, enter the password you specified when creating your account.",
fontSize = 13.sp,
text = "To view your recovery phrase, enter the password you specified when creating your account or restoring from a seed phrase.",
fontSize = 14.sp,
color = secondaryTextColor,
modifier = Modifier.padding(horizontal = 4.dp, vertical = 8.dp),
lineHeight = 18.sp
modifier = Modifier.padding(top = 8.dp),
lineHeight = 20.sp
)
} else {
// Seed Phrase Display
Text(
text = "Your Recovery Phrase",
fontSize = 14.sp,
fontWeight = FontWeight.SemiBold,
color = textColor,
modifier = Modifier.padding(bottom = 8.dp)
)
Surface(
modifier = Modifier.fillMaxWidth(),
color = Color(0xFF2E7D32).copy(alpha = 0.1f),
shape = RoundedCornerShape(12.dp)
color = surfaceColor,
shape = RoundedCornerShape(10.dp)
) {
Column(modifier = Modifier.padding(20.dp)) {
val words = seedPhrase!!.split(" ")
@@ -228,34 +210,14 @@ fun BackupScreen(
}
Text(
text = "Please don't share your seed phrase! The administration will never ask you for it. Write it down and store it in a safe place.",
fontSize = 12.sp,
color = if (isDarkTheme) Color(0xFFFF8787) else Color(0xFFEF4444),
fontWeight = FontWeight.Medium,
modifier = Modifier.padding(horizontal = 8.dp, vertical = 12.dp),
lineHeight = 16.sp
text = "Please don't share your seed phrase! The administration will never ask you for it.",
fontSize = 14.sp,
color = secondaryTextColor,
modifier = Modifier.padding(top = 8.dp),
lineHeight = 20.sp
)
Spacer(modifier = Modifier.height(16.dp))
Button(
onClick = {
// TODO: Copy to clipboard
},
modifier = Modifier
.fillMaxWidth()
.height(48.dp),
colors = ButtonDefaults.buttonColors(
containerColor = Color(0xFF007AFF)
),
shape = RoundedCornerShape(12.dp)
) {
Text(
text = "Copy to Clipboard",
fontSize = 16.sp,
fontWeight = FontWeight.Medium
)
}
}
}
}

366
app/src/main/java/com/rosetta/messenger/ui/settings/ProfileScreen.kt
View File

@@ -238,156 +238,80 @@ fun ProfileScreen(
Spacer(modifier = Modifier.height(16.dp))
// ═════════════════════════════════════════════════════════════
// ✏️ EDITABLE FIELDS
// 📋 ACCOUNT SECTION - Telegram style
// ═════════════════════════════════════════════════════════════
ProfileSectionTitle(title = "Profile Information", isDarkTheme = isDarkTheme)
TelegramSectionTitle(title = "Account", isDarkTheme = isDarkTheme)
Surface(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp),
color = surfaceColor,
shape = RoundedCornerShape(16.dp)
) {
Column {
ProfileEditableField(
label = "Your name",
// Name field
TelegramTextField(
value = editedName,
onValueChange = { editedName = it },
placeholder = "ex. Freddie Gibson",
label = "Your name",
isDarkTheme = isDarkTheme,
showDivider = true
isEditable = true,
onValueChange = { editedName = it },
showDivider = true,
placeholder = "Add your name"
)
ProfileEditableField(
label = "Username",
// Username field
TelegramTextField(
value = editedUsername,
onValueChange = { editedUsername = it },
placeholder = "ex. freddie871",
isDarkTheme = isDarkTheme
label = "Username",
isDarkTheme = isDarkTheme,
isEditable = true,
onValueChange = {
editedUsername = it
},
showDivider = true,
placeholder = "Add username"
)
}
}
Spacer(modifier = Modifier.height(8.dp))
// Public Key Copy Field
ProfileCopyField(
// Public Key field
TelegramCopyField(
value = accountPublicKey.take(16) + "..." + accountPublicKey.takeLast(6),
fullValue = accountPublicKey,
label = "Public Key",
value = accountPublicKey,
isDarkTheme = isDarkTheme
)
Text(
text = "This is your public key. If you haven't set a @username yet, you can ask a friend to message you using your public key.",
fontSize = 12.sp,
color = secondaryTextColor,
modifier = Modifier.padding(horizontal = 24.dp, vertical = 8.dp),
lineHeight = 16.sp
)
Spacer(modifier = Modifier.height(24.dp))
// ═════════════════════════════════════════════════════════════
// 🔧 SETTINGS SECTION
// ⚙️ SETTINGS SECTION - Telegram style
// ═════════════════════════════════════════════════════════════
ProfileSectionTitle(title = "Settings", isDarkTheme = isDarkTheme)
TelegramSectionTitle(title = "Settings", isDarkTheme = isDarkTheme)
Surface(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp),
color = surfaceColor,
shape = RoundedCornerShape(16.dp)
) {
Column {
ProfileNavigationItem(
icon = Icons.Outlined.Brush,
iconBackground = Color(0xFF6366F1),
TelegramSettingsItem(
icon = Icons.Outlined.Palette,
title = "Theme",
subtitle = "Customize appearance",
onClick = onNavigateToTheme,
isDarkTheme = isDarkTheme,
showDivider = true
)
ProfileNavigationItem(
icon = Icons.Outlined.AdminPanelSettings,
iconBackground = Color(0xFF9333EA),
TelegramSettingsItem(
icon = Icons.Outlined.Lock,
title = "Safety",
subtitle = "Backup and security settings",
onClick = onNavigateToSafety,
isDarkTheme = isDarkTheme
)
}
}
Text(
text = "You can learn more about your safety on the safety page, please make sure you are viewing the screen alone before proceeding to the safety page.",
fontSize = 12.sp,
color = secondaryTextColor,
modifier = Modifier.padding(horizontal = 24.dp, vertical = 8.dp),
lineHeight = 16.sp
isDarkTheme = isDarkTheme,
showDivider = true
)
Spacer(modifier = Modifier.height(24.dp))
// ═════════════════════════════════════════════════════════════
// 🐛 DEBUG / LOGS SECTION
// ═════════════════════════════════════════════════════════════
Surface(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp),
color = surfaceColor,
shape = RoundedCornerShape(16.dp)
) {
ProfileNavigationItem(
icon = Icons.Outlined.BugReport,
iconBackground = Color(0xFFFB8C00),
TelegramSettingsItem(
icon = Icons.Outlined.Terminal,
title = "View Logs",
subtitle = "Debug profile save operations",
onClick = onNavigateToLogs,
isDarkTheme = isDarkTheme
)
}
Text(
text = "View detailed logs of profile save operations for debugging.",
fontSize = 12.sp,
color = secondaryTextColor,
modifier = Modifier.padding(horizontal = 24.dp, vertical = 8.dp),
lineHeight = 16.sp
)
Spacer(modifier = Modifier.height(24.dp))
// ═════════════════════════════════════════════════════════════
// 🚪 LOGOUT SECTION
// 🚪 LOGOUT - Telegram style (red text)
// ═════════════════════════════════════════════════════════════
Surface(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp),
color = surfaceColor,
shape = RoundedCornerShape(16.dp)
) {
ProfileNavigationItem(
icon = Icons.Outlined.Logout,
iconBackground = if (isDarkTheme) Color(0xFFFF8787) else Color(0xFFEF4444),
title = "Logout",
subtitle = "Sign out of your account",
TelegramLogoutItem(
onClick = onLogout,
isDarkTheme = isDarkTheme,
hideChevron = true,
textColor = if (isDarkTheme) Color(0xFFFF8787) else Color(0xFFEF4444)
)
}
Text(
text = "Logging out of your account. After logging out, you will be redirected to the password entry page.",
fontSize = 12.sp,
color = secondaryTextColor,
modifier = Modifier.padding(horizontal = 24.dp, vertical = 8.dp),
lineHeight = 16.sp
isDarkTheme = isDarkTheme
)
Spacer(modifier = Modifier.height(32.dp))
@@ -717,60 +641,43 @@ fun ProfileCard(
}
// ═════════════════════════════════════════════════════════════
// 📦 HELPER COMPONENTS
// <EFBFBD> TELEGRAM-STYLE COMPONENTS
// ═════════════════════════════════════════════════════════════
@Composable
private fun ProfileSectionTitle(title: String, isDarkTheme: Boolean) {
private fun TelegramSectionTitle(title: String, isDarkTheme: Boolean) {
val textColor = if (isDarkTheme) Color(0xFF8E8E93) else Color(0xFF8E8E93)
Text(
text = title.uppercase(),
fontSize = 13.sp,
fontWeight = FontWeight.SemiBold,
text = title,
fontSize = 15.sp,
fontWeight = FontWeight.Medium,
color = textColor,
modifier = Modifier.padding(horizontal = 32.dp, vertical = 8.dp)
modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp)
)
}
@Composable
private fun ProfileEditableField(
label: String,
private fun TelegramTextField(
value: String,
onValueChange: (String) -> Unit,
placeholder: String,
label: String,
isDarkTheme: Boolean,
isEditable: Boolean = false,
onValueChange: ((String) -> Unit)? = null,
showDivider: Boolean = false,
leadingText: String? = null
placeholder: String = ""
) {
val textColor = if (isDarkTheme) Color.White else Color.Black
val secondaryTextColor = if (isDarkTheme) Color(0xFF8E8E93) else Color(0xFF666666)
val dividerColor = if (isDarkTheme) Color(0xFF3A3A3A) else Color(0xFFE8E8E8)
val dividerColor = if (isDarkTheme) Color(0xFF3A3A3A) else Color(0xFFE0E0E0)
Column {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp, vertical = 8.dp)
.padding(horizontal = 16.dp, vertical = 12.dp)
) {
Text(
text = label,
fontSize = 13.sp,
color = secondaryTextColor,
fontWeight = FontWeight.Medium
)
Spacer(modifier = Modifier.height(4.dp))
Row(
verticalAlignment = Alignment.CenterVertically
) {
if (leadingText != null) {
Text(
text = leadingText,
fontSize = 16.sp,
color = textColor
)
Spacer(modifier = Modifier.width(2.dp))
}
if (isEditable && onValueChange != null) {
BasicTextField(
value = value,
onValueChange = onValueChange,
@@ -782,17 +689,31 @@ private fun ProfileEditableField(
singleLine = true,
cursorBrush = androidx.compose.ui.graphics.SolidColor(textColor),
decorationBox = { innerTextField ->
if (value.isEmpty()) {
if (value.isEmpty() && placeholder.isNotEmpty()) {
Text(
text = placeholder,
color = secondaryTextColor.copy(alpha = 0.5f),
fontSize = 16.sp
fontSize = 16.sp,
color = secondaryTextColor.copy(alpha = 0.5f)
)
}
innerTextField()
}
)
} else {
Text(
text = value.ifBlank { placeholder },
fontSize = 16.sp,
color = if (value.isBlank()) secondaryTextColor.copy(alpha = 0.5f) else textColor
)
}
Spacer(modifier = Modifier.height(4.dp))
Text(
text = label,
fontSize = 13.sp,
color = secondaryTextColor
)
}
if (showDivider) {
@@ -806,26 +727,24 @@ private fun ProfileEditableField(
}
@Composable
private fun ProfileCopyField(
label: String,
private fun TelegramCopyField(
value: String,
fullValue: String,
label: String,
isDarkTheme: Boolean
) {
val textColor = if (isDarkTheme) Color.White else Color.Black
val secondaryTextColor = if (isDarkTheme) Color(0xFF8E8E93) else Color(0xFF666666)
val surfaceColor = if (isDarkTheme) Color(0xFF2C2C2E) else Color(0xFFF2F2F7)
val context = LocalContext.current
val scope = rememberCoroutineScope()
var showCopied by remember { mutableStateOf(false) }
Surface(
Column(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp)
.clickable {
val clipboard = context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
val clip = ClipData.newPlainText(label, value)
val clip = ClipData.newPlainText(label, fullValue)
clipboard.setPrimaryClip(clip)
scope.launch {
@@ -833,45 +752,123 @@ private fun ProfileCopyField(
delay(1500)
showCopied = false
}
},
color = surfaceColor,
shape = RoundedCornerShape(16.dp)
}
.padding(horizontal = 16.dp, vertical = 12.dp)
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp, vertical = 12.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = label,
fontSize = 14.sp,
color = secondaryTextColor,
fontWeight = FontWeight.Medium
)
AnimatedContent(
targetState = showCopied,
label = "copy_animation"
) { copied ->
if (copied) {
Text(
text = "Copied!",
fontSize = 14.sp,
color = Color(0xFF22C55E),
fontWeight = FontWeight.Medium
)
} else {
Text(
text = value.take(16) + "...",
fontSize = 14.sp,
text = if (copied) "Copied!" else value,
fontSize = 16.sp,
color = textColor
)
}
Spacer(modifier = Modifier.height(4.dp))
Text(
text = label,
fontSize = 13.sp,
color = secondaryTextColor
)
}
}
@Composable
private fun TelegramSettingsItem(
icon: ImageVector,
title: String,
onClick: () -> Unit,
isDarkTheme: Boolean,
showDivider: Boolean = false
) {
val textColor = if (isDarkTheme) Color.White else Color.Black
val iconColor = if (isDarkTheme) Color(0xFF8E8E93) else Color(0xFF666666)
val dividerColor = if (isDarkTheme) Color(0xFF3A3A3A) else Color(0xFFE0E0E0)
Column {
Row(
modifier = Modifier
.fillMaxWidth()
.clickable(onClick = onClick)
.padding(horizontal = 16.dp, vertical = 14.dp),
verticalAlignment = Alignment.CenterVertically
) {
Icon(
imageVector = icon,
contentDescription = null,
tint = iconColor,
modifier = Modifier.size(24.dp)
)
Spacer(modifier = Modifier.width(20.dp))
Text(
text = title,
fontSize = 16.sp,
color = textColor,
modifier = Modifier.weight(1f)
)
}
if (showDivider) {
Divider(
color = dividerColor,
thickness = 0.5.dp,
modifier = Modifier.padding(start = 60.dp)
)
}
}
}
@Composable
private fun TelegramLogoutItem(
onClick: () -> Unit,
isDarkTheme: Boolean
) {
val redColor = if (isDarkTheme) Color(0xFFFF5555) else Color(0xFFFF3B30)
Row(
modifier = Modifier
.fillMaxWidth()
.clickable(onClick = onClick)
.padding(horizontal = 16.dp, vertical = 14.dp),
verticalAlignment = Alignment.CenterVertically
) {
Icon(
imageVector = Icons.Outlined.Logout,
contentDescription = null,
tint = redColor,
modifier = Modifier.size(24.dp)
)
Spacer(modifier = Modifier.width(20.dp))
Text(
text = "Log Out",
fontSize = 16.sp,
color = redColor
)
}
}
// ═════════════════════════════════════════════════════════════
// 📦 LEGACY COMPONENTS (kept for compatibility)
// ═════════════════════════════════════════════════════════════
@Composable
private fun ProfileSectionTitle(title: String, isDarkTheme: Boolean) {
val textColor = if (isDarkTheme) Color(0xFF8E8E93) else Color(0xFF8E8E93)
Text(
text = title.uppercase(),
fontSize = 13.sp,
fontWeight = FontWeight.SemiBold,
color = textColor,
modifier = Modifier.padding(horizontal = 32.dp, vertical = 8.dp)
)
}
@Composable
@@ -899,11 +896,10 @@ fun ProfileNavigationItem(
.padding(horizontal = 16.dp, vertical = 12.dp),
verticalAlignment = Alignment.CenterVertically
) {
// Colored Icon Background
Box(
modifier = Modifier
.size(36.dp)
.clip(RoundedCornerShape(16.dp))
.clip(RoundedCornerShape(8.dp))
.background(iconBackground),
contentAlignment = Alignment.Center
) {
@@ -917,7 +913,6 @@ fun ProfileNavigationItem(
Spacer(modifier = Modifier.width(16.dp))
// Title and Subtitle
Column(modifier = Modifier.weight(1f)) {
Text(
text = title,
@@ -933,7 +928,6 @@ fun ProfileNavigationItem(
)
}
// Arrow
if (!hideChevron) {
Icon(
imageVector = Icons.Default.ChevronRight,

290
app/src/main/java/com/rosetta/messenger/ui/settings/SafetyScreen.kt
View File

@@ -73,6 +73,7 @@ fun SafetyScreen(
Row(
modifier = Modifier
.fillMaxWidth()
.padding(top = WindowInsets.statusBars.asPaddingValues().calculateTopPadding())
.padding(horizontal = 4.dp, vertical = 8.dp),
verticalAlignment = Alignment.CenterVertically
) {
@@ -98,15 +99,20 @@ fun SafetyScreen(
modifier = Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState())
.padding(16.dp)
) {
Spacer(modifier = Modifier.height(8.dp))
// ═══════════════════════════════════════════════════════════════
// Public Key - clickable row with copy feedback
// Keys Section - Telegram style
// ═══════════════════════════════════════════════════════════════
Surface(
modifier = Modifier
.fillMaxWidth()
.clickable {
TelegramSectionHeader("Keys", secondaryTextColor)
TelegramCopyRow(
label = "Public Key",
value = shortPublicKey,
fullValue = accountPublicKey,
isCopied = copiedPublicKey,
onCopy = {
clipboardManager.setText(AnnotatedString(accountPublicKey))
val cm = context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
val clip = ClipData.newPlainText("Public Key", accountPublicKey)
@@ -117,55 +123,18 @@ fun SafetyScreen(
copiedPublicKey = false
}
},
color = surfaceColor,
shape = RoundedCornerShape(12.dp)
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(
text = "Public Key",
fontSize = 15.sp,
color = textColor,
fontWeight = FontWeight.Normal
)
if (copiedPublicKey) {
Text(
text = "copied",
fontSize = 15.sp,
color = greenColor
)
} else {
Text(
text = shortPublicKey,
fontSize = 15.sp,
color = secondaryTextColor
)
}
}
}
Text(
text = "This is your public key. If you haven't set a @username yet, you can ask a friend to message you using your public key.",
fontSize = 13.sp,
color = secondaryTextColor,
modifier = Modifier.padding(horizontal = 4.dp, vertical = 8.dp),
lineHeight = 18.sp
textColor = textColor,
secondaryTextColor = secondaryTextColor,
greenColor = greenColor,
showDivider = true
)
Spacer(modifier = Modifier.height(16.dp))
// ═══════════════════════════════════════════════════════════════
// Private Key - clickable row with copy feedback
// ═══════════════════════════════════════════════════════════════
Surface(
modifier = Modifier
.fillMaxWidth()
.clickable {
TelegramCopyRow(
label = "Private Key",
value = shortPrivateKey,
fullValue = accountPrivateKey,
isCopied = copiedPrivateKey,
onCopy = {
if (accountPrivateKey.isNotEmpty()) {
clipboardManager.setText(AnnotatedString(accountPrivateKey))
val cm = context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
@@ -178,70 +147,122 @@ fun SafetyScreen(
}
}
},
color = surfaceColor,
shape = RoundedCornerShape(12.dp)
textColor = textColor,
secondaryTextColor = secondaryTextColor,
greenColor = greenColor,
showDivider = false
)
TelegramInfoText(
text = "Your private key is encrypted. Never share it with anyone.",
secondaryTextColor = secondaryTextColor
)
Spacer(modifier = Modifier.height(24.dp))
// ═══════════════════════════════════════════════════════════════
// Actions Section - Telegram style
// ═══════════════════════════════════════════════════════════════
TelegramActionRow(
label = "Backup",
onClick = onBackupClick,
textColor = textColor,
secondaryTextColor = secondaryTextColor,
showDivider = true
)
TelegramActionRow(
label = "Delete Account",
onClick = onDeleteAccount,
textColor = redColor,
secondaryTextColor = secondaryTextColor,
showDivider = false
)
TelegramInfoText(
text = "Deleting your account will permanently remove all data from this device and the server.",
secondaryTextColor = secondaryTextColor
)
Spacer(modifier = Modifier.height(32.dp))
}
}
}
@Composable
private fun TelegramSectionHeader(title: String, color: Color) {
Text(
text = title,
fontSize = 15.sp,
fontWeight = FontWeight.Medium,
color = color,
modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp)
)
}
@Composable
private fun TelegramCopyRow(
label: String,
value: String,
fullValue: String,
isCopied: Boolean,
onCopy: () -> Unit,
textColor: Color,
secondaryTextColor: Color,
greenColor: Color,
showDivider: Boolean
) {
Column {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
.clickable(onClick = onCopy)
.padding(horizontal = 16.dp, vertical = 12.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(
text = "Private key",
fontSize = 15.sp,
text = label,
fontSize = 16.sp,
color = textColor
)
Text(
text = if (isCopied) "Copied" else value,
fontSize = 16.sp,
color = if (isCopied) greenColor else secondaryTextColor
)
}
if (showDivider) {
Divider(
color = if (textColor == Color.White) Color(0xFF3A3A3A) else Color(0xFFE0E0E0),
thickness = 0.5.dp,
modifier = Modifier.padding(start = 16.dp)
)
}
}
}
@Composable
private fun TelegramActionRow(
label: String,
onClick: () -> Unit,
textColor: Color,
secondaryTextColor: Color,
showDivider: Boolean
) {
Column {
Row(
modifier = Modifier
.fillMaxWidth()
.clickable(onClick = onClick)
.padding(horizontal = 16.dp, vertical = 14.dp),
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = label,
fontSize = 16.sp,
color = textColor,
fontWeight = FontWeight.Normal
)
if (copiedPrivateKey) {
Text(
text = "copied",
fontSize = 15.sp,
color = greenColor
)
} else {
Text(
text = shortPrivateKey,
fontSize = 15.sp,
color = secondaryTextColor
)
}
}
}
Text(
text = "This is your private key. For security reasons, we provide it only in an encrypted form so you can simply admire it. If anyone asks you for this key, please do not share it.",
fontSize = 13.sp,
color = secondaryTextColor,
modifier = Modifier.padding(horizontal = 4.dp, vertical = 8.dp),
lineHeight = 18.sp
)
Spacer(modifier = Modifier.height(16.dp))
// ═══════════════════════════════════════════════════════════════
// Backup - with chevron like desktop
// ═══════════════════════════════════════════════════════════════
Surface(
modifier = Modifier
.fillMaxWidth()
.clickable(onClick = onBackupClick),
color = surfaceColor,
shape = RoundedCornerShape(12.dp)
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(
text = "Backup",
fontSize = 15.sp,
color = redColor,
fontWeight = FontWeight.Normal
modifier = Modifier.weight(1f)
)
Icon(
imageVector = Icons.Filled.ChevronRight,
@@ -250,52 +271,23 @@ fun SafetyScreen(
modifier = Modifier.size(20.dp)
)
}
if (showDivider) {
Divider(
color = if (textColor == Color.White) Color(0xFF3A3A3A) else Color(0xFFE0E0E0),
thickness = 0.5.dp,
modifier = Modifier.padding(start = 16.dp)
)
}
}
}
@Composable
private fun TelegramInfoText(text: String, secondaryTextColor: Color) {
Text(
text = "Please save your seed phrase, it is necessary for future access to your conversations. Do not share this seed phrase with anyone, otherwise, the person you share it with will gain access to your conversations.",
text = text,
fontSize = 13.sp,
color = secondaryTextColor,
modifier = Modifier.padding(horizontal = 4.dp, vertical = 8.dp),
modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
lineHeight = 18.sp
)
Spacer(modifier = Modifier.height(16.dp))
// ═══════════════════════════════════════════════════════════════
// Delete Account
// ═══════════════════════════════════════════════════════════════
Surface(
modifier = Modifier
.fillMaxWidth()
.clickable(onClick = onDeleteAccount),
color = surfaceColor,
shape = RoundedCornerShape(12.dp)
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = "Delete Account",
fontSize = 15.sp,
color = redColor,
fontWeight = FontWeight.Normal
)
}
}
Text(
text = "This action cannot be undone, it will result in the complete deletion of account data from your device. Please note, this will also delete your data on the server, such as your avatar, encrypted messages, and username.",
fontSize = 13.sp,
color = secondaryTextColor,
modifier = Modifier.padding(horizontal = 4.dp, vertical = 8.dp),
lineHeight = 18.sp
)
Spacer(modifier = Modifier.height(32.dp))
}
}
}

467
app/src/main/java/com/rosetta/messenger/ui/settings/ThemeScreen.kt
View File

@@ -15,6 +15,7 @@ import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.filled.DarkMode
import androidx.compose.material.icons.filled.DoneAll
import androidx.compose.material.icons.filled.LightMode
import androidx.compose.material.icons.filled.Smartphone
import androidx.compose.material3.*
@@ -27,6 +28,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.rosetta.messenger.ui.components.AppleEmojiText
@Composable
fun ThemeScreen(
@@ -58,6 +60,7 @@ fun ThemeScreen(
Row(
modifier = Modifier
.fillMaxWidth()
.padding(top = WindowInsets.statusBars.asPaddingValues().calculateTopPadding())
.padding(horizontal = 4.dp, vertical = 8.dp),
verticalAlignment = Alignment.CenterVertically
) {
@@ -83,70 +86,25 @@ fun ThemeScreen(
modifier = Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState())
.padding(16.dp)
) {
// ═══════════════════════════════════════════════════════
// 🎨 THEME PREVIEW CARDS - Like Desktop Version
// ═══════════════════════════════════════════════════════
Surface(
modifier = Modifier.fillMaxWidth(),
color = surfaceColor,
shape = RoundedCornerShape(16.dp)
) {
Column(modifier = Modifier.padding(16.dp)) {
Text(
text = "Theme",
fontSize = 14.sp,
color = secondaryTextColor,
modifier = Modifier.padding(bottom = 12.dp)
)
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly
) {
// Light Theme Preview
ThemePreviewCard(
isSelected = themeMode == "light",
isDark = false,
label = "Light",
onClick = {
themeMode = "light"
onThemeChange(false)
}
)
Spacer(modifier = Modifier.width(12.dp))
// Dark Theme Preview
ThemePreviewCard(
isSelected = themeMode == "dark",
isDark = true,
label = "Dark",
onClick = {
themeMode = "dark"
onThemeChange(true)
}
)
}
}
}
Spacer(modifier = Modifier.height(16.dp))
Spacer(modifier = Modifier.height(8.dp))
// ═══════════════════════════════════════════════════════
// 🔘 THEME MODE SELECTOR
// CHAT PREVIEW - Message bubbles like in real chat
// ═══════════════════════════════════════════════════════
Surface(
modifier = Modifier.fillMaxWidth(),
color = surfaceColor,
shape = RoundedCornerShape(16.dp)
) {
ChatPreview(isDarkTheme = isDarkTheme)
Spacer(modifier = Modifier.height(24.dp))
// ═══════════════════════════════════════════════════════
// MODE SELECTOR - Telegram style
// ═══════════════════════════════════════════════════════
TelegramSectionHeader("Appearance", secondaryTextColor)
Column {
ThemeModeOption(
TelegramThemeOption(
icon = Icons.Filled.LightMode,
title = "Light",
subtitle = "Always use light theme",
isSelected = themeMode == "light",
onClick = {
themeMode = "light"
@@ -158,10 +116,9 @@ fun ThemeScreen(
isDarkTheme = isDarkTheme
)
ThemeModeOption(
TelegramThemeOption(
icon = Icons.Filled.DarkMode,
title = "Dark",
subtitle = "Always use dark theme",
isSelected = themeMode == "dark",
onClick = {
themeMode = "dark"
@@ -173,10 +130,9 @@ fun ThemeScreen(
isDarkTheme = isDarkTheme
)
ThemeModeOption(
TelegramThemeOption(
icon = Icons.Filled.Smartphone,
title = "System",
subtitle = "Match system settings",
isSelected = themeMode == "auto",
onClick = {
themeMode = "auto"
@@ -188,188 +144,32 @@ fun ThemeScreen(
isDarkTheme = isDarkTheme
)
}
}
Text(
text = "If you choose the automatic mode, the theme will change depending on your system settings. We recommend using automatic mode.",
fontSize = 12.sp,
color = secondaryTextColor,
modifier = Modifier.padding(horizontal = 8.dp, vertical = 12.dp),
lineHeight = 16.sp
TelegramInfoText(
text = "System mode automatically switches between light and dark themes based on your device settings.",
secondaryTextColor = secondaryTextColor
)
Spacer(modifier = Modifier.height(24.dp))
// ═══════════════════════════════════════════════════════
// 💬 MESSAGE PREVIEW
// ═══════════════════════════════════════════════════════
Text(
text = "Preview",
fontSize = 16.sp,
fontWeight = FontWeight.SemiBold,
color = textColor,
modifier = Modifier.padding(bottom = 12.dp, start = 4.dp)
)
Surface(
modifier = Modifier
.fillMaxWidth()
.height(220.dp),
color = surfaceColor,
shape = RoundedCornerShape(16.dp)
) {
Box(
modifier = Modifier
.fillMaxSize()
.padding(16.dp)
) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center
) {
// Received message
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.Start
) {
MessageBubble(
text = "Hey! How are you? 👋",
isFromMe = false,
isDarkTheme = isDarkTheme
)
}
Spacer(modifier = Modifier.height(8.dp))
// Sent message
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.End
) {
MessageBubble(
text = "I'm great, thanks! 🎉",
isFromMe = true,
isDarkTheme = isDarkTheme
)
}
Spacer(modifier = Modifier.height(8.dp))
// Another received message
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.Start
) {
MessageBubble(
text = "Love the new theme! 🌙",
isFromMe = false,
isDarkTheme = isDarkTheme
)
}
}
}
}
Spacer(modifier = Modifier.height(32.dp))
}
}
}
@Composable
private fun ThemePreviewCard(
isSelected: Boolean,
isDark: Boolean,
label: String,
onClick: () -> Unit
) {
val cardBg = if (isDark) Color(0xFF1C1C1E) else Color(0xFFF5F5F5)
val messageBg = if (isDark) Color(0xFF3A3A3C) else Color(0xFFE5E5EA)
val myMessageBg = Color(0xFF007AFF)
val borderColor = if (isSelected) Color(0xFF007AFF) else Color.Transparent
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.clip(RoundedCornerShape(12.dp))
.clickable(onClick = onClick)
) {
// Preview Card
Box(
modifier = Modifier
.size(width = 130.dp, height = 90.dp)
.clip(RoundedCornerShape(12.dp))
.border(
width = if (isSelected) 2.dp else 1.dp,
color = if (isSelected) borderColor else Color(0xFF3A3A3C).copy(alpha = 0.3f),
shape = RoundedCornerShape(12.dp)
)
.background(cardBg)
.padding(8.dp)
) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.SpaceEvenly
) {
// Fake message bubbles
Box(
modifier = Modifier
.fillMaxWidth(0.7f)
.height(14.dp)
.clip(RoundedCornerShape(7.dp))
.background(messageBg)
)
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.End
) {
Box(
modifier = Modifier
.fillMaxWidth(0.6f)
.height(14.dp)
.clip(RoundedCornerShape(7.dp))
.background(myMessageBg)
)
}
Box(
modifier = Modifier
.fillMaxWidth(0.5f)
.height(14.dp)
.clip(RoundedCornerShape(7.dp))
.background(messageBg)
)
}
}
Spacer(modifier = Modifier.height(8.dp))
// Label with checkmark
Row(
verticalAlignment = Alignment.CenterVertically
) {
if (isSelected) {
Icon(
imageVector = Icons.Filled.Check,
contentDescription = null,
tint = Color(0xFF007AFF),
modifier = Modifier.size(16.dp)
)
Spacer(modifier = Modifier.width(4.dp))
}
private fun TelegramSectionHeader(title: String, color: Color) {
Text(
text = label,
fontSize = 13.sp,
fontWeight = if (isSelected) FontWeight.SemiBold else FontWeight.Normal,
color = if (isSelected) Color(0xFF007AFF) else Color(0xFF8E8E93)
text = title,
fontSize = 15.sp,
fontWeight = FontWeight.Medium,
color = color,
modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp)
)
}
}
}
@Composable
private fun ThemeModeOption(
private fun TelegramThemeOption(
icon: ImageVector,
title: String,
subtitle: String,
isSelected: Boolean,
onClick: () -> Unit,
textColor: Color,
@@ -377,116 +177,191 @@ private fun ThemeModeOption(
showDivider: Boolean,
isDarkTheme: Boolean
) {
val dividerColor = if (isDarkTheme) Color(0xFF3A3A3A) else Color(0xFFE8E8E8)
val dividerColor = if (isDarkTheme) Color(0xFF3A3A3A) else Color(0xFFE0E0E0)
Column(
modifier = Modifier
.fillMaxWidth()
.clickable(onClick = onClick)
) {
Column {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp, vertical = 12.dp),
.clickable(onClick = onClick)
.padding(horizontal = 16.dp, vertical = 14.dp),
verticalAlignment = Alignment.CenterVertically
) {
// Icon with background
Box(
modifier = Modifier
.size(36.dp)
.clip(RoundedCornerShape(8.dp))
.background(
when (title) {
"Light" -> Color(0xFFFFA500)
"Dark" -> Color(0xFF6366F1)
else -> Color(0xFF8E8E93)
}
),
contentAlignment = Alignment.Center
) {
Icon(
imageVector = icon,
contentDescription = null,
tint = Color.White,
modifier = Modifier.size(20.dp)
tint = secondaryTextColor,
modifier = Modifier.size(24.dp)
)
}
Spacer(modifier = Modifier.width(12.dp))
Spacer(modifier = Modifier.width(16.dp))
Column(modifier = Modifier.weight(1f)) {
Text(
text = title,
fontSize = 16.sp,
fontWeight = FontWeight.Medium,
color = textColor
color = textColor,
modifier = Modifier.weight(1f)
)
Text(
text = subtitle,
fontSize = 12.sp,
color = secondaryTextColor
)
}
// Radio button
Box(
modifier = Modifier
.size(24.dp)
.border(
width = 2.dp,
color = if (isSelected) Color(0xFF007AFF) else secondaryTextColor.copy(alpha = 0.5f),
shape = CircleShape
)
.padding(4.dp)
.background(
color = if (isSelected) Color(0xFF007AFF) else Color.Transparent,
shape = CircleShape
)
if (isSelected) {
Icon(
imageVector = Icons.Filled.Check,
contentDescription = null,
tint = Color(0xFF007AFF),
modifier = Modifier.size(20.dp)
)
}
}
if (showDivider) {
Divider(
color = dividerColor,
thickness = 0.5.dp,
modifier = Modifier.padding(start = 64.dp)
modifier = Modifier.padding(start = 56.dp)
)
}
}
}
@Composable
private fun TelegramInfoText(text: String, secondaryTextColor: Color) {
Text(
text = text,
fontSize = 13.sp,
color = secondaryTextColor,
modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
lineHeight = 18.sp
)
}
// ═══════════════════════════════════════════════════════════════════
// 💬 CHAT PREVIEW - Real message bubbles preview
// ═══════════════════════════════════════════════════════════════════
@Composable
private fun ChatPreview(isDarkTheme: Boolean) {
val chatBgColor = if (isDarkTheme) Color(0xFF1A1A1A) else Color(0xFFF0F0F0)
// Message colors matching real ChatDetailScreen
val myBubbleColor = Color(0xFF248AE6) // PrimaryBlue - same for both themes
val otherBubbleColor = if (isDarkTheme) Color(0xFF212121) else Color(0xFFF5F5F5)
val myTextColor = Color.White // White text on blue bubble
val otherTextColor = if (isDarkTheme) Color.White else Color.Black
val timeColor = if (isDarkTheme) Color(0xFF8E8E93) else Color(0xFF8E8E93)
Surface(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp)
.height(230.dp),
color = chatBgColor,
shape = RoundedCornerShape(16.dp)
) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(12.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
// Incoming message
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.Start
) {
MessageBubble(
text = "Hey! How's it going? 👋",
time = "10:42",
isMe = false,
bubbleColor = otherBubbleColor,
textColor = otherTextColor,
timeColor = timeColor
)
}
// Outgoing message
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.End
) {
MessageBubble(
text = "Hey! All good, just checking out this new theme 😊",
time = "10:43",
isMe = true,
bubbleColor = myBubbleColor,
textColor = myTextColor,
timeColor = timeColor
)
}
// Incoming message
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.Start
) {
MessageBubble(
text = "Nice! Looks great! 🔥",
time = "10:44",
isMe = false,
bubbleColor = otherBubbleColor,
textColor = otherTextColor,
timeColor = timeColor
)
}
}
}
}
@Composable
private fun MessageBubble(
text: String,
isFromMe: Boolean,
isDarkTheme: Boolean
time: String,
isMe: Boolean,
bubbleColor: Color,
textColor: Color,
timeColor: Color
) {
val bubbleColor = if (isFromMe) {
Color(0xFF007AFF)
} else {
if (isDarkTheme) Color(0xFF3A3A3C) else Color(0xFFE5E5EA)
}
val textColorMsg = if (isFromMe) {
Color.White
} else {
if (isDarkTheme) Color.White else Color.Black
}
Surface(
color = bubbleColor,
shape = RoundedCornerShape(
topStart = 16.dp,
topEnd = 16.dp,
bottomStart = if (isFromMe) 16.dp else 4.dp,
bottomEnd = if (isFromMe) 4.dp else 16.dp
bottomStart = if (isMe) 16.dp else 4.dp,
bottomEnd = if (isMe) 4.dp else 16.dp
),
shadowElevation = 1.dp
) {
Column(
modifier = Modifier
.widthIn(max = 260.dp)
.padding(horizontal = 12.dp, vertical = 8.dp)
) {
AppleEmojiText(
text = text,
fontSize = 15.sp,
color = textColor
)
Row(
modifier = Modifier.align(Alignment.End),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(3.dp)
) {
Text(
text = text,
color = textColorMsg,
fontSize = 14.sp,
modifier = Modifier.padding(horizontal = 12.dp, vertical = 8.dp)
text = time,
fontSize = 11.sp,
color = timeColor.copy(alpha = 0.7f)
)
if (isMe) {
// Read checkmarks (DoneAll icon like in real chat)
Icon(
imageVector = Icons.Default.DoneAll,
contentDescription = null,
tint = Color(0xFF4FC3F7), // Blue checkmarks for read messages
modifier = Modifier.size(14.dp)
)
}
}
}
}
}