feat: use clickable list items when selecting bt devices

app/build.gradle.kts

@@ -6,7 +6,7 @@ plugins {
 
 android {
     namespace = "com.example.tvcontroller"
-    compileSdk = 34
+    compileSdk = 35
 
     defaultConfig {
         applicationId = "com.example.tvcontroller"
@@ -59,6 +59,7 @@ dependencies {
     implementation(libs.androidx.camera.view)
     implementation(libs.androidx.camera.mlkit.vision)
     implementation(libs.androidx.camera.extensions)
+    implementation(libs.material3)
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)

app/src/main/java/com/example/tvcontroller/ui/views/SettingsView.kt

@@ -1,24 +1,27 @@
 package com.example.tvcontroller.ui.views
 
 import android.annotation.SuppressLint
-import android.bluetooth.BluetoothDevice
+import androidx.compose.foundation.clickable
-import android.util.Log
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.ListItem
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedButton
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
@@ -30,6 +33,7 @@ import com.example.tvcontroller.services.ControllerService
 import com.example.tvcontroller.services.DeviceService
 import kotlinx.coroutines.flow.toList
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun SettingsView(
     deviceService: DeviceService,
@@ -111,31 +115,53 @@ fun SettingsView(
         viewModel.startBluetoothScan()
         val pairedDevices = viewModel.pairedDevices.collectAsState()
         val scannedDevices = viewModel.scannedDevices.collectAsState()
-        Column(
+        Column {
-            modifier = Modifier
+            TopAppBar(
-                .padding(16.dp, 16.dp)
+                title = { Text(text = stringResource(id = R.string.connect_controller_title)) },
-                .verticalScroll(rememberScrollState()),
+                navigationIcon = {
-            verticalArrangement = Arrangement.spacedBy(8.dp)
+                    IconButton(onClick = {}) {
-        ) {
+                        Icon(
-            Text(
+                            painterResource(id = R.drawable.baseline_arrow_back_24),
-                text = stringResource(id = R.string.connect_controller_title),
+                            contentDescription = "Back"
-                style = MaterialTheme.typography.displaySmall
+                        )
+                    }
+                },
             )
-            Spacer(modifier = Modifier.padding(8.dp))
+            Column(
-            Text(
+                modifier = Modifier.verticalScroll(rememberScrollState()),
-                text = stringResource(id = R.string.paired_devices_label),
+            ) {
-                style = MaterialTheme.typography.headlineSmall
+                Text(
-            )
+                    text = stringResource(id = R.string.paired_devices_label),
-            pairedDevices.value.forEach { device ->
+                    style = MaterialTheme.typography.headlineSmall,
-                Text(text = device.getName())
+                    modifier = Modifier.padding(start = 16.dp)
-            }
+                )
-            Spacer(modifier = Modifier.padding(8.dp))
+                pairedDevices.value.forEach { device ->
-            Text(
+                    ListItem(
-                text = stringResource(id = R.string.scanned_devices_label),
+                        headlineContent = { Text(device.getName()) },
-                style = MaterialTheme.typography.headlineSmall
+                        supportingContent = {
-            )
+                            if (device.getName() != device.getAddress()) Text(
-            scannedDevices.value.forEach { device ->
+                                device.getAddress()
-                Text(text = device.getName())
+                            )
+                        },
+                    )
+                }
+                Spacer(modifier = Modifier.padding(8.dp))
+                Text(
+                    text = stringResource(id = R.string.scanned_devices_label),
+                    style = MaterialTheme.typography.headlineSmall,
+                    modifier = Modifier.padding(start = 16.dp)
+                )
+                scannedDevices.value.forEach { device ->
+                    if (device != null) ListItem(
+                        headlineContent = { Text(device.getName()) },
+                        supportingContent = {
+                            if (device.getName() != device.getAddress()) Text(
+                                device.getAddress()
+                            )
+                        },
+                        modifier = Modifier.clickable(onClick = {})
+                    )
+                }
             }
         }
     }

app/src/main/res/drawable/baseline_arrow_back_24.xml

@@ -0,0 +1,5 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:autoMirrored="true" android:height="24dp" android:tint="#000000" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp">
+      
+    <path android:fillColor="@android:color/white" android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
+    
+</vector>

gradle/libs.versions.toml

@@ -10,6 +10,7 @@ ktor = "3.1.0"
 lifecycleRuntimeKtx = "2.6.1"
 activityCompose = "1.8.0"
 composeBom = "2024.04.01"
+material3 = "1.4.0-alpha10"
 navigationCompose = "2.8.4"
 
 [libraries]
@@ -37,6 +38,7 @@ androidx-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit
 androidx-material3 = { group = "androidx.compose.material3", name = "material3" }
 ktor-client-cio = { module = "io.ktor:ktor-client-cio", version.ref = "ktor" }
 ktor-client-core = { module = "io.ktor:ktor-client-core", version.ref = "ktor" }
+material3 = { module = "androidx.compose.material3:material3", version.ref = "material3" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }