Improve large layouts by adding task pane and new list dialog

.idea/caches/deviceStreaming.xml

@@ -160,6 +160,18 @@
           <option name="screenX" value="1080" />
           <option name="screenY" value="2340" />
         </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="35" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="a36xq" />
+          <option name="id" value="a36xq" />
+          <option name="labId" value="google" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="SM-A366E" />
+          <option name="screenDensity" value="450" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2340" />
+        </PersistentDeviceSelectionData>
         <PersistentDeviceSelectionData>
           <option name="api" value="34" />
           <option name="brand" value="google" />

donextv2/src/main/java/com/wismna/geoffroy/donext/presentation/screen/MainScreen.kt

@@ -8,8 +8,13 @@ import androidx.compose.animation.slideInHorizontally
 import androidx.compose.animation.slideOutHorizontally
 import androidx.compose.foundation.background
 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.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
@@ -24,6 +29,7 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.ModalNavigationDrawer
 import androidx.compose.material3.PermanentNavigationDrawer
 import androidx.compose.material3.Scaffold
@@ -35,7 +41,9 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.VerticalDivider
 import androidx.compose.material3.rememberDrawerState
+import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.material3.windowsizeclass.WindowSizeClass
 import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.runtime.Composable
@@ -50,6 +58,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
 import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
 import androidx.navigation.NavHostController
 import androidx.navigation.NavType
@@ -79,33 +88,90 @@ fun MainScreen(
         return
     }
 
-    if (viewModel.showTaskSheet) {
-        TaskBottomSheet { viewModel.onDismissTaskSheet() }
-    }
-    if (viewModel.showAddListSheet) {
-        AddListBottomSheet { viewModel.showAddListSheet = false }
-    }
-
     val navBackStackEntry by navController.currentBackStackEntryAsState()
     viewModel.setCurrentDestination(navBackStackEntry)
 
     val isExpandedScreen = windowSizeClass.widthSizeClass >= WindowWidthSizeClass.Medium
     val orientation = LocalConfiguration.current.orientation
     val isLandscape = orientation == Configuration.ORIENTATION_LANDSCAPE
-    val showPermanentDrawer = isExpandedScreen || isLandscape
+    val isLargeLayout = isExpandedScreen || isLandscape
 
-    if (showPermanentDrawer) {
+    if (isLargeLayout) {
         PermanentNavigationDrawer(
             drawerContent = {
-                MenuScreen(currentDestination = viewModel.currentDestination)
+                MenuScreen(
+                    modifier = Modifier.width(240.dp),
+                    currentDestination = viewModel.currentDestination
+                )
             }
+        ) {
+            Row(Modifier.fillMaxSize()) {
+                // Main app content area
+                Box(
+                    modifier = Modifier
+                        .weight(1f)
+                        .fillMaxHeight()
                 ) {
                     AppContent(
                         viewModel = viewModel,
                         navController = navController
                     )
                 }
+
+                // Show side "details" pane for the task editor when requested
+                if (viewModel.showTaskSheet) {
+                    VerticalDivider(
+                        modifier = Modifier
+                            .fillMaxHeight()
+                            .width(1.dp)
+                    )
+                    Box(
+                        modifier = Modifier
+                            .width(380.dp)
+                            .fillMaxHeight()
+                            .background(MaterialTheme.colorScheme.surfaceContainerHigh)
+                    ) {
+                        TaskScreen { viewModel.onDismissTaskSheet() }
+                    }
+                }
+                if (viewModel.showAddListSheet) {
+                    Dialog(onDismissRequest = { viewModel.showAddListSheet = false }) {
+                        Surface(
+                            shape = RoundedCornerShape(16.dp),
+                            tonalElevation = 6.dp,
+                            modifier = Modifier
+                                .widthIn(max = 400.dp)
+                                .wrapContentHeight()
+                                .padding(16.dp)
+                        ) {
+                            AddListScreen { viewModel.showAddListSheet = false }
+                        }
+                    }
+                }
+            }
+        }
     } else {
+        if (viewModel.showTaskSheet) {
+            val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
+            val scope = rememberCoroutineScope()
+
+            ModalBottomSheet(
+                onDismissRequest = {
+                    scope.launch {
+                        sheetState.hide()
+                        viewModel.onDismissTaskSheet()
+                    }
+                },
+                sheetState = sheetState) {
+                TaskScreen { viewModel.onDismissTaskSheet() }
+            }
+        }
+        if (viewModel.showAddListSheet) {
+            ModalBottomSheet(onDismissRequest = { viewModel.showAddListSheet = false }) {
+                AddListScreen { viewModel.showAddListSheet = false }
+            }
+        }
+
         val drawerState = rememberDrawerState(DrawerValue.Closed)
         ModalNavigationDrawer(
             drawerContent = {

donextv2/src/main/java/com/wismna/geoffroy/donext/presentation/screen/ManageListsScreen.kt

@@ -32,7 +32,6 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -217,7 +216,7 @@ fun ManageListsScreen(
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun AddListBottomSheet(
+fun AddListScreen(
     viewModel: ManageListsViewModel = hiltViewModel(),
     onDismiss: () -> Unit
 ) {
@@ -227,7 +226,6 @@ fun AddListBottomSheet(
         titleFocusRequester.requestFocus()
     }
 
-    ModalBottomSheet(onDismissRequest = onDismiss) {
     var name by remember { mutableStateOf("") }
     //var type by remember { mutableStateOf(ListType.Default) }
     //var description by remember { mutableStateOf("") }
@@ -279,4 +277,3 @@ fun AddListBottomSheet(
         }
     }
 }
-}

donextv2/src/main/java/com/wismna/geoffroy/donext/presentation/screen/MenuScreen.kt

@@ -29,10 +29,12 @@ import com.wismna.geoffroy.donext.presentation.viewmodel.MenuViewModel
 
 @Composable
 fun MenuScreen(
+    modifier: Modifier = Modifier,
     viewModel: MenuViewModel = hiltViewModel(),
     currentDestination: AppDestination,
 ) {
     ModalDrawerSheet(
+        modifier = modifier,
         drawerContainerColor = MaterialTheme.colorScheme.surfaceVariant,
         drawerContentColor = MaterialTheme.colorScheme.onSurfaceVariant
     ) {

donextv2/src/main/java/com/wismna/geoffroy/donext/presentation/screen/TaskScreen.kt

@@ -18,7 +18,6 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.SegmentedButton
 import androidx.compose.material3.SegmentedButtonDefaults
@@ -27,13 +26,11 @@ import androidx.compose.material3.SingleChoiceSegmentedButtonRow
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.material3.rememberDatePickerState
-import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -44,7 +41,6 @@ import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
 import com.wismna.geoffroy.donext.domain.extension.toLocalDate
 import com.wismna.geoffroy.donext.domain.model.Priority
 import com.wismna.geoffroy.donext.presentation.viewmodel.TaskViewModel
-import kotlinx.coroutines.launch
 import java.time.LocalDate
 import java.time.ZoneId
 import java.time.ZoneOffset
@@ -53,21 +49,16 @@ import java.time.format.FormatStyle
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun TaskBottomSheet(
+fun TaskScreen(
     viewModel: TaskViewModel = hiltViewModel(),
     onDismiss: () -> Unit
 ) {
     val titleFocusRequester = remember { FocusRequester() }
-    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
-    val scope = rememberCoroutineScope()
 
     LaunchedEffect(Unit) {
         titleFocusRequester.requestFocus()
     }
 
-    ModalBottomSheet(
-        onDismissRequest = onDismiss,
-        sheetState = sheetState) {
     Column(Modifier.padding(16.dp)) {
         Text(
             viewModel.screenTitle(),
@@ -103,7 +94,8 @@ fun TaskBottomSheet(
         Row(
             modifier = Modifier.fillMaxWidth().padding(start = 17.dp),
             horizontalArrangement = Arrangement.SpaceBetween,
-                verticalAlignment = Alignment.CenterVertically) {
+            verticalAlignment = Alignment.CenterVertically
+        ) {
             Text("Priority", style = MaterialTheme.typography.labelLarge)
             SingleChoiceSegmentedButton(
                 value = viewModel.priority,
@@ -116,7 +108,8 @@ fun TaskBottomSheet(
         // --- Due Date ---
         var showDatePicker by remember { mutableStateOf(false) }
         val formattedDate = viewModel.dueDate?.toLocalDate()?.format(
-                DateTimeFormatter.ofLocalizedDate(FormatStyle.MEDIUM))
+            DateTimeFormatter.ofLocalizedDate(FormatStyle.MEDIUM)
+        )
             ?: ""
 
         OutlinedTextField(
@@ -129,13 +122,15 @@ fun TaskBottomSheet(
                     if (viewModel.dueDate != null) {
                         IconButton(
                             onClick = { viewModel.onDueDateChanged(null) },
-                                enabled = !viewModel.isDeleted) {
+                            enabled = !viewModel.isDeleted
+                        ) {
                             Icon(Icons.Default.Clear, contentDescription = "Clear due date")
                         }
                     }
                     IconButton(
                         onClick = { showDatePicker = true },
-                            enabled = !viewModel.isDeleted) {
+                        enabled = !viewModel.isDeleted
+                    ) {
                         Icon(Icons.Default.CalendarMonth, contentDescription = "Pick due date")
                     }
                 }
@@ -182,12 +177,7 @@ fun TaskBottomSheet(
             ) {
                 // --- Cancel Button ---
                 Button(
-                        onClick = {
+                    onClick = { onDismiss() },
-                            scope.launch {
-                                sheetState.hide()
-                                onDismiss()
-                            }
-                        },
                     colors = ButtonDefaults.textButtonColors(
                         contentColor = MaterialTheme.colorScheme.primary
                     )
@@ -196,11 +186,8 @@ fun TaskBottomSheet(
                 // --- Save Button ---
                 Button(
                     onClick = {
-                            scope.launch {
                         viewModel.save()
-                                sheetState.hide()
                         onDismiss()
-                            }
                     },
                     enabled = viewModel.title.isNotBlank() && !viewModel.isDeleted,
                 ) {
@@ -210,7 +197,6 @@ fun TaskBottomSheet(
         }
     }
 }
-}
 
 @Composable
 fun SingleChoiceSegmentedButton(