redesign: modern indigo UI, new app icon, edge-to-edge theme

App icon: deep indigo-to-violet gradient background with white sync arrows;
replaced flat #2196F3 with layered adaptive icon.

Theme: disabled dynamic color; rich indigo/teal/amber Material3 palette;
edge-to-edge with transparent status bar; tighter typography letterSpacing.

HomeScreen: colored left accent bar per status; URL-decoded SAF paths;
relative timestamps (Just now / N min ago / N hr ago); indigo status pills;
FilledTonalButton empty state.

PairDetailScreen: hero StatusBanner with large icon and relative time;
InfoCard as bordered grid with icon backgrounds; colored dot event timeline;
URL-decoded local path display.

SettingsScreen: section headers with primary left bar; AccountCard with
primaryContainer icon backgrounds; Security/About in bordered cards.

Bump version to 1.0.13 (code 14).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/src/main/kotlin/com/syncflow/ui/home/HomeScreen.kt

@@ -1,9 +1,11 @@
 package com.syncflow.ui.home
 
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.*
 import androidx.compose.material.icons.outlined.*
@@ -11,11 +13,12 @@ import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import com.syncflow.data.db.entities.SyncPairEntity
 import com.syncflow.domain.model.SyncStatus
+import java.time.Duration
 import java.time.Instant
 import java.time.ZoneId
 import java.time.format.DateTimeFormatter
@@ -58,49 +61,107 @@ private fun SyncPairCard(
     onSync: () -> Unit,
     onToggle: () -> Unit,
 ) {
-    ElevatedCard(
-        modifier = Modifier.fillMaxWidth().clickable(onClick = onClick),
-        elevation = CardDefaults.elevatedCardElevation(defaultElevation = 2.dp),
+    val accentColor = pair.lastSyncResult.accentColor
+
+    Card(
+        modifier = Modifier
+            .fillMaxWidth()
+            .clickable(onClick = onClick),
+        shape = RoundedCornerShape(16.dp),
+        border = BorderStroke(1.dp, MaterialTheme.colorScheme.outline),
+        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface),
     ) {
-        Column(modifier = Modifier.padding(16.dp)) {
-            Row(verticalAlignment = Alignment.CenterVertically) {
-                Column(modifier = Modifier.weight(1f)) {
-                    Text(pair.name, style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.SemiBold)
-                    Spacer(Modifier.height(2.dp))
-                    Text(
-                        pair.localPath.takeLast(40),
-                        style = MaterialTheme.typography.bodySmall,
-                        color = MaterialTheme.colorScheme.onSurfaceVariant,
-                    )
-                }
-                Switch(checked = pair.isEnabled, onCheckedChange = { onToggle() })
-            }
-            Spacer(Modifier.height(10.dp))
-            Row(
-                verticalAlignment = Alignment.CenterVertically,
-                horizontalArrangement = Arrangement.spacedBy(8.dp),
+        Row(modifier = Modifier.fillMaxWidth()) {
+            // Colored left accent bar
+            Box(
+                modifier = Modifier
+                    .width(3.dp)
+                    .height(IntrinsicSize.Min)
+                    .defaultMinSize(minHeight = 80.dp),
             ) {
-                StatusChip(pair.lastSyncResult)
-                if (pair.pendingConflicts > 0) {
-                    AssistChip(
-                        onClick = {},
-                        label = { Text("${pair.pendingConflicts} conflicts") },
-                        leadingIcon = { Icon(Icons.Default.Warning, null, Modifier.size(16.dp)) },
-                        colors = AssistChipDefaults.assistChipColors(
-                            containerColor = MaterialTheme.colorScheme.errorContainer,
-                        ),
+                Box(
+                    modifier = Modifier
+                        .fillMaxHeight()
+                        .width(3.dp),
+                ) {
+                    Surface(
+                        modifier = Modifier.fillMaxSize(),
+                        color = accentColor,
+                    ) {}
+                }
+            }
+
+            Column(modifier = Modifier.padding(start = 12.dp, top = 12.dp, end = 12.dp, bottom = 12.dp)) {
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    Column(modifier = Modifier.weight(1f)) {
+                        Text(
+                            pair.name,
+                            style = MaterialTheme.typography.titleMedium,
+                        )
+                        Spacer(Modifier.height(2.dp))
+                        val localShortName = pair.localPath.toDisplayPath()
+                        Text(
+                            localShortName,
+                            style = MaterialTheme.typography.bodySmall,
+                            color = MaterialTheme.colorScheme.onSurfaceVariant,
+                        )
+                        Spacer(Modifier.height(2.dp))
+                        Row(verticalAlignment = Alignment.CenterVertically) {
+                            Icon(
+                                Icons.Default.ArrowForward,
+                                contentDescription = null,
+                                modifier = Modifier.size(12.dp),
+                                tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                            )
+                            Spacer(Modifier.width(4.dp))
+                            Text(
+                                pair.remotePath,
+                                style = MaterialTheme.typography.bodySmall,
+                                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                            )
+                        }
+                    }
+                    Switch(
+                        checked = pair.isEnabled,
+                        onCheckedChange = { onToggle() },
                     )
                 }
-                Spacer(Modifier.weight(1f))
-                pair.lastSyncAt?.let { at ->
-                    Text(
-                        at.formatRelative(),
-                        style = MaterialTheme.typography.labelSmall,
-                        color = MaterialTheme.colorScheme.onSurfaceVariant,
-                    )
-                }
-                FilledTonalIconButton(onClick = onSync, modifier = Modifier.size(36.dp)) {
-                    Icon(Icons.Default.Sync, "Sync now", modifier = Modifier.size(18.dp))
+                Spacer(Modifier.height(8.dp))
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.spacedBy(8.dp),
+                ) {
+                    StatusPill(pair.lastSyncResult)
+                    if (pair.pendingConflicts > 0) {
+                        Surface(
+                            shape = RoundedCornerShape(50),
+                            color = MaterialTheme.colorScheme.errorContainer,
+                        ) {
+                            Row(
+                                modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp),
+                                verticalAlignment = Alignment.CenterVertically,
+                                horizontalArrangement = Arrangement.spacedBy(4.dp),
+                            ) {
+                                Icon(Icons.Default.Warning, null, Modifier.size(12.dp), tint = MaterialTheme.colorScheme.error)
+                                Text(
+                                    "${pair.pendingConflicts} conflicts",
+                                    style = MaterialTheme.typography.labelSmall,
+                                    color = MaterialTheme.colorScheme.error,
+                                )
+                            }
+                        }
+                    }
+                    Spacer(Modifier.weight(1f))
+                    pair.lastSyncAt?.let { at ->
+                        Text(
+                            at.toRelativeString(),
+                            style = MaterialTheme.typography.labelSmall,
+                            color = MaterialTheme.colorScheme.onSurfaceVariant,
+                        )
+                    }
+                    FilledTonalIconButton(onClick = onSync, modifier = Modifier.size(36.dp)) {
+                        Icon(Icons.Default.Sync, "Sync now", modifier = Modifier.size(18.dp))
+                    }
                 }
             }
         }
@@ -108,21 +169,33 @@ private fun SyncPairCard(
 }
 
 @Composable
-private fun StatusChip(status: SyncStatus) {
-    val (icon, label, color) = when (status) {
-        SyncStatus.SUCCESS -> Triple(Icons.Default.CheckCircle, "Synced", MaterialTheme.colorScheme.primaryContainer)
-        SyncStatus.SYNCING -> Triple(Icons.Default.Sync, "Syncing…", MaterialTheme.colorScheme.secondaryContainer)
-        SyncStatus.FAILED -> Triple(Icons.Default.Error, "Failed", MaterialTheme.colorScheme.errorContainer)
-        SyncStatus.CONFLICT -> Triple(Icons.Default.Warning, "Conflict", MaterialTheme.colorScheme.tertiaryContainer)
-        SyncStatus.PARTIAL -> Triple(Icons.Default.WarningAmber, "Partial", MaterialTheme.colorScheme.tertiaryContainer)
-        SyncStatus.IDLE -> Triple(Icons.Outlined.Circle, "Idle", MaterialTheme.colorScheme.surfaceVariant)
+private fun StatusPill(status: SyncStatus) {
+    val (icon, label) = when (status) {
+        SyncStatus.SUCCESS  -> Pair(Icons.Default.CheckCircle, "Synced")
+        SyncStatus.SYNCING  -> Pair(Icons.Default.Sync, "Syncing…")
+        SyncStatus.FAILED   -> Pair(Icons.Default.Error, "Failed")
+        SyncStatus.CONFLICT -> Pair(Icons.Default.Warning, "Conflict")
+        SyncStatus.PARTIAL  -> Pair(Icons.Default.WarningAmber, "Partial")
+        SyncStatus.IDLE     -> Pair(Icons.Outlined.Circle, "Idle")
+    }
+    val containerColor = status.accentColor
+    val contentColor = when (status) {
+        SyncStatus.IDLE -> MaterialTheme.colorScheme.onSurfaceVariant
+        else -> MaterialTheme.colorScheme.surface
+    }
+    Surface(
+        shape = RoundedCornerShape(50),
+        color = containerColor.copy(alpha = 0.15f),
+    ) {
+        Row(
+            modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(4.dp),
+        ) {
+            Icon(icon, null, Modifier.size(12.dp), tint = containerColor)
+            Text(label, style = MaterialTheme.typography.labelSmall, color = containerColor)
+        }
     }
-    AssistChip(
-        onClick = {},
-        label = { Text(label) },
-        leadingIcon = { Icon(icon, null, Modifier.size(16.dp)) },
-        colors = AssistChipDefaults.assistChipColors(containerColor = color),
-    )
 }
 
 @Composable
@@ -132,15 +205,49 @@ private fun EmptyState(modifier: Modifier = Modifier, onAdd: () -> Unit) {
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.Center,
     ) {
-        Icon(Icons.Outlined.CloudSync, null, modifier = Modifier.size(80.dp), tint = MaterialTheme.colorScheme.primary)
+        Icon(
+            Icons.Outlined.CloudSync,
+            null,
+            modifier = Modifier.size(100.dp),
+            tint = MaterialTheme.colorScheme.primary.copy(alpha = 0.4f),
+        )
         Spacer(Modifier.height(16.dp))
-        Text("No sync pairs yet", style = MaterialTheme.typography.titleLarge, fontWeight = FontWeight.Medium)
+        Text("No sync pairs yet", style = MaterialTheme.typography.titleLarge)
         Spacer(Modifier.height(8.dp))
-        Text("Tap + to create your first sync", style = MaterialTheme.typography.bodyMedium, color = MaterialTheme.colorScheme.onSurfaceVariant)
+        Text(
+            "Tap + to create your first sync",
+            style = MaterialTheme.typography.bodyMedium,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+        )
         Spacer(Modifier.height(24.dp))
-        Button(onClick = onAdd) { Text("Add Sync Pair") }
+        FilledTonalButton(onClick = onAdd) { Text("Add Sync Pair") }
     }
 }
 
-private val fmt = DateTimeFormatter.ofLocalizedDateTime(FormatStyle.SHORT)
-private fun Instant.formatRelative(): String = fmt.format(atZone(ZoneId.systemDefault()))
+private val SyncStatus.accentColor: Color
+    @Composable get() = when (this) {
+        SyncStatus.SUCCESS              -> MaterialTheme.colorScheme.primary
+        SyncStatus.SYNCING              -> MaterialTheme.colorScheme.secondary
+        SyncStatus.FAILED               -> MaterialTheme.colorScheme.error
+        SyncStatus.CONFLICT,
+        SyncStatus.PARTIAL              -> MaterialTheme.colorScheme.tertiary
+        SyncStatus.IDLE                 -> MaterialTheme.colorScheme.outline
+    }
+
+private fun String.toDisplayPath(): String {
+    // For SAF content:// URIs, decode the last path segment (e.g. primary%3ASyncFlowTest → SyncFlowTest)
+    val decoded = java.net.URLDecoder.decode(this, "UTF-8")
+    return decoded.trimEnd('/').substringAfterLast('/').substringAfterLast(':').ifEmpty { decoded }
+}
+
+private fun Instant.toRelativeString(): String {
+    val diff = Duration.between(this, Instant.now()).abs()
+    return when {
+        diff.toMinutes() < 1  -> "Just now"
+        diff.toMinutes() < 60 -> "${diff.toMinutes()} min ago"
+        diff.toHours() < 24   -> "${diff.toHours()} hr ago"
+        diff.toDays() == 1L   -> "Yesterday"
+        else -> DateTimeFormatter.ofLocalizedDate(FormatStyle.SHORT)
+            .format(atZone(ZoneId.systemDefault()))
+    }
+}