init project

mobile/components/FileCard.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { FileItem } from '../types';
+import { TagChip } from './TagChip';
+
+interface FileCardProps {
+  file: FileItem;
+  onPress?: (file: FileItem) => void;
+}
+
+export function FileCard({ file, onPress }: FileCardProps) {
+  const formatSize = (bytes: number) => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+
+  return (
+    <TouchableOpacity style={styles.container} onPress={() => onPress?.(file)}>
+      <View style={styles.header}>
+        <Text style={styles.name} numberOfLines={1}>
+          {file.name}
+        </Text>
+        <Text style={styles.size}>{formatSize(file.size)}</Text>
+      </View>
+
+      {file.ocrText && (
+        <Text style={styles.preview} numberOfLines={2}>
+          {file.ocrText}
+        </Text>
+      )}
+
+      <View style={styles.tags}>
+        {file.tags.map((tag) => (
+          <TagChip key={tag.id} name={tag.name} />
+        ))}
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#fff',
+    borderRadius: 8,
+    padding: 16,
+    marginBottom: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  name: {
+    fontSize: 16,
+    fontWeight: '600',
+    flex: 1,
+    marginRight: 8,
+  },
+  size: {
+    fontSize: 14,
+    color: '#666',
+  },
+  preview: {
+    fontSize: 14,
+    color: '#444',
+    marginBottom: 8,
+    lineHeight: 20,
+  },
+  tags: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 6,
+  },
+});

mobile/components/TagChip.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+
+interface TagChipProps {
+  name: string;
+  onRemove?: () => void;
+}
+
+export function TagChip({ name, onRemove }: TagChipProps) {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>{name}</Text>
+      {onRemove && (
+        <TouchableOpacity onPress={onRemove} style={styles.removeButton}>
+          <Text style={styles.removeText}>×</Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#E3F2FD',
+    borderRadius: 12,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: 12,
+    color: '#1976D2',
+  },
+  removeButton: {
+    marginLeft: 4,
+  },
+  removeText: {
+    fontSize: 14,
+    color: '#1976D2',
+    fontWeight: '600',
+  },
+});

mobile/components/UploadProgress.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
+
+interface UploadProgressProps {
+  progress?: number;
+  status: 'idle' | 'uploading' | 'processing' | 'success' | 'error';
+  error?: string;
+}
+
+export function UploadProgress({ progress, status, error }: UploadProgressProps) {
+  if (status === 'idle') return null;
+
+  return (
+    <View style={styles.container}>
+      {status === 'uploading' && (
+        <>
+          <ActivityIndicator size="small" color="#1976D2" />
+          <Text style={styles.text}>
+            Upload en cours... {progress !== undefined && `${progress}%`}
+          </Text>
+        </>
+      )}
+
+      {status === 'processing' && (
+        <>
+          <ActivityIndicator size="small" color="#1976D2" />
+          <Text style={styles.text}>Traitement OCR en cours...</Text>
+        </>
+      )}
+
+      {status === 'success' && (
+        <Text style={[styles.text, styles.success]}>Upload terminé !</Text>
+      )}
+
+      {status === 'error' && (
+        <Text style={[styles.text, styles.error]}>
+          {error || "Erreur lors de l'upload"}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    backgroundColor: '#F5F5F5',
+    borderRadius: 8,
+    marginBottom: 16,
+  },
+  text: {
+    marginLeft: 8,
+    fontSize: 14,
+    color: '#333',
+  },
+  success: {
+    color: '#4CAF50',
+  },
+  error: {
+    color: '#F44336',
+  },
+});