refactor(channels): use clickable OutlinedTextField

app/src/main/java/com/geeksville/mesh/ui/ChannelFragment.kt

@@ -76,9 +76,9 @@ import com.geeksville.mesh.model.ChannelOption
 import com.geeksville.mesh.model.ChannelSet
 import com.geeksville.mesh.model.UIViewModel
 import com.geeksville.mesh.service.MeshService
+import com.geeksville.mesh.ui.components.ClickableTextField
 import com.geeksville.mesh.ui.components.DropDownPreference
 import com.geeksville.mesh.ui.components.PreferenceFooter
-import com.geeksville.mesh.ui.components.RegularPreference
 import com.geeksville.mesh.ui.components.config.ChannelSettingsItemList
 import com.geeksville.mesh.ui.components.config.EditChannelDialog
 import com.google.accompanist.themeadapter.appcompat.AppCompatTheme
@@ -293,12 +293,13 @@ fun ChannelScreen(
             .padding(horizontal = 24.dp, vertical = 16.dp),
     ) {
         item {
-            RegularPreference(
-                title = stringResource(R.string.channel_name),
-                subtitle = primaryChannel?.humanName.orEmpty(),
+            ClickableTextField(
+                label = R.string.channel_name,
+                value = primaryChannel?.humanName.orEmpty(),
                 onClick = { showChannelEditor = true },
                 enabled = enabled,
-                trailingIcon = Icons.TwoTone.Edit
+                trailingIcon = Icons.TwoTone.Edit,
+                modifier = Modifier.fillMaxWidth(),
             )
         }
 

app/src/main/java/com/geeksville/mesh/ui/components/ClickableTextField.kt

@@ -0,0 +1,41 @@
+package com.geeksville.mesh.ui.components
+
+import androidx.annotation.StringRes
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.material.Icon
+import androidx.compose.material.OutlinedTextField
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.stringResource
+
+@Composable
+fun ClickableTextField(
+    @StringRes label: Int,
+    enabled: Boolean,
+    trailingIcon: ImageVector,
+    value: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    isError: Boolean = false,
+) {
+    val source = remember { MutableInteractionSource() }
+    val isPressed by source.collectIsPressedAsState()
+    if (isPressed) onClick()
+
+    OutlinedTextField(
+        value,
+        onValueChange = {},
+        enabled = enabled,
+        readOnly = true,
+        label = { Text(stringResource(label)) },
+        trailingIcon = { Icon(trailingIcon, null) },
+        isError = isError,
+        interactionSource = source,
+        modifier = modifier,
+    )
+}