Chore: Replace three column with two column conversation layout for…

… large screens (#279)
ls1intum · Jan 10, 2025 · a56ead7 · a56ead7
1 parent 8bd132b
commit a56ead7
Showing 1 changed file with 62 additions and 86 deletions.
diff --git a/...m/informatics/www1/artemis/native_app/feature/metis/conversation/ui/ConversationScreen.kt b/...m/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())
                 }
             }
         }