feat: add EditTextPreference byte counter

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

@@ -1,7 +1,9 @@
 package com.geeksville.mesh.ui.components
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.Icon
@@ -15,10 +17,13 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.onFocusEvent
 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
 
 @Composable
 fun EditTextPreference(
@@ -166,14 +171,25 @@ fun EditTextPreference(
     keyboardActions: KeyboardActions,
     onValueChanged: (String) -> Unit,
     modifier: Modifier = Modifier,
+    maxSize: Int = 0, // max_size - 1 (in bytes)
 ) {
+    var isFocused by remember { mutableStateOf(false) }
+
     TextField(
         value = value,
         singleLine = true,
-        modifier = modifier.fillMaxWidth(),
+        modifier = modifier
+            .fillMaxWidth()
+            .onFocusEvent { isFocused = it.isFocused },
         enabled = enabled,
         isError = isError,
-        onValueChange = onValueChanged,
+        onValueChange = {
+            if (maxSize > 0) {
+                if (it.toByteArray().size <= maxSize) {
+                    onValueChanged(it)
+                }
+            } else onValueChanged(it)
+        },
         label = { Text(title) },
         keyboardOptions = keyboardOptions,
         keyboardActions = keyboardActions,
@@ -181,12 +197,36 @@ fun EditTextPreference(
             if (isError) Icon(Icons.TwoTone.Info, "Error", tint = MaterialTheme.colors.error)
         }
     )
+
+    if (maxSize > 0 && isFocused) {
+        Box(
+            contentAlignment = Alignment.BottomEnd,
+            modifier = modifier.fillMaxWidth()
+        ) {
+            Text(
+                text = "${value.toByteArray().size}/$maxSize",
+                style = MaterialTheme.typography.caption,
+                color = if (isError) MaterialTheme.colors.error else MaterialTheme.colors.onBackground,
+                modifier = Modifier.padding(end = 8.dp, bottom = 4.dp)
+            )
+        }
+    }
 }
 
 @Preview(showBackground = true)
 @Composable
 private fun EditTextPreferencePreview() {
     Column {
+        EditTextPreference(
+            title = "String",
+            value = "Meshtastic",
+            maxSize = 39,
+            enabled = true,
+            isError = false,
+            keyboardOptions = KeyboardOptions.Default,
+            keyboardActions = KeyboardActions {},
+            onValueChanged = {},
+        )
         EditTextPreference(
             title = "Advanced Settings",
             value = UInt.MAX_VALUE.toInt(),