fix: fix navigation stack (#471)

* feat: Wire up back navigation

* feat: Add sealed class for destinations

* chore: Tidy

* chore: Update visibility to internal

Author: ethanbfc

mockzilla-management-ui/mockzilla-desktop/src/commonMain/kotlin/com/apadmi/mockzilla/desktop/di/KoinHandler.kt

@@ -11,12 +11,12 @@ import com.apadmi.mockzilla.desktop.ui.devicetabs.DeviceTabsViewModel
 import com.apadmi.mockzilla.lib.config.ZeroConfConfig
 import com.apadmi.mockzilla.ui.di.utils.MockzillaUiKoinContext
 import com.apadmi.mockzilla.ui.di.utils.viewModel
-import kotlinx.coroutines.DelicateCoroutinesApi
 
 import org.koin.dsl.module
 
 import java.net.NetworkInterface
 
+import kotlinx.coroutines.DelicateCoroutinesApi
 import kotlinx.coroutines.GlobalScope
 
 @OptIn(DelicateCoroutinesApi::class)

mockzilla-management-ui/mockzilla-management-ui-common/src/commonMain/kotlin/com/apadmi/mockzilla/ui/ui/common/widgets/endpoints/details/EndpointDetailsWidget.kt

@@ -9,6 +9,7 @@ import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
@@ -17,6 +18,8 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Delete
 import androidx.compose.material3.Button
@@ -122,7 +125,11 @@ fun EndpointDetailsWidgetContent(
     onErrorPresetSelected: (DashboardOverridePreset) -> Unit,
     onResetAll: () -> Unit,
     strings: Strings = LocalStrings.current,
-) = Column {
+) = Column(
+    modifier = Modifier
+        .fillMaxSize()
+        .verticalScroll(rememberScrollState())
+) {
     val pagerState = rememberPagerState(initialPage = 0) { Tab.entries.size }
     val coroutineScope = rememberCoroutineScope()
 

mockzilla-management-ui/mockzilla-mobile-ui/src/androidMain/kotlin/MockzillaManagementSdkActivity.kt

@@ -6,7 +6,7 @@ import androidx.activity.compose.setContent
 import androidx.compose.runtime.CompositionLocalProvider
 import com.apadmi.mockzilla.lib.internal.utils.FileIo
 import com.apadmi.mockzilla.mobile.ui.MobileAppRoot
-import com.apadmi.mockzilla.mobile.ui.startMockzillaMobileUiKoin
+import com.apadmi.mockzilla.mobile.ui.utils.startMockzillaMobileUiKoin
 import org.koin.core.context.stopKoin
 import org.koin.dsl.module
 

mockzilla-management-ui/mockzilla-mobile-ui/src/commonMain/kotlin/com/apadmi/mockzilla/mobile/ui/MobileAppRoot.kt

@@ -3,9 +3,6 @@
 package com.apadmi.mockzilla.mobile.ui
 
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.filled.Close
@@ -15,13 +12,8 @@ import androidx.compose.material3.IconButton
 import androidx.compose.material3.Surface
 import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Modifier
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
@@ -30,6 +22,7 @@ import androidx.navigation.toRoute
 
 import com.apadmi.mockzilla.lib.models.EndpointConfiguration
 import com.apadmi.mockzilla.mobile.ui.deviceconnection.MobileDeviceConnectionWidget
+import com.apadmi.mockzilla.mobile.ui.utils.Destination
 import com.apadmi.mockzilla.ui.di.utils.getViewModel
 import com.apadmi.mockzilla.ui.i18n.LocalStrings
 import com.apadmi.mockzilla.ui.i18n.Strings
@@ -40,18 +33,6 @@ import com.apadmi.mockzilla.ui.ui.common.widgets.deviceconnection.UnsupportedDev
 import com.apadmi.mockzilla.ui.ui.common.widgets.endpoints.details.EndpointDetailsWidget
 import com.apadmi.mockzilla.ui.ui.common.widgets.endpoints.endpoints.EndpointsWidget
 
-import kotlinx.serialization.Serializable
-
-/**
- * @property key
- */
-// TODO: Replace these with a sealed class so their usages are exhaustive
-@Serializable
-internal data class EndpointDetails(val key: String)
-
-@Serializable
-internal data object EndpointList
-
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 internal fun MobileAppRoot(
@@ -60,14 +41,17 @@ internal fun MobileAppRoot(
 ) = AppTheme {
     val viewModel = getViewModel<AppRootViewModel>()
     val state by viewModel.state.collectAsState()
-    var showBackButton = remember { mutableStateOf(false) }
+    val navController = rememberNavController()
+    val showBackButton = navController.currentBackStack.collectAsState()
+        .value
+        .size > 2
+
     Column {
         TopAppBar(
-            title = { },
+            title = { /* No title */ },
             navigationIcon = {
-                // TODO: Wire up back nav
-                if (showBackButton.value) {
-                    IconButton(onClick = onClose) {
+                if (showBackButton) {
+                    IconButton(onClick = navController::navigateUp) {
                         Icon(
                             imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                             contentDescription = strings.common.backDescription
@@ -82,13 +66,13 @@ internal fun MobileAppRoot(
                         contentDescription = strings.common.closeDescription
                     )
                 }
-            },
+            }
         )
 
         when (val currentState = state) {
             is State.Connected -> ConnectedState(
-                currentState = currentState,
-                showBackButton = showBackButton
+                navController = navController,
+                currentState = currentState
             )
 
             State.NewDeviceConnection -> MobileDeviceConnectionWidget()
@@ -99,36 +83,29 @@ internal fun MobileAppRoot(
 
 @Composable
 private fun ConnectedState(
-    navController: NavHostController = rememberNavController(),
-    currentState: State.Connected,
-    showBackButton: MutableState<Boolean>
-) {
-    val backStack by navController.currentBackStack.collectAsState()
-    LaunchedEffect(backStack) {
-        showBackButton.value = backStack.size > 1
-    }
-
+    navController: NavHostController,
+    currentState: State.Connected
+) = Surface {
     NavHost(
         navController = navController,
-        startDestination = EndpointList
+        startDestination = Destination.EndpointList
     ) {
-        composable<EndpointDetails>() { backStackEntry ->
-            Surface(modifier = Modifier.fillMaxSize().verticalScroll(rememberScrollState())) {
-                EndpointDetailsWidget(
-                    currentState.activeDevice.device,
-                    activeEndpoint = EndpointConfiguration.Key(backStackEntry.toRoute<EndpointDetails>().key)
+        composable<Destination.EndpointDetails> { backStackEntry ->
+            EndpointDetailsWidget(
+                device = currentState.activeDevice.device,
+                activeEndpoint = EndpointConfiguration.Key(
+                    backStackEntry.toRoute<Destination.EndpointDetails>().key
                 )
-            }
+            )
         }
 
-        composable<EndpointList> {
-            Surface {
-                EndpointsWidget(
-                    currentState.activeDevice.device
-                ) {
-                    navController.navigate(EndpointDetails(it.raw))
+        composable<Destination.EndpointList> {
+            EndpointsWidget(
+                device = currentState.activeDevice.device,
+                onEndpointClicked = {
+                    navController.navigate(Destination.EndpointDetails(it.raw))
                 }
-            }
+            )
         }
     }
 }

mockzilla-management-ui/mockzilla-mobile-ui/src/commonMain/kotlin/com/apadmi/mockzilla/mobile/ui/deviceconnection/MobileDeviceConnectionWidget.kt

@@ -36,7 +36,7 @@ internal fun MobileDeviceConnectionWidget(
         verticalArrangement = Arrangement.spacedBy(20.dp, Alignment.CenterVertically),
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
-        when (val currentState = state) {
+        when (state) {
             State.Connecting -> CircularProgressIndicator(
                 modifier = Modifier.padding(end = 8.dp).size(20.dp)
             )

mockzilla-management-ui/mockzilla-mobile-ui/src/commonMain/kotlin/com/apadmi/mockzilla/mobile/ui/utils/Destination.kt

@@ -0,0 +1,15 @@
+package com.apadmi.mockzilla.mobile.ui.utils
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+internal sealed class Destination {
+    @Serializable
+    internal data object EndpointList : Destination()
+
+    /**
+     * @property key
+     */
+    @Serializable
+    internal data class EndpointDetails(val key: String) : Destination()
+}

mockzilla-management-ui/mockzilla-mobile-ui/src/commonMain/kotlin/com/apadmi/mockzilla/mobile/ui/KoinHandler.kt renamed to mockzilla-management-ui/mockzilla-mobile-ui/src/commonMain/kotlin/com/apadmi/mockzilla/mobile/ui/utils/KoinHandler.kt

@@ -1,4 +1,4 @@
-package com.apadmi.mockzilla.mobile.ui
+package com.apadmi.mockzilla.mobile.ui.utils
 
 import com.apadmi.mockzilla.lib.sharedstate.MockzillaSharedProcessStateHandler
 import com.apadmi.mockzilla.mobile.ui.deviceconnection.MobileDeviceConnectionViewModel

mockzilla-management-ui/mockzilla-mobile-ui/src/iosMain/kotlin/com/apadmi/mockzilla/mobile/ui/Launcher.ios.kt

@@ -2,6 +2,7 @@ package com.apadmi.mockzilla.mobile.ui
 
 import androidx.compose.ui.window.ComposeUIViewController
 import com.apadmi.mockzilla.lib.internal.utils.FileIo
+import com.apadmi.mockzilla.mobile.ui.utils.startMockzillaMobileUiKoin
 import org.koin.dsl.module
 
 import platform.UIKit.*