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.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(
|
||||||
|
|||||||
+8
-1
@@ -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 =
|
||||||
|
|||||||
Reference in New Issue
Block a user