feat: fix sync counters, polished activity rows, Files tab, new icon
- Fix SYNC_COMPLETED showing ↑0 ↓0 ✗0 when only deletions occurred: add ✕N for deleted files to the summary message (↑N ↓N ✕N ✗N format) - Fix PairDetail Activity section showing raw "SYNC_STARTED" enum names and "remote" as a plain subtitle: replace dot-based EventRow with the same polished icon-bubble rows as the global Log tab - Extract shared SyncEventRow composable + iconAndTint/label helpers to ui/shared/SyncEventRow.kt; both LogScreen and PairDetailScreen now use it - Add Files tab (4th tab between Log and Accounts): folder browser showing all synced files per pair, grouped by subdirectory, with file-type icons, size, last-synced date, and a summary header (N files, total size) - Add SyncFileStateDao.observeForPair() reactive Flow query for Files tab - Completely redesign app icon: near-black radial gradient background with three bold directional arrows in an S-pattern (coral → silver → teal), each with gradient fills and tip-glow dots — entirely different from the typical circular sync-arrow style - Bump version to 1.0.22 (build 23) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,254 @@
|
||||
package com.syncflow.ui.files
|
||||
|
||||
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.material3.*
|
||||
import androidx.compose.runtime.*
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.text.style.TextOverflow
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.hilt.navigation.compose.hiltViewModel
|
||||
import com.syncflow.data.db.entities.SyncFileStateEntity
|
||||
import java.time.ZoneId
|
||||
import java.time.format.DateTimeFormatter
|
||||
import java.time.format.FormatStyle
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun FilesScreen(
|
||||
modifier: Modifier = Modifier,
|
||||
vm: FilesViewModel = hiltViewModel(),
|
||||
) {
|
||||
val pairs by vm.pairs.collectAsState()
|
||||
val selectedPair by vm.selectedPair.collectAsState()
|
||||
val files by vm.files.collectAsState()
|
||||
|
||||
Column(modifier = modifier.fillMaxSize()) {
|
||||
// Pair selector chips
|
||||
if (pairs.size > 1) {
|
||||
ScrollableTabRow(
|
||||
selectedTabIndex = pairs.indexOfFirst { it.id == selectedPair?.id }.coerceAtLeast(0),
|
||||
edgePadding = 16.dp,
|
||||
containerColor = MaterialTheme.colorScheme.surface,
|
||||
divider = {},
|
||||
) {
|
||||
pairs.forEach { pair ->
|
||||
Tab(
|
||||
selected = pair.id == selectedPair?.id,
|
||||
onClick = { vm.selectPair(pair.id) },
|
||||
text = {
|
||||
Text(
|
||||
pair.name,
|
||||
maxLines = 1,
|
||||
overflow = TextOverflow.Ellipsis,
|
||||
)
|
||||
},
|
||||
)
|
||||
}
|
||||
}
|
||||
HorizontalDivider()
|
||||
}
|
||||
|
||||
if (pairs.isEmpty()) {
|
||||
Box(
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
contentAlignment = Alignment.Center,
|
||||
) {
|
||||
Column(
|
||||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
verticalArrangement = Arrangement.spacedBy(8.dp),
|
||||
) {
|
||||
Icon(
|
||||
Icons.Default.FolderOpen,
|
||||
contentDescription = null,
|
||||
modifier = Modifier.size(72.dp),
|
||||
tint = MaterialTheme.colorScheme.primary.copy(alpha = 0.35f),
|
||||
)
|
||||
Text("No sync pairs yet", style = MaterialTheme.typography.titleMedium)
|
||||
Text(
|
||||
"Create a sync pair to browse its files",
|
||||
style = MaterialTheme.typography.bodySmall,
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant,
|
||||
)
|
||||
}
|
||||
}
|
||||
} else if (files.isEmpty()) {
|
||||
Box(
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
contentAlignment = Alignment.Center,
|
||||
) {
|
||||
Column(
|
||||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
verticalArrangement = Arrangement.spacedBy(8.dp),
|
||||
) {
|
||||
Icon(
|
||||
Icons.Default.FolderOpen,
|
||||
contentDescription = null,
|
||||
modifier = Modifier.size(72.dp),
|
||||
tint = MaterialTheme.colorScheme.primary.copy(alpha = 0.35f),
|
||||
)
|
||||
Text("No synced files yet", style = MaterialTheme.typography.titleMedium)
|
||||
Text(
|
||||
"Run a sync to populate this view",
|
||||
style = MaterialTheme.typography.bodySmall,
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant,
|
||||
)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Summary row
|
||||
Surface(
|
||||
color = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f),
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(horizontal = 16.dp, vertical = 8.dp),
|
||||
horizontalArrangement = Arrangement.SpaceBetween,
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
) {
|
||||
Text(
|
||||
"${files.size} file${if (files.size != 1) "s" else ""}",
|
||||
style = MaterialTheme.typography.labelMedium,
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant,
|
||||
)
|
||||
val totalBytes = files.sumOf { it.localSizeBytes }
|
||||
Text(
|
||||
totalBytes.toDisplaySize(),
|
||||
style = MaterialTheme.typography.labelMedium,
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
LazyColumn(
|
||||
contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
|
||||
verticalArrangement = Arrangement.spacedBy(0.dp),
|
||||
) {
|
||||
// Group by top-level directory
|
||||
val grouped = files.groupBy { f ->
|
||||
val slashIdx = f.relativePath.indexOf('/')
|
||||
if (slashIdx < 0) "" else f.relativePath.substring(0, slashIdx)
|
||||
}
|
||||
grouped.forEach { (dir, dirFiles) ->
|
||||
if (dir.isNotEmpty()) {
|
||||
item(key = "dir_$dir") {
|
||||
Row(
|
||||
modifier = Modifier.padding(top = 12.dp, bottom = 4.dp),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
) {
|
||||
Icon(
|
||||
Icons.Default.Folder,
|
||||
contentDescription = null,
|
||||
modifier = Modifier.size(16.dp),
|
||||
tint = MaterialTheme.colorScheme.primary,
|
||||
)
|
||||
Spacer(Modifier.width(6.dp))
|
||||
Text(
|
||||
dir,
|
||||
style = MaterialTheme.typography.labelMedium,
|
||||
color = MaterialTheme.colorScheme.primary,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
items(dirFiles, key = { "${it.syncPairId}_${it.relativePath}" }) { file ->
|
||||
FileRow(file, isInSubDir = dir.isNotEmpty())
|
||||
HorizontalDivider(
|
||||
color = MaterialTheme.colorScheme.outline.copy(alpha = 0.25f),
|
||||
modifier = Modifier.padding(start = if (dir.isNotEmpty()) 38.dp else 16.dp),
|
||||
)
|
||||
}
|
||||
}
|
||||
item { Spacer(Modifier.height(80.dp)) }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun FileRow(file: SyncFileStateEntity, isInSubDir: Boolean) {
|
||||
val name = file.relativePath.substringAfterLast('/')
|
||||
val timeFmt = DateTimeFormatter.ofLocalizedDate(FormatStyle.SHORT)
|
||||
val syncedAt = file.lastSyncedAt.atZone(ZoneId.systemDefault()).let { timeFmt.format(it) }
|
||||
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(
|
||||
start = if (isInSubDir) 22.dp else 0.dp,
|
||||
top = 10.dp,
|
||||
bottom = 10.dp,
|
||||
),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
) {
|
||||
Surface(
|
||||
shape = RoundedCornerShape(8.dp),
|
||||
color = MaterialTheme.colorScheme.secondaryContainer,
|
||||
modifier = Modifier.size(32.dp),
|
||||
) {
|
||||
Box(contentAlignment = Alignment.Center) {
|
||||
Icon(
|
||||
fileIcon(name),
|
||||
contentDescription = null,
|
||||
modifier = Modifier.size(16.dp),
|
||||
tint = MaterialTheme.colorScheme.onSecondaryContainer,
|
||||
)
|
||||
}
|
||||
}
|
||||
Spacer(Modifier.width(12.dp))
|
||||
Column(modifier = Modifier.weight(1f)) {
|
||||
Text(
|
||||
name,
|
||||
style = MaterialTheme.typography.bodySmall,
|
||||
maxLines = 1,
|
||||
overflow = TextOverflow.Ellipsis,
|
||||
)
|
||||
Text(
|
||||
"Synced $syncedAt · ${file.localSizeBytes.toDisplaySize()}",
|
||||
style = MaterialTheme.typography.labelSmall,
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant,
|
||||
)
|
||||
}
|
||||
// Sync status indicator
|
||||
Icon(
|
||||
Icons.Default.CheckCircle,
|
||||
contentDescription = "Synced",
|
||||
modifier = Modifier.size(14.dp),
|
||||
tint = MaterialTheme.colorScheme.primary.copy(alpha = 0.6f),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
private fun fileIcon(name: String) = when {
|
||||
name.endsWith(".pdf", ignoreCase = true) -> Icons.Default.PictureAsPdf
|
||||
name.endsWith(".jpg", ignoreCase = true) ||
|
||||
name.endsWith(".jpeg", ignoreCase = true) ||
|
||||
name.endsWith(".png", ignoreCase = true) ||
|
||||
name.endsWith(".gif", ignoreCase = true) ||
|
||||
name.endsWith(".webp", ignoreCase = true) -> Icons.Default.Image
|
||||
name.endsWith(".mp4", ignoreCase = true) ||
|
||||
name.endsWith(".mkv", ignoreCase = true) ||
|
||||
name.endsWith(".mov", ignoreCase = true) -> Icons.Default.VideoFile
|
||||
name.endsWith(".mp3", ignoreCase = true) ||
|
||||
name.endsWith(".m4a", ignoreCase = true) ||
|
||||
name.endsWith(".ogg", ignoreCase = true) -> Icons.Default.AudioFile
|
||||
name.endsWith(".zip", ignoreCase = true) ||
|
||||
name.endsWith(".tar", ignoreCase = true) ||
|
||||
name.endsWith(".gz", ignoreCase = true) -> Icons.Default.FolderZip
|
||||
name.endsWith(".txt", ignoreCase = true) ||
|
||||
name.endsWith(".md", ignoreCase = true) -> Icons.Default.TextSnippet
|
||||
else -> Icons.Default.InsertDriveFile
|
||||
}
|
||||
|
||||
private fun Long.toDisplaySize(): String = when {
|
||||
this < 1_024 -> "${this} B"
|
||||
this < 1_048_576 -> "${"%.1f".format(this / 1_024.0)} KB"
|
||||
this < 1_073_741_824 -> "${"%.1f".format(this / 1_048_576.0)} MB"
|
||||
else -> "${"%.1f".format(this / 1_073_741_824.0)} GB"
|
||||
}
|
||||
Reference in New Issue
Block a user