diff --git a/mobile/app/sync-detail.tsx b/mobile/app/sync-detail.tsx
index 6f128b8..163a766 100644
--- a/mobile/app/sync-detail.tsx
+++ b/mobile/app/sync-detail.tsx
@@ -18,13 +18,6 @@ import { useSyncPush } from '../hooks/useSyncPush';
import { useUploadQueue } from '../hooks/useUploadQueue';
import { UploadTask } from '../services/uploadQueue';
-function formatSize(bytes: number): string {
- if (bytes === 0) return '';
- if (bytes < 1024) return `${bytes} o`;
- if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} Ko`;
- return `${(bytes / (1024 * 1024)).toFixed(1)} Mo`;
-}
-
function uploadStatusIcon(task: UploadTask) {
switch (task.status) {
case 'pending':
@@ -53,10 +46,6 @@ export function SyncDetailScreen() {
return () => clearInterval(interval);
}, [bumpList]);
- const pendingFiles = useMemo(() => {
- return fileStore.getPendingSync();
- }, [listVersion]);
-
const errorFiles = useMemo(() => {
return fileStore.getErrorFiles();
}, [listVersion]);
@@ -119,7 +108,7 @@ export function SyncDetailScreen() {
}, [retry]);
const hasUploads = uploadTasks.length > 0;
- const hasPending = pendingFiles.length > 0;
+ const hasPending = pendingCount > 0;
const hasErrors = errorFiles.length > 0;
const hasContent = hasUploads || hasPending || hasErrors;
@@ -164,16 +153,44 @@ export function SyncDetailScreen() {
...uploadTasks.map((t) => ({ type: 'upload' as const, data: t })),
...(hasErrors ? [{ type: 'section', label: 'Fichiers en erreur' } as const] : []),
...errorFiles.map((f) => ({ type: 'error' as const, data: f })),
- ...(hasPending ? [{ type: 'section', label: 'Fichiers locaux à synchroniser' } as const] : []),
- ...pendingFiles.map((f) => ({ type: 'file' as const, data: f })),
+ ...(hasPending ? [{ type: 'pendingCard' } as const] : []),
]}
keyExtractor={(item) =>
- item.type === 'section' ? item.label : item.data.id
+ item.type === 'section' || item.type === 'pendingCard'
+ ? item.type === 'pendingCard'
+ ? 'pending-card'
+ : item.label
+ : item.data.id
}
renderItem={({ item }) => {
if (item.type === 'section') {
return {item.label};
}
+ if (item.type === 'pendingCard') {
+ return (
+
+
+
+
+
+
+ {pendingCount > 1
+ ? `Vous avez ${pendingCount} fichiers locaux pouvant être synchronisés`
+ : 'Vous avez 1 fichier local pouvant être synchronisé'}
+
+
+ Appuyer maintenant pour les synchroniser
+
+
+
+
+ );
+ }
if (item.type === 'upload') {
const task = item.data;
return (
@@ -222,22 +239,7 @@ export function SyncDetailScreen() {
);
}
- const file = item.data;
- return (
-
-
-
- {file.name}
-
- {formatSize(file.size)}
- {file.mimeType ? ` · ${file.mimeType.split('/').pop()}` : ''}
-
-
-
-
-
-
- );
+ return null;
}}
contentContainerStyle={styles.list}
/>
@@ -287,6 +289,41 @@ const styles = StyleSheet.create({
marginBottom: 8,
gap: 12,
},
+ pendingCard: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ backgroundColor: '#fff',
+ borderRadius: 14,
+ padding: 16,
+ marginBottom: 8,
+ gap: 14,
+ shadowColor: '#000',
+ shadowOpacity: 0.06,
+ shadowRadius: 8,
+ shadowOffset: { width: 0, height: 2 },
+ elevation: 2,
+ },
+ pendingCardIcon: {
+ width: 48,
+ height: 48,
+ borderRadius: 24,
+ backgroundColor: '#E3F2FD',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ pendingCardInfo: {
+ flex: 1,
+ },
+ pendingCardTitle: {
+ fontSize: 15,
+ color: '#333',
+ fontWeight: '600',
+ },
+ pendingCardSubtitle: {
+ fontSize: 13,
+ color: '#1976D2',
+ marginTop: 4,
+ },
fileInfo: {
flex: 1,
},