diff --git a/feature/metis/conversation/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/conversation/ui/ConversationScreen.kt b/feature/metis/conversation/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/conversation/ui/ConversationScreen.kt index 19dd85cb7..aa40fb9a4 100644 --- a/feature/metis/conversation/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/conversation/ui/ConversationScreen.kt +++ b/feature/metis/conversation/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/conversation/ui/ConversationScreen.kt @@ -1,14 +1,12 @@ package de.tum.informatics.www1.artemis.native_app.feature.metis.conversation.ui import androidx.compose.animation.AnimatedContent -import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.SizeTransform import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.widthIn import androidx.compose.material3.VerticalDivider import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass import androidx.compose.runtime.Composable @@ -28,9 +26,6 @@ import de.tum.informatics.www1.artemis.native_app.feature.metis.shared.content.S import org.koin.androidx.compose.koinViewModel import org.koin.core.parameter.parametersOf -private const val ConversationOverviewMaxWeight = 0.3f -private val ConversationOverviewMaxWidth = 600.dp - /** * Displays a conversation. Uses [ConversationChatListScreen] and [ConversationThreadScreen] to show the conversations. * @param conversationId the conversation that should be displayed @@ -73,7 +68,6 @@ fun ConversationScreen( viewModel.updateOpenedThread(threadPostId) } - val widthSizeClass = getWindowSizeClass().widthSizeClass var showThread by remember { mutableStateOf(threadPostId != null) } val onNavigateUp = { @@ -85,102 +79,84 @@ fun ConversationScreen( showThread = true } + WindowSizeAwareTwoColumnLayout( + modifier = modifier, + optionalColumn = conversationsOverview, + ) { innerModifier -> + AnimatedContent( + modifier = innerModifier, + targetState = showThread, + transitionSpec = { + if (targetState) { + DefaultTransition.navigateForward + } else { + DefaultTransition.navigateBack + }.using( + SizeTransform(clip = false) + ) + }, + label = "ConversationScreen chatList thread navigation animation" + ) { _showThread -> + if (_showThread) { + ConversationThreadScreen( + modifier = Modifier.fillMaxSize(), + viewModel = viewModel, + onNavigateUp = onNavigateUp + ) + } else { + ConversationChatListScreen( + modifier = Modifier.fillMaxSize(), + viewModel = viewModel, + courseId = courseId, + conversationId = conversationId, + onNavigateBack = onCloseConversation, + onNavigateToSettings = onNavigateToSettings, + onClickViewPost = onClickViewPost + ) + } + } + } +} + + +@Composable +fun WindowSizeAwareTwoColumnLayout( + modifier: Modifier = Modifier, + optionalColumnWeight: Float = 1f, + priorityColumnWeight: Float = 2f, + optionalColumn: @Composable (Modifier) -> Unit, + priorityColumn: @Composable (Modifier) -> Unit +) { + val widthSizeClass = getWindowSizeClass().widthSizeClass + when { widthSizeClass <= WindowWidthSizeClass.Compact -> { Box(modifier = modifier) { - AnimatedContent( - targetState = showThread, - transitionSpec = { - if (targetState) { - DefaultTransition.navigateForward - } else { - DefaultTransition.navigateBack - }.using( - SizeTransform(clip = false) - ) - }, - label = "ConversationScreen chatList thread navigation animation" - ) { _showThread -> - if (_showThread) { - ConversationThreadScreen( - modifier = Modifier.fillMaxSize(), - viewModel = viewModel, - onNavigateUp = onNavigateUp - ) - } else { - ConversationChatListScreen( - modifier = Modifier.fillMaxSize(), - viewModel = viewModel, - courseId = courseId, - conversationId = conversationId, - onNavigateBack = onCloseConversation, - onNavigateToSettings = onNavigateToSettings, - onClickViewPost = onClickViewPost - ) - } - } + priorityColumn(Modifier.fillMaxSize()) } } else -> { - val arrangement = Arrangement.spacedBy(8.dp) - Row( modifier = modifier, - horizontalArrangement = arrangement + horizontalArrangement = Arrangement.spacedBy(8.dp) ) { - val isOverviewVisible = !showThread || widthSizeClass >= WindowWidthSizeClass.Expanded - AnimatedVisibility( + Box( modifier = Modifier - .weight(ConversationOverviewMaxWeight) - .widthIn(max = ConversationOverviewMaxWidth) - .fillMaxHeight(), - visible = isOverviewVisible + .weight(optionalColumnWeight) + .fillMaxHeight() ) { - Row( - modifier = Modifier.fillMaxSize(), - horizontalArrangement = arrangement - ) { - conversationsOverview( - Modifier - .weight(1f) - .fillMaxHeight() - ) - - VerticalDivider() - } - } - - val otherWeight = when { - isOverviewVisible && showThread -> 0.35f - isOverviewVisible && !showThread -> 0.7f - else -> 0.5f + optionalColumn(Modifier.fillMaxSize()) } - val otherModifier = Modifier - .weight(otherWeight) - .fillMaxHeight() + VerticalDivider() - ConversationChatListScreen( + Box( modifier = Modifier - .weight(1f) - .fillMaxHeight(), - viewModel = viewModel, - courseId = courseId, - conversationId = conversationId, - onNavigateBack = onCloseConversation, - onNavigateToSettings = onNavigateToSettings, - onClickViewPost = onClickViewPost - ) - - if (showThread) { - VerticalDivider() - - ConversationThreadScreen( - modifier = otherModifier, - viewModel = viewModel, - onNavigateUp = onNavigateUp - ) + .weight(priorityColumnWeight) + .fillMaxHeight() + ) { + priorityColumn(Modifier.fillMaxSize()) } } }