better iterface

mobile/app/_layout.tsx

@@ -1,10 +1,22 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Stack } from 'expo-router';
 import { AuthProvider } from '../context/AuthContext';
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 30_000,
+      retry: 2,
+    },
+  },
+});
+
 export default function RootLayout() {
   return (
-    <AuthProvider>
-      <Stack />
-    </AuthProvider>
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider>
+        <Stack />
+      </AuthProvider>
+    </QueryClientProvider>
   );
 }

mobile/app/folder/[id].tsx

@@ -0,0 +1,119 @@
+import { Stack, useFocusEffect, useLocalSearchParams, useRouter } from 'expo-router';
+import { useCallback, useState } from 'react';
+import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
+import { getFolder, getFolderFolders, getFiles } from '../../services/localStorage';
+import type { StoredFile, StoredFolder } from '../../services/db/types';
+
+type Row = {
+  key: string;
+  kind: 'folder' | 'file';
+  label: string;
+  meta: string;
+  resourceId: string;
+};
+
+function formatSize(bytes: number): string {
+  if ( bytes < 1024 ) return `${bytes} o`;
+  if ( bytes < 1024 * 1024 ) return `${(bytes / 1024).toFixed(1)} Ko`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} Mo`;
+}
+
+export default function FolderScreen() {
+
+  const router = useRouter();
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const [folder, setFolder] = useState<StoredFolder | null>(null);
+  const [subfolders, setSubfolders] = useState<StoredFolder[]>([]);
+  const [files, setFiles] = useState<StoredFile[]>([]);
+
+  const load = useCallback(async () => {
+    const current = await getFolder(id);
+    if ( !current ) {
+      router.back();
+      return;
+    }
+    setFolder(current);
+    setSubfolders(await getFolderFolders(id));
+    setFiles(await getFiles(id));
+  }, [id, router]);
+
+  useFocusEffect(
+    useCallback(() => {
+      load();
+    }, [load])
+  );
+
+  const rows: Row[] = [
+    ...subfolders.map((f) => ({
+      key: f.resource_id,
+      kind: 'folder' as const,
+      label: f.name,
+      meta: 'Dossier',
+      resourceId: f.resource_id,
+    })),
+    ...files.map((f) => ({
+      key: f.resource_id,
+      kind: 'file' as const,
+      label: f.name,
+      meta: formatSize(f.size),
+      resourceId: f.resource_id,
+    })),
+  ];
+
+  return (
+    <View style={styles.container}>
+      <Stack.Screen options={{ title: folder?.name ?? 'Dossier' }} />
+      <FlatList
+        data={rows}
+        keyExtractor={(item) => item.key}
+        renderItem={({ item }) => (
+          <Pressable
+            style={styles.row}
+            onPress={() => item.kind === 'folder' && router.push(`/folder/${item.resourceId}`)}
+          >
+            <Text style={item.kind === 'folder' ? styles.folderTitle : styles.fileTitle}>
+              {item.kind === 'folder' ? `${item.label}/` : item.label}
+            </Text>
+            <Text style={styles.rowMeta}>{item.meta}</Text>
+          </Pressable>
+        )}
+        ListEmptyComponent={
+          <Text style={styles.empty}>
+            Dossier vide — le prochain syncDevice l'actualisera.
+          </Text>
+        }
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    padding: 16,
+  },
+  row: {
+    paddingVertical: 14,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#ddd',
+  },
+  folderTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1a73e8',
+  },
+  fileTitle: {
+    fontSize: 16,
+  },
+  rowMeta: {
+    fontSize: 12,
+    color: '#888',
+    marginTop: 2,
+  },
+  empty: {
+    color: '#888',
+    textAlign: 'center',
+    marginTop: 24,
+  },
+});

mobile/app/index.tsx

@@ -1,44 +1,65 @@
+import { useFocusEffect, useRouter } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
-import { useEffect, useState } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { pickDirectory } from '../services/safDirectory';
-import { saveDirectory, getFolders } from '../services/localStorage';
+import { useCallback, useState } from 'react';
+import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
 import { syncRoot } from '../features/syncDevice';
+import { pickDirectory } from '../services/safDirectory';
+import { getFolders, saveDirectory } from '../services/localStorage';
+import type { StoredFolder } from '../services/db/types';
 
 export default function Index() {
 
-  const [folders, setFolders] = useState<string[]>([]);
+  const router = useRouter();
+  const [roots, setRoots] = useState<StoredFolder[]>([]);
 
-  useEffect(() => {
-    (async () => {
-      const saved = await getFolders();
-      setFolders(saved.map((folder) => folder.name));
-    })();
+  const load = useCallback(async () => {
+    const saved = await getFolders();
+    setRoots(saved.filter((folder) => folder.parent_resource_id === null));
   }, []);
 
+  useFocusEffect(
+    useCallback(() => {
+      load();
+    }, [load])
+  );
+
   const handlePickDirectory = async () => {
     const folder = await pickDirectory();
     if ( !folder ) return;
     const saved = await saveDirectory(folder);
-    setFolders((prev) => [...prev, folder.name]);
     try {
       const result = await syncRoot(saved.resource_id);
       console.info('walk', JSON.stringify(result));
     } catch (error) {
       console.warn('walk failed', error);
     }
+    await load();
   };
 
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>Dot.</Text>
-      <Pressable style={styles.button} onPress={handlePickDirectory}>
-        <Text style={styles.buttonLabel}>Ajouter un dossier</Text>
-      </Pressable>
-      {folders.map((name) => (
-        <Text key={name} style={styles.folder}>{name}</Text>
-      ))}
       <StatusBar style="auto" />
+      <Pressable style={styles.button} onPress={handlePickDirectory}>
+        <Text style={styles.buttonText}>Ajouter un dossier</Text>
+      </Pressable>
+      <FlatList
+        data={roots}
+        keyExtractor={(item) => item.resource_id}
+        renderItem={({ item }) => (
+          <Pressable
+            style={styles.row}
+            onPress={() => router.push(`/folder/${item.resource_id}`)}
+          >
+            <Text style={styles.rowTitle}>{item.name}</Text>
+            <Text style={styles.rowMeta}>{item.syncStatus}</Text>
+          </Pressable>
+        )}
+        ListEmptyComponent={
+          <Text style={styles.empty}>
+            Aucun dossier pour le moment. Appuie sur « Ajouter un dossier » pour synchroniser un dossier.
+          </Text>
+        }
+      />
     </View>
   );
 }
@@ -47,28 +68,37 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: 32,
-    fontWeight: '600',
+    padding: 16,
   },
   button: {
-    marginTop: 24,
-    paddingHorizontal: 20,
+    backgroundColor: '#1a73e8',
     paddingVertical: 12,
-    backgroundColor: '#0057ff',
     borderRadius: 8,
+    alignItems: 'center',
+    marginBottom: 16,
   },
-  buttonLabel: {
+  buttonText: {
     color: '#fff',
     fontSize: 16,
     fontWeight: '600',
   },
-  folder: {
-    marginTop: 8,
-    fontSize: 14,
-    color: '#333',
+  row: {
+    paddingVertical: 14,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#ddd',
+  },
+  rowTitle: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  rowMeta: {
+    fontSize: 12,
+    color: '#888',
+    marginTop: 2,
+  },
+  empty: {
+    color: '#888',
+    textAlign: 'center',
+    marginTop: 24,
   },
 });