Extracted MainScreen

composeApp/src/commonMain/kotlin/net/codinux/banking/ui/App.kt

@@ -1,20 +1,15 @@
 package net.codinux.banking.ui
 
-import androidx.compose.foundation.layout.*
+import androidx.compose.material.MaterialTheme
-import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.Typography
-import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Add
 import androidx.compose.runtime.*
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import kotlinx.coroutines.launch
-import net.codinux.banking.ui.appskeleton.*
 import net.codinux.banking.ui.config.Colors
 import net.codinux.banking.ui.config.DI
+import net.codinux.banking.ui.screens.MainScreen
 import net.codinux.log.LoggerFactory
 import org.jetbrains.compose.ui.tooling.preview.Preview
 
@@ -30,80 +25,13 @@ fun App() {
     val colors = MaterialTheme.colors.copy(primary = Colors.Primary, primaryVariant = Colors.PrimaryDark, onPrimary = Color.White,
         secondary = Colors.Accent, secondaryVariant = Colors.Accent, onSecondary = Color.White)
 
-    // the same values as in BottomBar, but LocalContentColor.current and LocalContentAlpha.current have a different value there
-    val snackbarTextColor = MaterialTheme.colors.onPrimary.copy(alpha = 0.74f) // 0.74f = ContentAlpha.HighContrastContentAlpha.medium
-
-    val screenSizeInfo = rememberScreenSizeInfo()
-
-    val isMobile = derivedStateOf { screenSizeInfo.getUiType() == UiType.COMPACT }.value
-
-    // we want to place the FAB half size into the BottomBar so we have to add some top padding to it
-    val fabPositionAdjustment = if (isMobile) 44.dp // FabSpacing = 16.dp + FAB height (= 56.dp) / 2
-                                else (-10).dp
-
-    val desktopDrawerWidth = 350.dp
-
-    val uiState = DI.uiState
-
-    val uiSettings = DI.uiSettings
-
-    val drawerState = DI.uiState.drawerState.collectAsState().value
-
-    val snackbarHostState = remember { SnackbarHostState() }
-
-    val showFilterBar = uiState.showFilterBar.collectAsState()
-
     var isInitialized by remember { mutableStateOf(false) }
 
     val coroutineScope = rememberCoroutineScope()
 
 
     MaterialTheme(colors = colors, typography = typography) {
-        Scaffold(
+        MainScreen()
-            scaffoldState = rememberScaffoldState(drawerState, snackbarHostState),
-            bottomBar = { if (isMobile) BottomBar() else null },
-            backgroundColor = Colors.Zinc100,
-            floatingActionButton = {
-                FloatingActionButton(
-                    shape = CircleShape,
-                    modifier = Modifier.offset(x = 4.dp, y = fabPositionAdjustment),
-                    onClick = { uiState.showAddAccountDialog.value = true }
-                ) {
-                    Icon(Icons.Filled.Add, contentDescription = "Add a bank account")
-                }
-            },
-            drawerContent = { if (isMobile) SideMenuContent() else null },
-            drawerBackgroundColor = Colors.DrawerContentBackground,
-            snackbarHost = { snackbarHostState ->
-                SnackbarHost(
-                    hostState = snackbarHostState
-                ) { data ->
-                    Snackbar(
-                        modifier = Modifier.offset(y = fabPositionAdjustment - 4.dp)
-                            .let { if (isMobile) it.padding(horizontal = 12.dp) else it.padding(start = desktopDrawerWidth + 6.dp, end = 2.dp) },
-                        action = { if (data.actionLabel == null) null else {
-                            TextButton(
-                                onClick = { data.performAction() },
-                                content = { Text(data.actionLabel!!, color = Colors.CodinuxSecondaryColor) }
-                            )
-                        }
-                        },
-                        content = { Text(data.message, color = snackbarTextColor) },
-                        backgroundColor = Colors.Primary
-                    )
-                }
-            }
-        ) { scaffoldPadding ->
-            if (isMobile) {
-                ContentPane(scaffoldPadding, uiState, uiSettings, snackbarHostState, isMobile)
-            } else {
-                DesktopLayout(scaffoldPadding, uiState, uiSettings, snackbarHostState, desktopDrawerWidth)
-            }
-        }
-
-        if (showFilterBar.value) {
-            FilterBar()
-        }
     }
 
 

composeApp/src/commonMain/kotlin/net/codinux/banking/ui/screens/MainScreen.kt

@@ -0,0 +1,91 @@
+package net.codinux.banking.ui.screens
+
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import net.codinux.banking.ui.UiType
+import net.codinux.banking.ui.appskeleton.*
+import net.codinux.banking.ui.config.Colors
+import net.codinux.banking.ui.config.DI
+import net.codinux.banking.ui.getUiType
+import net.codinux.banking.ui.rememberScreenSizeInfo
+
+@Composable
+fun MainScreen() {
+
+    // the same values as in BottomBar, but LocalContentColor.current and LocalContentAlpha.current have a different value there
+    val snackbarTextColor = MaterialTheme.colors.onPrimary.copy(alpha = 0.74f) // 0.74f = ContentAlpha.HighContrastContentAlpha.medium
+
+    val screenSizeInfo = rememberScreenSizeInfo()
+
+    val isMobile = derivedStateOf { screenSizeInfo.getUiType() == UiType.COMPACT }.value
+
+    // we want to place the FAB half size into the BottomBar so we have to add some top padding to it
+    val fabPositionAdjustment = if (isMobile) 44.dp // FabSpacing = 16.dp + FAB height (= 56.dp) / 2
+    else (-10).dp
+
+    val desktopDrawerWidth = 350.dp
+
+    val uiState = DI.uiState
+
+    val uiSettings = DI.uiSettings
+
+    val drawerState = DI.uiState.drawerState.collectAsState().value
+
+    val snackbarHostState = remember { SnackbarHostState() }
+
+    val showFilterBar = uiState.showFilterBar.collectAsState()
+
+
+    Scaffold(
+        scaffoldState = rememberScaffoldState(drawerState, snackbarHostState),
+        bottomBar = { if (isMobile) BottomBar() else null },
+        backgroundColor = Colors.Zinc100,
+        floatingActionButton = {
+            FloatingActionButton(
+                shape = CircleShape,
+                modifier = Modifier.offset(x = 4.dp, y = fabPositionAdjustment),
+                onClick = { uiState.showAddAccountDialog.value = true }
+            ) {
+                Icon(Icons.Filled.Add, contentDescription = "Add a bank account")
+            }
+        },
+        drawerContent = { if (isMobile) SideMenuContent() else null },
+        drawerBackgroundColor = Colors.DrawerContentBackground,
+        snackbarHost = { snackbarHostState ->
+            SnackbarHost(
+                hostState = snackbarHostState
+            ) { data ->
+                Snackbar(
+                    modifier = Modifier.offset(y = fabPositionAdjustment - 4.dp)
+                        .let { if (isMobile) it.padding(horizontal = 12.dp) else it.padding(start = desktopDrawerWidth + 6.dp, end = 2.dp) },
+                    action = { if (data.actionLabel == null) null else {
+                        TextButton(
+                            onClick = { data.performAction() },
+                            content = { Text(data.actionLabel!!, color = Colors.CodinuxSecondaryColor) }
+                        )
+                    }
+                    },
+                    content = { Text(data.message, color = snackbarTextColor) },
+                    backgroundColor = Colors.Primary
+                )
+            }
+        }
+    ) { scaffoldPadding ->
+        if (isMobile) {
+            ContentPane(scaffoldPadding, uiState, uiSettings, snackbarHostState, isMobile)
+        } else {
+            DesktopLayout(scaffoldPadding, uiState, uiSettings, snackbarHostState, desktopDrawerWidth)
+        }
+    }
+
+    if (showFilterBar.value) {
+        FilterBar()
+    }
+}