feat: surface camera activity in status pill

2025-12-29 23:12:03 +01:00
parent f41ade9417
commit a61b7056d5
6 changed files with 134 additions and 175 deletions
--- a/apps/android/app/src/main/java/com/steipete/clawdis/node/ui/CameraHudOverlay.kt
+++ b/apps/android/app/src/main/java/com/steipete/clawdis/node/ui/CameraHudOverlay.kt
@@ -1,64 +1,26 @@
 package com.steipete.clawdis.node.ui

-import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
-import androidx.compose.animation.slideInVertically
-import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.statusBarsPadding
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.CheckCircle
-import androidx.compose.material.icons.filled.Error
-import androidx.compose.material.icons.filled.FiberManualRecord
-import androidx.compose.material.icons.filled.PhotoCamera
-import androidx.compose.material3.CircularProgressIndicator
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.dp
-import com.steipete.clawdis.node.CameraHudKind
-import com.steipete.clawdis.node.CameraHudState
 import kotlinx.coroutines.delay

@Composable
-fun CameraHudOverlay(
-  hud: CameraHudState?,
-  flashToken: Long,
+fun CameraFlashOverlay(
+  token: Long,
  modifier: Modifier = Modifier,
 ) {
  Box(modifier = modifier.fillMaxSize()) {
-    CameraFlash(token = flashToken)
-
-    AnimatedVisibility(
-      visible = hud != null,
-      enter = slideInVertically(initialOffsetY = { -it / 2 }) + fadeIn(),
-      exit = slideOutVertically(targetOffsetY = { -it / 2 }) + fadeOut(),
-      modifier = Modifier.align(Alignment.TopStart).statusBarsPadding().padding(start = 12.dp, top = 58.dp),
-    ) {
-      if (hud != null) {
-        Toast(hud = hud)
-      }
-    }
+    CameraFlash(token = token)
  }
 }

@@ -80,44 +42,3 @@ private fun CameraFlash(token: Long) {
        .background(Color.White),
  )
 }
-
-@Composable
-private fun Toast(hud: CameraHudState) {
-  Surface(
-    shape = RoundedCornerShape(14.dp),
-    color = MaterialTheme.colorScheme.surface.copy(alpha = 0.85f),
-    tonalElevation = 2.dp,
-    shadowElevation = 8.dp,
-  ) {
-    Row(
-      modifier = Modifier.padding(vertical = 10.dp, horizontal = 12.dp),
-      verticalAlignment = Alignment.CenterVertically,
-    ) {
-      when (hud.kind) {
-        CameraHudKind.Photo -> {
-          Icon(Icons.Default.PhotoCamera, contentDescription = null)
-          Spacer(Modifier.size(10.dp))
-          CircularProgressIndicator(modifier = Modifier.size(14.dp), strokeWidth = 2.dp)
-        }
-        CameraHudKind.Recording -> {
-          Icon(Icons.Default.FiberManualRecord, contentDescription = null, tint = Color.Red)
-        }
-        CameraHudKind.Success -> {
-          Icon(Icons.Default.CheckCircle, contentDescription = null)
-        }
-        CameraHudKind.Error -> {
-          Icon(Icons.Default.Error, contentDescription = null)
-        }
-      }
-
-      Spacer(Modifier.size(10.dp))
-      Text(
-        text = hud.message,
-        style = MaterialTheme.typography.bodyMedium,
-        maxLines = 1,
-        overflow = TextOverflow.Ellipsis,
-      )
-    }
-  }
-}
-
--- a/apps/android/app/src/main/java/com/steipete/clawdis/node/ui/RootScreen.kt
+++ b/apps/android/app/src/main/java/com/steipete/clawdis/node/ui/RootScreen.kt
@@ -32,6 +32,10 @@ import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ChatBubble
+import androidx.compose.material.icons.filled.CheckCircle
+import androidx.compose.material.icons.filled.Error
+import androidx.compose.material.icons.filled.FiberManualRecord
+import androidx.compose.material.icons.filled.PhotoCamera
 import androidx.compose.material.icons.filled.Settings
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
@@ -47,6 +51,7 @@ import androidx.compose.ui.viewinterop.AndroidView
 import androidx.compose.ui.window.Popup
 import androidx.compose.ui.window.PopupProperties
 import androidx.core.content.ContextCompat
+import com.steipete.clawdis.node.CameraHudKind
 import com.steipete.clawdis.node.MainViewModel

@OptIn(ExperimentalMaterial3Api::class)
@@ -60,6 +65,39 @@ fun RootScreen(viewModel: MainViewModel) {
  val statusText by viewModel.statusText.collectAsState()
  val cameraHud by viewModel.cameraHud.collectAsState()
  val cameraFlashToken by viewModel.cameraFlashToken.collectAsState()
+  val activity =
+    remember(cameraHud) {
+      cameraHud?.let { hud ->
+        when (hud.kind) {
+          CameraHudKind.Photo ->
+            StatusActivity(
+              title = hud.message,
+              icon = Icons.Default.PhotoCamera,
+              contentDescription = "Taking photo",
+            )
+          CameraHudKind.Recording ->
+            StatusActivity(
+              title = hud.message,
+              icon = Icons.Default.FiberManualRecord,
+              contentDescription = "Recording",
+              tint = androidx.compose.ui.graphics.Color.Red,
+            )
+          CameraHudKind.Success ->
+            StatusActivity(
+              title = hud.message,
+              icon = Icons.Default.CheckCircle,
+              contentDescription = "Capture finished",
+            )
+          CameraHudKind.Error ->
+            StatusActivity(
+              title = hud.message,
+              icon = Icons.Default.Error,
+              contentDescription = "Capture failed",
+              tint = androidx.compose.ui.graphics.Color.Red,
+            )
+        }
+      }
+    }

  val bridgeState =
    remember(serverName, statusText) {
@@ -80,9 +118,9 @@ fun RootScreen(viewModel: MainViewModel) {
    CanvasView(viewModel = viewModel, modifier = Modifier.fillMaxSize())
  }

-  // Camera HUD (flash + toast) must be in a Popup to render above the WebView.
+  // Camera flash must be in a Popup to render above the WebView.
  Popup(alignment = Alignment.Center, properties = PopupProperties(focusable = false)) {
-    CameraHudOverlay(hud = cameraHud, flashToken = cameraFlashToken, modifier = Modifier.fillMaxSize())
+    CameraFlashOverlay(token = cameraFlashToken, modifier = Modifier.fillMaxSize())
  }

  // Keep the overlay buttons above the WebView canvas (AndroidView), otherwise they may not receive touches.
@@ -90,6 +128,7 @@ fun RootScreen(viewModel: MainViewModel) {
    StatusPill(
      bridge = bridgeState,
      voiceEnabled = voiceEnabled,
+      activity = activity,
      onClick = { sheet = Sheet.Settings },
      modifier = Modifier.windowInsetsPadding(safeOverlayInsets).padding(start = 12.dp, top = 12.dp),
    )
--- a/apps/android/app/src/main/java/com/steipete/clawdis/node/ui/StatusPill.kt
+++ b/apps/android/app/src/main/java/com/steipete/clawdis/node/ui/StatusPill.kt
@@ -28,6 +28,7 @@ import androidx.compose.ui.unit.dp
 fun StatusPill(
  bridge: BridgeState,
  voiceEnabled: Boolean,
+  activity: StatusActivity? = null,
  onClick: () -> Unit,
  modifier: Modifier = Modifier,
 ) {
@@ -62,23 +63,49 @@ fun StatusPill(
        color = MaterialTheme.colorScheme.onSurfaceVariant,
      )

-      Icon(
-        imageVector = if (voiceEnabled) Icons.Default.Mic else Icons.Default.MicOff,
-        contentDescription = if (voiceEnabled) "Voice enabled" else "Voice disabled",
-        tint =
-          if (voiceEnabled) {
-            overlayIconColor()
-          } else {
-            MaterialTheme.colorScheme.onSurfaceVariant
-          },
-        modifier = Modifier.size(18.dp),
-      )
+      if (activity != null) {
+        Row(
+          horizontalArrangement = Arrangement.spacedBy(6.dp),
+          verticalAlignment = Alignment.CenterVertically,
+        ) {
+          Icon(
+            imageVector = activity.icon,
+            contentDescription = activity.contentDescription,
+            tint = activity.tint ?: overlayIconColor(),
+            modifier = Modifier.size(18.dp),
+          )
+          Text(
+            text = activity.title,
+            style = MaterialTheme.typography.labelLarge,
+            maxLines = 1,
+          )
+        }
+      } else {
+        Icon(
+          imageVector = if (voiceEnabled) Icons.Default.Mic else Icons.Default.MicOff,
+          contentDescription = if (voiceEnabled) "Voice enabled" else "Voice disabled",
+          tint =
+            if (voiceEnabled) {
+              overlayIconColor()
+            } else {
+              MaterialTheme.colorScheme.onSurfaceVariant
+            },
+          modifier = Modifier.size(18.dp),
+        )
+      }

      Spacer(modifier = Modifier.width(2.dp))
    }
  }
 }

+data class StatusActivity(
+  val title: String,
+  val icon: androidx.compose.ui.graphics.vector.ImageVector,
+  val contentDescription: String,
+  val tint: Color? = null,
+)
+
 enum class BridgeState(val title: String, val color: Color) {
  Connected("Connected", Color(0xFF2ECC71)),
  Connecting("Connecting…", Color(0xFFF1C40F)),