From c6cb6441031206f283a1051fb3db4c0b6e2f13f9 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 24 Apr 2026 13:52:35 +0000
Subject: [PATCH] fix(desktop): flip Messages screen surfaces to match native
 convention
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../desktop/ui/chats/ConversationListPane.kt       | 14 +++++++++++---
 .../desktop/ui/chats/DesktopMessagesScreen.kt      |  9 ++++++++-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/chats/ConversationListPane.kt b/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/chats/ConversationListPane.kt
index 35417f212..3e8bd2fd4 100644
--- a/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/chats/ConversationListPane.kt
+++ b/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/chats/ConversationListPane.kt
@@ -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(
diff --git a/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/chats/DesktopMessagesScreen.kt b/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/chats/DesktopMessagesScreen.kt
index 76fe06e72..b172c6303 100644
--- a/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/chats/DesktopMessagesScreen.kt
+++ b/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/chats/DesktopMessagesScreen.kt
@@ -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 =