refactor(config): extract components from NavGraph to screens

2026-04-20 22:23:37 +00:00 · 2024-10-31 18:17:46 -03:00 · 2024-10-31 18:17:46 -03:00 · 1aa0b138fc
commit 1aa0b138fc
parent 74ae3fd594
25 changed files with 724 additions and 264 deletions
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/AmbientLightingConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/AmbientLightingConfigItemList.kt
@ -12,13 +12,40 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ModuleConfigProtos
 import com.geeksville.mesh.copy
+import com.geeksville.mesh.model.RadioConfigViewModel
+import com.geeksville.mesh.moduleConfig
 import com.geeksville.mesh.ui.components.EditTextPreference
 import com.geeksville.mesh.ui.components.PreferenceCategory
 import com.geeksville.mesh.ui.components.PreferenceFooter
 import com.geeksville.mesh.ui.components.SwitchPreference

+@Composable
+fun AmbientLightingConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    AmbientLightingConfigItemList(
+        ambientLightingConfig = state.moduleConfig.ambientLighting,
+        enabled = state.connected,
+        onSaveClicked = { ambientLightingInput ->
+            val config = moduleConfig { ambientLighting = ambientLightingInput }
+            viewModel.setModuleConfig(config)
+        }
+    )
+}
+
@Composable
 fun AmbientLightingConfigItemList(
    ambientLightingConfig: ModuleConfigProtos.ModuleConfig.AmbientLightingConfig,
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/AudioConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/AudioConfigItemList.kt
@ -12,14 +12,41 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ModuleConfigProtos.ModuleConfig.AudioConfig
 import com.geeksville.mesh.copy
+import com.geeksville.mesh.model.RadioConfigViewModel
+import com.geeksville.mesh.moduleConfig
 import com.geeksville.mesh.ui.components.DropDownPreference
 import com.geeksville.mesh.ui.components.EditTextPreference
 import com.geeksville.mesh.ui.components.PreferenceCategory
 import com.geeksville.mesh.ui.components.PreferenceFooter
 import com.geeksville.mesh.ui.components.SwitchPreference

+@Composable
+fun AudioConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    AudioConfigItemList(
+        audioConfig = state.moduleConfig.audio,
+        enabled = state.connected,
+        onSaveClicked = { audioInput ->
+            val config = moduleConfig { audio = audioInput }
+            viewModel.setModuleConfig(config)
+        }
+    )
+}
+
@Composable
 fun AudioConfigItemList(
    audioConfig: AudioConfig,
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/BluetoothConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/BluetoothConfigItemList.kt
@ -12,14 +12,41 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ConfigProtos.Config.BluetoothConfig
+import com.geeksville.mesh.config
 import com.geeksville.mesh.copy
+import com.geeksville.mesh.model.RadioConfigViewModel
 import com.geeksville.mesh.ui.components.DropDownPreference
 import com.geeksville.mesh.ui.components.EditTextPreference
 import com.geeksville.mesh.ui.components.PreferenceCategory
 import com.geeksville.mesh.ui.components.PreferenceFooter
 import com.geeksville.mesh.ui.components.SwitchPreference

+@Composable
+fun BluetoothConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    BluetoothConfigItemList(
+        bluetoothConfig = state.radioConfig.bluetooth,
+        enabled = state.connected,
+        onSaveClicked = { bluetoothInput ->
+            val config = config { bluetooth = bluetoothInput }
+            viewModel.setConfig(config)
+        }
+    )
+}
+
@Composable
 fun BluetoothConfigItemList(
    bluetoothConfig: BluetoothConfig,
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/CannedMessageConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/CannedMessageConfigItemList.kt
@ -15,14 +15,47 @@ import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ModuleConfigProtos.ModuleConfig.CannedMessageConfig
 import com.geeksville.mesh.copy
+import com.geeksville.mesh.model.RadioConfigViewModel
+import com.geeksville.mesh.moduleConfig
 import com.geeksville.mesh.ui.components.DropDownPreference
 import com.geeksville.mesh.ui.components.EditTextPreference
 import com.geeksville.mesh.ui.components.PreferenceCategory
 import com.geeksville.mesh.ui.components.PreferenceFooter
 import com.geeksville.mesh.ui.components.SwitchPreference

+@Composable
+fun CannedMessageConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    CannedMessageConfigItemList(
+        messages = state.cannedMessageMessages,
+        cannedMessageConfig = state.moduleConfig.cannedMessage,
+        enabled = state.connected,
+        onSaveClicked = { messagesInput, cannedMessageInput ->
+            if (messagesInput != state.cannedMessageMessages) {
+                viewModel.setCannedMessages(messagesInput)
+            }
+            if (cannedMessageInput != state.moduleConfig.cannedMessage) {
+                val config = moduleConfig { cannedMessage = cannedMessageInput }
+                viewModel.setModuleConfig(config)
+            }
+        }
+    )
+}
+
@Composable
 fun CannedMessageConfigItemList(
    messages: String,
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/ChannelSettingsItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/ChannelSettingsItemList.kt
@ -47,10 +47,13 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ChannelProtos.ChannelSettings
 import com.geeksville.mesh.R
 import com.geeksville.mesh.channelSettings
 import com.geeksville.mesh.model.Channel
+import com.geeksville.mesh.model.RadioConfigViewModel
 import com.geeksville.mesh.ui.components.PreferenceCategory
 import com.geeksville.mesh.ui.components.PreferenceFooter
 import com.geeksville.mesh.ui.components.dragContainer
@ -147,6 +150,30 @@ fun ChannelSelection(
    )
 }

+@Composable
+fun ChannelConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    ChannelSettingsItemList(
+        settingsList = state.channelList,
+        modemPresetName = Channel(loraConfig = state.radioConfig.lora).name,
+        enabled = state.connected,
+        maxChannels = viewModel.maxChannels,
+        onPositiveClicked = { channelListInput ->
+            viewModel.updateChannels(channelListInput, state.channelList)
+        },
+    )
+}
+
@Composable
 fun ChannelSettingsItemList(
    settingsList: List<ChannelSettings>,
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/DetectionSensorConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/DetectionSensorConfigItemList.kt
@ -15,14 +15,41 @@ import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ModuleConfigProtos.ModuleConfig
 import com.geeksville.mesh.copy
+import com.geeksville.mesh.model.RadioConfigViewModel
+import com.geeksville.mesh.moduleConfig
 import com.geeksville.mesh.ui.components.DropDownPreference
 import com.geeksville.mesh.ui.components.EditTextPreference
 import com.geeksville.mesh.ui.components.PreferenceCategory
 import com.geeksville.mesh.ui.components.PreferenceFooter
 import com.geeksville.mesh.ui.components.SwitchPreference

+@Composable
+fun DetectionSensorConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    DetectionSensorConfigItemList(
+        detectionSensorConfig = state.moduleConfig.detectionSensor,
+        enabled = state.connected,
+        onSaveClicked = { detectionSensorInput ->
+            val config = moduleConfig { detectionSensor = detectionSensorInput }
+            viewModel.setModuleConfig(config)
+        }
+    )
+}
+
@Suppress("LongMethod")
@Composable
 fun DetectionSensorConfigItemList(
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/DeviceConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/DeviceConfigItemList.kt
@ -16,9 +16,13 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ConfigProtos.Config.DeviceConfig
 import com.geeksville.mesh.R
+import com.geeksville.mesh.config
 import com.geeksville.mesh.copy
+import com.geeksville.mesh.model.RadioConfigViewModel
 import com.geeksville.mesh.ui.components.DropDownPreference
 import com.geeksville.mesh.ui.components.EditTextPreference
 import com.geeksville.mesh.ui.components.PreferenceCategory
@ -41,6 +45,29 @@ private val DeviceConfig.Role.stringRes: Int
        else -> R.string.unrecognized
    }

+@Composable
+fun DeviceConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    DeviceConfigItemList(
+        deviceConfig = state.radioConfig.device,
+        enabled = state.connected,
+        onSaveClicked = { deviceInput ->
+            val config = config { device = deviceInput }
+            viewModel.setConfig(config)
+        }
+    )
+}
+
@Composable
 fun DeviceConfigItemList(
    deviceConfig: DeviceConfig,
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/DisplayConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/DisplayConfigItemList.kt
@ -12,14 +12,41 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ConfigProtos.Config.DisplayConfig
+import com.geeksville.mesh.config
 import com.geeksville.mesh.copy
+import com.geeksville.mesh.model.RadioConfigViewModel
 import com.geeksville.mesh.ui.components.DropDownPreference
 import com.geeksville.mesh.ui.components.EditTextPreference
 import com.geeksville.mesh.ui.components.PreferenceCategory
 import com.geeksville.mesh.ui.components.PreferenceFooter
 import com.geeksville.mesh.ui.components.SwitchPreference

+@Composable
+fun DisplayConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    DisplayConfigItemList(
+        displayConfig = state.radioConfig.display,
+        enabled = state.connected,
+        onSaveClicked = { displayInput ->
+            val config = config { display = displayInput }
+            viewModel.setConfig(config)
+        }
+    )
+}
+
@Composable
 fun DisplayConfigItemList(
    displayConfig: DisplayConfig,
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/ExternalNotificationConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/ExternalNotificationConfigItemList.kt
@ -15,14 +15,47 @@ import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ModuleConfigProtos.ModuleConfig.ExternalNotificationConfig
 import com.geeksville.mesh.copy
+import com.geeksville.mesh.model.RadioConfigViewModel
+import com.geeksville.mesh.moduleConfig
 import com.geeksville.mesh.ui.components.EditTextPreference
 import com.geeksville.mesh.ui.components.PreferenceCategory
 import com.geeksville.mesh.ui.components.PreferenceFooter
 import com.geeksville.mesh.ui.components.SwitchPreference
 import com.geeksville.mesh.ui.components.TextDividerPreference

+@Composable
+fun ExternalNotificationConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    ExternalNotificationConfigItemList(
+        ringtone = state.ringtone,
+        extNotificationConfig = state.moduleConfig.externalNotification,
+        enabled = state.connected,
+        onSaveClicked = { ringtoneInput, extNotificationInput ->
+            if (ringtoneInput != state.ringtone) {
+                viewModel.setRingtone(ringtoneInput)
+            }
+            if (extNotificationInput != state.moduleConfig.externalNotification) {
+                val config = moduleConfig { externalNotification = extNotificationInput }
+                viewModel.setModuleConfig(config)
+            }
+        }
+    )
+}
+
@Composable
 fun ExternalNotificationConfigItemList(
    ringtone: String,
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/LoRaConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/LoRaConfigItemList.kt
@ -13,10 +13,14 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ChannelProtos.ChannelSettings
 import com.geeksville.mesh.ConfigProtos.Config.LoRaConfig
+import com.geeksville.mesh.config
 import com.geeksville.mesh.copy
 import com.geeksville.mesh.model.Channel
+import com.geeksville.mesh.model.RadioConfigViewModel
 import com.geeksville.mesh.model.RegionInfo
 import com.geeksville.mesh.model.numChannels
 import com.geeksville.mesh.ui.components.DropDownPreference
@ -26,6 +30,31 @@ import com.geeksville.mesh.ui.components.PreferenceCategory
 import com.geeksville.mesh.ui.components.PreferenceFooter
 import com.geeksville.mesh.ui.components.SwitchPreference

+@Composable
+fun LoRaConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    LoRaConfigItemList(
+        loraConfig = state.radioConfig.lora,
+        primarySettings = state.channelList.getOrNull(0) ?: return,
+        enabled = state.connected,
+        onSaveClicked = { loraInput ->
+            val config = config { lora = loraInput }
+            viewModel.setConfig(config)
+        },
+        hasPaFan = viewModel.hasPaFan,
+    )
+}
+
@Suppress("LongMethod")
@Composable
 fun LoRaConfigItemList(
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/MQTTConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/MQTTConfigItemList.kt
@ -17,8 +17,12 @@ import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ModuleConfigProtos.ModuleConfig.MQTTConfig
 import com.geeksville.mesh.copy
+import com.geeksville.mesh.model.RadioConfigViewModel
+import com.geeksville.mesh.moduleConfig
 import com.geeksville.mesh.ui.components.EditPasswordPreference
 import com.geeksville.mesh.ui.components.EditTextPreference
 import com.geeksville.mesh.ui.components.PositionPrecisionPreference
@ -26,6 +30,29 @@ import com.geeksville.mesh.ui.components.PreferenceCategory
 import com.geeksville.mesh.ui.components.PreferenceFooter
 import com.geeksville.mesh.ui.components.SwitchPreference

+@Composable
+fun MQTTConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    MQTTConfigItemList(
+        mqttConfig = state.moduleConfig.mqtt,
+        enabled = state.connected,
+        onSaveClicked = { mqttInput ->
+            val config = moduleConfig { mqtt = mqttInput }
+            viewModel.setModuleConfig(config)
+        }
+    )
+}
+
@Composable
 fun MQTTConfigItemList(
    mqttConfig: MQTTConfig,
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/NeighborInfoConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/NeighborInfoConfigItemList.kt
@ -12,13 +12,40 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ModuleConfigProtos
 import com.geeksville.mesh.copy
+import com.geeksville.mesh.model.RadioConfigViewModel
+import com.geeksville.mesh.moduleConfig
 import com.geeksville.mesh.ui.components.EditTextPreference
 import com.geeksville.mesh.ui.components.PreferenceCategory
 import com.geeksville.mesh.ui.components.PreferenceFooter
 import com.geeksville.mesh.ui.components.SwitchPreference

+@Composable
+fun NeighborInfoConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    NeighborInfoConfigItemList(
+        neighborInfoConfig = state.moduleConfig.neighborInfo,
+        enabled = state.connected,
+        onSaveClicked = { neighborInfoInput ->
+            val config = moduleConfig { neighborInfo = neighborInfoInput }
+            viewModel.setModuleConfig(config)
+        }
+    )
+}
+
@Composable
 fun NeighborInfoConfigItemList(
    neighborInfoConfig: ModuleConfigProtos.ModuleConfig.NeighborInfoConfig,
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/NetworkConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/NetworkConfigItemList.kt
@ -23,9 +23,13 @@ import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ConfigProtos.Config.NetworkConfig
 import com.geeksville.mesh.R
+import com.geeksville.mesh.config
 import com.geeksville.mesh.copy
+import com.geeksville.mesh.model.RadioConfigViewModel
 import com.geeksville.mesh.ui.components.DropDownPreference
 import com.geeksville.mesh.ui.components.EditIPv4Preference
 import com.geeksville.mesh.ui.components.EditPasswordPreference
@ -46,6 +50,29 @@ private fun ScanErrorDialog(
    onDismiss = onDismiss,
 )

+@Composable
+fun NetworkConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    NetworkConfigItemList(
+        networkConfig = state.radioConfig.network,
+        enabled = state.connected,
+        onSaveClicked = { networkInput ->
+            val config = config { network = networkInput }
+            viewModel.setConfig(config)
+        }
+    )
+}
+
@Composable
 fun NetworkConfigItemList(
    networkConfig: NetworkConfig,
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/PaxcounterConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/PaxcounterConfigItemList.kt
@ -12,13 +12,40 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ModuleConfigProtos
 import com.geeksville.mesh.copy
+import com.geeksville.mesh.model.RadioConfigViewModel
+import com.geeksville.mesh.moduleConfig
 import com.geeksville.mesh.ui.components.EditTextPreference
 import com.geeksville.mesh.ui.components.PreferenceCategory
 import com.geeksville.mesh.ui.components.PreferenceFooter
 import com.geeksville.mesh.ui.components.SwitchPreference

+@Composable
+fun PaxcounterConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    PaxcounterConfigItemList(
+        paxcounterConfig = state.moduleConfig.paxcounter,
+        enabled = state.connected,
+        onSaveClicked = { paxcounterConfigInput ->
+            val config = moduleConfig { paxcounter = paxcounterConfigInput }
+            viewModel.setModuleConfig(config)
+        }
+    )
+}
+
@Composable
 fun PaxcounterConfigItemList(
    paxcounterConfig: ModuleConfigProtos.ModuleConfig.PaxcounterConfig,
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/PositionConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/PositionConfigItemList.kt
@ -12,10 +12,14 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ConfigProtos
 import com.geeksville.mesh.ConfigProtos.Config.PositionConfig
 import com.geeksville.mesh.Position
+import com.geeksville.mesh.config
 import com.geeksville.mesh.copy
+import com.geeksville.mesh.model.RadioConfigViewModel
 import com.geeksville.mesh.ui.components.BitwisePreference
 import com.geeksville.mesh.ui.components.DropDownPreference
 import com.geeksville.mesh.ui.components.EditTextPreference
@ -23,6 +27,48 @@ import com.geeksville.mesh.ui.components.PreferenceCategory
 import com.geeksville.mesh.ui.components.PreferenceFooter
 import com.geeksville.mesh.ui.components.SwitchPreference

+@Composable
+fun PositionConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    val node by viewModel.destNode.collectAsStateWithLifecycle()
+    val currentPosition = Position(
+        latitude = node?.latitude ?: 0.0,
+        longitude = node?.longitude ?: 0.0,
+        altitude = node?.position?.altitude ?: 0,
+        time = 1, // ignore time for fixed_position
+    )
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    PositionConfigItemList(
+        location = currentPosition,
+        positionConfig = state.radioConfig.position,
+        enabled = state.connected,
+        onSaveClicked = { locationInput, positionInput ->
+            if (positionInput.fixedPosition) {
+                if (locationInput != currentPosition) {
+                    viewModel.setFixedPosition(locationInput)
+                }
+            } else {
+                if (state.radioConfig.position.fixedPosition) {
+                    // fixed position changed from enabled to disabled
+                    viewModel.removeFixedPosition()
+                }
+            }
+            val config = config { position = positionInput }
+            viewModel.setConfig(config)
+        }
+    )
+}
+
@Suppress("LongMethod", "CyclomaticComplexMethod")
@Composable
 fun PositionConfigItemList(
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/PowerConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/PowerConfigItemList.kt
@ -12,13 +12,40 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ConfigProtos.Config.PowerConfig
+import com.geeksville.mesh.config
 import com.geeksville.mesh.copy
+import com.geeksville.mesh.model.RadioConfigViewModel
 import com.geeksville.mesh.ui.components.EditTextPreference
 import com.geeksville.mesh.ui.components.PreferenceCategory
 import com.geeksville.mesh.ui.components.PreferenceFooter
 import com.geeksville.mesh.ui.components.SwitchPreference

+@Composable
+fun PowerConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    PowerConfigItemList(
+        powerConfig = state.radioConfig.power,
+        enabled = state.connected,
+        onSaveClicked = { powerInput ->
+            val config = config { power = powerInput }
+            viewModel.setConfig(config)
+        }
+    )
+}
+
@Composable
 fun PowerConfigItemList(
    powerConfig: PowerConfig,
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/RangeTestConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/RangeTestConfigItemList.kt
@ -12,13 +12,40 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ModuleConfigProtos.ModuleConfig.RangeTestConfig
 import com.geeksville.mesh.copy
+import com.geeksville.mesh.model.RadioConfigViewModel
+import com.geeksville.mesh.moduleConfig
 import com.geeksville.mesh.ui.components.EditTextPreference
 import com.geeksville.mesh.ui.components.PreferenceCategory
 import com.geeksville.mesh.ui.components.PreferenceFooter
 import com.geeksville.mesh.ui.components.SwitchPreference

+@Composable
+fun RangeTestConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    RangeTestConfigItemList(
+        rangeTestConfig = state.moduleConfig.rangeTest,
+        enabled = state.connected,
+        onSaveClicked = { rangeTestInput ->
+            val config = moduleConfig { rangeTest = rangeTestInput }
+            viewModel.setModuleConfig(config)
+        }
+    )
+}
+
@Composable
 fun RangeTestConfigItemList(
    rangeTestConfig: RangeTestConfig,
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/RemoteHardwareConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/RemoteHardwareConfigItemList.kt
@ -12,13 +12,40 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ModuleConfigProtos.ModuleConfig.RemoteHardwareConfig
 import com.geeksville.mesh.copy
+import com.geeksville.mesh.model.RadioConfigViewModel
+import com.geeksville.mesh.moduleConfig
 import com.geeksville.mesh.ui.components.EditListPreference
 import com.geeksville.mesh.ui.components.PreferenceCategory
 import com.geeksville.mesh.ui.components.PreferenceFooter
 import com.geeksville.mesh.ui.components.SwitchPreference

+@Composable
+fun RemoteHardwareConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    RemoteHardwareConfigItemList(
+        remoteHardwareConfig = state.moduleConfig.remoteHardware,
+        enabled = state.connected,
+        onSaveClicked = { remoteHardwareInput ->
+            val config = moduleConfig { remoteHardware = remoteHardwareInput }
+            viewModel.setModuleConfig(config)
+        }
+    )
+}
+
@Composable
 fun RemoteHardwareConfigItemList(
    remoteHardwareConfig: RemoteHardwareConfig,
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/SecurityConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/SecurityConfigItemList.kt
@ -12,14 +12,41 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ConfigProtos.Config.SecurityConfig
+import com.geeksville.mesh.config
 import com.geeksville.mesh.copy
+import com.geeksville.mesh.model.RadioConfigViewModel
 import com.geeksville.mesh.ui.components.EditBase64Preference
 import com.geeksville.mesh.ui.components.EditListPreference
 import com.geeksville.mesh.ui.components.PreferenceCategory
 import com.geeksville.mesh.ui.components.PreferenceFooter
 import com.geeksville.mesh.ui.components.SwitchPreference

+@Composable
+fun SecurityConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    SecurityConfigItemList(
+        securityConfig = state.radioConfig.security,
+        enabled = state.connected,
+        onConfirm = { securityInput ->
+            val config = config { security = securityInput }
+            viewModel.setConfig(config)
+        }
+    )
+}
+
@Suppress("LongMethod")
@Composable
 fun SecurityConfigItemList(
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/SerialConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/SerialConfigItemList.kt
@ -12,14 +12,41 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ModuleConfigProtos.ModuleConfig.SerialConfig
 import com.geeksville.mesh.copy
+import com.geeksville.mesh.model.RadioConfigViewModel
+import com.geeksville.mesh.moduleConfig
 import com.geeksville.mesh.ui.components.DropDownPreference
 import com.geeksville.mesh.ui.components.EditTextPreference
 import com.geeksville.mesh.ui.components.PreferenceCategory
 import com.geeksville.mesh.ui.components.PreferenceFooter
 import com.geeksville.mesh.ui.components.SwitchPreference

+@Composable
+fun SerialConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    SerialConfigItemList(
+        serialConfig = state.moduleConfig.serial,
+        enabled = state.connected,
+        onSaveClicked = { serialInput ->
+            val config = moduleConfig { serial = serialInput }
+            viewModel.setModuleConfig(config)
+        }
+    )
+}
+
@Composable
 fun SerialConfigItemList(
    serialConfig: SerialConfig,
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/StoreForwardConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/StoreForwardConfigItemList.kt
@ -12,13 +12,40 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ModuleConfigProtos.ModuleConfig.StoreForwardConfig
 import com.geeksville.mesh.copy
+import com.geeksville.mesh.model.RadioConfigViewModel
+import com.geeksville.mesh.moduleConfig
 import com.geeksville.mesh.ui.components.EditTextPreference
 import com.geeksville.mesh.ui.components.PreferenceCategory
 import com.geeksville.mesh.ui.components.PreferenceFooter
 import com.geeksville.mesh.ui.components.SwitchPreference

+@Composable
+fun StoreForwardConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    StoreForwardConfigItemList(
+        storeForwardConfig = state.moduleConfig.storeForward,
+        enabled = state.connected,
+        onSaveClicked = { storeForwardInput ->
+            val config = moduleConfig { storeForward = storeForwardInput }
+            viewModel.setModuleConfig(config)
+        }
+    )
+}
+
@Composable
 fun StoreForwardConfigItemList(
    storeForwardConfig: StoreForwardConfig,
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/TelemetryConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/TelemetryConfigItemList.kt
@ -12,13 +12,40 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.ModuleConfigProtos.ModuleConfig.TelemetryConfig
 import com.geeksville.mesh.copy
+import com.geeksville.mesh.model.RadioConfigViewModel
+import com.geeksville.mesh.moduleConfig
 import com.geeksville.mesh.ui.components.EditTextPreference
 import com.geeksville.mesh.ui.components.PreferenceCategory
 import com.geeksville.mesh.ui.components.PreferenceFooter
 import com.geeksville.mesh.ui.components.SwitchPreference

+@Composable
+fun TelemetryConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    TelemetryConfigItemList(
+        telemetryConfig = state.moduleConfig.telemetry,
+        enabled = state.connected,
+        onSaveClicked = { telemetryInput ->
+            val config = moduleConfig { telemetry = telemetryInput }
+            viewModel.setModuleConfig(config)
+        }
+    )
+}
+
@Composable
 fun TelemetryConfigItemList(
    telemetryConfig: TelemetryConfig,
--- a/app/src/main/java/com/geeksville/mesh/ui/components/config/UserConfigItemList.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/UserConfigItemList.kt
@ -15,8 +15,11 @@ import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.geeksville.mesh.MeshProtos
 import com.geeksville.mesh.copy
+import com.geeksville.mesh.model.RadioConfigViewModel
 import com.geeksville.mesh.model.getInitials
 import com.geeksville.mesh.ui.components.EditTextPreference
 import com.geeksville.mesh.ui.components.PreferenceCategory
@ -25,6 +28,26 @@ import com.geeksville.mesh.ui.components.RegularPreference
 import com.geeksville.mesh.ui.components.SwitchPreference
 import com.geeksville.mesh.user

+@Composable
+fun UserConfigScreen(
+    viewModel: RadioConfigViewModel = hiltViewModel(),
+) {
+    val state by viewModel.radioConfigState.collectAsStateWithLifecycle()
+
+    if (state.responseState.isWaiting()) {
+        PacketResponseStateDialog(
+            state = state.responseState,
+            onDismiss = viewModel::clearPacketResponse,
+        )
+    }
+
+    UserConfigItemList(
+        userConfig = state.userConfig,
+        enabled = true,
+        onSaveClicked = viewModel::setOwner,
+    )
+}
+
@Composable
 fun UserConfigItemList(
    userConfig: MeshProtos.User,