wip

Author: stefanusayudha

Library/lib/build.gradle.kts

@@ -38,6 +38,9 @@ dependency {
         implementation(libs.androidx.lifecycle.viewmodel)
         implementation(libs.androidx.lifecycle.runtimeCompose)
         implementation(libs.androidx.lifecycle.viewmodel.compose)
+        
+        // Navigation Compose
+        implementation(libs.androidx.navigation.compose)
 
         implementation(libs.ktor.client.core)
         implementation(libs.ktor.client.content.negotiation)

Library/lib/src/commonMain/kotlin/ui/DebuggerScreen.kt

@@ -5,6 +5,13 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.navigation.NavType
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import androidx.navigation.navArgument
+import ui.pane.RequestListPane
+import ui.pane.RequestPane
 
 expect fun openDebugger()
 
@@ -24,15 +31,47 @@ fun DebuggerScreen() {
             }
         ) {
             Surface {
-                RequestListPane(
+                MainNavigation(
                     modifier = Modifier
+                        .fillMaxSize()
                         .padding(it)
-                        .fillMaxSize(),
-                    onClick = {
-
-                    },
                 )
             }
         }
     }
+}
+
+@Composable
+fun MainNavigation(
+    modifier: Modifier = Modifier
+) {
+    val controller = rememberNavController()
+
+    NavHost(
+        modifier = modifier,
+        navController = controller,
+        startDestination = "list"
+    ) {
+        composable(route = "list") {
+            RequestListPane(
+                modifier = Modifier.fillMaxSize(),
+                onClick = {
+                    controller.navigate("request/$it")
+                },
+            )
+        }
+
+        composable(
+            route = "request/{id}",
+            arguments = listOf(
+                navArgument("id") { type = NavType.StringType }
+            )
+        ) {
+            val id = it.savedStateHandle.get<String>("id") ?: return@composable
+            RequestPane(
+                modifier = Modifier.fillMaxSize(),
+                id = id
+            )
+        }
+    }
 }

Library/lib/src/commonMain/kotlin/ui/component/RequestItem.kt

@@ -37,7 +37,7 @@ fun ErrorItem(
     item: ErrorItemDisplay,
     onClick: () -> Unit,
 ) {
-    CompositionLocalProvider(LocalContentColor provides Color(colorSuccess)) {
+    CompositionLocalProvider(LocalContentColor provides Color(colorError)) {
         StatusItem(modifier, onClick, item.executionTime, item.status, item.url, item.method)
     }
 }
@@ -66,7 +66,7 @@ fun ExecutingItem(
     item: ExecutingItemDisplay,
     onClick: () -> Unit,
 ) {
-    CompositionLocalProvider(LocalContentColor provides Color(colorSuccess)) {
+    CompositionLocalProvider(LocalContentColor provides Color.White) {
         StatusItem(modifier, onClick, item.executionTime, item.status, item.url, item.method)
     }
 }
@@ -95,7 +95,7 @@ fun SpoofedItem(
     item: SpoofedItemDisplay,
     onClick: () -> Unit,
 ) {
-    CompositionLocalProvider(LocalContentColor provides Color(colorSuccess)) {
+    CompositionLocalProvider(LocalContentColor provides Color(colorSpoofed)) {
         StatusItem(modifier, onClick, item.executionTime, item.status, item.url, item.method)
     }
 }
@@ -154,11 +154,10 @@ fun StatusItem(
             )
         }
         Row {
-            Text(text = executionTime, color = Color.White)
-            Spacer(modifier = Modifier.width(8.dp))
             Text(text = "Status:", color = Color.White)
             Spacer(modifier = Modifier.width(4.dp))
             Text(status)
         }
+        Text(text = executionTime, color = Color.White)
     }
 }

…/commonMain/kotlin/ui/RequestListPane.kt …onMain/kotlin/ui/pane/RequestListPane.ktLibrary/lib/src/commonMain/kotlin/ui/RequestListPane.kt renamed to Library/lib/src/commonMain/kotlin/ui/pane/RequestListPane.kt Library/lib/src/commonMain/kotlin/ui/RequestListPane.kt renamed to Library/lib/src/commonMain/kotlin/ui/pane/RequestListPane.kt

@@ -1,4 +1,4 @@
-package ui
+package ui.pane
 
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.lazy.LazyColumn

Library/lib/src/commonMain/kotlin/ui/pane/RequestPane.kt

@@ -0,0 +1,79 @@
+package ui.pane
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.rememberUpdatedState
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import data.HttpRequestState
+import data.SnifferDB
+import ui.component.ErrorItem
+import ui.component.ErrorItemDisplay
+import ui.component.ExecutingItem
+import ui.component.ExecutingItemDisplay
+import ui.component.SpoofedItem
+import ui.component.SpoofedItemDisplay
+import ui.component.SuccessItem
+import ui.component.SuccessItemDisplay
+
+@Composable
+fun RequestPane(
+    modifier: Modifier = Modifier,
+    id: String
+) {
+    val record by SnifferDB.httpRequests.collectAsStateWithLifecycle(emptyList())
+    val transaction by rememberUpdatedState(record.firstOrNull { it.id == id } ?: return)
+    val scrollState = rememberScrollState()
+
+    Column(
+        modifier = modifier
+            .verticalScroll(scrollState),
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        when (val tr = transaction) {
+            is HttpRequestState.Error -> {
+                ErrorItem(
+                    modifier = Modifier.fillMaxWidth(),
+                    item = ErrorItemDisplay.from(tr)
+                ) {
+
+                }
+            }
+
+            is HttpRequestState.Executing -> {
+                ExecutingItem(
+                    modifier = Modifier.fillMaxWidth(),
+                    item = ExecutingItemDisplay.from(tr)
+                ) {
+
+                }
+            }
+
+            is HttpRequestState.Spoofed -> {
+                SpoofedItem(
+                    modifier = Modifier.fillMaxWidth(),
+                    item = SpoofedItemDisplay.from(tr)
+                ) {
+
+                }
+            }
+
+            is HttpRequestState.Success -> {
+                SuccessItem(
+                    modifier = Modifier.fillMaxWidth(),
+                    item = SuccessItemDisplay.from(tr)
+                ) {
+
+                }
+            }
+        }
+        Text(transaction.toString())
+    }
+}

libs.versions.toml

@@ -14,6 +14,7 @@ composeGradlePlugin = "1.8.2"
 composeHotReload = "1.0.0-alpha11"
 composeMultiplatform = "1.8.2"
 androidx-lifecycle = "2.9.1"
+androidx-navigation = "2.9.0-beta04"
 junit = "4.13.2"
 ktor = "2.3.12"
 kotlinx-serialization = "1.8.1"
@@ -44,6 +45,9 @@ androidx-lifecycle-viewmodel = { module = "org.jetbrains.androidx.lifecycle:life
 androidx-lifecycle-runtimeCompose = { module = "org.jetbrains.androidx.lifecycle:lifecycle-runtime-compose", version.ref = "androidx-lifecycle" }
 androidx-lifecycle-viewmodel-compose = { module = "org.jetbrains.androidx.lifecycle:lifecycle-viewmodel-compose", version.ref = "androidx-lifecycle" }
 
+# navigation
+androidx-navigation-compose = { module = "org.jetbrains.androidx.navigation:navigation-compose", version.ref = "androidx-navigation" }
+
 # serialization
 kotlinx-serialization = { module = "org.jetbrains.kotlinx:kotlinx-serialization-json", version.ref = "kotlinx-serialization" }