feat: Updated cliboard sync dialog

Author: sameerasw

app/src/main/java/com/sameerasw/airsync/presentation/ui/activities/ClipboardActionActivity.kt

@@ -12,16 +12,20 @@ import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.togetherWith
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 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.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.CheckCircle
@@ -34,18 +38,27 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
 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.draw.clip
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.sameerasw.airsync.R
+import com.sameerasw.airsync.data.local.DataStoreManager
+import com.sameerasw.airsync.domain.model.ConnectedDevice
 import com.sameerasw.airsync.ui.theme.AirSyncTheme
 import com.sameerasw.airsync.utils.ClipboardSyncManager
 import com.sameerasw.airsync.utils.ClipboardUtil
+import com.sameerasw.airsync.utils.DevicePreviewResolver
 import kotlinx.coroutines.delay
 
 class ClipboardActionActivity : ComponentActivity() {
@@ -88,12 +101,19 @@ class ClipboardActionActivity : ComponentActivity() {
 
 @Composable
 fun ClipboardActionScreen(hasWindowFocus: Boolean, onFinished: () -> Unit) {
+    val context = androidx.compose.ui.platform.LocalContext.current
+    val dataStoreManager = remember { DataStoreManager.getInstance(context) }
+    val connectedDevice by dataStoreManager.getLastConnectedDevice().collectAsState(initial = null)
+
     var uiState by remember { mutableStateOf<ClipboardUiState>(ClipboardUiState.Loading) }
     var hasAttemptedSync by remember { mutableStateOf(false) }
 
-    ClipboardActionScreenContent(uiState = uiState, onFinished = onFinished)
+    ClipboardActionScreenContent(
+        uiState = uiState,
+        connectedDevice = connectedDevice,
+        onFinished = onFinished
+    )
 
-    val context = androidx.compose.ui.platform.LocalContext.current
     LaunchedEffect(hasWindowFocus) {
         if (hasWindowFocus && !hasAttemptedSync) {
             hasAttemptedSync = true
@@ -125,7 +145,11 @@ fun ClipboardActionScreen(hasWindowFocus: Boolean, onFinished: () -> Unit) {
 
 @OptIn(ExperimentalAnimationApi::class, ExperimentalMaterial3ExpressiveApi::class)
 @Composable
-fun ClipboardActionScreenContent(uiState: ClipboardUiState, onFinished: () -> Unit) {
+fun ClipboardActionScreenContent(
+    uiState: ClipboardUiState,
+    connectedDevice: ConnectedDevice?,
+    onFinished: () -> Unit
+) {
     // Transparent background that dismisses on click
     Box(
         modifier = Modifier
@@ -145,7 +169,7 @@ fun ClipboardActionScreenContent(uiState: ClipboardUiState, onFinished: () -> Un
         ) {
             Box(
                 modifier = Modifier
-                    .padding(32.dp),
+                    .padding(24.dp),
                 contentAlignment = Alignment.Center
             ) {
                 AnimatedContent(
@@ -156,47 +180,75 @@ fun ClipboardActionScreenContent(uiState: ClipboardUiState, onFinished: () -> Un
                     Column(
                         horizontalAlignment = Alignment.CenterHorizontally
                     ) {
-                        when (state) {
-                            is ClipboardUiState.Loading -> {
-                                LoadingIndicator(
-                                    modifier = Modifier.size(48.dp),
-                                    color = MaterialTheme.colorScheme.primary
-                                )
-                                Spacer(modifier = Modifier.height(16.dp))
-                                Text(
-                                    text = "Syncing...",
-                                    style = MaterialTheme.typography.titleMedium,
-                                    fontWeight = FontWeight.Medium
-                                )
-                            }
-                            is ClipboardUiState.Success -> {
-                                Icon(
-                                    imageVector = Icons.Rounded.CheckCircle,
-                                    contentDescription = "Success",
-                                    modifier = Modifier.size(48.dp)
-                                )
-                                Spacer(modifier = Modifier.height(16.dp))
-                                Text(
-                                    text = "Clipboard Sent!",
-                                    style = MaterialTheme.typography.titleMedium,
-                                    fontWeight = FontWeight.Bold
-                                )
-                            }
-                            is ClipboardUiState.Error -> {
-                                Icon(
-                                    imageVector = Icons.Rounded.Error,
-                                    contentDescription = "Error",
-                                    tint = MaterialTheme.colorScheme.error,
-                                    modifier = Modifier.size(48.dp)
-                                )
-                                Spacer(modifier = Modifier.height(16.dp))
-                                Text(
-                                    text = state.message,
-                                    style = MaterialTheme.typography.titleMedium,
-                                    color = MaterialTheme.colorScheme.error
-                                )
+                        // Device preview with overlay
+                        Box(
+                            contentAlignment = Alignment.Center,
+                            modifier = Modifier.padding(bottom = 16.dp)
+                        ) {
+                            val previewRes = DevicePreviewResolver.getPreviewRes(connectedDevice)
+                            Image(
+                                painter = painterResource(id = previewRes),
+                                contentDescription = "Device Preview",
+                                modifier = Modifier.fillMaxWidth(0.9f),
+                                contentScale = ContentScale.Fit
+                            )
+
+                            Box(
+                                modifier = Modifier
+                                    .size(56.dp)
+                                    .background(MaterialTheme.colorScheme.surfaceContainerHigh, shape = CircleShape)
+                            ) {
+                            // Overlay icon/indicator
+                            when (state) {
+                                is ClipboardUiState.Loading -> {
+                                    LoadingIndicator(
+                                        modifier = Modifier.size(56.dp),
+                                        color = MaterialTheme.colorScheme.primary
+                                    )
+                                }
+
+                                is ClipboardUiState.Success -> {
+                                    Icon(
+                                        imageVector = Icons.Rounded.CheckCircle,
+                                        contentDescription = "Success",
+                                        modifier = Modifier.size(56.dp),
+                                        tint = MaterialTheme.colorScheme.primary
+                                    )
+                                }
+
+                                is ClipboardUiState.Error -> {
+                                    Icon(
+                                        imageVector = Icons.Rounded.Error,
+                                        contentDescription = "Error",
+                                        tint = MaterialTheme.colorScheme.error,
+                                        modifier = Modifier.size(56.dp)
+                                    )
+                                }
                             }
                         }
+                        }
+
+                        Text(
+                            text = connectedDevice?.name ?: stringResource(R.string.your_mac),
+                            style = MaterialTheme.typography.titleMedium,
+                            color = MaterialTheme.colorScheme.onPrimary,
+                            modifier = Modifier
+                                .background(MaterialTheme.colorScheme.primary, shape = RoundedCornerShape(32.dp))
+                                .padding(horizontal = 16.dp, vertical = 4.dp),
+                        )
+
+                        Spacer(modifier = Modifier.height(8.dp))
+
+                        // Status Text
+                        Text(
+                            text = when (state) {
+                                is ClipboardUiState.Loading -> stringResource(R.string.sending)
+                                is ClipboardUiState.Success -> stringResource(R.string.clipboard_sent)
+                                is ClipboardUiState.Error -> stringResource(R.string.failed_to_send_clipboard)
+                            },
+                            style = MaterialTheme.typography.titleSmall,
+                            color = if (state is ClipboardUiState.Error) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.onSurface
+                        )
                     }
                 }
             }
@@ -214,22 +266,22 @@ sealed class ClipboardUiState {
 @Composable
 private fun ClipboardActionScreenPreviewLoading() {
     AirSyncTheme {
-        ClipboardActionScreenContent(uiState = ClipboardUiState.Loading, onFinished = {})
+        ClipboardActionScreenContent(uiState = ClipboardUiState.Loading, connectedDevice = null, onFinished = {})
     }
 }
 
 @Preview(name = "Success State", showBackground = true)
 @Composable
 private fun ClipboardActionScreenPreviewSuccess() {
     AirSyncTheme {
-        ClipboardActionScreenContent(uiState = ClipboardUiState.Success, onFinished = {})
+        ClipboardActionScreenContent(uiState = ClipboardUiState.Success, connectedDevice = null, onFinished = {})
     }
 }
 
 @Preview(name = "Error State", showBackground = true)
 @Composable
 private fun ClipboardActionScreenPreviewError() {
     AirSyncTheme {
-        ClipboardActionScreenContent(uiState = ClipboardUiState.Error("Failed to sync"), onFinished = {})
+        ClipboardActionScreenContent(uiState = ClipboardUiState.Error("Failed to sync"), connectedDevice = null, onFinished = {})
     }
 }

app/src/main/res/values/strings.xml

@@ -21,4 +21,9 @@
     <string name="sync_clipboard">Sync Clipboard</string>
     <string name="image_copied_to_clipboard">Image copied to clipboard</string>
     <string name="file_received_from_clipboard">File received from clipboard</string>
+    <string name="sending">Sending Clipboard…</string>
+    <string name="clipboard_sent">Clipboard Sent</string>
+    <string name="failed_to_send_clipboard">Failed to Send Clipboard</string>
+    <string name="your_mac">Your Mac</string>
+    <string name="disconnected">Disconnected</string>
 </resources>