home: put Connect wirelessly in the status card, as a full button

gearslip/src/main/java/app/seb3thehacker/gearslip/SessionStatus.kt

@@ -20,7 +20,7 @@ object SessionStatus {
         Snapshot(
             Phase.IDLE,
             "Not connected",
-            "Plug the phone into the car's USB port. Gearslip opens by itself when the head unit connects.",
+            "Plug into the car's USB port, or connect wirelessly. Gearslip opens by itself when the car answers.",
         ),
     )
 

gearslip/src/main/java/app/seb3thehacker/gearslip/ui/HomeScreen.kt

@@ -113,8 +113,6 @@ fun HomeScreen(
                         Button(onClick = onDisconnect, modifier = Modifier.fillMaxWidth().height(56.dp)) {
                             Text("Disconnect")
                         }
-                    } else {
-                        WirelessButton()
                     }
                 }
             }
@@ -135,11 +133,11 @@ private fun StatusCard(status: SessionStatus.Snapshot) {
             scheme.surfaceContainerHigh to scheme.onSurface
     }
 
+    val live = status.phase == SessionStatus.Phase.CONNECTING || status.phase == SessionStatus.Phase.PROJECTING
     Surface(color = container, contentColor = content, shape = MaterialTheme.shapes.extraLarge) {
+      Column(Modifier.fillMaxWidth().padding(24.dp)) {
         Row(
-            Modifier
-                .fillMaxWidth()
-                .padding(20.dp),
+            Modifier.fillMaxWidth(),
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.spacedBy(16.dp),
         ) {
@@ -155,11 +153,17 @@ private fun StatusCard(status: SessionStatus.Snapshot) {
                 ) {}
             }
             Column {
-                Text(status.headline, style = MaterialTheme.typography.titleLarge, fontWeight = FontWeight.SemiBold)
+                Text(status.headline, style = MaterialTheme.typography.headlineSmall, fontWeight = FontWeight.SemiBold)
                 Spacer(Modifier.height(4.dp))
                 Text(status.detail, style = MaterialTheme.typography.bodyMedium)
             }
         }
+        // The other way in: wireless, right under the cable's instructions.
+        if (!live) {
+            Spacer(Modifier.height(20.dp))
+            WirelessButton()
+        }
+      }
     }
 }
 

gearslip/src/main/java/app/seb3thehacker/gearslip/ui/IntroScreen.kt

@@ -619,7 +619,7 @@ private inline fun DrawScope.inIconBox(block: DrawScope.() -> Unit) {
 }
 
 @Composable
-private fun WifiIcon(color: Color) {
+internal fun WifiIcon(color: Color) {
     val t = rememberInfiniteTransition(label = "wifi")
     val waves = (0..2).map { i ->
         t.animateFloat(

gearslip/src/main/java/app/seb3thehacker/gearslip/ui/WirelessButton.kt

@@ -7,14 +7,18 @@ import android.os.Build
 import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.AlertDialog
-import androidx.compose.material3.FilledTonalButton
+import androidx.compose.material3.Button
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
@@ -25,6 +29,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.core.content.ContextCompat
 import app.seb3thehacker.gearslip.wireless.WirelessLink
@@ -39,8 +44,8 @@ private val WIRELESS_PERMISSIONS = buildList {
 }.toTypedArray()
 
 /**
- * Test entry point for wireless Android Auto, at the bottom of Home: pick the paired car, and
- * Gearslip connects to it over Bluetooth and Wi-Fi. Automatic start comes later.
+ * Wireless Android Auto, in Home's status card: pick the paired car, and Gearslip connects to
+ * it over Bluetooth and Wi-Fi.
  */
 @Composable
 internal fun WirelessButton() {
@@ -58,17 +63,20 @@ internal fun WirelessButton() {
         Text(
             "Gearslip needs Bluetooth and nearby Wi-Fi access for this.",
             style = MaterialTheme.typography.bodyMedium,
-            color = MaterialTheme.colorScheme.onSurfaceVariant,
             modifier = Modifier.padding(bottom = 8.dp),
         )
     }
-    FilledTonalButton(
+    Button(
         onClick = {
             denied = false
             if (granted()) devices = WirelessLink.pairedDevices(context) else ask.launch(WIRELESS_PERMISSIONS)
         },
-        modifier = Modifier.fillMaxWidth().height(56.dp),
-    ) { Text("Connect wirelessly (test)") }
+        modifier = Modifier.fillMaxWidth().height(64.dp),
+    ) {
+        Box(Modifier.size(28.dp)) { WifiIcon(MaterialTheme.colorScheme.onPrimary) }
+        Spacer(Modifier.width(12.dp))
+        Text("Connect wirelessly", style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.SemiBold)
+    }
 
     devices?.let { list ->
         AlertDialog(