feat: improve UI with sentiment selection, input field, and feedback submission (#17)

This commit enhances the UI of the application with the following changes:
- Adds sentiment selection via `FilterChip` components with leading icons and friendly names for each `Sentiment` option.
- Introduces a `TextField` for user comments.
- Implements feedback submission, which resets the selected sentiment and clears the comment field upon clicking the button.
- Shows a snackbar to display feedback success after the button is clicked.
- Improves `FilterChip` styling with `ChipDefaults` properties and uses larger font size.
- Uses `Scaffold` to provide a structure for the app.

Closes #4

Reviewed-on: #17
Co-authored-by: Ben Martin <ben.martin@sky.uk>
Co-committed-by: Ben Martin <ben.martin@sky.uk>

composeApp/src/commonMain/kotlin/uk/sky/bob/application/App.kt

@@ -8,24 +8,30 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Button
+import androidx.compose.material.ChipDefaults
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.FilterChip
 import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
 import androidx.compose.material.Text
 import androidx.compose.material.TextField
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.Send
+import androidx.compose.material.rememberScaffoldState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import kotlinx.coroutines.launch
 import org.jetbrains.compose.ui.tooling.preview.Preview
 
 @OptIn(ExperimentalMaterialApi::class)
@@ -33,6 +39,10 @@ import org.jetbrains.compose.ui.tooling.preview.Preview
 @Preview
 fun App() {
     MaterialTheme {
+        val scaffoldState = rememberScaffoldState()
+        val scope = rememberCoroutineScope()
+
+        Scaffold(scaffoldState = scaffoldState) {
             Box(
                 modifier = Modifier.fillMaxHeight(),
                 contentAlignment = Alignment.Center,
@@ -41,36 +51,42 @@ fun App() {
                     Modifier.fillMaxWidth(),
                     horizontalAlignment = Alignment.CenterHorizontally,
                 ) {
+                    val sentiment = remember { mutableStateOf(Sentiment.HAPPY) }
+                    var comment by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+                        mutableStateOf(
+                            TextFieldValue("")
+                        )
+                    }
                     Row(modifier = Modifier.padding(8.dp)) {
-                    val state = remember { mutableStateOf(Sentiment.HAPPY) }
                         for (emotion in Sentiment.entries) {
                             FilterChip(
-                            onClick = { state.value = emotion },
+                                onClick = { sentiment.value = emotion },
-                            selected = state.value == emotion,
+                                selected = sentiment.value == emotion,
                                 modifier = Modifier.padding(8.dp),
-                            leadingIcon = { Text(emotion.leadingIcon) },
+                                leadingIcon = { Text(emotion.leadingIcon, fontSize = 20.sp) },
+                                colors = ChipDefaults.outlinedFilterChipColors(),
+                                border = ChipDefaults.outlinedBorder,
                             ) {
-                            Text(emotion.friendlyName)
+                                Text(emotion.friendlyName, fontSize = 20.sp)
                             }
                         }
                     }
 
                     Row(modifier = Modifier.padding(8.dp)) {
-                    var text by rememberSaveable(stateSaver = TextFieldValue.Saver) {
-                        mutableStateOf(
-                            TextFieldValue("")
-                        )
-                    }
                         TextField(
-                        value = text,
+                            value = comment,
-                        onValueChange = { text = it },
+                            onValueChange = { comment = it },
                             label = { Text("Your comment") },
                             modifier = Modifier.height(100.dp).fillMaxWidth().padding(8.dp),
                         )
                     }
 
                     Row(modifier = Modifier.padding(8.dp)) {
-                    Button(onClick = { /* Handle submit */ }, modifier = Modifier.padding(8.dp)) {
+                        Button(onClick = {
+                            sentiment.value = Sentiment.HAPPY
+                            comment = TextFieldValue("")
+                            scope.launch { scaffoldState.snackbarHostState.showSnackbar("Feedback sent") }
+                        }, modifier = Modifier.padding(8.dp)) {
                             Icon(Icons.AutoMirrored.Filled.Send, contentDescription = "Send")
                         }
                     }
@@ -78,4 +94,5 @@ fun App() {
             }
         }
     }
+}