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:
Claude
2026-04-24 13:52:35 +00:00
parent 9769bec472
commit c6cb644103
2 changed files with 19 additions and 4 deletions
@@ -56,6 +56,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.clip
import androidx.compose.ui.focus.FocusRequester import androidx.compose.ui.focus.FocusRequester
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.Key
import androidx.compose.ui.input.key.KeyEventType import androidx.compose.ui.input.key.KeyEventType
import androidx.compose.ui.input.key.key import androidx.compose.ui.input.key.key
@@ -120,6 +121,9 @@ fun ConversationListPane(
modifier = modifier =
modifier modifier
.fillMaxHeight() .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) .focusRequester(focusRequester)
.focusable() .focusable()
.onPreviewKeyEvent { event -> .onPreviewKeyEvent { event ->
@@ -284,9 +288,13 @@ private fun ConversationCard(
) { ) {
val backgroundColor = val backgroundColor =
when { when {
isSelected -> MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.3f) isSelected -> MaterialTheme.colorScheme.primary.copy(alpha = 0.14f)
isFocused -> MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f)
else -> MaterialTheme.colorScheme.surface 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( Row(
@@ -20,6 +20,7 @@
*/ */
package com.vitorpamplona.amethyst.desktop.ui.chats package com.vitorpamplona.amethyst.desktop.ui.chats
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxHeight
@@ -286,7 +287,13 @@ private fun SplitMessagesContent(
VerticalDivider(modifier = Modifier.fillMaxHeight()) VerticalDivider(modifier = Modifier.fillMaxHeight())
Box(modifier = Modifier.weight(1f).fillMaxHeight()) { Box(
modifier =
Modifier
.weight(1f)
.fillMaxHeight()
.background(MaterialTheme.colorScheme.surface),
) {
val currentRoom = selectedRoom val currentRoom = selectedRoom
if (currentRoom != null) { if (currentRoom != null) {
val feedViewModel = val feedViewModel =