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

feat: Enhance ChatsListScreen with animated title and search field transitions

Browse Source
This commit is contained in:
k1ngsterr1
2026-01-09 01:59:01 +05:00
parent e9eac107f2
commit 1a0679954f
1 changed files with 70 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
app/src/main/java/com/rosetta/messenger/ui/chats/ChatsListScreen.kt
View File

@@ -567,16 +567,74 @@ fun ChatsListScreen(
}
},
title = {
// Search field or Stories / Title area
AnimatedContent(
targetState = isSearchExpanded,
transitionSpec = {
fadeIn(tween(200)) togetherWith fadeOut(tween(200))
},
label = "searchAnimation"
) { expanded ->
if (expanded) {
// Search TextField
Box(modifier = Modifier.fillMaxWidth()) {
// Title - Triple click to open dev console
AnimatedVisibility(
visible = !isSearchExpanded,
enter = fadeIn(tween(300)) + slideInHorizontally(
initialOffsetX = { -it / 3 },
animationSpec = tween(300, easing = FastOutSlowInEasing)
),
exit = fadeOut(tween(200)) + slideOutHorizontally(
targetOffsetX = { -it / 3 },
animationSpec = tween(200)
)
) {
Column(
modifier = Modifier.clickable {
val currentTime = System.currentTimeMillis()
if (currentTime - lastClickTime < 500) {
titleClickCount++
if (titleClickCount >= 3) {
showDevConsole = true
titleClickCount = 0
}
} else {
titleClickCount = 1
}
lastClickTime = currentTime
}
) {
Text(
"Rosetta",
fontWeight = FontWeight.Bold,
fontSize = 20.sp,
color = textColor
)
if (protocolState != ProtocolState.AUTHENTICATED) {
Text(
text = when (protocolState) {
ProtocolState.DISCONNECTED -> "Connecting..."
ProtocolState.CONNECTING -> "Connecting..."
ProtocolState.CONNECTED -> "Authenticating..."
ProtocolState.HANDSHAKING -> "Authenticating..."
ProtocolState.AUTHENTICATED -> ""
},
fontSize = 12.sp,
color = secondaryTextColor
)
}
}
}
// Search TextField with beautiful animation
AnimatedVisibility(
visible = isSearchExpanded,
enter = fadeIn(tween(300)) + slideInHorizontally(
initialOffsetX = { it },
animationSpec = tween(300, easing = FastOutSlowInEasing)
) + expandHorizontally(
expandFrom = Alignment.End,
animationSpec = tween(300, easing = FastOutSlowInEasing)
),
exit = fadeOut(tween(200)) + slideOutHorizontally(
targetOffsetX = { it },
animationSpec = tween(200)
) + shrinkHorizontally(
shrinkTowards = Alignment.End,
animationSpec = tween(200)
)
) {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxWidth()
@@ -598,7 +656,7 @@ fun ChatsListScreen(
onValueChange = { searchQuery = it },
placeholder = {
Text(
"Search...",
"Search chats...",
color = secondaryTextColor
)
},
@@ -607,7 +665,7 @@ fun ChatsListScreen(
unfocusedContainerColor = Color.Transparent,
focusedTextColor = textColor,
unfocusedTextColor = textColor,
cursorColor = textColor,
cursorColor = PrimaryBlue,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent
),
@@ -615,65 +673,6 @@ fun ChatsListScreen(
modifier = Modifier.weight(1f)
)
}
} else {
// Triple click to open dev console
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.clickable {
val currentTime = System.currentTimeMillis()
if (currentTime - lastClickTime < 500) {
titleClickCount++
if (titleClickCount >= 3) {
showDevConsole = true
titleClickCount = 0
}
} else {
titleClickCount = 1
}
lastClickTime = currentTime
}
) {
// User avatar
val avatarColors = getAvatarColor(accountName, isDarkTheme)
Box(
modifier = Modifier
.size(36.dp)
.clip(CircleShape)
.background(avatarColors.backgroundColor),
contentAlignment = Alignment.Center
) {
Text(
text = getAvatarText(accountPublicKey),
fontSize = 14.sp,
fontWeight = FontWeight.Bold,
color = avatarColors.textColor
)
}
Spacer(modifier = Modifier.width(12.dp))
// Title with connection status
Column {
Text(
"Rosetta",
fontWeight = FontWeight.Bold,
fontSize = 20.sp
)
if (protocolState != ProtocolState.AUTHENTICATED) {
Text(
text = when (protocolState) {
ProtocolState.DISCONNECTED -> "Connecting..."
ProtocolState.CONNECTING -> "Connecting..."
ProtocolState.CONNECTED -> "Authenticating..."
ProtocolState.HANDSHAKING -> "Authenticating..."
ProtocolState.AUTHENTICATED -> ""
},
fontSize = 12.sp,
color = secondaryTextColor
)
}
}
}
}
}
},