add sync status

mobile/components/SyncStatusBadge.tsx

@@ -1,25 +1,35 @@
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
 import { SyncStatus } from '../types';
 
 interface SyncStatusBadgeProps {
   status: SyncStatus;
   size?: number;
+  showLabel?: boolean;
 }
 
-const STATUS_CONFIG: Record<SyncStatus, { icon: string; color: string; bg: string }> = {
-  local: { icon: 'phone-android', color: '#757575', bg: 'rgba(245,245,245,0.9)' },
-  syncing: { icon: 'sync', color: '#FF9800', bg: 'rgba(255,243,224,0.9)' },
-  synced: { icon: 'sync', color: '#4CAF50', bg: 'rgba(232,245,233,0.9)' },
-  cloud: { icon: 'cloud', color: '#1976D2', bg: 'rgba(227,242,253,0.9)' },
-  conflict: { icon: 'warning', color: '#E53935', bg: 'rgba(255,235,238,0.9)' },
+const STATUS_CONFIG: Record<SyncStatus, { icon: string; color: string; bg: string; label: string }> = {
+  local: { icon: 'phone-android', color: '#757575', bg: '#F5F5F5', label: 'Local' },
+  syncing: { icon: 'sync', color: '#FF9800', bg: '#FFF3E0', label: 'Sync...' },
+  synced: { icon: 'sync', color: '#4CAF50', bg: '#E8F5E9', label: 'Les deux' },
+  cloud: { icon: 'cloud', color: '#1976D2', bg: '#E3F2FD', label: 'Cloud' },
+  conflict: { icon: 'warning', color: '#E53935', bg: '#FFEBEE', label: 'Conflit' },
 };
 
-export function SyncStatusBadge({ status, size = 16 }: SyncStatusBadgeProps) {
+export function SyncStatusBadge({ status, size = 16, showLabel }: SyncStatusBadgeProps) {
   const config = STATUS_CONFIG[status];
   const iconSize = Math.round(size * 0.7);
 
+  if (showLabel) {
+    return (
+      <View style={[styles.pill, { backgroundColor: config.bg }]}>
+        <MaterialIcons name={config.icon as any} size={12} color={config.color} />
+        <Text style={[styles.pillText, { color: config.color }]}>{config.label}</Text>
+      </View>
+    );
+  }
+
   return (
     <View style={[styles.badge, { width: size, height: size, borderRadius: size / 2, backgroundColor: config.bg }]}>
       <MaterialIcons name={config.icon as any} size={iconSize} color={config.color} />
@@ -37,4 +47,17 @@ const styles = StyleSheet.create({
     borderWidth: 0.5,
     borderColor: 'rgba(0,0,0,0.1)',
   },
+  pill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    gap: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 10,
+  },
+  pillText: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
 });