From c455e5e8fa2745b955905f2dffb683f80ec3bfd6 Mon Sep 17 00:00:00 2001 From: Sebastian Neubauer Date: Sun, 11 Jan 2026 18:36:25 +0100 Subject: [PATCH 1/3] Use JsonTree in network detail screen --- .../network/detail/view/NetworkDetailView.kt | 86 +++++++++++-------- .../designsystem/components/FloconJsonTree.kt | 3 + 2 files changed, 54 insertions(+), 35 deletions(-) diff --git a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/network/detail/view/NetworkDetailView.kt b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/network/detail/view/NetworkDetailView.kt index ccd7f83df..23bac41b9 100644 --- a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/network/detail/view/NetworkDetailView.kt +++ b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/network/detail/view/NetworkDetailView.kt @@ -37,6 +37,7 @@ import coil3.compose.AsyncImage import coil3.network.NetworkHeaders import coil3.network.httpHeaders import coil3.request.ImageRequest +import com.sebastianneubauer.jsontree.TreeState import io.github.openflocon.flocondesktop.features.network.detail.NetworkDetailAction import io.github.openflocon.flocondesktop.features.network.detail.NetworkDetailViewModel import io.github.openflocon.flocondesktop.features.network.detail.model.NetworkDetailViewState @@ -51,6 +52,7 @@ import io.github.openflocon.library.designsystem.components.FloconButton import io.github.openflocon.library.designsystem.components.FloconCodeBlock import io.github.openflocon.library.designsystem.components.FloconHorizontalDivider import io.github.openflocon.library.designsystem.components.FloconIconButton +import io.github.openflocon.library.designsystem.components.FloconJsonTree import io.github.openflocon.library.designsystem.components.FloconLineDescription import io.github.openflocon.library.designsystem.components.FloconSection import io.github.openflocon.library.designsystem.components.FloconVerticalScrollbar @@ -60,7 +62,7 @@ import org.jetbrains.compose.ui.tooling.preview.Preview import org.koin.compose.viewmodel.koinViewModel import org.koin.core.parameter.parametersOf -private const val LARGE_BODY_LENGHT = 30_000 +private const val LARGE_BODY_LENGTH = 1_000_000 @Composable fun NetworkDetailScreen( @@ -333,7 +335,7 @@ private fun Request( modifier = Modifier.fillMaxWidth() ) { var displayBody by remember(state.requestBody) { - val isLargeResponse = state.requestBody.length > LARGE_BODY_LENGHT + val isLargeResponse = state.requestBody.length > LARGE_BODY_LENGTH mutableStateOf(!isLargeResponse) } if (!displayBody) { @@ -476,45 +478,59 @@ private fun Response( }, modifier = Modifier.fillMaxWidth() ) { - var displayBody by remember(response.body) { - val isLargeResponse = response.body.length > LARGE_BODY_LENGHT - mutableStateOf(!isLargeResponse) - } - if (!displayBody) { - Column( + var jsonError by remember { mutableStateOf(false) } + + if(!jsonError) { + FloconJsonTree( + json = response.body, + initialState = TreeState.EXPANDED, + onError = { jsonError = true }, modifier = Modifier .fillMaxWidth() + .height(600.dp) .padding(12.dp) - .background( - FloconTheme.colorPalette.secondary, - shape = FloconTheme.shapes.medium, - ) - .padding(12.dp), - horizontalAlignment = Alignment.CenterHorizontally - ) { - Text( - text = "Response body too large (${response.size} bytes)", - color = FloconTheme.colorPalette.onPrimary, - style = FloconTheme.typography.bodySmall, - ) - Spacer(modifier = Modifier.height(8.dp)) - FloconButton( - onClick = { - displayBody = true - }, - containerColor = FloconTheme.colorPalette.tertiary, + ) + } else { + var displayBody by remember(response.body) { + val isLargeResponse = response.body.length > LARGE_BODY_LENGTH + mutableStateOf(!isLargeResponse) + } + if (!displayBody) { + Column( + modifier = Modifier + .fillMaxWidth() + .padding(12.dp) + .background( + FloconTheme.colorPalette.secondary, + shape = FloconTheme.shapes.medium, + ) + .padding(12.dp), + horizontalAlignment = Alignment.CenterHorizontally ) { - Text("Display anyway") + Text( + text = "Response body too large (${response.size} bytes)", + color = FloconTheme.colorPalette.onPrimary, + style = FloconTheme.typography.bodySmall, + ) + Spacer(modifier = Modifier.height(8.dp)) + FloconButton( + onClick = { + displayBody = true + }, + containerColor = FloconTheme.colorPalette.tertiary, + ) { + Text("Display anyway") + } } + } else { + FloconCodeBlock( + code = response.body, + containerColor = FloconTheme.colorPalette.secondary, + modifier = Modifier + .fillMaxWidth() + .padding(12.dp) + ) } - } else { - FloconCodeBlock( - code = response.body, - containerColor = FloconTheme.colorPalette.secondary, - modifier = Modifier - .fillMaxWidth() - .padding(12.dp) - ) } } } diff --git a/FloconDesktop/library/designsystem/src/commonMain/kotlin/io/github/openflocon/library/designsystem/components/FloconJsonTree.kt b/FloconDesktop/library/designsystem/src/commonMain/kotlin/io/github/openflocon/library/designsystem/components/FloconJsonTree.kt index c2822f61d..4d92b5c66 100644 --- a/FloconDesktop/library/designsystem/src/commonMain/kotlin/io/github/openflocon/library/designsystem/components/FloconJsonTree.kt +++ b/FloconDesktop/library/designsystem/src/commonMain/kotlin/io/github/openflocon/library/designsystem/components/FloconJsonTree.kt @@ -7,6 +7,7 @@ import androidx.compose.material.icons.outlined.ChevronLeft import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import com.sebastianneubauer.jsontree.JsonTree +import com.sebastianneubauer.jsontree.TreeState import com.sebastianneubauer.jsontree.defaultDarkColors import com.sebastianneubauer.jsontree.search.SearchState import com.sebastianneubauer.jsontree.search.rememberSearchState @@ -15,6 +16,7 @@ import com.sebastianneubauer.jsontree.search.rememberSearchState fun FloconJsonTree( json: String, modifier: Modifier = Modifier, + initialState: TreeState = TreeState.FIRST_ITEM_EXPANDED, onError: (Throwable) -> Unit = {}, searchState: SearchState = rememberSearchState() ) { @@ -24,6 +26,7 @@ fun FloconJsonTree( onLoading = { FloconCircularProgressIndicator() // TODO Better? }, + initialState = initialState, icon = Icons.Outlined.ChevronLeft, searchState = searchState, colors = defaultDarkColors, From 8923acb9d2b1d2f6bb257d9a01e15237c046fb5c Mon Sep 17 00:00:00 2001 From: Sebastian Neubauer Date: Sun, 11 Jan 2026 18:47:10 +0100 Subject: [PATCH 2/3] Add background --- .../network/detail/view/NetworkDetailView.kt | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/network/detail/view/NetworkDetailView.kt b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/network/detail/view/NetworkDetailView.kt index 23bac41b9..9ac779434 100644 --- a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/network/detail/view/NetworkDetailView.kt +++ b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/network/detail/view/NetworkDetailView.kt @@ -481,15 +481,24 @@ private fun Response( var jsonError by remember { mutableStateOf(false) } if(!jsonError) { - FloconJsonTree( - json = response.body, - initialState = TreeState.EXPANDED, - onError = { jsonError = true }, + Box( modifier = Modifier .fillMaxWidth() .height(600.dp) .padding(12.dp) - ) + .background( + FloconTheme.colorPalette.secondary, + shape = FloconTheme.shapes.medium, + ) + .padding(12.dp), + ) { + FloconJsonTree( + json = response.body, + initialState = TreeState.EXPANDED, + onError = { jsonError = true }, + modifier = Modifier.fillMaxSize() + ) + } } else { var displayBody by remember(response.body) { val isLargeResponse = response.body.length > LARGE_BODY_LENGTH From 8ff57733e3cffa1a9ca4fd29b1ad19da7864683b Mon Sep 17 00:00:00 2001 From: Sebastian Neubauer Date: Thu, 15 Jan 2026 09:17:20 +0100 Subject: [PATCH 3/3] Add key to remember --- .../features/network/detail/view/NetworkDetailView.kt | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/network/detail/view/NetworkDetailView.kt b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/network/detail/view/NetworkDetailView.kt index 9ac779434..d1416820d 100644 --- a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/network/detail/view/NetworkDetailView.kt +++ b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/network/detail/view/NetworkDetailView.kt @@ -22,6 +22,7 @@ import androidx.compose.material.icons.outlined.OpenInFull import androidx.compose.material.icons.outlined.Share import androidx.compose.material3.Text 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 @@ -478,7 +479,7 @@ private fun Response( }, modifier = Modifier.fillMaxWidth() ) { - var jsonError by remember { mutableStateOf(false) } + var jsonError by remember(response.body) { mutableStateOf(false) } if(!jsonError) { Box(