feat: Enhance ChatsListScreen with animated title and search field transitions

This commit is contained in:
k1ngsterr1
2026-01-09 01:59:01 +05:00
parent e9eac107f2
commit 1a0679954f

View File

@@ -567,16 +567,74 @@ fun ChatsListScreen(
} }
}, },
title = { title = {
// Search field or Stories / Title area Box(modifier = Modifier.fillMaxWidth()) {
AnimatedContent( // Title - Triple click to open dev console
targetState = isSearchExpanded, AnimatedVisibility(
transitionSpec = { visible = !isSearchExpanded,
fadeIn(tween(200)) togetherWith fadeOut(tween(200)) enter = fadeIn(tween(300)) + slideInHorizontally(
}, initialOffsetX = { -it / 3 },
label = "searchAnimation" animationSpec = tween(300, easing = FastOutSlowInEasing)
) { expanded -> ),
if (expanded) { exit = fadeOut(tween(200)) + slideOutHorizontally(
// Search TextField 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( Row(
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxWidth() modifier = Modifier.fillMaxWidth()
@@ -598,7 +656,7 @@ fun ChatsListScreen(
onValueChange = { searchQuery = it }, onValueChange = { searchQuery = it },
placeholder = { placeholder = {
Text( Text(
"Search...", "Search chats...",
color = secondaryTextColor color = secondaryTextColor
) )
}, },
@@ -607,7 +665,7 @@ fun ChatsListScreen(
unfocusedContainerColor = Color.Transparent, unfocusedContainerColor = Color.Transparent,
focusedTextColor = textColor, focusedTextColor = textColor,
unfocusedTextColor = textColor, unfocusedTextColor = textColor,
cursorColor = textColor, cursorColor = PrimaryBlue,
focusedIndicatorColor = Color.Transparent, focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent unfocusedIndicatorColor = Color.Transparent
), ),
@@ -615,65 +673,6 @@ fun ChatsListScreen(
modifier = Modifier.weight(1f) 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
)
}
}
}
} }
} }
}, },