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.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(
@@ -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 =