fix(desktop): flip Messages screen surfaces to match native convention
The conversation list (left) was rendering on surface (white) while the chat content (right) was inheriting the window background — backwards from how Messages.app, Slack, Telegram, Discord lay out a two-pane chat: secondary surface on the list side, primary (white in light mode) on the content side. - ConversationListPane root now paints surfaceContainer. - Unselected ConversationCard goes transparent so the pane's surfaceContainer shows through; selected / focused tints re-derived from primary and onSurface so they still read on the new bg. - Right-side chat Box now explicitly paints surface. https://claude.ai/code/session_01NufduPfZvYQVYwLkbCjCUo
This commit is contained in:
+11
-3
@@ -56,6 +56,7 @@ import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.focus.FocusRequester
|
||||
import androidx.compose.ui.focus.focusRequester
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.input.key.Key
|
||||
import androidx.compose.ui.input.key.KeyEventType
|
||||
import androidx.compose.ui.input.key.key
|
||||
@@ -120,6 +121,9 @@ fun ConversationListPane(
|
||||
modifier =
|
||||
modifier
|
||||
.fillMaxHeight()
|
||||
// Chat-list pane reads as a secondary surface (like Messages.app,
|
||||
// Slack, Telegram); the chat content pane to the right stays white.
|
||||
.background(MaterialTheme.colorScheme.surfaceContainer)
|
||||
.focusRequester(focusRequester)
|
||||
.focusable()
|
||||
.onPreviewKeyEvent { event ->
|
||||
@@ -284,9 +288,13 @@ private fun ConversationCard(
|
||||
) {
|
||||
val backgroundColor =
|
||||
when {
|
||||
isSelected -> MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.3f)
|
||||
isFocused -> MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f)
|
||||
else -> MaterialTheme.colorScheme.surface
|
||||
isSelected -> MaterialTheme.colorScheme.primary.copy(alpha = 0.14f)
|
||||
|
||||
isFocused -> MaterialTheme.colorScheme.onSurface.copy(alpha = 0.06f)
|
||||
|
||||
// Transparent lets the pane's surfaceContainer show through — the
|
||||
// list pane is the "secondary surface" in this screen.
|
||||
else -> Color.Transparent
|
||||
}
|
||||
|
||||
Row(
|
||||
|
||||
+8
-1
@@ -20,6 +20,7 @@
|
||||
*/
|
||||
package com.vitorpamplona.amethyst.desktop.ui.chats
|
||||
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.fillMaxHeight
|
||||
@@ -286,7 +287,13 @@ private fun SplitMessagesContent(
|
||||
|
||||
VerticalDivider(modifier = Modifier.fillMaxHeight())
|
||||
|
||||
Box(modifier = Modifier.weight(1f).fillMaxHeight()) {
|
||||
Box(
|
||||
modifier =
|
||||
Modifier
|
||||
.weight(1f)
|
||||
.fillMaxHeight()
|
||||
.background(MaterialTheme.colorScheme.surface),
|
||||
) {
|
||||
val currentRoom = selectedRoom
|
||||
if (currentRoom != null) {
|
||||
val feedViewModel =
|
||||
|
||||
Reference in New Issue
Block a user