migrate mobile with new endpoints

mobile/app/device-setup.tsx

@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import { View, Text, TextInput, TouchableOpacity, StyleSheet, ActivityIndicator, Platform } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import type { NavigationProp } from '@react-navigation/native';
+import { useDevice } from '../contexts/DeviceContext';
+
+export function DeviceSetupScreen() {
+  const navigation = useNavigation<NavigationProp<any>>();
+  const { register, deviceName } = useDevice();
+  const [name, setName] = useState(deviceName || `${Platform.OS.charAt(0).toUpperCase() + Platform.OS.slice(1)} de ${Platform.OS === 'ios' ? 'l\'utilisateur' : 'utilisateur'}`);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleRegister = async () => {
+    if (!name.trim()) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      await register(name.trim());
+      navigation.reset({ index: 0, routes: [{ name: 'Home' }] });
+    } catch (err: any) {
+      setError(err?.message || "Échec de l'enregistrement");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <Text style={styles.icon}>📱</Text>
+        <Text style={styles.title}>Enregistrement du device</Text>
+        <Text style={styles.subtitle}>
+          Ce device doit être enregistré comme espace de stockage pour utiliser VaultDrop.
+        </Text>
+
+        <TextInput
+          style={styles.input}
+          placeholder="Nom du device"
+          placeholderTextColor="#999"
+          value={name}
+          onChangeText={setName}
+          autoFocus
+          returnKeyType="done"
+          onSubmitEditing={handleRegister}
+        />
+
+        {error && <Text style={styles.error}>{error}</Text>}
+
+        <TouchableOpacity
+          style={[styles.button, !name.trim() && styles.buttonDisabled]}
+          onPress={handleRegister}
+          disabled={isLoading || !name.trim()}
+        >
+          {isLoading ? (
+            <ActivityIndicator size="small" color="#fff" />
+          ) : (
+            <Text style={styles.buttonText}>Enregistrer</Text>
+          )}
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+    justifyContent: 'center',
+    padding: 24,
+  },
+  content: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 24,
+    alignItems: 'center',
+    gap: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  icon: {
+    fontSize: 48,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: '700',
+    color: '#333',
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 15,
+    color: '#666',
+    textAlign: 'center',
+    lineHeight: 22,
+  },
+  input: {
+    width: '100%',
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 8,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    fontSize: 16,
+    color: '#333',
+  },
+  error: {
+    color: '#E53935',
+    fontSize: 14,
+    textAlign: 'center',
+  },
+  button: {
+    width: '100%',
+    backgroundColor: '#1976D2',
+    paddingVertical: 14,
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  buttonDisabled: {
+    backgroundColor: '#ccc',
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

mobile/app/file-detail.tsx

@@ -14,14 +14,14 @@ import {
 } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
 import { RouteProp, useRoute } from '@react-navigation/native';
-import { useFile, useFileImage, useDownloadFile } from '../hooks/useFiles';
+import { useFile, useDownloadFile } from '../hooks/useFiles';
 import { fileStore } from '../services/fileStore';
 import { TagChip } from '../components/TagChip';
 import { FileThumbnail } from '../components/FileThumbnail';
 import { SyncStatusBadge } from '../components/SyncStatusBadge';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { ZoomableImage } from '../components/ZoomableImage';
-import type { Thumbnail, SyncStatus } from '../types';
+import type { Variant, SyncStatus } from '../types';
 
 const SCREEN_WIDTH = Dimensions.get('window').width;
 
@@ -44,13 +44,12 @@ type FileDetailRouteProp = RouteProp<RootStackParamList, 'FileDetail'>;
 
 function DetailItem({ fileId, deviceFile, onSelectImage }: { fileId: string; deviceFile?: DeviceFileParam; onSelectImage?: (state: ModalState) => void }) {
   const isDevice = !!deviceFile;
-  const { data: imageData, isLoading: imageLoading } = useFileImage(isDevice ? '' : fileId);
   const { data: fileData } = useFile(isDevice ? '' : fileId);
   const downloadFile = useDownloadFile();
   const [downloading, setDownloading] = useState(false);
 
-  const uri = isDevice ? deviceFile.localUri : (imageData?.data?.url);
   const file = fileData as any;
+  const uri = isDevice ? deviceFile.localUri : file?.url;
 
   const localEntry = fileStore.getByBackendId(fileId);
   const syncStatus: SyncStatus = isDevice
@@ -59,9 +58,10 @@ function DetailItem({ fileId, deviceFile, onSelectImage }: { fileId: string; dev
       ? (localEntry.syncStatus === 'cloud' ? 'cloud' : 'synced')
       : (uri ? 'synced' : 'cloud');
 
-  const fullThumbnails: Thumbnail[] = (file?.data?.thumbnails ?? [])
-    .filter((t: Thumbnail) => t.resolutionLabel === 'full')
-    .sort((a: Thumbnail, b: Thumbnail) => a.pageNumber - b.pageNumber);
+  const fullVariants: Variant[] = (file?.variants ?? [])
+    .filter((v: Variant) => v.variantType === 'thumbnail_full')
+    .sort((a: Variant, b: Variant) => a.pageNumber - b.pageNumber);
+  const fullThumbnails = fullVariants;
 
   const hasPages = fullThumbnails.length > 0;
 
@@ -71,14 +71,14 @@ function DetailItem({ fileId, deviceFile, onSelectImage }: { fileId: string; dev
     try {
       await downloadFile.mutateAsync({
         id: fileId,
-        backendFileId: fileId,
-        name: file.data?.name ?? fileId,
-        mimeType: file.mimeType ?? 'application/octet-stream',
-        size: file.data?.size ?? 0,
-        createdAt: file.createdAt ?? new Date().toISOString(),
+        backendResourceId: fileId,
+        name: file?.name ?? fileId,
+        mimeType: file?.mimeType ?? 'application/octet-stream',
+        size: file?.size ?? 0,
+        createdAt: file?.createdAt ?? new Date().toISOString(),
         source: 'cloud',
         syncStatus: 'cloud',
-        tags: file.data?.tags ?? [],
+        tags: file?.tags ?? [],
         isFolder: false,
       });
     } catch {} finally {
@@ -120,11 +120,10 @@ function DetailItem({ fileId, deviceFile, onSelectImage }: { fileId: string; dev
           ) : file ? (
             <View style={styles.cloudOnlyContainer}>
               <FileThumbnail
-                thumbnailUrl={file.data?.thumbnailUrl}
-                mimeType={file.mimeType ?? 'application/pdf'}
-                fileName={file.name ?? fileId}
+                thumbnailUrl={file?.thumbnailUrl}
+                mimeType={file?.mimeType ?? 'application/pdf'}
+                fileName={file?.name ?? fileId}
                 size={SCREEN_WIDTH * 0.6}
-                isLoading={imageLoading}
               />
               {syncStatus === 'cloud' && (
                 <TouchableOpacity
@@ -151,13 +150,13 @@ function DetailItem({ fileId, deviceFile, onSelectImage }: { fileId: string; dev
 
       <View style={styles.details}>
         <View style={styles.detailHeader}>
-          <Text style={styles.fileName}>{deviceFile?.name ?? imageData?.data?.name ?? file?.name ?? fileId}</Text>
+          <Text style={styles.fileName}>{deviceFile?.name ?? file?.name ?? fileId}</Text>
           <SyncStatusBadge status={syncStatus} size={20} />
         </View>
 
-        {(deviceFile || imageData?.data?.size != null) && (
+        {(deviceFile || file?.size != null) && (
           <Text style={styles.meta}>
-            Taille : {((deviceFile ? 0 : imageData?.data?.size) ?? 0 / 1024).toFixed(1)} Ko
+            Taille : {((deviceFile ? 0 : file?.size) ?? 0 / 1024).toFixed(1)} Ko
           </Text>
         )}
 

mobile/app/file-edit.tsx

@@ -13,7 +13,7 @@ import {
 } from 'react-native';
 import { RouteProp, useRoute, useNavigation } from '@react-navigation/native';
 import { MaterialIcons } from '@expo/vector-icons';
-import { useFile, useFileImage, useAddTags } from '../hooks/useFiles';
+import { useFile, useAddTags } from '../hooks/useFiles';
 import { usePdfGeneration } from '../hooks/usePdfGeneration';
 import { useUpload } from '../hooks/useUpload';
 import { TagChip } from '../components/TagChip';
@@ -38,10 +38,9 @@ interface FileEditItemProps {
 
 function FileEditItem({ fileId, selected, onPress }: FileEditItemProps) {
   const { data: fileData, isLoading: fileLoading } = useFile(fileId);
-  const { data: imageData, isLoading: imageLoading } = useFileImage(fileId);
   const file = fileData as any;
-  const uri = imageData?.data?.url;
-  const isLoading = fileLoading || imageLoading;
+  const uri = file?.url;
+  const isLoading = fileLoading;
 
   if (isLoading) {
     return (
@@ -135,8 +134,8 @@ export function FileEditScreen() {
       const imageUris: { uri: string }[] = [];
 
       for (const fileId of targetIds) {
-        const data = await apiClient.get<{ data: { url: string } }>(`${ENDPOINTS.FILES}/${fileId}`);
-        const url = data?.data?.url;
+        const data = await apiClient.get<{ url: string }>(`${ENDPOINTS.RESOURCES}/${fileId}`);
+        const url = data?.url;
         if (url) {
           imageUris.push({ uri: url });
         }

mobile/app/folder.tsx

@@ -3,7 +3,7 @@ import { View, FlatList, StyleSheet, TouchableOpacity, Text, Dimensions, Alert }
 import { useRoute, useNavigation, RouteProp } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { MaterialIcons } from '@expo/vector-icons';
-import { useDeleteFile, useFileImage, useFiles, useFreeLocalSpace } from '../hooks/useFiles';
+import { useDeleteFile, useFiles, useFreeLocalSpace } from '../hooks/useFiles';
 import { UnifiedFileItem } from '../types';
 import { isFolder } from '../types';
 import { FileThumbnail } from '../components/FileThumbnail';
@@ -34,7 +34,6 @@ function FolderGridItem({ file, onPress, onLongPress, selected, onFolderPress }:
   selected?: boolean;
   onFolderPress?: () => void;
 }) {
-  const { data, isLoading } = useFileImage(file.id);
   const folder = isFolder(file);
 
   return (
@@ -46,12 +45,11 @@ function FolderGridItem({ file, onPress, onLongPress, selected, onFolderPress }:
       activeOpacity={0.7}
     >
       <FileThumbnail
-        uri={data?.data?.url ?? file.localUri}
+        uri={file.url ?? file.localUri}
         thumbnailUrl={file.thumbnailUrl}
         mimeType={file.mimeType}
         fileName={file.name}
         size={ITEM_SIZE}
-        isLoading={isLoading}
         syncStatus={file.syncStatus}
       />
       {selected && (
@@ -137,9 +135,9 @@ export function FolderScreen() {
       onPress: async () => {
         for (const id of ids) {
           const f = files.find((fi) => fi.id === id);
-          if (f?.backendFileId) {
-            await apiClient.delete(`${ENDPOINTS.FILES}/${f.backendFileId}`);
-            fileStore.deleteByBackendId(f.backendFileId);
+          if (f?.backendResourceId) {
+            await apiClient.delete(`${ENDPOINTS.RESOURCES}/${f.backendResourceId}`);
+            fileStore.deleteByBackendId(f.backendResourceId);
           } else {
             fileStore.deleteById(id);
           }

mobile/app/index.tsx

@@ -4,7 +4,7 @@ import { useNavigation } from '@react-navigation/native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { MaterialIcons } from '@expo/vector-icons';
-import { useDeleteFile, useAddTags, useMoveFiles, useFolders, useFiles, useFreeLocalSpace } from '../hooks/useFiles';
+import { useDeleteFile, useAddTags, useMoveResources, useFolders, useFiles, useFreeLocalSpace } from '../hooks/useFiles';
 import { UnifiedFileItem, isFolder } from '../types';
 import { SearchBar, SearchFilters } from '../components/SearchBar';
 import { FileThumbnail } from '../components/FileThumbnail';
@@ -176,7 +176,7 @@ export function HomeScreen() {
   const [tagModalMode, setTagModalMode] = useState<'tag' | 'folder'>('tag');
   const [tagInput, setTagInput] = useState('');
   const addTags = useAddTags();
-  const moveFiles = useMoveFiles();
+  const moveFiles = useMoveResources();
   const { data: foldersData } = useFolders();
   const [moveModalVisible, setMoveModalVisible] = useState(false);
   const [settingsModalVisible, setSettingsModalVisible] = useState(false);
@@ -271,9 +271,9 @@ export function HomeScreen() {
       onPress: async () => {
         for (const id of ids) {
           const f = files.find((fi) => fi.id === id);
-          if (f?.backendFileId) {
-            await apiClient.delete(`${ENDPOINTS.FILES}/${f.backendFileId}`);
-            fileStore.deleteByBackendId(f.backendFileId);
+          if (f?.backendResourceId) {
+            await apiClient.delete(`${ENDPOINTS.RESOURCES}/${f.backendResourceId}`);
+            fileStore.deleteByBackendId(f.backendResourceId);
           } else {
             fileStore.deleteById(id);
           }
@@ -306,9 +306,8 @@ export function HomeScreen() {
     const name = tagInput.trim();
     if (!name) return;
     const ids = Array.from(selectedIds);
-    const tagType = tagModalMode === 'folder' ? 'folder' : 'none';
     for (const id of ids) {
-      await addTags.mutateAsync({ fileId: id, tags: [name], tagType });
+      await addTags.mutateAsync({ fileId: id, tags: [name] });
     }
     setTagModalVisible(false);
     setSelectedIds(new Set());
@@ -316,7 +315,7 @@ export function HomeScreen() {
 
   const handleMove = useCallback(async (folderId: string | null) => {
     const ids = Array.from(selectedIds);
-    await moveFiles.mutateAsync({ fileIds: ids, parentFileId: folderId });
+    await moveFiles.mutateAsync({ resourceIds: ids, parentResourceId: folderId });
     setMoveModalVisible(false);
     setSelectedIds(new Set());
   }, [selectedIds, moveFiles]);

mobile/app/search.tsx

@@ -28,7 +28,7 @@ export function SearchScreen() {
       {isLoading && <Text style={styles.loading}>Recherche en cours...</Text>}
 
       <FlatList
-        data={data?.data || []}
+        data={data || []}
         renderItem={renderItem}
         keyExtractor={(item) => item.id}
         contentContainerStyle={styles.list}