Merge pull request #75 from permissionlesstech/fix-channel-ui-2

Fix channel UI 2
This commit is contained in:
callebtc
2025-07-12 03:27:10 +02:00
committed by GitHub
4 changed files with 58 additions and 49 deletions
@@ -103,7 +103,7 @@ fun PeerCounter(
imageVector = Icons.Filled.Email, imageVector = Icons.Filled.Email,
contentDescription = "Unread private messages", contentDescription = "Unread private messages",
modifier = Modifier.size(16.dp), modifier = Modifier.size(16.dp),
tint = Color(0xFFFF8C00) // Orange to match private message theme tint = Color(0xFFFF9500) // Orange to match private message theme
) )
Spacer(modifier = Modifier.width(6.dp)) Spacer(modifier = Modifier.width(6.dp))
} }
@@ -201,19 +201,18 @@ private fun PrivateChatHeader(
val colorScheme = MaterialTheme.colorScheme val colorScheme = MaterialTheme.colorScheme
val peerNickname = peerNicknames[peerID] ?: peerID val peerNickname = peerNicknames[peerID] ?: peerID
Row( Box(modifier = Modifier.fillMaxWidth()) {
modifier = Modifier.fillMaxWidth(), // Back button - positioned all the way to the left with minimal margin
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
// Fixed: Make back button wider to prevent text cropping
Button( Button(
onClick = onBackClick, onClick = onBackClick,
colors = ButtonDefaults.buttonColors( colors = ButtonDefaults.buttonColors(
containerColor = Color.Transparent, containerColor = Color.Transparent,
contentColor = colorScheme.primary contentColor = colorScheme.primary
), ),
contentPadding = PaddingValues(horizontal = 12.dp, vertical = 4.dp) contentPadding = PaddingValues(horizontal = 4.dp, vertical = 4.dp), // Reduced horizontal padding
modifier = Modifier
.align(Alignment.CenterStart)
.offset(x = (-8).dp) // Move even further left to minimize margin
) { ) {
Row( Row(
verticalAlignment = Alignment.CenterVertically verticalAlignment = Alignment.CenterVertically
@@ -233,27 +232,30 @@ private fun PrivateChatHeader(
} }
} }
Spacer(modifier = Modifier.weight(1f)) // Title - perfectly centered regardless of other elements
Row(
Row(verticalAlignment = Alignment.CenterVertically) { verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.align(Alignment.Center)
) {
Icon( Icon(
imageVector = Icons.Filled.Lock, imageVector = Icons.Filled.Lock,
contentDescription = "Private chat", contentDescription = "Private chat",
modifier = Modifier.size(16.dp), modifier = Modifier.size(16.dp),
tint = Color(0xFFFF8C00) // Orange to match private message theme tint = Color(0xFFFF9500) // Orange to match private message theme
) )
Spacer(modifier = Modifier.width(4.dp)) Spacer(modifier = Modifier.width(4.dp))
Text( Text(
text = peerNickname, text = peerNickname,
style = MaterialTheme.typography.titleMedium, style = MaterialTheme.typography.titleMedium,
color = Color(0xFFFF8C00) // Orange color = Color(0xFFFF9500) // Orange
) )
} }
Spacer(modifier = Modifier.weight(1f)) // Favorite button - positioned on the right
IconButton(
// Favorite button with proper filled/outlined star onClick = onToggleFavorite,
IconButton(onClick = onToggleFavorite) { modifier = Modifier.align(Alignment.CenterEnd)
) {
Icon( Icon(
imageVector = if (isFavorite) Icons.Filled.Star else Icons.Outlined.Star, imageVector = if (isFavorite) Icons.Filled.Star else Icons.Outlined.Star,
contentDescription = if (isFavorite) "Remove from favorites" else "Add to favorites", contentDescription = if (isFavorite) "Remove from favorites" else "Add to favorites",
@@ -273,12 +275,19 @@ private fun ChannelHeader(
) { ) {
val colorScheme = MaterialTheme.colorScheme val colorScheme = MaterialTheme.colorScheme
Row( Box(modifier = Modifier.fillMaxWidth()) {
modifier = Modifier.fillMaxWidth(), // Back button - positioned all the way to the left with minimal margin
horizontalArrangement = Arrangement.SpaceBetween, Button(
verticalAlignment = Alignment.CenterVertically onClick = onBackClick,
) { colors = ButtonDefaults.buttonColors(
IconButton(onClick = onBackClick) { containerColor = Color.Transparent,
contentColor = colorScheme.primary
),
contentPadding = PaddingValues(horizontal = 4.dp, vertical = 4.dp), // Reduced horizontal padding
modifier = Modifier
.align(Alignment.CenterStart)
.offset(x = (-8).dp) // Move even further left to minimize margin
) {
Row( Row(
verticalAlignment = Alignment.CenterVertically verticalAlignment = Alignment.CenterVertically
) { ) {
@@ -297,18 +306,21 @@ private fun ChannelHeader(
} }
} }
Spacer(modifier = Modifier.weight(1f)) // Title - perfectly centered regardless of other elements
Text( Text(
text = "channel: $channel", text = "channel: $channel",
style = MaterialTheme.typography.titleMedium, style = MaterialTheme.typography.titleMedium,
color = Color(0xFF0080FF), // Blue color = Color(0xFFFF9500), // Orange to match input field
modifier = Modifier.clickable { onSidebarClick() } modifier = Modifier
.align(Alignment.Center)
.clickable { onSidebarClick() }
) )
Spacer(modifier = Modifier.weight(1f)) // Leave button - positioned on the right
TextButton(
TextButton(onClick = onLeaveChannel) { onClick = onLeaveChannel,
modifier = Modifier.align(Alignment.CenterEnd)
) {
Text( Text(
text = "leave", text = "leave",
style = MaterialTheme.typography.bodySmall, style = MaterialTheme.typography.bodySmall,
@@ -139,7 +139,7 @@ private fun appendFormattedContent(
} }
"mention" -> { "mention" -> {
builder.pushStyle(SpanStyle( builder.pushStyle(SpanStyle(
color = Color(0xFFFF8C00), // Orange color = Color(0xFFFF9500), // Orange
fontSize = 14.sp, fontSize = 14.sp,
fontWeight = FontWeight.SemiBold fontWeight = FontWeight.SemiBold
)) ))
@@ -44,20 +44,17 @@ fun MessageInput(
modifier = modifier.padding(horizontal = 12.dp, vertical = 8.dp), // Reduced padding modifier = modifier.padding(horizontal = 12.dp, vertical = 8.dp), // Reduced padding
verticalAlignment = Alignment.CenterVertically verticalAlignment = Alignment.CenterVertically
) { ) {
// Fixed: Remove arrow from private message input // Remove arrow from both private and channel inputs to match DM style
Text( Text(
text = when { text = "<@$nickname>", // No arrow for both private and channel
selectedPrivatePeer != null -> "<@$nickname>" // Removed arrow for private
currentChannel != null -> "<@$nickname> →" // Keep arrow for channels
else -> "<@$nickname>"
},
style = MaterialTheme.typography.bodySmall.copy(fontWeight = FontWeight.Medium), style = MaterialTheme.typography.bodySmall.copy(fontWeight = FontWeight.Medium),
color = when { color = when {
selectedPrivatePeer != null -> Color(0xFFFF8C00) // Orange for private selectedPrivatePeer != null -> Color(0xFFFF9500) // Orange for private
currentChannel != null -> Color(0xFFFF8C00) // Orange if encrypted channel currentChannel != null -> Color(0xFFFF9500) // Orange for channels too
else -> colorScheme.primary else -> colorScheme.primary
}, },
fontFamily = FontFamily.Monospace fontFamily = FontFamily.Monospace,
fontSize = 14.sp
) )
Spacer(modifier = Modifier.width(8.dp)) Spacer(modifier = Modifier.width(8.dp))
@@ -78,7 +75,7 @@ fun MessageInput(
Spacer(modifier = Modifier.width(8.dp)) // Reduced spacing Spacer(modifier = Modifier.width(8.dp)) // Reduced spacing
// Fixed: Make send button orange in private mode to match nickname color // Update send button to match input field colors
IconButton( IconButton(
onClick = onSend, onClick = onSend,
modifier = Modifier.size(32.dp) modifier = Modifier.size(32.dp)
@@ -87,9 +84,9 @@ fun MessageInput(
modifier = Modifier modifier = Modifier
.size(30.dp) .size(30.dp)
.background( .background(
color = if (selectedPrivatePeer != null) { color = if (selectedPrivatePeer != null || currentChannel != null) {
// Orange for private messages to match nickname color // Orange for both private messages and channels to match nickname color
Color(0xFFFF8C00).copy(alpha = 0.75f) Color(0xFFFF9500).copy(alpha = 0.75f)
} else if (colorScheme.background == Color.Black) { } else if (colorScheme.background == Color.Black) {
Color(0xFF00FF00).copy(alpha = 0.75f) // Bright green for dark theme Color(0xFF00FF00).copy(alpha = 0.75f) // Bright green for dark theme
} else { } else {
@@ -100,11 +97,11 @@ fun MessageInput(
contentAlignment = Alignment.Center contentAlignment = Alignment.Center
) { ) {
Icon( Icon(
imageVector = Icons.Filled.KeyboardArrowUp, imageVector = Icons.Filled.KeyboardArrowRight,
contentDescription = "Send message", contentDescription = "Send message",
modifier = Modifier.size(20.dp), modifier = Modifier.size(20.dp),
tint = if (selectedPrivatePeer != null) { tint = if (selectedPrivatePeer != null || currentChannel != null) {
// Black arrow on orange in private mode // Black arrow on orange for both private and channel modes
Color.Black Color.Black
} else if (colorScheme.background == Color.Black) { } else if (colorScheme.background == Color.Black) {
Color.Black // Black arrow on bright green in dark theme Color.Black // Black arrow on bright green in dark theme
@@ -193,7 +193,7 @@ fun ChannelsSection(
verticalAlignment = Alignment.CenterVertically verticalAlignment = Alignment.CenterVertically
) { ) {
Text( Text(
text = "#$channel", text = channel, // Channel already contains the # prefix
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
color = if (isSelected) colorScheme.primary else colorScheme.onSurface, color = if (isSelected) colorScheme.primary else colorScheme.onSurface,
fontWeight = if (isSelected) FontWeight.Medium else FontWeight.Normal, fontWeight = if (isSelected) FontWeight.Medium else FontWeight.Normal,
@@ -320,7 +320,7 @@ private fun PeerItem(
imageVector = Icons.Filled.Email, imageVector = Icons.Filled.Email,
contentDescription = "Unread messages", contentDescription = "Unread messages",
modifier = Modifier.size(16.dp), modifier = Modifier.size(16.dp),
tint = Color(0xFFFF8C00) // Orange to match private message theme tint = Color(0xFFFF9500) // Orange to match private message theme
) )
} else { } else {
// Signal strength indicators // Signal strength indicators